techno.blog("Dion")

I have been having a lot of fun working with unobtrusive JavaScript, and using microformats to define rich behaviour that both degrades nicely, and keeps the code clean.

Since we just released the Google AJAX Feed API, I can discuss one little example.

I wanted to create a Feed Billboard that would show entries from friends feeds in a small portlet. Kinda like the Feedburner chicklet, but using JavaScript, and able to access more than just your burnt feed.

The end result was the Feed Billboard, with an example here:

The microformat

The interface to building the billboard is an HTML unordered list. For example, the above example is:

<ul class="feedbillboard access:randomly">
<li><a href="http://code.google.com/">Google Code</a> (<a href="http://code.google.com/feeds/updates.xml">RSS</a>)</li>
<li><a href="http://ajaxian.com/">Ajaxian</a> (<a href="http://ajaxian.com/feed">RSS</a>)</li>

<li><a href="http://almaer.com/blog">techno.blog(Dion)</a> (<a href="http://almaer.com/blog/index.xml">RSS</a>)</li>
</ul>

The magic class is feedbillboard, and there are a bunch of options that you can pass in that cheekily use the form of name:value. This is cheeky as that it isn’t polite to use ‘:’ in a CSS class name. I have tried to make this microformat/mini-DSL as english-y as possible.

The current full options would contain feedbillboard numberofentries:4 access:randomly timeinterval:4.

You can guess why the unordered list was chosen. If JavaScript isn’t allowed to come out and play, your widget will show your friends and their feeds, which isn’t half bad as a billboard anyway. If the C-LISP is enabled, it will rip through looking for feedbillboard, and replacing them with fancy-pants versions.

A bit about the implementation

The meat of the operations is split between two classes: FeedBillboardFinder and FeedBillboard.

The job of a FeedBillboard is to represent a single billboard widget. It will replace the UL with the real widget, will go out and get the feeds using the Google AJAX Feed API, and will choose which element to rotate too next.

Getting the feeds using the Feed API is so simple. If you take a look at the load call you will see:

load: function(feedSettings) {
var self = this;
new google.feeds.Feed(feedSettings.rssURL).load(function(result) {
if (!result.error) {
self.feedOutput.push(result.feed);
}
});
},

In one fail swoop, we asynchronously grab a new feed out of the feedSettings bucket. The asynchronous piece is important here. You wouldn’t want to have to load all of the feeds before you started to show entries would you. What if it was taking awhile to get one of the feeds? As soon as the first feed is read the billboard can get to work, and as new feeds are loaded the pie gets bigger.

One of the fun little problems was how to loop through the entries (when not using random access of course). The FeedBillboard keeps track of the number of entries it has shown, and given that number, you need to pick the correct entry. For example, if you have four feeds each with four entries, then if you are told “five” you will return the first post from the second feed added to the system. I took the easy way out and created a hash lookup that returns the matrix:


this.placement[count++] = { feed: i, entry: j };


The FeedBillboardFinder handles the microformat. You could create FeedBillboard objects directly to create the widgets, but the finder will go out there hunting down the ul’s and build FeedBillboard objects:

find: function() {
var count = 0;
document.getElementsByClassName('feedbillboard').each(function(node) {
FeedBillboardFinder.build(node, ++count);
});
},

There are a lot of improvements to be made. I would like to have a headline mode that shows a configurable number of headlines instead of one headline and a snippet, and I need to do a better job with consistent sizing.

Conclusion

It is great to be able to very easily create unobtrusive components, and fun to try to come up with a nice microformat. The Google AJAX Feed API made this entire thing possible, and so easier to work with.