Yesterday I was playing around with the Google AJAX Feed API. With the API, you can download any public Atom or RSS feed using only javascript. By mixing the Google AJAX Feed API with MooTools 1.2, I wrote a tiny feed reader application in 30 lines of javascript goodness.

My tiny feed reader

The Feed Reader

This feed reader polls the COLOURlovers.com Palettes feed and Colours feed every 20 seconds for new items. New items are highlighted with the MooTools Element.highlight() function. The Google AJAX Feed API passes JSON to a callback function, which adds the new ‘colour’ or ‘palette’ entries to the list. Below you can see the uncommented code. The feed reader example contains a commented version.

var Site = {
	entries: [],
	timer: 0,
	init: function(){
		this.paletteFeed = new google.feeds.Feed('http://feeds.feedburner.com/ColourloversCoup0Palettes/New');
		this.colourFeed = new google.feeds.Feed('http://feeds.feedburner.com/ColourloversCoup0Colours/New');
		this.poll.periodical(1000, this);
	},
	poll: function(){
		if (--this.timer <= 0) {
			this.colourFeed.load(this.onLoadCallback.bind(this));
			this.paletteFeed.load(this.onLoadCallback.bind(this));
			this.timer = 20;
		}
		$('refresh').set('html','Refreshing feeds in ' + this.timer + ' second(s)...');
	},
	onLoadCallback:function(json){
		if (json.error) return;
		for (var i = json.feed.entries.length - 1; i >= 0; i--) {
			var entry = json.feed.entries[i];
			if (!this.entries.contains(entry.title)) {
				this.entries.push(entry.title);
				$('feeds').innerHTML = ('<li class="entry"><a href="{link}" title="{title}">{content}</a></li>').substitute(entry) + $('feeds').innerHTML;
			}
		}
		$$('.entry').set('tween',{duration:2000}).highlight().removeClass('entry');
	}
};
google.load('feeds', '1');
window.addEvent('domready', Site.init.bind(Site));

What’s next?

• Google AJAX Feed API
• MooTools Docs