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:

  <form id="buttons">
    <p><input id="tease" type="button" value="click me, wuss!"></p>
    <p><input id="tease2" type="button" value="click me, wuss! (I bubble)"></p>
    <div id="littlesnitch"></div>
  </form>

JavaScript:

YAHOO.util.Event.onContentReady('buttons',function(){
  YAHOO.util.Event.on(document.body,'click',function(e){
    var t = YAHOO.util.Event.getTarget(e);
    snitch('<p>It was the ' + t + ' that was clicked</p>');
  });
  YAHOO.util.Event.on('tease','click',function(e){
    snitch('<p>that was the first button</p>');
    YAHOO.util.Event.stopPropagation(e);
  });
  YAHOO.util.Event.on('tease2','click',function(e){
    snitch('<p>that was the second button</p>');
  });
  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.

<div id="greader-shared-items" class="items5">
  <p>
    <a href="http://www.google.com/reader/shared/07479231772993841072">My Shared Items on Google Reader</a>
  </p>
</div>
<script src="google-reader-badge-v1.0.js"></script>

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

Last week I went to AKQA in London to give a brown-bag presentation on progressive enhancement. I took this chance to vent some of my ideas on the subject and counteract some of the criticisms I heard about the need for enhancing web solutions progressively.

I’ve come up with the following “Seven rules of progressive enhancement”:

1. Separate as much as possible
2. Build on things that work
3. Generate dependent markup
4. Test for everything before you apply it
5. Explore the environment
6. Load on demand
7. Modularize code

Instead of explaining them here, I’ve used a longer train ride to write up an article on the subject explaining the details of all the “rules” and examples of why and how to use them: Pragmatic Progressive Enhancement.

The article is licensed with creative commons, so you are very much invited to use and remix it to your needs.

I will upload my slides together with a video of the presentation once I got the material and checked if the video quality is good enough for publication.

I just wrote a post on the YDN Developer blog how our work as web developers is very likely to change in the nearer future. I am not talking about the imminent coming of IE8 and its - thankfully - standard new rendering engine but about web architectural decisions I have witnessed in lots of talks with large corporations, big web sites and people that try to move their products into backend frameworks.

The new challenge is that the page as we know it will be very likely to die out soon and be replaced with a set of modules that can be customized for the user needs and by what we know of them or even opened up to third party developers. The success of the likes of facebook and the new MySpace developer framework are very likely to be just the start. A shame that the technologies and standards we use to develop clean and maintainable web products are not geared towards that kind of approach. Where is the cascade if everything should be self-contained?

• Check out A new challenge for web developers