My latest contribution to the ink-on-dead-tree media is a chapter for Sitepoint’s new book
The Art and Science of JavaScript. I’ve been giving details about the history and the contents of the book in detail in a blog post on the Yahoo Developer Blog and while it has been out for a while I just got my free copies today, hence the delay.

My chapter in detail covers how you can build a badge to display information you stored on another site in yours without having to resort to a server side solution or slow down your site. All the magic happens after the page has been loaded and if there is no JavaScript available, visitors will still see a link to the same online resource.

It is a detailed explanation of the rationale and script that feeds my del.icio.us plugin for wordpress shown below:

My links about JavaScript

Whilst not the flashiest of the chapters I hope that people can learn something about APIs, REST and dynamic script node generation from it.

I was personally very positively surprised by the quality of the book itself: the full colour print, typography and iconography are very nice. The only thing that is missing is an author name or short bio on the chapter start page, it is a bit tricky to know who did what. Well done Sitepoint!

When you write tutorials and you want people to use them wherever they are it is a good idea to offer the HTML documents as a zip for downloading. The benefit to the end user is that they don’t need to be online to look something up (I for example have the HTML 4.01 documents on my machine as HTML documents). The drawback is that the documents could be outdated without the user knowing - even when they are online while watching them.

Now, I pondered a bit about this and wondered if something like this wouldn’t be a solution:

• You add a version number to the title of each document.
• You add a remotely hosted versions.js script at the end of each document.
• This script has a JSON object with the version information of each document and compares the file name and version.
• If the version is outdated, it generates an error message that gets shown to the user.

You can try it out by downloading the two demo documents un-zip them and open them on a computer that is connected to the internet. The second document linked from the first one should be outdated.

The source of versions.js

(checkversion = function(){
  // change as fit
  var versions = {
    'documentexample.html':'1.0',
    'documentexample2.html':'2.0'
  };
  var errorID = 'versionerror';
  var errorMessage = 'This document is outdated, please go to the homepage to download the new version!';

  // checking code
  var d = document;
  // get the version number
  var cv = d.title.match(/\(version (.*)\)$/); 
  // get the file name
  var cn = window.location.href.split('/'); 
  cn = cn[cn.length-1].split(’#')[0];
  // check and create error message if there is a mismatch
  if(cv[1] && versions[cn]){
    if(versions[cn] !== cv[1]){
      if(!d.getElementById(errorID)){
        var m = d.createElement(’div’);
        m.id = errorID;
        m.appendChild(d.createTextNode(errorMessage));
        d.body.insertBefore(m,d.body.firstChild);
      }
    }
  }
}());

You could create both the titles and the JSON object in versions.js on the backend automatically by scanning the titles or from a version control system. What do you think?

Google have lately been praised for their chart API and my esteemed colleague Ed Eliot has a workaround for its restrictions in terms of caching and server hits.

I played around a bit with it and thought it very cool but it felt a bit clunky to add all these values to a URL when they could be in the document for those who cannot see pie charts. This is why I wrote a small script that converts data tables to charts using the API and a wee bit of JavaScript.

Using this script you can take a simple, valid and accessible data table like the following and it gets automatically converted to a pie chart.

<table class="tochart size300x100 color990000" summary="Browsers for this site, March 2007">
  <caption>Browsers</caption>
  <thead>
    <tr><th scope="col">Browser</th><th scope="col">Percent</th></tr>
  </thead>
  <tbody>
    <tr><td>Firefox</td><td>60</td></tr>
    <tr><td>MSIE</td><td>25</td></tr>
    <tr><td>Opera</td><td>10</td></tr>
    <tr><td>Safari</td><td>5</td></tr>
  </tbody>
</table>

Simply add the script to the end of the body and it’ll convert all tables with a class called “tochart”. You can define the size (widthxheight) and the colour as a hexadecimal triplet as shown in this example. If you leave size and colour out, the script will use presets you can alter as variables in the script itself.

What about data tables from charts?

As Victor of the Yahoo! Accessibility group asked for the other way around, this is now also possible. When you use the verbose data mode for the charts and add the class “totable” to the image the script will generate a data table preceeding the image and null out the alternative text. For example:

<img src="http://chart.apis.google.com/chart?cht=p3&chco=339933&chs=450x150&chd=t:10,58,95,30,63&chl=Apples|Oranges|Pineapples|Bananas|Pears" alt="Fruit Consumption of under 15 year olds, March 2007" class="totable"/>

The tables have a class called “generatedfromchart” which you can use to move them off-left if needed.

Check out the demo page and download the script with the demo page and CSS to have a go with it yourself. Of course, all is licensed creative commons, so go nuts.

Useful? Please comment if you want something extra or wonder how the script works.

Jetlagged like hell and confused I just arrived back from my holiday in Hong Kong, fired up my computer at home and realized that today it was my turn to say something on the advent calendar sites of the web:

• 24 ways - Keeping JavaScript dependencies at bay (English)
• Webkrauts - Große JavaScript Applikationen leicht gemacht (Deutsch)

The article describes a small and easy framework to create a modular JavaScript application that loads dependencies on demand and still gives you full control over what has already been loaded.

This is heavily inspired by the YUI config object and my talk at ajaxWorld East in March will deal with a similar topic.

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.

| View | Upload your own