wnas

As I am working on the questions for the written part of the ‘fronteers certification‘, I had (and still have) a lot of difficulty in deciding the level of questions that would be appropriate. To easy is not good, but to hard would also be bad. So how does one figure out the correct level is on questions. One thing is certain, not by himself that is.

That is why we had a test exam a couple of weeks ago, we learned a lot from that. As that how you ask a question is as important as the question itself. If you have a question that can be interpreted a little bit different, people will. Test subject were every bit like clients in that respect, I can tell you that much. Thank god that we have one teacher in our midst, he will help a lot in that respect…

So for your amusement, I will present a couple of questions to you, some that made it to the exam, some that didn’t. If you want to take those as a quick test I would recommend that you would take them without google assistance, as that would be the case in the real world…

CSS 2.1

1. Welke kleur wordt de paragraaf (p) met deze CSS.

   What color does the paragraph (p) become with this CSS.

   p { color : red; }
   body p { color: green; }
   .foo p { color: black; }

   
   red
   
   green
   
   black

2. Welk element wordt rood, met deze HTML,

   Which element(s) becomes red with this HTML,

   p ~ div + h2[title] { color: red; }

   En deze html

   <p>paragraaf</p>
   <div>division</div>
   <h2 id="a">heading A</h2>
   <div>
   	<h2 id="b">heading B</h2>
   </div>
   <h2 id="c" title="title">header C</h2>

   
   heading A
   
   heading C
   
   heading B

3. Hoe breed is deze div in totaal, met deze CSS?

   How wide is this div, with this CSS?

   div { width : 100px; padding: 10px; border: 1px; }

   
   100px
   
   111px
   
   122px

XHTML 1.0 strict

1. Welke tag geeft een geordende lijst?

   Which tag creates an ordered list?

   
   <ul>

<ol>

2. Is de onderstaande code valide XHTML 1.0 strict ?

   Is this code valid XHTML 1.0 strict?

   <img src="foo.gif" title="title / description" >

   
   ja
   
   nee

3. Waar staat de dt tag voor?

   Where does the dt tag stand for?

   
   document type
   
   definition term

HTML 4.0 strict

1. Is de body tag verplicht?

   Is the body tag required ?

   
   ja
   
   nee

2. Is de afsluitende /p tag verplicht?

   Is the closing /p tag required ?

   
   ja
   
   nee

3. Is deze html valide HTML 4.0 strict?

   Is this HTML valid HTML 4.0 strict?

   <TR width=100 >

   
   ja
   
   nee

All of these questions are right out of the specifications of the W3C as those are easily testable and not open to discussion.

What do you think, are these questions too easy, too hard or something else. Please let me know, I will try and put a full exam online in working order before Fronteers 2008 but as things are going now, I probably won’t have the time. This because I will leave for london and @media ajax only two days after fronteers and still have some clients to keep happy…

I am very proud to announce that I got my very first speaking spot on a conference. I will be participating in the panel on the Professionalism secondary session with Chris Mills. I am looking forward to this as much as I am nervous.

I have yet to work on my slides, but will be talking about the certification work we have done with fronteers. And about what I do in daily life to get developers on the same line, concerning web standards and best practices.

Chris will (propably) be talking about the work done at opera on the Web Standards Curriculum.

As this is an q and a session, presentations will be short so their will be plenty room for questions and or suggestions. So if you have any of those, please come and help us out. After all, the work we do is for the whole community and we need your input.

Watch this site as I will put up the questions of the first test exam before the conference, so I can get some valuable feedback.

With wordpress releasing an app for the iPhone it has done a thing for quick microblogging.
After a couple of days with the iphone, I have to say I like it a lot. But I am less than happy with t-mobile…

The past few weeks I had a lot of fun playing with jQuery UI for a client. They wanted to replace some elements in an application, sliders and such, with a more accessible solution. For that I turned to jQuery UI, as I had previously introduced jQuery as the standard javascript library for them.

As I started to play with the code I couldn’t helped but be impressed by the great work that has been done by the UI team on this project. But as I looked at it more closely I found some things that could be improved.

So here are some of my grieves with it and a possible way to solve them. I am going to concentrate on the slider ( docs / demo ), as it was with that widget that I started to notice some things missing.

The way you use it is in a true jquery fashion nice and unobtrusive, once you have included the correct javascript files (for that see the documentation), you just do:

$("#slider").slider();

And shazaam, #slider has turned into a slider, nice… But, what happens to the input that people provide…

This solution is nothing without javascript, so in my book it is a nono. I can not imagine that I could use this widget on my sony erikkson k800 phone. So accessible it is not, at least not in the way the demo shows us. And as most people will just copy and paste from demo’s, most sliders will not be accessible.

So what you say, a slider can never be accessible, rubbish I say. Stick with me and I will show you a very simple way to make this accessible. And in a few day I will put up some example sliders to accompany the code as suggested by Danny Lagrouw.

Read the rest of this entry »

Chris Mills of opera has just published great resource for web developers. In this he talks about best practices and tries to get people to unlearn stuff like:

In the old days, people used to do things like laying out their web sites inside giant tables, using the different table cells to position their graphics, text etc (not what tables were intended for, adds superflous markup to the page). They used to use invisible images called spacer GIFs to fine tune positioning of page elements (not what images are intended for, add superfluous markup and images to the page).

So go and check it out, it sure is a great resource and will get better.

Introduction

The past 9 months I have had the pleasure and the privilege to work on one of holland’s biggest websites, ANWB.nl. I had a lot of fun and learned a lot. I also had the pleasure to work with a great team and I thank you guys, you know how you are.

As this was the biggest jobs I have ever done, I will take the time to share my experience with you.

Read the rest of this entry »

Autotab

I recently came across a itch in jquery plugins. They are too well written, with tons of attributes and files to edit in order to configure them.
I don’t want that, so I wrote a simple plug in just for auto tab.

HTML

The itch was caused by a project where the client wanted three fields for the date and wanted autotab from day to month to year. After that the user should tab himself further… I searched for a plugin as I am a lazy bastard, but the plugins available where too much for me. Some even had me giving id’s to the input fields, something that I could not do as they are placed by jsf that generates id’s for you. So I wanted a simple solution based on my situation, which is not an uncommon one I think.

I have three input fields on the page, with maxlength attributes so that the user could not enter wrong dates.

<input type="text" maxlength="2 />
<input type="text" maxlength="2" />
<input type="text" maxlength="4" />

As a user would want to have autotab on the page they would have to change the html to have a class of autotab on the input’s that he wanted to have autotab, like this:

<input type="text" maxlength="2" class="autotab" />
<input type="text" maxlength="2" class="autotab" />
<input type="text" maxlength="4" />

Note that we need the maxlength attribute to make this work. I will explain later why…

All a user has to do to use the plugin is, include jquery on your page and the plugin, than write in you own code in the document ready function:

jQuery(document).ready(function() {
  jQuery('input.autotab').autotab();
});

Presto you are done, let the script take over and relax.

the plugin

The plugin works like this, first we define that it is a plug in, something that I picked up reading this article.

jQuery.fn.autotab = function (){

Then we set it up to trigger on key up, as we need to measure the amount of code entered after his input.

 jQuery(this).keyup(function(e){

We then set up a couple of keys to be ignored as the only get in the way. For instance, if you let the tab key trigger the function it will not let you enter the field using shift tab. So no undo for you buddy…

switch(e.keyCode){
    // ignore the following keys
      case 9: // tab
        return false;
      case 16: // shift
        return false;
      case 20: // capslock
        return false;

Once we have that sorted, we can decide it is time for action, so we will begin

default: // any other keyup actions will trigger 

First off we read out the maxlength of the targeted element and put it into a variable

var maxlength = jQuery(this).attr('maxlength');
        // get maxlength value

Once we have the maximum of characters, we seek the current amount entered. (here is why we do keyup instead of keydown.)

var inputlength = jQuery(this).val().length;
        // get the length of the text

If the amount of characters is equal or more than the max length

if ( inputlength >= maxlength ){
          // if the text is equal or more
          // than the max length

Set the focus on the next field

jQuery(this).next('input[type="text"]').focus();
          // set focus to the next text field

Enjoy

Go and get the code with comments here or minified, let me know what you think of it…

And thanks for reading this far…

Technorati Tags:
javascript, jquery, userinterfacedesign

Nowadays, everybody has (or should) heard of event delegation, the new gray in javascript. It has many advantages, such as cutting down on the event handlers javascript needs to set on a page. But there is one advantage, that not many people talk about. So I will.

First we will start with the most talked about stuff, to refresh your memory, or to give you a short introduction in the matter. In short there are two kinds of calling your events from your html, inline scripting and unobtrusive javascript. The latter has a variation called Event Delegation.

Inline scripting is the one we all know and the one that is not considered Best practice anymore. What you do is call the event from inside your html, like this:

<li onclick= "alert('foo');">inline script</li>

The disadvantages of this are multiple, one is maintenance, file size is another.

The correct way to do this, as all the cool kids know, is with unobtrusive javascript. That way you have smaller file size, easier maintenance and so on. So what you do in html is:

<li>foo</li>

And you set your events with the javascript on load, page ready or what not:

// go through the dom and attach a click on every li
jQuery('li').click(function(){
	// do something when clicked.
	alert('foo');
});

This is a step up, but it has a couple of disadvantages. As the number of event handlers grow, the time needed to add them increases. Not that this is a problem on any real browsers, but as long as IE6 continues to be used, you have to work with slow browsers. Enter Event Delegation.

With event delegation the amount of events you have to attach shrinks by a lot, as you can put them fairly high up, like on the body. So with identical html, in your javascript you do something like this:

// attach a click handler on the body (one)
jQuery('body').click(jQuery.delegate({
	// when a li is the event target do stuff
	'li': function() { alert('foo'); }
}));

This generates only one event handler, making it way faster another advantage of event delegation comes into play when you add elements to the dom, you don’t need to attach the events again, as the handler is attached to a higher level.

So here is the deal, not only you get less code, you get even lesser code. Everybody wins!

Here are some links about event delegation should you be wanting to know more… (you can always ask me on twitter).

• Christian Heilman
• Dan web on event delegation with jQuery
• Without a library.
• And ofcourse ppk goes over the top…

Here are the files I used for testing, first the inline scripting example, than the unobtrusive javascript one and last but not least the one with event delegation, have fun researching…

Technorati Tags:
javascript, event delegation, jQuery, unobtrusive javascript

Today I will go to @media (again) hopefully I will meet lots of old and new people. Surely I will have a blast and learn a lot.
Anybody who wants to meet up, contact me or use twitter, see ya.

Update

I went and I enjoyed it. I had a great time and talked with a lot of smart and fun people, some were event speaking on stage! London I will see you in september, as I just booked @media ajax…

Technorati Tags:
@media

Because it is friday and I am working,

• Homer simpson
• does web site need to look the same in every browser.
• is it IE…
• is web equal to print

I will put up a decent post when deadline season is over. Should be in a couple of weeks…

Technorati Tags:
browsers, css, Internet Explorer