Archive for April, 2009

I Still (Heart) RichInStyle

I’ve been perusing a lot of job postings, which is, I know, inefficient, if my goal is to find a job, but it’s interesting to see what employers are putting in their requirements.

More and more frequently I’m seeing a call for skill with frameworks–not just for Ruby on Rails or Prototype, but also for CSS. There are by now a few of these to choose from: the skins for the Yahoo! User Interface Library, Blueprint, Nicole Sullivan’s “Object Oriented CSS” (excellent work, but oh! for a less trendy name), and so on. All of them: good to use. But it depresses me that employers don’t want to hire someone who can develop CSS by hand.

Hand tailoring
Photo by Bradley Allen

I’ve barely used any of the frameworks; I haven’t needed to. I guess I’m like a Savile Row tailor in preferring to make my own measurements and to follow my own procedures. But I can’t really say “my own,” since I was the benefactor of other CSS developers, those who worked in the earliest days of the technique—Web 0.9?—and discovered its patterns.

One of these pioneers was Matthew Brealey, who contributed to the W3C CSS discussion list. In between posts he maintained RichInStyle, a one-man compendium of frontend development tips and tutorials; I had it bookmarked, if not always open in a separate browser window. Brealey somehow had the time to investigate the browser support for every proposal in the CSS 1 specification; generously, or self-aggrandizingly, he posted his findings.

He also devised a way of writing a stylesheet that, with few adjustments, I still use. Brealey’s “Masterclass” show signs of age (remember uppercase element names?), but outlines one of the most logical ways to write CSS I’ve seen yet.

A couple of his most enduring principles are, simply:

  1. Use the cascade. Start with the most general rules at the top (HTML elements), and only then follow with those for classes and IDs. Put the toughest cases–the most obstreperous browser hacks–at the bottom of the CSS text, processed last.This rule seems obvious, but I can’t believe how many stylesheets I see beginning with class or ID rules.
  2. Ease human usage of the stylesheet with alphabetization. Brealey wrote before we had Firebug, or even View Formatted Source. Yes, we were flying with instruments in those days; you never knew where that pesky text color was coming from, nor why your document’s h3s were in italics. But a stylesheet organized as Brealey proposed gave up its secrets more readily: the rule for h3, for instance, would be reliably beneath that for a and above that for p, and its font-style would be beneath border and above margin. Maybe the importance of this approach has diminished as far as debugging goes, but it still shows thoughtfulness, the developer’s hand.

Developed by hand, old-fashioned; an artifact, not a commodity. Sure, I’m biased in favor of hand-tailored CSS, but then I’ve seen nothing but benefits from its skilled usage. Note “skilled.” It’s thanks to Matthew Brealey and others like him that I know what that means.

In Praise of dl

Consider the task of delivering this:
heading-and-data

It’s a construct you’ll see everywhere on the Web: a text heading in bold type, with perhaps some background styling, and subsidiary text beneath it, often styled a little differently, such as in a lighter font style. The heading and the content beneath it seem to be related; visual design can give more evidence of that relationship with flourishes like the gray border enclosing the text blocks in the example above.

So how is this very ordinary construct expressed in HTML? Sadly, often in the most verbose, inflexible ways possible.

For instance:

<p>
	<strong>
		Heading
	</strong>
</p>
<p>
	Stuff under heading
</p>
<p>
	Stuff under heading
</p>
<p>
	Stuff under heading
</p>

Or:

<div class="heading">
		Heading
</div>
<div class="data">
	Stuff under heading
</div>
<div class="data">
	Stuff under heading
</div>
<div class="data">
	Stuff under heading
</div>

Or even (shudder):

<table>
	<tr>
		<th>
			Heading
		</th>
	</tr>
	<tr>
		<td>
			Stuff under heading
		</td>
	</tr>
	<tr>
		<td>
			Stuff under heading
		</td>
	</tr>
	<tr>
		<td>
			Stuff under heading
		</td>
	</tr>
</table>

Why? There’s an obvious solution in dl, which has been in the HTML specification since, for crying’ out loud, version 2.0. All you need to express this particular data structure are dl, its subsidiary elements, dt and dd, and basic CSS skills.

<dl>
	<dt>
		Heading
	</dt>
	<dd>
		[Stuff under heading--
		express each as paragraphs, list items, or other elements]
	</dd>
</dl>

Advantages of this approach include preserving an obvious heading/data relationship between those elements. If there is a situation in which your CSS does not render, user agent defaults will still indicate this relationship. For instance, in Firefox, the content enclosed in dd will have a slight indent from the left margin of dt. In screen readers, the dl will be announced as a definition list, and its numbers of items (dd) reported as well, which helps non-visual users understand where the list begins and ends.

Another advantage is flexibility in styling. There’s nothing intrinically presentational about dl, unlike strong or tr; indeed, you can make the same construct look very different with very simple CSS:

Three ways to style a definition list

Three ways to style a definition list


So why is this marvel of semantic markup so underused? Do we really prefer typing in strong? Is it human nature to take the long way? Has the div Element Marketing Association been extraordinarily successful?

Please tell me why.

5 Things I’m Doing Nowadays Instead of Working

So, you might’ve been spending the last year or so snoozing under a stalactite in Mammoth Cave, and completely missed the near-hourly utterance of the word “recession,” and now you’re a trite confused that so many millions of Americans with good educations, impressive experience, and opposable thumbs are unemployed. In fact, you could’ve surfaced a few months ago and been confronted with the same puzzler, even the same zombie battalion of former job holders. But not all of us are weathering the economic downturn with Red Vines and Snuggies. Some of us are keeping busy; almost too busy to work.

5 Things I’m Doing Nowadays Instead of Working

  1. Getting my command of JavaScript from 30 to 60. I can write state-of-the-art scripts—for 1998. Rather than continuing to embarrass myself with inline onclick handlers and overdependence on alert() for debugging, I’m devoting extra time to reading everything and anything written by Chris Heilmann and Peter-Paul Koch.
  2. Playing with all those advanced techniques customers never request. To date none of my clients have paid me to use any of the goodies from GitHub or Google Code or the multitude of promising APIs; instead, my workdays are devoted to treating float drops in IE 6 and the like. Now, with only myself to please, I can spend time on more challenging tasks at the keyboard.
  3. Thinking of going back to school. I spend much of my time reading about the built environment, and all of my time using it. I’ve been interested in architecture for many years, yet have no training in it; haven’t worked in the field at all. So what better time to seek retraining than the unbillable present?
  4. Avoiding the news. I stopped my hourly visits to the Web sites for the New York Times and the San Francisco papers because I suspected I was getting too distressed by the dismal stories I read there. I was right —my mood brightened once removed from the daily downbeat. I’m still informed of the things really important to me, and free from concern about those which aren’t.
  5. Going outside. One of the biggest stressors for me when I’m fully employed is that I’m not able to go outside very much during the daytime. Now, with no hypertensive project managers or overdemanding clients to rebuke me, I’m spending a lot of mid-days running, bicycling, or hiking. It’s a pity that work (unless you’re a bike messenger or park ranger) is so often structured to be incompatible with these activities, which are probably the easiest way to regain your enthusiasm for life.

What are you doing instead of working?