For those who have been here before: The website you're looking at right now now is quite different from what it used to be the last time you visited it. The changes however are completely invisible to the casual visitor.

Every once in a while I get the urge to redesign and redo all the markup for the entire website. On the other hand I still quite like the design and I think it will take me a considerable amount of time to come up with something I like better than what I currently have. And of course I'll have to come up with something I like significantly better before I'd replace this with something new. Therefore it will probably take a while before this happens. I may not even redesign at all but just reorganise things a bit and do some spring cleaning like I did before.

So... no redesign in the near future! Still however I felt there's plenty of room for improvement on the current site! Therefore I decided to start refactoring parts of it. The first wave of improvements does not have anything to do with the look and feel but with what's going on under the hood. Slowly but surely I'll be ironing out all the things that have been bothering me for quite a while now. A few important things have been improved in this round: the javascript and the previously non-degrading tabs in my sidebar. Let's have a look at what has changed!

Bye bye Prototype.js and scriptaculous

Until today the behavioral layer of this site was powered by (fairly old versions of) prototype.js and scriptaculous. While plenty of people may still love these libraries, for me the love has kind of faded away in favour of YUI and JQuery. For beefier applications developed in a large collaborative team I'd pick YUI over anything. It's rigorous, solid, well documented and of excellent quality. For less complex things that only I work on however I really like using JQuery because nothing beats it's compactness and ease of use. The terse code it can sometimes results in is not always easy to read or easy to manage but it sure is compact and highly effective. And of course proper documentation can make a world of difference. Because not too many crazy things are happening on these pages (after all this is just a personal site and not a large web application) I choose to pick JQuery to power all behavioral aspects of it. This alone has significantly reduced the javascript payload on the site. Moving from my tightly compacted version of Prototype and Scriptaculous to JQuery shaved almost 20kb off immediately. Furthermore I managed to reduce the amount of lines of site specific code by about 50%. A minor additional benefit for me is the fact that PivotX, the soon-to-be-released succesor of the tool that powers this blog is using JQuery throughout. this means JQuery will be the one library to rule the entire show. WIN!

Update: Another unexpected advantage of this code upgrade is the fact that this site now works perfectly on the iPod Touch and the iPhone, very much unlike the old code!

Javascript Module Pattern

Besides switching from Prototype to JQuery I wanted more tightly organised code. I remember being quite happy with my old code when I first wrote it but today I pretty much can't stand looking at it anymore. If you want to take a look you can check out the old code here. I migrated from a pile of disorganised functions to a nicely organised module. If you want to know more about the module pattern I highly recommend reading this article by Christian Heilmann. Using the module pattern results in nicely organised and safely namespaced code which is easy to maintain and easy to extend.

The new code can be viewed here if you're interested. This is a documented and uncompressed version. The site itself runs a minimised version of the same file to keep the size to a bare minimum.

Unobtrusive sidebar tabs

When I first built the templates for this site I thought it was perfectly fine to have javascript:void(null); as a destination for a hyperlink. I know, I should be ashamed of this even though it's two years ago. Nowadays this practice makes me cringe which is why it HAD to change. The tabs now have real, working links that can be visited and behave like one would expect: show what's behind the clicked tab. When you disable javascript you'll see that the tabs still work. If you're too lazy to try this you can also click here to see this page reload with the commentary tab open instead of the default one. All this has been accomplished by a small bit of PHP that adds appropriate classes to the body element depending on which tab has been visited, and of course some supporting CSS. Thanks Dirk for your input on this one! Note that I've added a rel="nofollow" attribute to these tabs as it makes no sense to have these links indexed by search spiders. It may even raise 'duplicate content' concerns.

You'll probably notice that my contact form and my comment form are still NOT doing anything without javascript enabled. I probably won't change this. This is however kind of a deliberate choice. The reason is simple: doing these things 'the AJAX way' still stops a remarkable amount of spam. It really does! As sad as it may be, this to me currently outweighs the importance of having each and every part of my site work without javascript.

Refactoring as a learning experience

You may wonder what the point is of completely rewriting parts of a perfectly working website, resulting in exactly the same perfectly (I hope) working functionality. If I wouldn't have made this post, hardly anyone would ever have noticed the changes!

Refactoring leads to better insight in your own code. You knew how to do it when you first wrote the code, but now you know how to do it better. It's been great fun to look back at how I used to do things and compare this to how I do things today. As web development is a continuous learning experience I keep finding better ways of doing my work and looking back, realising what progress I'm making is a very satisfying experience. Especially the last 8 months of working with all the talented people of the Yahoo! web development team I have learned an awful lot. If you've never refactored any of your existing code I can highly recommend trying it yourself. Maybe, in two years from now, if I still haven't changed my templates I may again smile at how I programmed things this week and do it in a much better way, just like I have done just now. It's entirely possible as insights grow continuously.

Happy refactoring!

note: It's perfectly possible that I missed some small things. If you notice any problems on this site that didn't used to be there please let me know!