Musing on the current state of web-based technologies and what direction they might take in the future.

  • Visual Event 2
    Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end I've created Visual Event to help track events which are subscribed to DOM nodes.
  • KeyTable
    There are a number of tools such as DataTables which provide enhanced access to HTML tables for Javascript capable browsers. However, these tools often lack keyboard accessibility. KeyTable addresses this by allowing Excel like cell navigation on any table. Update 18-12-2009 - v1.1 released.
  • Secret
    There is a lot of text on the web (out of necessity of course) and I was thinking about how a message could be hidden in that text. Travelling along that line of thought, I started to experiment with getting information about individual characters, and displaying a message based on those characters on screen in a rather fun way. Thus 'Secret' was born.
  • DataTables 1.4
    DataTables was designed for progressive enhancement of tabular HTML data, giving the end user a wide range of options for customising the display of that data as they wish. DataTables 1.4 continues on this track, with the focus on the tools and methods it uses and provides for the developer.
    DataTables now has it's own web-site! Please visit for up-to-date software and information
  • Visual Event
    Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end I've created Visual Event to help track events which are subscribed to DOM nodes.

    Update: Visual Event 2 is now available and released as open source.
  • DataTables
    For tabular display of data in HTML there is nothing quite like the reliable table tag. With a little bit of Javascript magic, tables can be transformed from a static display to a dynamic and interesting information tool. I have been experimenting recently with building a tables plugin for jQuery.
    Please note that DataTables now has it's own web-site! Please visit for up-to-date software and information
  • Reader
    Often you will wish to draw attention to a particular elements on a web-page when you are discussing a particular page, reading detailed information, or giving a presentation. I have developed Reader for exactly this, and it has turned out to be an interesting adventure through Javascript events.
  • Graded Technology Support
    Deciding whether a web-developer should offer support for a particular browser is no longer the hard and fast line it once was. Rather, we must now consider not only a multitude of browsers, but also a multitude of configurations that any one particular browser might be in. This can be done by extending the graded browser support principle to be technology dependent.
  • Canvas 3D
    The 3D canvas context promises a lot of interesting applications and developments in future. Pioneering work has recently been done by both the Opera and Mozilla teams in this area, and I've been experimenting with Collada models in Opera's implementation.
  • Conditional-CSS details
    The power of Conditional-CSS is in it's simplicity, but also in it's flexibility to cope with almost any situation in which you would need to send different CSS information to different browsers. In this article I consider some of its more advanced and technical aspects.
  • Conditional-CSS
    One of the most reoccurring frustrations in web-development is CSS bugs in the various web-browsers. Conditional-CSS addresses this by allowing you to write maintainable CSS with conditional logic to target specific CSS at both individual browsers and groups of browsers.

    Note that Conditional-CSS now has it's own web-site and is available for PHP, C# and C.
  • Label
    Sharing ideas and comments about a particular web-page is often a tedious process involving lots of e-mail to and fro, or printed pages with post-it notes on them. Label addresses this by making it 'one click easy' to store your thoughts about any page and to share them with others.
  • Design
    Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.
  • Crosshair
    When designing and developing to the grid, it can be very useful to ensure alignment between various layout components on the page. One easy way to do this is to use a crosshair cursor. Crosshair is a JavaScript bookmarklet which provides exactly this on any web-page you wish.
  • Unit
    It is often useful for web-designers and developers to be able to measure a distance in a web-browser, either for design or locating a bug. Unit is a JavaScript bookmarklet which allows you to obtain the distance between any two points on a page.
  • Rule
    Web-designers and developers are often forced to use desktop applications to perform basic layout tasks. Rule is a companion JavaScript bookmarklet to Grid which overlays a completely customisable ruler on any web-site you wish.
  • Grid
    As all designers know, the grid is absolutely fundamental to layout, whether you want to keep to a tight grid, or break it for effect. Grid is a highly configurable JavaScript bookmarklet which overlays a layout grid on any web-site you wish.
  • Alert - Javascript dialogue controls
    Javascript offers two very useful input controls which block the user from all other interaction with a web-page (alert and confirm), however they are not particularly flexible, attractive or even meaningful at times. Therefore I introduce the Javascript class 'Alert' which provides customisable dialogue input controls. Current version: 1.2.
  • SprySpell
    There are many problems which may occur with a web-site, however there is one which is far more common than any other. This is of course bad spelling. We find spelling mistakes on all sorts of sites, even professional and corporate sites which are doubtless maintained by trained copyrighters. Spell checking a web-site is notoriously difficult, as well as a tiresome exercise. Therefore, I introduce SprySpell to ease this burden.
  • Integrity
    When creating and deploying a web-site for a client, there are a number of sanity checks you should always run through before delivering the site. Spell checking the site is a good start (SprySpell) as is testing it in a number of web browsers. Checking for 404 errors and ensuring the structure of your site is what you expected is also essential, and for that I introduce 'Integrity' in this article.
  • Canvas Charts
    The canvas tag offers raster image controls inside an HTML document and I've been experimenting with it over the last few days as a possibility of using it for chart controls. I've modified the excellent Chart by Emil Eklund to suit my own purposes. Redraw and smoother graphics have been added.
  • The Web Browser Paradigm
    Consider the medium to long term future of the web-browser as we know it, in what is at moment a rather controversial manner. How will it change, how will it cope with new demands placed upon it?
  • Next generation web-browsers
    With the browser wars heating up again, with time between Microsoft and Firefox with Safari and Opera on the outside, what can we expect from then next generation of web-browsers?
  • What makes a web designer?
    Not an easy question to answer this one. A web-designer is more that just a person who knows how to surf the web, use FrontPage and possibly write a little html. A lot more.
  • A world where size doesn't matter
    Imagine creating one graphic and having it look great on all screen. Scalable Vector Graphics (SVG) offer a bright future for graphics which render smoothly at any resolution and play nicely with other XML document types.

The web today