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:

• My photographic blog
• My rubgymad blog
• My web design blog
• Stuff I post to Flickr
• My tweets from Twitter
• Stuff I'm reading via del.icio.us

I decided against using my Last.fm 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.

BarCamp Day 1 - Evening Sessions

Mark Norman Francis on Don't Be Scared of Code Reviews

Norm explained that the purpose of a code review is not to criticise other people's code. The findings are not escalated, there is no formal output - just for folks involved. Except Security problems, which are tracked in Bugzilla. So why bother?

• Verification - adhere to internal standards.
• Training - informal education of expectations of new hires
• Collective wisdom - [you will be assimilated!] Experts pass on their knowledge.

They are looking for, in HTML - valid, semantic, accessible.
CSS - valid (hacks separated out), modular (hung off ONE id - means you can reuse code on another part of site without relying on cascade), cross-browser (graded browser support)
Javascript - unobtrusive (pull it out into separate files, still get to the content with JS off), optimised, cross-browser.

Don't care too much about programmed page weight - ads multiply page weight hugely anyway. Page weight is not very relevent to each user but is to Yahoo!, since so many hits could mean server overload.

Perl/PHP must be documented (in the code, externally), understandable, standardised

[Olé Norm!]

How do they work? Time taken doing them is minimised. Quiet time is set aside beforehand for people doing the reviewing, away from email, IM etc.
During review, items are explained by reviewer, while the coder keeps quiet. A mooderator takes notes for them both, which are tabled for later. Then follow-up - the lead developer confirms that the problems identified have been rectified before code goes live.

Me on Taking Better Pictures
I'll post the main contents of my presentation in later posts, but it seemed to be fairly well received, with about a dozen folks coming to listen.

Andy Mitchell & James McCarthy on "Free Schmee"
Andy and James were talking about APIs and using them in a modular fashion - why invent the wheel again when you could reuse another API to do certain tasks, such as user verification. They freely admitted they'd been penning their presentation hastily when they'd rather have been attending mine. But never mind, it was still an interesting few minutes!

[James and Andy argue about who's going to work the slides...]

Next was dinner: geeks + pizza + beer = culinary carnage. At least there was no washing up!

[Colin Schlüter surveys the carnage]

I stayed chat with Andy Mitchell and John Wilson for quite a while after dinner, but made it to the main auditorium , back end of Ask Us Anything panel. Someone rashly asked to see the panel dance!

[Norm! shakes his booty, watched by Simon, Steve, James and Aral]

Of course, it wasn't long before someone asked "when can we play Werewolf!" So, most reconvened to the restaurant area and three groups started. Not sure how many games were played altogether, but I think it was at least nine, with various permutations of people flitting from one circle to anther.

[a wolf in gnome's clothing, perhaps? Tom Coates ponders who he's going to bite next; James Wheare (Wolf??) and Cristiano Betta don't seem worried by his proximity!]

And so to bed, perchance to sleep, at 4am... fat chance - wished the floor wasn't so hard. Got up again 4 hours later to find most still comatose:

[geek dorm, aka conference room]