A while ago a was asked by Kilian to share seven things about me. The hype of seven things is cooling down a bit, so I will not link to seven other people to share their things. I hope it if you don’t mind me showing off some personal details.

• I’ve been a lifeguard for about eight years. But unlike the images along the article at Wikipedia show, we train in a covered swimming pool since it is not that sunny in the Netherlands. Currently, I train a bunch of children to become a lifeguard. A few years ago I launched a Dutch website to promote the sport, but I haven’t updated it in a long while.
• Last year I finished my high school. I now study Artificial Intelligence at Groningen University, and I really like it so far. Since AI is a broad subject, I don’t really know what I’m going to do later. It can be robotics, but also something more close to the subject of ‘Internet’.
• I like watching movies, and don’t really follow series. Since it became more of a habit to watch several movies a week, I recently started collecting and rating them on this webpage. An actor I really like is Edward Norton. He has portrayed several characters extremely well, so it is a pity he hasn’t won an Oscar yet.
• I have a weird habit to say a word or sentence for a few weeks after I heard it or made it up. Sometimes it comes from a movie, sometimes from someone else. It is really annoying for people in my surroundings (sorry!). Problem is that it keeps going on and on with a lot of different sentences over the years.
• The Rubik’s cube is my slave. I can solve it, but not extremely fast: in about 40-45 seconds on average. Unlike most people think, it is quite easy to solve. The hardest part is solving it fast. I very recently started this list of Rubik’s cube appearances in feature movies to combine cubing and watching movies.
• Liquids I drink often are—in no particular order—coffee, beer, water, milk and Taksi Tropical Fruit. The latter is only available in the Netherlands. It is a not really a fruit juice, but it comes close.
• From time to time I like to imagine the faith of people I meet on the street or in the train (a bit like in the movie Lola Rennt). Most of the times it is a nice way to make jokes of people anonymously.

So that’s seven things. If you have questions or comments, I hope the form below does not shy you away.

So it is my birthday today, I am 20 years old now. And because Kilian wanted me and other people to smile, I decided to give away a present that makes you smile, hopefully. Here it is.

How many browser users does it take to change a lightbulb?

• How many Microsoft Internet Explorer users does it take to change a lightbulb?
  None. The IE user just has to call someone who “does something with computers”, and shout “help, it does not work anymore”. That person has to come over to his or her house in order to solve this problem.
• How many Mozilla Firefox users does it take to change a lightbulb?
  There only has to be one smart guy who writes an add-on to change lightbulbs, to solve the problems thousands of other Firefox people have changing lightbulbs.
• How many Opera users does it take to change a lightbulb?
  One. Since Opera has a built in option to change a lightbulb as of version 2.1, he or she only has to navigate to Options->Change lightbulb or use CMD+SHIFT+ALT+L.
• How many Safari users does it take to change a lightbulb?
  Safari users are smart enough to change the lightbulb all by themselves, they don’t need their browser for that.
• How many Google Chrome users does it take to change a lightbulb?
  Google Chrome users can easily close the tab where the lightbulb was opened on, and restore it. They can also use light incognito.
• How many Netscape Navigator users does it take to change a lightbulb?
  Two, one to change the lightbulb, and another to control the switch to make the lightbulb blink.
• How many Flock users does it take to change a lightbulb?
  One plus a few friends, since he or she can easily ask other people how to change a lightbulb with the various community options built in the browser.
• How many Maxthon users does it take to change a lightbulb?
  Every Maxthon user has a custom mouse gesture for changing a lightbulb, it looks pretty much like an lightbulb itself. So the answer is: one.
• How many Konqueror users does it take to change a lightbulb?
  One, to look up a new lightbulb on their hard drive, or download an new one from the Internet.
• How many WorldWideWeb users does it take to change a lightbulb?
  A couple of thousands. They improve the concept of lightbulb by building a tunnel 100 meter underground in Geneva and throw a few elementary particles in there to make one massive source of light, heat and radiation.
• How many Lynx users does it take to change a lightbulb?
  None. They can’t see if the lightbulb is broken, so they don’t know it has to be fixed.

If you have any additions to this list, please comment here and maybe I’ll add them. (I would really like to add one for Mosaic.)

After having a non-blogpost-worthy summer, I attended Fronteers 2008 Thursday and Friday last. Some people might have known about that, but I didn’t announce that on this weblog. In this blogpost, I’ll mention the things I liked about Fronteers 2008.

Fronteers 2008 was held in Pakhuis de Zwijger, Amsterdam (actually a few hundred meters away from the place where the whole Fronteers idea was initiated last year). As I did some volunteering during the conference, I did not see every session.

Friendly URLs

During a session about The Dutch Web Guidelines, Koen Willems told us about friendly URLs. Now I think everyone knows the general benefits of friendly URLs. Luckily, Koen came up with something new: a technique to handle search requests with friendly URLs. So instead of example.com/search.php?q=awesomekeyword you’d have example.com/search/awesomekeyword.

The key is to redirect the first one to the second one on the server, that is just a few lines of code. With some unobtrusive JavaScript you could add a feature to do the redirection on the client side. In my opinion, it is a bit overdone to rewrite this kind of URLs, mainly because a search result page for a perticular keyword is not part of the hierarchy of the website.

Maintainable CSS

Stephen Hay talked about maintainable CSS. He bundled the oh-i-know-that-but-i-don’t-do-that parts of writing CSS in a nice presentation. Main point is setting up a good structure in your document: layout, color and type, eventually in seperate CSS files. Also setting up a good structure in you HTML will make maintaining your code a lot easier.

