The simple, perfectly valid and accessible solution is to use the <optgroup> element. It’s used for grouping <option> elements in a <select> list into sections. It’s perfectly safe to use since it’s supported across all browsers.

Here’s an example of how to create a sectioned select list with pets.

<label for="pets">Pets</label>
<select>
  <optgroup label="Dogs">
   <option>Golden Retriever</option>
   <option>Doberman</option>
  </optgroup>
  <optgroup label="Cats">
   <option>Burma</option>
   <option>Siamese</option>
  </optgroup>
</select>

This code will result in this select list:

There’s one big additional benefit and that is that the labels in the list are not clickable and can therefor not be selected by mistake.

So the next time you want to create a select list with sections, look for <optgroup> first.

Also download the MA Thesis and try out the interactive prototype at
www.martingimpl.com/stripes/.

Found through Lukas Mathis blog ignore the code where he shares his thought about the concept.

Last year over 30.000 people took the survey and A List Apart has made the results publicly available. Check it out! It’s a pretty interesting read.

I took the survey, and so should you! So head over there and answer the questions. It only takes about 5 minutes.

Future of Internet Search: Mobile version

Up till now this has merely been concept ideas for future technology, like the Futuristic Glass above, but it’s now becoming real! For the Google Android platform there’s already working prototypes, like for example this one. It’s called Layar and claims to be the first mobile Augmented Reality browser.

If you want to read more about this, Luke Wroblewski has written two articles on the subject, showing examples from both the iPhone and the Android platform, including YouTube videos of the applications in action.

• iPhone with a Compass = First Person UIs?
• First Person UIs on Android

Some of the things he talks about is:

Scope management

In this part Nicolas explains the scope chain and shows some statistics on how long it takes to access data in different places in it.

Data Access Performance

It turns out you can gain quite some performance, especially in IE, by thinking about how you access data. By avoiding global variables and object properties/array items and instead use local variables as much as possible you can make your code run faster.

Loops

By doing some really easy modification to your loops you can get a 50% performance boost. What it boils down to is to :

• Decrease amount of work per iteration
• Decrease number of iterations

You should also avoid using For-in loops and for each loops and all the function based loops found in Javscript libraries like jQuery and YUI. These takes up to 8 times longer to run than regular for loops.

DOM

In this part Nicholas, amnong other things, talks about HTMLCollections and how slow they are. The reason being that they are dynamic by nature. For example just looping through an HTMLCollection takes up to 68 times longer (in IE) than it takes to loop through an array. Fortunately he also provides ways to remedy this.

He also describes how to avoid unnecesary reflow of the web page.

The video

This video gave me so much new information on how to optimize my Javascript code. This is definitely the best talk I ever seen on the subject. If you’re at all interested in Javascript you should definitely watch it.

Watch the video on YouTube.com

The add on docks itself to the side of the main Spotify application window. From when I’ve tried it, it finds most lyrics, but there are some that aren’t available.

ListDJ have been developed by a friend and college of mine, Fredrik Danielsson. To read more and to download it, visit www.listdj.se. The add on is completely free but is currently only available on the Windows platform.

The solution is quite obvious. It’s as simple as updating the src attribute of the image. The tricky part is to get the browser to actually display the new image and not just a cached copy of it. To do this we must trick the browser into thinking it’s a new file that it haven’t displayed before. This is preferably done by inserting a unique filename to the src attribute. There’s a couple a way of doing this but in this example it’s done by adding the time in milliseconds (ms) as a querystring at the end of the filename.

function updateImage(src) {
    if(src.indexOf('?') > -1) {
        src = src.substr(0, src.indexOf('?'));
    }
    return src + '?' + (new Date()).getTime();
}
var img = document.getElementById('myImage');
img.src = updateImage(img.src);

You could theoretically add a hash (#) after the filename instead of a querystring (?), but unfortunately that doesn’t work in Internet Explorer. So stick with the querystring and you will be fine.

The ASP.NET MVC Framework is still in beta (RC2) but is going to ship any day now. That’s good for me since I’ve built a web application with it that will go live pretty soon.

Download the chapter.

Read more on Scott Guthries blog.

There are three ways to define a global variable in Javascript.

The first way is to declare the variable outside of any function.

var myGlobalVar = value;

The second way is to assign it as a property to the global object, which in web browsers are the window object.

window.myGlobalVar = value;

The third way is to use it without defining it. In this case it doesn’t matter if it’s inside of a function or not. This is called implied global.

myGlobalVar = 'Hello world';

A great way to minimize the use of global variables is to store them all in one global object. By doing this you can keep all you variables and functions in one place, greatly reducing the risk for name collisions.

// Define your global object
var myObj = {};
// Add property (variable) to it
myObj.myVar = 'Hello world';
// Add method to it
myObj.myFunctions = function() {
    // Do cool stuff
};

The Javascript language was designed with global variables like this to make it easy for beginners to start coding. The side effect being that it’s easy to forget to define a variable and thereby creating bug that are hard to discover. So do yourself a favor and avoid global variables whenever possible.

The article contains a list of 20 techniques with links to further reading on each. To make it easier to find suitable techniques he also made a Treasure Map (pdf) so it’s easier to see what your options are. Or as Peter himself put it:

It’s hard to find the best trees when we can’t see the forest. So, we often fall back on old habits. We churn out wireframes when a story may be worth its weight in gold. Some great deliverables stay hidden in plain sight. That’s why we created this treasure map for our wall (and yours).

– Peter Morville