A college sent out this link. And I just couldn’t resist installing it and I am glad I did.
Yes, Ke$ha I know … it keeps my engaged and is loud enough to block distractions when I code.
A few weeks back I was inspired by github.com implementation of the tree slider and I had a project at patch.com where I was building a dashboard for Business owners to manage features through our site. In order to make a dashboard with multiple pages and make it snappy and interactive I felt using a proper history control was in order. I have never had pleasant relationship with Really Simple History or any other history library for that matter. So I started investigating the new html5 history api. The nice thing about the new history api is that it will always result in a “proper” url so linking straight to a particular page is doable without having to have js kick in and respond to a location hash on your page. This also makes it easier to manage history when coming traveling into the feature as well as out of it. One problem with RSH is that you have to handle that awkward first stage where you end up dealing with issues going between pages that are paged in via xhr vs pages that are full requests.
One thing that is clear and helped in making a design choice was the fact that the history api is not even close to being implemented in the IE family. This I doesn’t bother me too much since this is what you label as progressive enhancement but this limitation did make force me implement the pages in a way that it was working without it which is a good practice any ways this way it can work without javascript for example. I was lucky because the “page” area was well defined so I was able to create two endpoints in our rails stack where it switches between rendering a whole page and a partial depending on if the request is an xhr request or not … rails is good at that type of stuff.
Then for the history javascript example. I used the history.js library that offers some hashbang support as a html4 fallback. But you can use similar code for the native history api support with a few replacements
if( !History.enabled ) { return; }
var loadPage = function( opts ) {
if( opts ) {
$.each( opts, function( k, v ) {
defaultOptions[ k ] = v;
} );
}
var panels = contentSpace.data( 'panels' );
if(!panels[opts.path]) {
$.get( opts.path, function( data ) {
//cache page
if( opts.page ) {
panels[ opts.path ] = { 'data' : data, 'page' : opts.page };
contentSpace.data( 'panels', panels );
}
contentSpace.html( data );
});
} else {
contentSpace.html( panels[ opts.path ].data );
}
}
History.Adapter.bind( window, 'statechange', function(e) {
var opts = { 'path' : History.getState().hash, 'page' : History.getState().data.page };
loadPage( opts );
});
// hit it for the first time
History.pushState( optionHash, "Title", "the url path" );
This implementation is specific to fit the requirements I had but I wanted it to be out there in the interest of having more examples of how this can be implemented and demonstrate that it’s relatively straight forward. I sugar coded this with caching which will obviously prevent the users to see any “real” time info if there are any.
Good Links to explore HTML5 history api
Recent Comments