Site Redesign

This blog has undergone some serious revamping and improvement sprinkled with AJAX magic. The whole design may still look the same, that is because it hasn't changed much from the original template that I choosed from the available list of templates provided by blogger.com since I like it the way it's designed, and I don't think I can really design anything but ugly stuff. I am not a designer, but I can do a little programming, put it to good use, and the site can be made more accessible and user-friendly.

Things I have improved upon are mostly the inner structures, one of the things that I don't like what blogger.com has implemented is their commenting system. It usually takes a long time to load, and most of time, in a pop-up windows that can take quite a while to load especially if you're a heavy user like me who has tons of windows on desktop, left with not much system memory to spare on opening another pop-up windows. Little thing like this can sometimes make people (that's me) hesitant on posting comments at many blogs that uses blogger.com system. What I first did to overcome this was to embed it in the item page directly, so that visitors can just scroll down and see a comment box waiting for them to fill it in. It was done easier than I had initially expected, no javascript is needed except for cosmetic purpose on the interface, as for the functionality, just plain old html is all you need.

But that was still not a good enough solution, those who wanted to comment will have to click on a link on the main page to load another individual item page to access the embedded comment box. The best thing to do is to put the comment box under each post on the main page as many would have suggested at first sight, but that would made the main page too bloated that can cause longer load time, not to say too much complexity in coding, and unsightly to boot. With this in mind, a best of both world solution was implemented with an AJAX technique to extract and load the embedded commenting system from item page on demand at the main page. The best implementation of AJAX of website that first came to mind is gmail, the google webmail system. Did anyone realize that when you check your mail in gmail, you always stays on the same page, and it loads only the part it needed as required, this makes it more streamlined and intuitive to use, since it feels more like a email program than just a website.


To do the same thing with my blog, a magical mumbo jumbo called AHAH (Asychronous HTML and HTTP) is used, a subset of AJAX, but much more simple to implement, and useful in this specific requirement of fetching and display html data on demand instead of xml schema as in AJAX. All that needed was some javascript functions of AHAH, and modification of existing template. Besides the comments, the backlinks was also modified to use the same implementation at the main page. Please click on them to try it yourself, both the comment and backlink links are at the end of this post. If it works, it'll take a few seconds to load the commenting system, and show it immediately after that, all these contents are loaded on demand after you click on the link, which means the main page can still maintain its original size, but loaded with more features.

The next thing I added is on the right pane, a flash based mp3 music player under 'What I Listen'. At first I only wanted to add a list of album cover arts of the music I like recently, but that was kind of bland, and I think most people would have no idea what songs are those by looking at the cover arts since what I listen are hardly mainstream unless you live in taiwan or japan. What I did was again, a best of both world solution, a music player that shows you the album cover arts while playing the songs as streamed mp3. The mp3 should play in less than 5 seconds after you choose to play it unless you're still using 56kbps connection. I am very satisfied by this as it actually do more with less space, since that I don't need to have a list of all of the pictures of cover arts at the right pane, and just load it one by one while playing the accompanied song instead. Another added functionality is that you can add this music player together with my playlist to your sidebar if you're using firefox web browser and have the same taste of music as me, that is, all you need is to click on the link provided under the player and it'll add a bookmarks to your firefox, click the bookmark in your firefox and it'll show up as a sidebar player, cool eh?

Other trivial modifications on the right pane include a reversed archived list (it now sorts from the newest first, with help of little javascript, why blogger.com default output is sorting oldest to show at top is still a mystery), and a new referer link section, link to me, and your site's link will show up under "Referer" section, that is only if anyone ever clicked the link on your site anyway.

If you're intersted in doing any of these modification at your own blogger.com blog, please refer to the list of links below.

Related Links:
Inline Comment Forms - Singpolyma Technical Blog
AHAH: Asychronous HTML and HTTP - microformats.org
Howto: AJAX for Blogger peek-a-boo content
XSPF Web Music Player (Flash) - plays mp3 on your website