• You are currently browsing the archives for the webdevtrick category.

  • Archive for the ‘webdevtrick’ Category

    An unobtrusive badge for Google Reader’s shared items

    Wednesday, May 21st, 2008

    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):

    Pragmatic Progressive Enhancement

    Tuesday, May 6th, 2008

    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.

    [tags]progressive enhancement,pragmatism,development,accessibility,methodology,bestpractice,webdevtrick[/tags]

    The new web development challenge – independent modules in larger frameworks

    Wednesday, March 5th, 2008

    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?

    Retrieving del.icio.us tags for the current URL with JavaScript

    Monday, February 11th, 2008

    If you scroll down the older entries of this blog you’ll see that there is a new feature, namely a box that shows reader tags and a link to del.icio.us:

    Screenshot of a list of tags with a link to del.icio.us

    This is not a WordPress plugin (although it would be easy to make and i’d be amazed if it hadn’t been done) but pure JavaScript. You can also download the script that does this and use the following to embed it in any page you’d like to know the delicious data for:

    
    <div id="deliciousinfo"></div>
    <script src="deliciousinfo.js"></script>
    

    There is not much magic going on here, I basically souped up the example on the del.icio.us site,minified and embedded Paul Johnson’s implementation of MD5 in JavaScript and created the necessary HTML.

    The HTML structure inside the DIV will be a definition list with tags as dd’s and the text as the dt and a paragraph with a link. You can style it by using the #deliciousinfo ID.

    I like the outcome and I am always amazed what good tags readers of my stuff come up with. If you want to know, get the src commented version and check the information in there.

    Shall I create a WordPress plugin for this?

    Edit: if you wondered what the difference to the tagometer is, there isn’t much, I just forgot about it….

    YUI on the go – load YUI components on demand

    Friday, December 7th, 2007

    This is one of my talks at the Yahoo! Frontend Engineering summit in London and it deals with the options of cutting down the size of the YUI library components. There have been many articles and posts about this subject already but none really explained the idea of using YAHOO_config to load components on demand instead of using the YUI loader.

    This is also the trick I used to create the unobtrusive flickr badge v2.

    [tags]yahoof2elondon07,webdevelopmentsummit,yahoo,yui,javascript,lazyload,widgets,badges,performance,speed,webdevtrick[/tags]