This is not going to be amazing, but I had to find / write a script like that for every hackday / barcamp I attended so far. Being lazy, I just wanted to create one I can re-use later on. So here you are:

• 2 minute countdown with start, pause and reset button and a 30 second reminder

You can either use the counter directly, or right-click and save it for local use. The look and feel is all in the CSS, yo u can set some of the preferences in the counter interface and there are several configuration settings you can change:

var cfg = {
  displayID:'display',  // element to show the seconds
  startButtonID:'c',    // start button ID
  pauseButtonID:'p',    // pause button ID
  finalClass:'final',   // class to add when final coutdown is reached
  overClass:'over',     // class to add when the time is over
  initialText:{
    value:'2:00',
    label:'Initial Text'
  },
  seconds:{
    value:2*60,
    label:'Time in Seconds'
  },
  finalCountdown:{
    value:30,
    label:'Time when the warning starts'
  },
  pauseLabel:{
   value:'pause',
   label:'Pause Text' 
  },  
  resumeLabel:{
    value:'resume',
    label:'Resume Text'
  }
};

Some configuration settings have values and labels, this is because of the preferences form being created from this object.

As said, nothing special, but I hope you can use it, I know I will.

Currently I am writing a lot of tutorials for an online self-training course about web standards and I ran into the annoyance of having to maintain example code in two places: the code itself and the HTML document with the explanations. Therefore I took jQuery and wrote a small script that automatically turns links to HTML code examples with HTML entities and line numbers. You can define which lines to display, which lines should be highlighted and you can add a live preview in an IFRAME when the link is clicked.

• Check out Ajax Code Display

Technorati Tags: annoyances, codehighlighting, code, tutorials, javascript, ajax

Today was a great day: I finally got my Macbook Pro to work with, got myself one of those fancy new slick keyboards and went for it answering a lot of emails. It is amazing how many more emails you can answer when you don’t have to wait for virus scans in the background and Outlook to get a move on.

Not only did I get some good leeway on what I am going to do this year (amongst other things a trip to Beijing to talk to developers about best practices and going back to Germany to talk to Flash developers), I also finally got some other answers I have been waiting for.

To cut it short, I am now not only sneakily blogging for the Yahoo Developer Network blog but was asked to contribute more often. What is even more surprising (considering my history of snide comments there) is that I am now also blogging on Ajaxian.

So if you have some good JavaScript/Ajax or general web development stuff that needs coverage, please drop me a line. I am available here (either via comment or email), on twitter or pownce.

I love the idea of being able to reach a lot of readers and developers through very successful and large channels and it shows me once again how powerful the web is as a media. When I worked as a radio journalist, this wouldn’t have been possible as everything I did had to be connected to my employer exclusively :)

Technorati Tags: blogging, ydn, ajaxian, bigmouth, squeakywheelgetsoil, javascript

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!

Technorati Tags: badges, javascript, theartandscienceofjavascript, book, 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?

Technorati Tags: offline, HTML, documents, downloadable articles, JavaScript, versioncontrol, webdevtrick, tutorials