I just published a new longer article (40 pages) trying to explain the differences between DHTML and DOM scripting. The article explains what DHTML, the DOM and DOM scripting is and shows how to create a web page with dynamic elements like tabs, a slide show and a big product shot in both ways.

• Check From DHTML to DOM scripting now

The DHTML explanation is annotated with explanations why some of the techniques are a bad idea and the DOM scripting version explains why some of the assets are good ideas. As a summary:

DHTML issues:

1. Script dependence – Users without JavaScript get stuck or get elements that only work with JavaScript but don’t do anything for them.
2. Mixing presentation and functionality – If you want to change the look of the effect you need to hack around the JavaScript.
3. Assuming functionality without testing for it – what it says
4. Keeping maintenance JavaScript based – Maintainers are expected to change the script when they want to change the effect, and search through the whole script.
5. Mixing HTML and JavaScript – what it says
6. Blaming the user – Users get messages like “you cannot use this as your browser doesn’t support it, update your browser” instead of just not getting the functionality if it is not 100% necessary.
7. Taking over the document – one onload to rule them all

DOM scripting assets:

1. Progressive Enhancement – check if things are available, then apply those dependent on them
2. Ease of maintenance – keep the maintenance as easy as possible via dynamic CSS classes and properties at the beginning of the script
3. Separation of Presentation and Behaviour – add dynamic classes instead of changing the style collection
4. Separation of Structure and Behaviour – use dynamic event handlers and generated elements instead of onclick and NOSCRIPT
5. Using modern event handling – more than one onload please
6. Avoiding clashes with other scripts – avoid global variables and encapsulate functions as methods in an object

Of course, you can disagree :-)

As part of my book, I am right now writing the “common uses of JavaScript” Chapter, and this morning a request by Michel Bozgounov on the CSS-d list tickled my fancy.

He wanted an easy way to show slightly larger images when clicking on very small thumbs inside a page. While his solution would force visitors to load all the images (including the large ones), I quickly put together a solution that only loads the larger images in the same list when JS is available.

• Check out Minislides – inline slide shows with DOM and CSS

This is only a beta and a freebie. The full version with explanations is part of the book and I cannot give it out (yet) as it will be part of the whole copyright and all that Jazz.

Enjoy, and hopefully you find it useful.

As much as I am annoyed with the web2.0 hype and a lot of products that are just clones of others (how many RSS readers are there?) I just had an epiphany of sorts when I was on the client site and had to do some work without my trusty laptop with Photoshop, Homesite, Word and all the other goodies.

It is pretty amazing how efficient you can work without your local software when you use what the web offers you:

• Writely allows for uploading word documents, changing them and saving them again (this has been bought by Google, so some privacy fanatical people might object to it). Works good for simple documentation, but of course it seems to break makros and change tracking
• Pixoh allows for uploading, cropping, resizing and turning pictures and saving them in an optimised fashion.
• Meebo is a browser interface for all of the Instant Messaging Networks out there and allows you to stay in touch with your work mates without installing MSN, Yahoo or AIM.
• Openomy allows you to store and share files with work mates (and stop you from abusing your personal FTP)

What I haven’t found yet is a cool online code editor that would allow me to upload JavaScript, HTML, PHP or CSS and edit in a color coded fashion. Has anybody web2.0-yfied the portable NVU yet?

Some good lists of Web2.0 apps:

• Best web 2.0 software of 2005
• More great web 2.0 software

And in case this bores you and you need the lighter side of the idea:

• Web 2.0 validator
• Beggr
• Isolatr

This is nothing groundbreaking, but a thing I realised when checking some of my older scripts.

When it comes to hiding a lot of elements via JavaScript and CSS we tend to loop through and apply a class to hide them:

HTML:

<div id="sections">
<div>
<h2>Section 1</h2>
[... content ...]</div>
<div>
<h2>Section 2</h2>
[... content ...]</div>
<div>
<h2>Section 3</h2>
[... content ...]</div>
</div>

CSS:

.hide{
  position:absolute;
  left:-999em;
  height:1px;
  overflow:none;
}

JavaScript:

var s=document.getElementById('sections');
if(!s){return;}
var divs=s.getElementsByTagName('div');
for (var i=1;i
var& s = document.getElementById('sections');
if (!s){ return; }
var divs = s.getElementsByTagName('div');
for (var i = 1;i < divs.length;i++) {
  divs[i].className='hide';
}

We can avoid this loop by using the contextual selector in CSS in conjunction with one dynamic class:

#sections.dynamic div{
  position:absolute;
  left:-999em;
  height:1px;
  overflow:none;
}

We need the dynamic class to avoid us using CSS to hide things and JavaScript to show them, which is just not safe as either of the two might not be available. Instead of the loop all we need to do is assign the class to the parent node:

JavaScript:

var s=document.getElementById('sections');
if(!s){return;}
s.className='dynamic';

In the script that should show one of the elements we apply a class that overrides the initial hiding:

#sections.dynamic div.show{
  position:relative;
  left:0;
  height:auto;
  overflow:auto;
}

This does not only mean that we spare us the looping, we also keep all the look and feel in the CSS.

Just when I thought I am going research crazy I stumbled upon the AJAX/DHTML library scorecard at musingsfrommars.org.

The article reviews a lot and I mean a lot of DHTML/AJAX/JS libraries and categorises them into grades how cross-browser they are. If you want to pick a library to use instead of rolling your own solutions and you don’t want to leave a certain number of visitors standing in the rain, check this scorecard beforehand.

Great job!

The only annoying thing is the page itself. I’d have liked to print the lot out, but it won’t do that on Firefox.