Blog Redesign
7th June 2008 11:45
After several years with a questionable design aesthetic and some dodgy markup my blog has remerged with a fresh look, more content and some technical optimisations.
The most striking change is the activity feed on the left of the homepage. I've been playing with lifestreaming services for a while and none of the aggregators I've used have cut it. Then came FriendFeed. The combination of quick updates, a high number of supported services, large user community (including many of my friends) and arguably most importantly a quick and simple API makes using this service a no brainer. This simple feed is processed by an XSLT script and then displayed (with some help from CSS, and jQuery - more on that later). The XSLT is pretty straightforward and is available for download. You'll probably want to customise it for your needs, but drop me a line if you do use it and make the source available, if possible.
There are a couple of tools I've used to augment the lifestream. First is the favicon. This is pulled in using a Google service that I probably shouldn't be hotlinking. The XSLT puts an image in the HTML pointing to http://www.google.com/s2/favicons?domain=[domainname], for example. This returns the favicon for the domain in question (yes, I know the "Content-Type" header is wrong - maybe we'll see that fixed at some point). Should the system know that a favicon doesn't exist it will display a generic earth icon. Very useful. Perhaps I can get that header bug fixed at some point - along with maybe getting it sent as a GIF or PNG rather than a JPG... a poor choice I'd say, but I'm sure there is a reason.
The mouseover functionality is provided by my javascript library of choice: jQuery. Not much to say here, it's really good and really fast. The twist is that it is hosted centrally at Google. This new service (as of a few days ago) provides a standard URL for the version of jQuery I'm interested in, which is really cool because that URL may (with increasing probability, as more webmasters catch on) already be cached on the user's machine therefore saving the 17kb or so hit the library costs.
I've not had comments on my blog before, mainly to save the time of moderating them or dealing with spam. In the past some people have criticised me for harping on about Web 2.0 technologies then not having the basic visitor interaction of blog comments on my own site. So, time to fix this and the solution came in the form of disqus - a hosted comment system that when you place little widgets on pages allows users to comment on those URLs. Initially I was wary of putting someone else's javascript on the page, forcing a system on my blog readers, and giving the ownership of the comment text to a third party, but disqus did a good job of winning me over. The key paragraph was in this help page:
Who owns the comments? Short answer: You do.
I've seen occasional 500 Internal Server Errors from disqus, but other than that they are rock solid. A decent API gives you access to the comments made too - which is just the ticket should I decide to move away from it.
Not much has changed on the backend of the blog, it's still written in ASP.net which was the quickest solution for the Windows boxes the site is hosted on. ASP.net's solid caching functionality keeps everything ticking over, not stressing the MySQL boxes that hold the data or hitting web APIs too often.
One other small point is that I no longer obfuscate the HTML and CSS behind the blog. As a web developer I probably get more people peeping at the source code than is usual, to see what I'm up to. Minimalistic and less descriptive client-side code makes the source less readable and therefore understandable but the benefit is a decrease in transmission size. However the benefit is so small on a tiny site like this when the content is gzipped its not worth losing the readability over.
So, come back in a few months when I get bored of this design and code!
RSS Feed
About
Jason is a freelance web developer based in London.
My clients include numerous startups & agencies, Google, YouTube, FHM, Nickelodeon, Volvo & the BBC.
I also co-own Ferrago Ltd, who publish videogames content to around 7m consumers monthly.
Links
- FriendFeed (lifestream)
- Twitter (microblogging)
- Flickr (photos)
- Facebook (social network)
- delicious (bookmarks)
- last.fm (music)
- LinkedIn (social network)
- Google Reader (bookmarks)
Colophon
- Built in Python & Django using a Mac and TextMate.
- Hosted on Google App Engine.
- Activity feed by FriendFeed and augmented by getURLinfo. Icons from getFavicon.