What I learned building sparkbox.com
My main task in building the new Sparkbox site was to write the JavaScript to enable all of the interactions. One of the things that I was looking forward to was writing the code for the about page. The plan was to load each team member’s page via AJAX when needed. Using the history.pushstate method, the URL would be altered to match the current view. So, when you went to sparkbox.com/about, then clicked on Ryan Buttrey, the JavaScript would pull in Ryan’s info and change the URL to sparkbox.com/about/ryan_buttrey without refreshing the page. This provides a way to bookmark pages or email links to pages that maintain the correct state when they are visited again.
The problem came while trying to make the pages still work for browsers that don’t support history.pushstate (IE), or those that will only let you change the hash portion of the URL (Firefox 3). I really wanted to maintain the cool Ajax functionality of the page, but without the history.pushstate support the URL wouldn’t reflect the current content. To solve this problem I came up with a system of changing the URL from sparkbox.com/about/username to sparkbox.com/about#username for browsers lacking the proper history.pushstate support. This worked for Firefox, but it was still failing in IE. Then we realized that for some reason it was only working in Firefox if Firebug was open (what?!). It was beginning to feel more and more like a dirty hack than an elegant solution.
I started thinking about just removing the hack for the older browsers and realized that just made sense. This would remove a buggy solution to a problem that wasn’t even really a problem for the users. If the user had a newer browser (Chrome, Safari, Firefox 4 beta) they would get the functionality I wanted. This is the very essence of progressive enhancement. Everyone has access to the same content, but those with a more advanced browser get a better experience.
The bottom line
Sometimes there are JavaScript libraries that have been written, or simple fixes to make a browser work in a desired fashion. However, if the code starts feeling like a hack, it’s probably a hack. This is where I found myself with our about page. So, I ripped out all of the URL hash converting code. So if your browser supports history.pushstate, then you get a nice fade-out, fade-in when you switch people, otherwise you get a refresh.
Progressive enhancement in effect.
Follow Up
If you’re interested in finding out more about the browser’s history methods, then I suggest you check out the Mozilla Developer Network.
