PurpleGene Feed Reader is a HTML5 (offline) web application for feed reading. No user-name & password required to use this feed reader.
Here is the list of all resources you need to build something like this one.
1) Doctype:
Any html5 page should be having a html5 dock-type. dock-type declaration will make all the browser to switch into html5 mode and they will render your page as per the new standard.
html5's doctype declaration is like this
<!DOCTYPE HTML>
2)Cache-Manifest :In HTML5 Cache-Manifest is a way to declare the list of resources that should be cached to run the application offline.
This file lists all the resources like images and JavaScript required to run your page. cache-manifest is a page linked through your app's main html code.
Here is how my webpage has linked its cache manifest
<html manifest="cache-manifest-reader?version=1.0">
Note that URL /cache-manifest should be served with correct MIME type. Which is 'text/cache-manifest'.To know more details about cache-manifest, go here
Real life example of cache-manifest is here(my FeedReader) http://www.purplegene.com/cache-manifest-reader
3)Google's Feed API
Feed API is not HTML5 Feature. I am using Google's AJAX Feed API to gather feeds.
A quick code example of Google' Feed API is here
4)Google's Web Fonts (CSS3 web-fonts)
CSS3 supports web fonts, luckily Google hosts many awesome fonts online for you.
Here is google's font directory http://code.google.com/webfonts
To use any font you just have to include the fontface declaration in your page using google's web fonts API'
e.g.
<link href="http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911" rel="stylesheet" type="text/css"></link>
And then simply use it in your CSS
h1 {
font-family: 'Goudy Bookletter 1911', arial, serif;
}
font-family: 'Goudy Bookletter 1911', arial, serif;
}
For me its very hard to continue any javascript development without using jquery, jquery simply makes your life easier while manipulating the DOM. I am using jquery for keyboard shortcuts ,all DOM manipulations & animation.
7)HTML5 Local storage
HTML5 local-storage API is awesome!! Using this you can save any data (from JSON) to local persistent store with a very simple javascript calls
function GetOfflineData(ItemName) {
return JSON.parse(window.localStorage.getItem(ItemName));
}
function SetOfflineData(JsonData,ItemName) {
window.localStorage.setItem(ItemName, JSON.stringify(JsonData));
}
Note that at any point of time if your JSON will go cyclic then JSON.stringify function will fail to do that.
here is example of cyclic JSON
var json={"hello":"{"test1":1}}
json.hello.parent=json;
json.hello.parent=json;
so solution to the problem is either you don't use something like that, or pass a function as second argument to the stringify function to let it know that parent member should be avoided.
like this
JSON.stringify(json, function(prop, val) {
return ((prop === 'parent') ? undefined : val);
})
return ((prop === 'parent') ? undefined : val);
})
8)bitly APIs for link shortening (twitter sharing)
bitly has a very clean REST API for link shortening, here is a example to shorten a link.
function TryShorteningLink(longlink) {
try {
var login = Configuration.Configuration.bitly.user;
var key = Configuration.Configuration.bitly.key;
var url = 'http://api.bit.ly/v3/shorten?login=' + login + '&apiKey=' + key + '&longUrl=' + escape(longlink) + '&format=json&callback=?';
$.getJSON(url, function(result) {
if (result.status_code === 200) {
alert('link is shoten now!!'+ result.data.url)
}
});
}
catch (err) {}
}
I am terrible designer, I know that if i will try to make something colorful i will mess the things up. So i always stick to minimalistic approach , To designs the icons i just used character written on a blue circle. To make it looks little better that circle has minimal gradient.
I used this svg editor to create them, then exported to PNG format.
10)Configuration Editor
Since most of your offline data will be stored in JSON , it was much better idea to expose the JSON editor itself for configuration editing. If you look at the configuration panel , you will see a nice JSON editor, this editor is created by me and you can get that from here.
11) CSS3 Column
The SneakPeek View of my Feed Reader uses CSS3 columns (This is not yet supported by Opera and IE9)
div#multicolumn1 {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
Thanks for reading
Very nice article
ReplyDeleteIs there any source download link?
@janokary with the information above u must be able to code on your own.
ReplyDeleteBut still the whole code is here
view-source:http://www.purplegene.com/js/feedreader.js
Hope that will make sense.
This is very cool. It would be even cooler if you can have everything on github so folks can download/fork it --
ReplyDeleteblogs.rawlani.com : Buddy, this is really cool!!. :)
ReplyDelete