Ajax and weblogs  MAY 09 2005

Update: The menu is gone for now, so the rest of this probably isn't going to make much sense.

If you take a look at the front page of kottke.org, you'll notice a pulldown at the top of the content column (on the left). When you mouse over the menu, you're presented with a list of choices of what to display in that column and when you click one of those choices, the content is requested from the server and displayed using Ajax. More on the Ajax stuff in a bit.

Back to the menu (go try it out...this will all make a lot more sense if you do), this is a baby step in my desire to get rid of (or at least drastically de-emphasize) the fairly useless archive page**. From the front page, you can now see not only all the latest posts but also only the movie posts, the latest remaindered links, the latest book reviews, etc. You can also request 50 random posts (which is my favorite feature of this whole thing; it's a great way to surf the archives...and find some really horrible writing), a compilation of my favorite posts, some recent photos of mine from Flickr, and my del.icio.us inbox. It's a really fast way to get at a large chunk of the recent archives (dare I say the Long Tail of kottke.org?) and does so in a better way than the archives page.

Oh, and just for the hell of it, I whipped up a little RSS reader that pulls in posts from Boing Boing, waxy.org, Gawker, and the NY Times (cached so that feeds aren't requested every time someone looks at the page) and presents them in the familiar kottke.org format. So that's fun too.

Using Ajax for this was a no-brainer (it's better than loading all that content ahead of time and having it in hidden layers or something), but I'm going to let you in on a little secret: Ajax is a ridiculously easy technology to implement***, especially if you're using something like Movable Type which quickly and easily outputs chunks of XHTML. The XMLHttpRequest part of this took all of 10 minutes to implement, just put the following in the header of your XHTML file (code adpated from Guide to Using XMLHttpRequest (with Baby Steps)):

<script type="text/javascript">
<!--
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/

if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}

function getMyHTML(serverPage, objID) {
var obj = document.getElementById(objID);
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
//-->
</script>

and then you can get an XHTML chunk called "chunk2.html" from the server and put it into the "goeshere" div when you click on the "Change it!" link like so:

<p><a href="javascript://" onclick="getMyHTML('chunk2.html','goeshere')">Change it!</a></p>
<div id="goeshere">Hey, this text will be replaced.</div>

That's it...you don't need to write a whole bunch of JavaScript to parse XML data files and use the DOM to stick each bit of information into the right spot or anything like that. Even the RSS feeds I'm pulling in are processed on the server and pulled into the browser as a whole XHTML chunk. And like I said before, Movable Type, Wordpress, TextPattern, or any other CMS that can output XHTML can be used to generate files that you can then swap in. It's pretty easy to get MT to publish XHTML files containing the last 30 Trackbacks to your site, the 50 most recent comments, a list of the most commented on entries, or dozens of other options.

So that's the easy part. The interesting aspect of Ajax is not the technology but how to apply it sensibly (i.e. using it to solve design problems). One of the problems with Ajax is that the data you're bringing in dynamically often cannot be bookmarked and it breaks the back button. Something like the front page of kottke.org is a perfect place for it though. All the posts on the front page are permalinked and no one links to a specific post that's shown on the front page because that information will scroll off the page in two weeks or so; people link to the post's permanent location instead. When you select different types of content with the pulldown, all the posts returned are permalinked and there's a link to the permanent location for each type of content as well (if you're viewing the latest movies, there's a permanent link to the movies page). Plus, the page still works just fine if the JavaScript doesn't work on your browser or mobile device and you can still get to everything via the archives page.

It's all a bit rough and needs more refinement than most of the stuff I usually launch on kottke.org (there's several things I don't quite like about it), but I wanted to get it out there and get some feedback. Bug reports are especially welcome, but please note that if you're not on IE 5.5+, Firefox, or Safari, it might not work at all. (The line-height on the pulldown is a little bit screwy on IE on the PC and there's an odd flicker on Firefox on the PC...any ideas?) And apologies in advance if any of the above code is wrong or confusing...like I said, this is all a bit more slapdash than usual and I'll correct as necessary.

** I've touched on this before, but most weblogs' archive pages are pretty useless, mine included. They should help people discover and find the non-current posts on a site and a list of links to each month's worth of posts isn't that helpful. The categories are more helpful, but it's still a lot of clicking around. The jury is still out on tag clouds. Two current archive page favorites are Binary Bonsai's (Live Archives section, lists of latest entries, most commented on, personal favorites) and Subtraction's (category descriptions, # of posts in each archive, list of post titles for each of the last few months). Like I said above, my goal is to get rid of the archive page altogether.

*** Obviously there's a lot more you can do with Ajax that is more complicated, but for a lot of applications, the "assemble the data on the server and then just shove it into an id'd div" approach works pretty well, even if it does require a little more bandwidth.

this is kottke.org

   Front page
   About + contact
   Site archives

You can follow kottke.org on Twitter, Facebook, Tumblr, Feedly, or RSS.

Ad from The Deck

We Work Remotely

 

Enginehosting

Hosting provided EngineHosting