Actually I don’t really like the idea of separating the layout, color and type parts of your design. I think I will need to click more through tabs in my editor. “How do you write CSS?”, you might ask. After setting up a good structure in my HTML, I build the CSS in the same order. So header parts at the top, footer parts at the bottom. I indent the selectors for elements inside the parts of my layout. Your file becomes quite large if you do it this way, but combined with a good text editor it works like a charm for me.

CSS selectors madness

After partying on the boat Lizboa, I walked towards the train station with Bert Bos and some other people. Bert told us how CSS was initiated, and what the difficulties were in the beginning. He mentioned the idea of selectors, before the cascade was developed. It would be like this mad: If you have an element, and two selectors actually select that element, you will get an average of the properties that apply to those selectors. For example, if you have p {color:red} and body p {color:blue}, your paragraphs would be… purple.

Maintainable JavaScript

Christian Heilmann picked maintaining JavaScript as topic for his presentation. Luckily he didn’t introduce much new things to me. He told about separating parts in your application in functions, and then make some of the general functions available outside the application, and some specific parts not. So if you have a small function to convert seconds to minutes and seconds, you can write it in your application as one function. Then call it every time you need it. You then reveal the re-usable parts out of the script’s scope, because some other script on your website might use it as well.

Another good thing to use, is a configuration object at the top of your application, instead of using class names and ID values inside the functional part of your JavaScript. What I missed a bit over there, is that some configuration might be depending on the page your JavaScript is loaded. You could simply use attributes of elements inside your webpage, and read them out via JavaScript. An example is using a meta tags in your head, with some strings for messages you display. You can translate an HTML page (eventually in your CMS), and use the same JavaScript file over and over again. You can also use the HTML5 data attributes. (However, you’ll get an “invalid” HTML webpage. The validator at W3.org cannot handle custom DTDs). I will write an in-detail instruction on how to do all this in the near future.

Absolute positioning to the rescue

Several front-end people sometimes ask me: why do you use absolute positioning for this…? My answer always is: I do not want to change the logical order of the content in my HTML. This is exactly what Andy Clarke presented about. First, he defined all kinds of positioning in CSS. Then he gave some (beautiful looking) examples of general occurring cases where absolute positioning is better than floating elements all around.

Conclusion

Fronteers 2008 was a really amazing experience, if I may say so as someone who helped organizing it a bit. If you’re interested in the other sessions, you might want to take a look at the page where all slides are collected. If you have any questions about the conference or the topics I mentioned above, feel free to drop a comment below.

So, for those who missed it, I attended @media this year. I really enjoyed the great speakers, learned some more things about design and usability and met quite a lot people for the first time. But what did I like the most? Here some things I actually learned and liked.

The first presentation was by Jeffrey Veen, about how to design with and organize data in a clear way. It is a bit impossible to reproduce the key things in one sentence. In my opinion it is a good thing to give the user a bit control of the way the data is resented. That could be done by a table with the data, and also displaying a graphic representation. (To make it accessible, you could use a table, and turn that with JavaScript and canvas into a graph. Something I discussed a bit with Robert Jan later.)

Another presentation I liked very much, was about Mental Models. Indi Young did a really great job giving us an introduction into that. Basically it is about asking people what they feel about something (a website, a hotel, anything), and the things they expect of it. By grouping all those things, and combining that with parts of the subject that support those feelings, you can quite easily see what kinds of things need to be changed to achieve a better experience for the clients or users. She has also written a book about it, and I put that one on my wishlist.

Andy Clark did a design presentation, wherein he explained in a very good way how he got inspiration from comic books for his designs. I think it was a good topic and it can be applied to other creative things, too. The essence is to understand really good what the original creator wanted you to feel or do. If you want to achieve the same with your website, it is a matter of applying the method used.

For me the presentation by Dan Rubin was very educative. As a developer, primarily, I don’t really have much experience in adding details to the designs I create. He pointed at a lot of things I really wouldn’t come with by myself.

Although I didn’t really learn much from the presentation Steve Faulkner gave on WAI-ARIA, it was good to be part of the audience. He introduced ARIA, the way to make applications accessible by applying some attributes to input elements. He clearly demonstrated what the benefits are, by using JAWS to demonstrate some simple applications that use ARIA. (A good point to start with ARIA, is the documentation at Mozilla.)

A great speaker was Richard Ishida, who demonstrated Unicode as a tool for creating an international website. He didn’t tell anything new to me, made very clear for everyone in the audience why and how to think good about i18n before you start to build the website. It was really a pity he couldn’t present a part of his presentation (not enough time).

So, that were the most interesting parts for me. I hope to attend @media next year again, I’d really love to see more presentations like these.

Something that has annoyed me lately, is how in-accessible some web sites are for people who browse using their keyboard. Number one issue is, in my opinion, that some people simply remove outlines from links. Outlines are those gray borders around links when you click on them. But is is very okay if you remove outlines for some links, but only if you add a proper focus state to that link.

Let me give an example first. The first menu has a nice hover state. The second menu also has an hover state applied to it, but also hides the outline. Some designers dislike the outline, and try to hide it. Also some CSS reset methods (like the popular reset method by Eric Meyer) ‘reset’ the outline.

To be better accessible it is good to declare a focus state for your links. Focus states are, like hover states, a pseudo-class for CSS, which you can apply easily. If an element can receive actions with a keyboard, the state’s properties are applied. Think of typing into a text box, or hitting space when you use tab to navigate.

You could, for example, declare both focus and hover in one selector, using a comma to separate them. See this example. It should be noted, that I change both the color and shape of the element. This is done for people with a color deficiency, because if you use (slight) color changes the link would be much more difficult to recognize by colorblind people.

If all was that simple.