demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter.

featured articles

popular favourites

Four Principles of Effective JavaScript

Graceful degradation

If JavaScript is turned off, or fails to run, the user should still be able to access the site. (This is the same rule for and ). The user may not experience all the bells and whistles you would wish them too, but the basic functionality of the site should remain unchanged. Features that are heavily dependent on JavaScript should not be vital to one’s use of the site.

Progressive enhancement

JavaScript is used to enhance content that is already present, not create new content. For example, the navigation on the side of this page uses an “accordion” script written in JavaScript for its animation. That’s a nice feature to have, but if JavaScript is blocked, the user still has access to the entire navigation; without JavaScript, the “natural” state of the menu is to be completely expanded, showing all options.

Keep data, appearance and behaviour separate

Returning to our original table for the uses of web technology and adding to it:

Web Technologies
HTMLCSSJavaScript
contentappearancebehaviour (client-side)
“what something is”“how something looks”“how something acts on the page”
semantic markup of datarules for appearance of contentrules for the behaviour of content

Mixing the roles of these technologies leads to frustration and confusion.

Don't use JavaScript when CSS will do

Most web developers believe you have to use JavaScript to make an image gallery. You don’t. Most web developers believe that you must use JavaScript to create a drop-down menu. You don’t.

JavaScript still very much has its place and role: but with solid support for CSS Levels 1 and 2 in all modern browsers, you don't need it for many of the effects that people think the technology must be used to create. This becomes increasingly true with and , which have support for animation. CSS is, generally speaking, faster, lighter, and easier to code and maintain than .

You must be signed up in order to leave comments.

web developer guide

featured comment

by Aisling Brock in New Business Card Design

what i'm reading

A Feast for Crows: A Song of Ice and Fire: Book Four
A Feast for Crows: A Song of Ice and Fire: Book Four

what i'm watching

Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]
Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]

what i'm playing

Borderlands
Borderlands

what i'm hearing

Planets
Planets

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.