Two weeks ago I went to East London to give a “brown bag” presentation at the office of the Guardian. In a very crowded room around 30 developers sat and listened to me raving about best practices in web development and what the YUI already solved for you.

There is a very nice write-up on the inside guardian blog and they also host the podcast mp3 of the talk.

The slides for the talk are on slideshare:

[slideshare id=488632&doc=happylittlewebsites-1214566328957709-8&w=425]

It is very cool to see your name on an old-school media site and the way they wrote up what the talk is about makes me realize that journalism will never be replaced by blogging and twitter.

Here’s a presentation I have given today at the Guardian office in London. In it I am covering the different great ideas I found out about developing web sites. Check the presentation here:

[slideshare id=488632&doc=happylittlewebsites-1214566328957709-8&w=425]

The Guardian have recorded my talk and will release it on the Inside Guardian blog

As several people asked how I did the easier Flickr interface, I wrote up some step-by-step instructions, analyzing the issues and then taking the API to work around them.

Check out How to create an alternative Flickr interface – step by step.

This is one example where providing a good API can empower developers to remove barriers you might not be aware of for you. I hope to be able to show you more of those in the future.

The code examples are available and are licensed with BSD, so feel free to re-use them.

This was a question I got in the office today and there is no shame in asking it:

I am using Event Delegation on one of my products and I need to stop the main handler on the body from firing when I click a certain button. How do I do that?

The answer is of course to use stopPropagation() or cancelBubble(), both nicely wrapped in YAHOO.util.Event.stopPropagation():

HTML:

JavaScript:

YAHOO.util.Event.onContentReady(‘buttons’,function(){

YAHOO.util.Event.on(document.body,’click’,function(e){

var t = YAHOO.util.Event.getTarget(e);

snitch(‘
It was the ’ + t + ’ that was clicked
‘);

});

YAHOO.util.Event.on(‘tease’,’click’,function(e){

snitch(‘
that was the first button
‘);

YAHOO.util.Event.stopPropagation(e);

});

YAHOO.util.Event.on(‘tease2’,’click’,function(e){

snitch(‘
that was the second button
‘);

});

function snitch(msg){

document.getElementById(‘littlesnitch’).innerHTML += msg;

}

	
});

Try it out here: Overriding Event Delegation with stopPropagation

I am a user of Google Reader to get through the vast amounts of RSS feeds I subscribed to. I think it is safe to say that reading RSS and twittering has replaced most of my web surfing.

Like most big RSS readers, Google reader also allows you to share great finds you had with people who want to and are in your social neighbourhood. You can either get these finds as a feed or as a little badge (called a clip in Google lingo) to include in your blog or other sites.

The out-of-the-box version of this badge can be customized and results in two JavaScript includes which write out the badge.

That is nice, but I don’t quite care for things that could offer functionality without JavaScript but don’t bother, which is why I checked more closely what the Google badge does.

If you look at the generated script includes you’ll find for example the following URL ( added spaces to avoid breaking my blog :) )

http://www.google.com/ reader/public/javascript/ user/07479231772993841072/ state/com.google/broadcast? n=5&callback=GRC_p%28%7Bc%3A%22green%22%2Ct %3A%22Christian%20Heilmann%27s %20shared%20items%22%2Cs%3A%22false%22%7D%29%3Bnew%20GRC

Clicking this will get you a JSON object with a wrapper function (and for some reason a comment that this is a JavaScript file), which means you can use this for your own purposes.

All you need is your user ID, which you can get this one easily from your shared items homepage that Google Reader offers. In my case this is http://www.google.com/reader/shared/07479231772993841072.

The other interesting parameters of the JSON API are the n parameter defining the amount of items and the callback parameter defining the name of the function call wrapped around the JSON data.

Putting all of this together it was easy to create a badge that uses the following HTML to show off my shared items on Google Reader.

My Shared Items on Google Reader

Visitors without JavaScript will still be able to click through to the page of my shared items. Those with JavaScript will get the latest five.

You can see the badge in action and download it for yourself on the demo page (using tutorialbuilder):

• Unobtrusive Google Reader Badge