Following a thread on the evolt list about reading the next sibling element of a current element and making sure it really is an element and not a text node (line break), I decided to add a small helper object to my upcoming JavaScript book that takes care of some of these issues.

Give it a try: DOMhelp

My questions now are:

• Is that something that really can help save beginners frustration
  about different browsers and DOM oddities?
• Is it pretty bullet proof?
• can you think of other methods that should be in there?

I promise to add a greeting, should you come up with something I
forgot or find out I did wrong. I don’t get many free copies though…

:-)

I am aware that there are a lot of libraries already out there, but
most of them are just too massive to use in a beginner book.

I had some people complaining about the price for accommodation in London. Well, it is true, this city is bloody expensive, but if you are not too afraid to rough it a little, and you get together and book a room for more than one or two people the Generator Hostel at Russel Square is cheap and good to use.

12 people could share a room for £12.50 a night each for example.

I have a 6×1.5m balcony, in case you want to bring a sleeping bag.

Sending Form data to the server can be achieved in several ways, all of them with their pros and cons. It is especially tricky to create a form that has to be accessible, look great and allow for internationalisation (i18n). This post discusses the different options and offers a JavaScript that works around most issues.

The most accessible and least pretty way to submit a form is via a submit button.

Pros:

• they resize with the font settings
• their text content is determined by the value attribute, therefore it is is easy to localise them

Contras:

• You cannot style them consistently across browsers, and they cannot get rollover states ¹

The other option is to use an input element with the type “image”, which enables you to use any image to submit the form

Pros:

• You have total control over the look and feel

Contras:

• Whilst applying a proper alternative text makes the images accessible to blind visitors, images don’t scale when the font size gets changed, which means they are not 100% accessible.
• i18n can become a maintenance issue, as you need to create (or automatically generate via the backend) images for each language.

Together with JavaScript, text links can be used to submit a form.

Pros:

• You have total control over the look and feel
• Text links scale with the font settings
• i18n is dead easy, as it is text content of the page, not even alternative text in attributes

Contras:

• requires JavaScript to work

Putting them all together

If you use a small JavaScript to check the document for submit buttons and dynamically replacing them with text links, you’ll get the best of both worlds:

• users without JavaScript will get normal submit buttons
• users with JavaScript styled text links.

See the demonstration page and try it alternately with JavaScript on and off.

The script that replaces the submit buttons uses Unobtrusive JavaScript and allows you to define a special class to add to each of the replacement links. The links will also have the same ID as the original submit button and their value as text content.

Feel free to use it and report any issues/problems here.²

¹ It is debateable if you should design your own form controls anyways, after all the users knows how forms looks in their environment and some browsers/operating systems offer rollover states for submit buttons.

² One issue is that if you don’t have any submit or image button in the form you won’t be able to send the form by hitting the enter button on the keyboard. To counterwork this you might want to add another image button or alter the script to hide the submit buttons instead of replacing them.

I spent Christmas at my parents’ and went through some of the old paperwork to see what can be ditched. One of the contracts I found dated 1996 and was my application to start a web design business.

I remember clearly that back then the government agency dealing with new businesses asking me if “web design” is a craft, and if what I am doing is weaving nets in a beautiful manner. While that left me speechless back then I realize now that there is a lot craftsmen and old trades can teach us as web developers.

I jobbed a lot as a bricklayer, painter and plumber amongst other things and learnt one thing pretty soon:
Although you think you are dead clever and the people you have to work with might not be your cup of tea when it comes to enlightenment about equality or politics – in their area of expertise you can learn a lot from them and you know less than they do. A lot of times higher school education leaves us with a lot of knowledge, but not much practical thinking. Simply by listening you can prevent making an idiot out of yourself or work hard without getting the job done. (more…)

This question pops up almost weekly on message boards, mailing lists and in chat sessions:

How can I remove the ugly border around an image when it is linked?

I am amazed that this is still a question that needs to be asked, but the trick to remember is that when you put an image inside a link, like:

Then the browser puts a border around the image in the colour of the link. Therefore, changing the link border setting will not have any effect:

a {border:none; }

Instead, you need to set the image border to “*none*”:

 a img {border:none; }

It might be a good idea to define this as a preset in the beginning of your style sheet, to avoid the need to repeat it over and over again.

Also notice that the setting is “border:none”, which tells the user agent that there should not be a border – if you use “border:0” you expect the User Agent to know how to display a border with a width of 0, which might not be possible.

I hope that this is going to be a post to show up high in google sooner or later, much like the ugly yellow form fields one.