Wednesday, December 05, 2007

Lifestream, Yahoo! Pipes and jQuery

Jeremy Keith's lifestream was the first I saw online, where he'd aggregated together his many RSS feeds into one place. It shows the various sources ordered by time, and it can be quite interesting to follow along and see what sort of sources are most prevalent at any one time. I'd been meaning to have a play with something similar myself for some time, but wasn't sure how to go about it. Then a couple of weekends ago, I went to BarCampLondon3 and Cristiano Betta did a great session on how to author your lifestream using Yahoo! Pipes. There's bags more information about how to do it at his blog. Finally, I thought it was about time I had a play with it myself. The feeds I used were the following:

I decided against using my feed for the moment, as it would probably swamp all the other inputs (I listen to a lot of music while working, it's one of the perks of working from home, no-one moans about your choice of songs!).

Having got the basic lifestream out of Pipes, I used Dreamweaver's XSLT transform functionality to generate a list which would sit in my ASP.NET page. I wanted to use specific icons to show which feed each item was from. Cristiano was using a JSON output for his pipe, but mine is coming out as RSS, so the custom ID's applied in the pipe weren't getting through, since they're not part of the RSS spec.

CSS3 attribute selectors are one option, but they don't work in clunky browsers like IE6. So having also been at Simon Willison's jQuery session at BarCampLondon3, I thought I'd have a play with with the library to see if I could do some neat DOM manipulation to add the correct class to each list item.

The Llifestream list is marked up thus: <ul id="lifestream">. I added some jQuery to insert the class for the list element, based on the attribute of the link it contains. That requires a parent element to be changed, based on it's child's attributes. Slightly tricky for a jQuery novice like myself. It took me a while but eventually I found the correct syntax:
$(document).ready(function() {
$("#lifestream > li > a[@href^=http://twitter]").parent("li").addClass("twitter");
The first line calls jQuery once the full DOM is loaded; line 2 (which looks rather horrible with text wrap, but bear with me) selects an anchor with the attribute which begins with "http://twitter", but I wanted the class added to the parent LI, so hence the chaining of jQuery functions.

Now all I needed to do was to add a case for each link type to my new lifestreamclasses.js file and add a linke to it in the header of my lifestream page, and the proper stylings can be applied. I decided to keep them in a separate JS file for ease of maintenance. Once the pipe has mashed it all together and I've written the relevant styles into the stylesheet, the resulting RSS aggregated feed looks like this.


Cristiano Betta said...

Looks pretty nice. It's fun to see how everyone has a different approach, which is why I think most Lifestream-webservices will fail as they simply will always miss something that someone wants.

Little tip: Set the Yahoo Pipes RSS output as the RSS of the lifestream.aspx page! That way people can add your lifestream to their favorite feed reader.

Caz Mockett said...

Thanks Cristiano,

Your Pipes input module was very useful for getting some of the feeds running properly :-)

I haven't tweaked the delay settings yet, but you're right, they do seem to be offset from when some things were posted. I should also try and parse the dates into GMT, as the PST publish time winds me up :-)

Good tip about setting the pipe for the RSS - I'll do that ASAP.

John Flood said...

Caroline, I would like to put together something like this. RSS has so far defeated me, which means I visit other blogs occasionally without properly keeping up. Do I just copy your code or what?

By the way, on seeing yours, I've changed my flickr badge from HTML to the Flash one. It's fun.