What it takes to make your own RSS Feed Reader in HTML5?

Before I tell you the list of all the APIs and Resources that I used to make my feed reader, jump to this page (use Chrome) to get a Demo of what I have created.
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; 
}

5)jQuery 
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));
    }

Pit Fall (circular json object)
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;

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);
            })



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) {}
    }
  
9)Icons
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

JSON Editor Using YUI TreeView

Hey Guys,

I have created a JSON Editor, using YUI TreeView.
Its very simple to Use!


All functionality is wrapped in jsonEditor.js , which is tiny JavaScript library,which can be used for making your own JSON editor.

This library is simple to use.  Here is what you need to do.

Create a div with some ID lets say treeView and then a create text-area with id as "textEdit".
Pass this 2 parameter in jsonEditor constructor, Thats it You are done!
Here is sample code

/*Do This on Dom ready*/
je=new jsonEditor('textEdit','treeView');
je.setJSON(sampleJson);
//console.log(je.getJSON());

This Uses YUI & jQuery so make sure you are including these libraries in your page.

Here are all dependencies, put these in head part of HTML:

<link rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/treeview/treeview-min.js"></script>
<script type="text/javascript" src="http://www.purplegene.com/js/jsonEditor.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
</script>


Here is screenshot

Note:  This is Only Tested in Firefox and chrome. Use at your own risk! Do not hotlink my js file.