Christian Heilmann

You are currently browsing the archives for the Experiments category.

Archive for the ‘Experiments’ Category

Tackling automatic field focus usability issues

Monday, October 9th, 2006

One of my greater annoyances on the web is sites that automatically focus a form field when the page has loaded. Supposedly this should make it easier for you to use the product, as you are to log-in anyways, but there is one real problem with this.

If you try the demo page for a normal autofocus and start typing in your details, it can happen that you are already in the middle of your password when the page is ready and the focus gets shifted to the email field. I have seen this happening in Internet Cafes, where people inadvertedly revealed their passwords that way.

The reason is the simplicity of the scripts applied to focus the field when the page has loaded, which sometimes is as rudimentary as:

window.onload = function() {
document.getElementById( ‘email’ ).focus();

Now, I wondered how to make that better. A simple solution would be not to use onload on the window (and thus waiting for the document and all dependencies to be loaded before you proceed) but use onAvailable or equivalent solutions on the element itself instead. However, if the element to highlight is not the first, that would still make it possible to enter other data until the focus gets taken away from you.

Next I considered to read out the event target when the page has loaded and assume that if the target has a node name, someone is entering data. That proved to be to flaky (as [link:,Chris Kaminski,colleague met] predicted, darn you!) as MSIE told me undefined whenever.

Thus, I dug deeper into my memory of form elements and unveiled the idea of value versus defaultValue. The latter, rather less known is the value set in the HTML attribute, whereas the value is the value of the field. Value changes when the user enters data or changes the element’s state (in case of checkboxes), but defaultValue doesn’t.

Using this information it is easy to set up a better autofocus script that will not focus the element when any of the data in the form deviates from the original settings in the HTML.

var isfocused = false;
var elms = [‘email’,’pw’];
for(var i=0;i var elm = document.getElementById(elms[i]);
if(elm !== undefined){
if(elm.value != elm.defaultValue){
isfocused = true;


if(isfocused != true){


All you need to edit is the elms array listing the IDs of all elements to check :-).

The myth of Common Knowledge

Friday, September 29th, 2006

Recently I have discovered a really sad pattern of behaviour in the webdevelopment world and its communication channels (blogs, mailing lists, forums, IM): People don’t share information as they are afraid that it may sound too trivial, not relevant or has been discussed to death already.

This is happening in companies, too: new developers hold back in asking questions or showing others what they have done and how they solved a certain problem as they fear it may make them sound inexperienced and helpless.

It is an overused expression, but there really are no stupid questions. Repeating them over and over again without taking on information you get in answers makes you appear stupid, but the question in itself stays relevant.

There is no gain in all of us being smug about knowing it all and not really caring to ask for help with small nagging issues in favour of spending days to solve them ourselves. Asking a colleague is not a weakness but simply shows that you care about the problem and you want a second opinion to test your approach (XP fans will remember the pair programming idea).

I have some blog posts here that get an amazing amount of hits that some people asked me why I ever bothered to put them up. Things like “[link:,How to remove the border around a linked image]”, “[link:,Using CSS classes to avoid loops], [link:,Printing Background Images] or [link:,Linking an Icon and a text and apply a roll-over state]. This proves to me that the demand is there, and that things we consider “Common Knowledge” might not be that common.

There is a rather cool site that got into the direction of offering information like this, called [link:,Bite Size Standards]. However, after an initial honeymoon period of posts it seems to have gone back to bed for a beauty sleep.

In my current work, [link:,Tom Croucher,colleague friend] tries to start implementing something called “Lightning Talks”, which are 5 minute presentations of someone of the team to the team about a certain issue and how to solve it, followed by a 10 minute question and answer session.

Battling the Common Knowledge Myth

Now, as a web site like bitesize standards means work and dedication and filtering, I propose another idea:

Let’s post a lot of these small “Issue – Solution” blog posts and simply use a unified Technorati tag for them, for example “[tag]webdevtrick[/tag]”. That way other bloggers or sites can get the feed on that tag and show them, and we can advertise the idea on mailing lists every time the same question gets asked. Consider it a decentralised FAQ with Technorati as the aggregator.

I’ll publish results here, and simply will start doing that myself, so even if I am wrong with this idea, it doesn’t cost me much time.

Event Handling versus Event Delegation

Sunday, September 24th, 2006

If you ever wondered how flexible web applications with hundreds of objects that need event handling are built, the trick behind it is called “Event Delegation”.

I didn’t come up with it, and it is nothing new either, but as some people seem to get confused when the term crops up, I’ve written a quick example why event delegation helps keeping web apps light and fast.

Seven simple examples for the YUI Panel Widget

Thursday, September 21st, 2006

Following some feedback of a training session in several offices over the last few weeks, I’ve put together [link:,some simple examples] on how to implement the [link:,Yahoo! User Interface Library Panel Widget].

Of course, this cannot replace the [link:,real documentation], which has a lot more important information, but I hope it’ll get you going and eager to learn more. I’ve implemented Panel in some products so far, and I love how easy it is. Especially the contextual positioning is a real time saver.

Enjoy, and I hope this makes things a bit easier.

Search now with AutoComplete

Wednesday, September 20th, 2006

I just enhanced the site search here with an autocomplete option using the [link:,YUI AutoComplete Widget]. Just type in anything and you’ll get a list of post titles to choose from. Selecting the title automatically gets you to the entry.

I had this dynamic first, using a PHP script to poll the database, but it seems the load is too much. Anyone interested in a step – by – step how to do it yourself?

Search AutoComplete in action