Archive for December, 2006

Replying to comments on my 24ways article about YUI Grids, I had occasion to mention the two things to consider when choosing good class and ID names. I want to write more on this, but for now wanted to cross-post my quick note:

Regarding class and ID names:

Names should not be based on appearance, but on meaning. For maximum extensibility, choose names that express semantic meaning (derived from the element’s content), and/or structural meaning (derived from the element’s role in the DOM’s tree). Good structural names include “footer” and “module”; good semantic names include “price” and “date”.

The alternative, what-it-looks-like names such as “left” and “doc950px”, is contextually brittle (i.e., mobile) and temporally brittle (because things change). These are the same reasons professional consensus says class=”redButton” and class=”smallBoldVerdana” are undesirable.

For those of you not reading 24ways each day this month, allow me to point out that I wrote a tutorial for it that’s live right now. It’s called Intricate Fluid Layouts in Three Easy Steps, and teaches you how to build CSS layouts that work on all modern browsers effortlessly using YUI Grids. Enjoy!

Also, I suppose I should let you know that I’m flying out on a redeye flight tonight to start my winter holiday. I hope to write once more before shuttering things, but if I don’t get a chance let me be among the first to wish you a very happy new year.

Divitis refers to the misuse of the DIV element in markup. Too often, sites are converted to tableless by blindly substituting a <div> for each <td> and <tr>. Related afflictions are widespread: one prominent news site wraps each “paragraph” of content in a <div class="p"> element. This pointless mess isn’t an improvement, and tastes as bad as yesterday’s tag soup.

Markup’s job is to generously impart meaning. This principle of “meaningful markup” is core to Web Standards’ ethos. Divitis misses it completely.

But not all DIVs metastasize into divitis.

According to the authoritative W3C spec, DIVs are specifically designed “for adding structure to documents.” Reasonable examples include encapsulating distinct modules (e.g., this is the weather module; this is the module’s footer region) and grouping together modules that live in the same structure (e.g., these modules belong to the secondary group/column). This is the appropriate use of the DIV element.

If one pillar of the Web Standards pantheon says markup should exclusively describe content, the other pillar says presentation instructions belong to CSS exclusively: Markup denotes structure, while CSS renders it. Sometimes structure and page layout feel more like presentation than content, but in truth it is equal parts both. Structure communicated in markup - even when the structure is ultimately expressed visually - is the appropriate use of a DIV.

Heather Champ announced yesterday on the Flickr Blog good news for Flickr users Past, Present, and Future. If you’re an existing regular user, your upload quote rose from 20mb to 100mb. If you’re an existing Pro user, your upload quote rose from 2GB to Infinity. If you’re not a current Flickr user, it just got easier for people to gift accounts to you - and no longer just upgrades to pro.

Thank you Flickr!

Daily Kos posts aerial imagery of the Darfur Genocide from Google Earth. A few clicks later I’d found The Darfur Wall prokect, and lit #193 (You too?). O’Reilly Radar has a bit more info on the few-weeks-old Wall project. (60 Minutes ran eye-opening coverage in October, titled Searching for Jacob.

If you’re in the holiday spirit, there’s no better place than Kiva.org, where you can make an individual’s dream come true for as little as 25 bucks. Kiva’s definitely my favorite site right now - an excellent realization of the world-changing power of the Internet.

I’m back in my suite at Ceasar’s in Vegas, having just finished presenting my third of three talks at the Web Builder 2.0 conference. Yesterday I presented two talks: my Accessible DHTML talk, and my Yahoo! vs. Yahoo! DHTML Case Studies talk. Today I presented a new talk titled Inside the Yahoo! User Interface (YUI) Library. All three seemed well received, and it was an honor to have a packed room for each. I met lots of great people, and am looking forward to following up with all the new people I met. (Please drop me a note if I didn’t get your email address!)