Web 2.0 Expo was poor? Messi meat Maradona
Apr 19

Unobtrusive JavaScript, Microformats, and the Google AJAX Feed API

Ajax, Google, Tech Add comments

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.

12 Responses to “Unobtrusive JavaScript, Microformats, and the Google AJAX Feed API”

  1. Jesse Kuhnert Says:

    Awesome! Thanks for sharing this. I’ve really wanted a js based feed reader for apache sites for a while since the foundation doesn’t typically allow people to run executable code bits on the public facing web servers. ..

    This will be immediately useful to many I’m sure, so thanks again.

  2. Håvard Pedersen Says:

    It’s getting cut off in Opera 9.2 (Linux).

  3. pedant Says:

    > In one fail swoop
    fell swoop

  4. MrGHemp Says:

    When I click on an article title, it loads the webpage in the tiny square, without leaving the current page… rendering it useless. I’m assuming this a bug based on the fact that I’m using Safari on a Mac?

  5. Jeremy Keith Says:

    I’m afraid that are you using in this example is *not* a microformat. You can’t simply apply a class to something and label it a microformat. Microformats are created by following a process:

    http://microformats.org/wiki/process

    Only at the end of that process can a microformat (maybe) come into existence.

    If you need a handle to put on your markup, try POSH – Plain Old Semantic HTML:

    http://microformats.org/wiki/posh

    Calling any arbitrary piece of markup a microformat is as misleading as referring to any piece of JavaScript as Ajax.

    Forgive my pedantry but I think it’s important that we clarify nomenclature especially in code examples and documentation. Thanks.

  6. HOSTING RESELLER PERU Says:

    gracias

  7. HOSTING RESELLER NICARAGUA Says:

    GRACIAS

  8. Deonte Says:

    .0s0. brown pride dana hamm buy u a drink onion booty make it rain remix http://i-shot-myself.dfoop.com/i-ishotmyself-myself-shot.html i ishotmyself myself shot http://i-shot-myself.dfoop.com/i-shot-myself-nude.html i shot myself nude http://i-shot-myself.dfoop.com/i-shot-myself-naked.html i shot myself naked http://i-shot-myself.dfoop.com/girl-i-myself-shot.html girl i myself shot 4hh7-ffj-2dce http://i-shot-myself.dfoop.com/i-myself-shot-teen.html i myself shot teen .0n0.

  9. Deonte Says:

    .0s0. brown pride dana hamm buy u a drink onion booty make it rain remix http://i-shot-myself.dfoop.com/i-ishotmyself-myself-shot.html i ishotmyself myself shot http://i-shot-myself.dfoop.com/i-shot-myself-nude.html i shot myself nude http://i-shot-myself.dfoop.com/i-shot-myself-naked.html i shot myself naked http://i-shot-myself.dfoop.com/girl-i-myself-shot.html girl i myself shot 4hh7-ffj-2dce http://i-shot-myself.dfoop.com/i-myself-shot-teen.html i myself shot teen .0n0.

  10. Vidal Says:

    Hi, I’ve finished my new job search engine – JobGeni – based on Google AJAX Feed API.
    It grabs realtime data feeds from several major job sites like indeed, simplyhired, yahoo hotjobs, monster and jobster. have a look
    http://www.jobgeni.com

  11. replicahandbags Says:

    thanks for sharing,helpdul info

  12. replica handbags Says:

    very good.thank you very much.

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: What are the first four letters in the word British?