Are you coding obtrusively?

by keif on November 11, 2008

“Power tends to corrupt, and absolute power corrupts absolutely. Great men are almost always bad men.”

-Lord Acton, in a letter to Bishop Mandell Creighton, 1887

I’ve noticed a disturbing trend that I myself have fallen victim to. I’m seeing sites coded where we do more in javascript for our styling needs and interaction, with no fall back support for non-javascript users. Styles are called explicity from javascript (which requires a lot of transversal to find out “is it this #000 or that #000?”). onclick events. Onblur. Really?

Use the power of your framework!

Don’t do the work if you don’t have to!

For example, mootools allows us to grab any item on the page and add events to it:

[sourcecode language=’javascript’]
$$(‘a’).addEvent(‘mouseenter’,function(e){
alert(‘you entered the anchor!’);
});[/sourcecode]

Why stop with one event?

(straight from the mootools documentation!)

[sourcecode language=’javascript’]
$(‘myElement’).addEvents({
‘mouseover': function(){
alert(‘mouseover’);
},
‘click': function(){
alert(‘click’);
}
});[/sourcecode]

Using mootools we can make our code totally unobtrusive. No more onclicks littering the pages. We can leave the HREF tag pointing to static pages. We can inject elements on teh fly, so if someone doesn’t have flash/javascript we don’t show certain elements:

[sourcecode language=’javascript’]
// don’t have flash?
if(Browser.Plugins.Flash.version !== 9) {
// hide stuff!
$$(‘.flashNeeded’).setStyle(‘display’,’none’);
// show stuff!
$$(‘.noFlashNeeded’).setStyle(‘display’,’block’);
}[/sourcecode]

The same idea can be done for javascript detection – we only show certain elements if javascript is present, so we do element injection.

But not to forget our jQuery bretheren (we’re all one big family)…

Let’s do the same in jQuery!

[sourcecode language=’javascript’]

// single event
$(‘a’).mouseover(function(){
alert(‘you entered the anchor!’);
});

// multiple events
$(‘a’).bind(‘focus’, function(){
alert(‘focused!’);
}).bind(‘mouseover’, function(){
alert(‘moused over!’);
});[/sourcecode]

jQuery doesn’t do Flash out of the box…

At least, I can’t dig it up – but that’s not a bad thing!

The users of jQuery (A hearty, formidable group) have created the jQuery plug-in to detect flash versions!

It’s all a matter of preference and opinion and bias as to whether it should be included with the main library or not.

The Framework Wars are dead.

We see similar abilities in all the frameworks – and instead of bickering about “being the best” we should work on contributing and learning these frameworks.

Toby Miller put it best – “One framework at a time, please!”

One framework at a time, please!

One framework at a time, please!

You wouldn’t hand-over JSP code to a PHP client, would you?

I really hate stumbling on sites that think just because there is a “no conflict” version we should just jam as many frameworks together that we can. That, to me, defines a lazy developer. I fight that battle – instead of being lazy and saying “I know this one better, so let’s turn no-conflict on” we should instead be saying “the client uses library X so we should develop accordingly – even if that means learning a new code!

Comments on this entry are closed.

Previous post:

Next post: