Two Banjos At Once: The Blog

Living with standards compliance

How to demoralize your front-end developers

October 2, 2009

Tags: , , ,

Stop failing at this apparently necessary chore; I’m here to help.  I can verify that all the following techniques have worked on for me.

How to Demoralize Your Front-end Developers

  1. Constantly change requirements. It’s, what, the day before the scheduled launch?  And the product doesn’t include that absolutely requisite feature you didn’t think to require until now?  Well, shoot, just demand it!  And make drastic changes to the visual and interaction design as well–where’s the glory in completion?
  2. Constantly change the visual design. You took that one-day course in CSS and remember only that it was a way you could change all of a site’s visual elements from one file.  Okay, then, let’s start by making all the blue things red, and all the red things green–but only on Tuesday–wait, change them back again, make the old red things red again–and oh, all the gray things white and the white things gray, and the grayish-white things brown, on alternate weekdays.  And all the wide things “smaller” and the narrow things “a little bigger” and the tall things “a smidge shorter” and… just marvel  how enthusiastic your front-end dev grows.
  3. Give them a lousy setup. Cram your developers into a spot at an unergonomic table in between the gal who has the obnoxious sound themes enabled on her workstation and the guy who spends his entire work day shouting into a speaker phone. Don’t let your devs use their preferred operating systems or software–point out that you’ve generously provided work computers exactly like your own, with that reliable ten-year-old OS and the proprietary groupware that cost you a bundle.
  4. Decide midway that you need pixel-perfection in IE 6 after all. So you visited your hermit, anti-consumerist brother-in-law living in a shanty with a hand-me-down Gateway 2000 accessing the Web over intermittent dial-up, and you looked like a putz because your beta site didn’t render perfectly in Internet Explorer 6.  Well, crack the whip so he can enjoy those rounded corners, PNGs with alpha transparency, and painstakingly mitered grid layouts.
  5. Critique the browser rendering against one in a different medium. Different media, you say?  Hardware?  Pshaw!  Do as I’ve actually witnessed:  hold a paper print-out of the intended design up to the monitor, and compare the rendered page unfavorably to the PDF print-out.  Remark on the differences in proportion and color.  Watch your devs writhe in either agony or amusement at your request to make the two formats identical.
  6. Assign visual design tasks to your developers. Get rid of that pesky professional, and go with a leaner team equipped with mere adequacy in Web design.  Start with vague instructions to your front-end devs (“This area of the page needs to really say ‘breathy,’ but not ‘vaporous’”), and end with your looming over them, jabbing at the display of a competitor’s site on a monitor, and shouting, “See? See?!  Like this–only different!”
  7. Pit your developers against each other. Break up that predictable day with a bout of office politics as bloody as any combat in the Colosseum!  Let one developer bully another, favor the least productive developer over the others, and disclose important project details only to the dev most likely to hoard the information.  When one dev leaves at 6pm to tend to the rest of his life, assign all his duties to the other one still in the office. Whatever you do, don’t let these people end up liking each other.
  8. Constantly interrupt with phone calls, e-mails, IMs, or in-person meetings. You know, if you give your developers the chance to concentrate, to get into the flow of working, there’s no end of disaster which could happen:  they might  finish the tasks you’ve assigned to them, or write bug-free scripts, or finish a work day with a sense of accomplishment.  Then you’d all miss an important feature of the Development Drama:  the climactic battle in which each side slays the other in murderous frenzy.
  9. Ridicule their professional opinions. Don’t listen to the nay-sayers when you describe that pop-up with autoplay Flash, animated GIFs, and blinking text you’re confident will add loads of appeal to the application.  Show them your teenaged son’s MySpace page and pointedly ask why they can’t make something like that if he can.
  10. Don’t use a bug tracking system. Sheesh, you already send all those e-mails.  Why repeat yourself in some persnickety little data entry form with those dropdown things which force you to prioritize the issue?  Just repeat: everything’s critical and of highest priority.  See, easy to remember.

Hmmm, something’s missing.  What have I left out?

My First Web Page

September 21, 2009

Tags: , , , , , ,

Some digging in a dusty file box the other day yielded no fewer than three floppy disks. What wisdom might these ancient tablets convey? Fortunately, there was at least one device in the house which still had a floppy drive. Result: mostly disappointment. The files were either first drafts of things I’d sent off to magazine editors in the late 1990s, or grouchy letters to my landlords of the same era. However, there was, archived with apparent pride, my first effort as a Web developer.

Step into the WABAC Machine. The year is 1997. I was the admin assistant for a team of software engineers. I was also something of a mascot; if the guys (yup, all guys, except for me) had a noncritical technical task they thought I could handle with a little instruction, they threw it to me, because I guess I looked really grateful to be doing something besides ordering lunch and taking the abusive phone calls of the company CEO. The most enduring instructions they gave me was how to use FTP, IrfanView, and NotePad to develop the team Web site. Of course, these tools seemed insufficient once I made a few changes–I wanted colors! Silly typefaces! Dizzying background images! And HTML seemed so hard to learn…

I remember downloading a lot of trial versions of the trendy WYSIWYG software of the time: an early version of Frontpage (which had me puzzling over these things called “stylesheets”), Adobe PageMill, and the editor which came with Netscape Gold. The one I used the most seemed to be NetObjects Fusion, which I notice is still available. It was a big, handholding, friendly giant of a program; it set everything into tables and FONT tags, and we were buddies. I felt masterful.

Nobody I worked with was a Web professional–no designers, no information architects, no UI devs. Creating Killer Web Sites had only just been published, Web Pages That Suck was treated mostly as a humorous diversion, and even Jakob Nielsen was as yet rather obscure to the average person making a Web page. It was in this Wild West environment that I devised this:
My First Web Page

I’ll enhance that retro atmosphere with a sample of its markup:

<HTML>
<HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   <META NAME="GENERATOR" CONTENT="Mozilla/4.03 [en] (WinNT; I) [Netscape]">
   <META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=1,Transition=6)">
   <TITLE>ES Home Page</TITLE>
</HEAD>
<BODY BACKGROUND="amoeba.jpg">

<CENTER>
<H1>
<FONT FACE="Wide Latin"><FONT SIZE=+4>Engineering Services</FONT></FONT></H1></CENTER>

<CENTER><IMG SRC="grey_dots.gif" ALT="grey_dots.gif (6699 bytes)" HEIGHT=47 WIDTH=890></CENTER>

<CENTER><FONT FACE="HELVETICA"> </FONT></CENTER>

<UL>
<LI>
<FONT FACE="HELVETICA"><FONT SIZE=+2><A HREF="[...]">ES
Quote Status</A></FONT></FONT></LI>

<LI>
<FONT FACE="HELVETICA"><FONT SIZE=+2><A HREF="[...]">Current
ES Status Report</A></FONT></FONT></LI>

Yeah, go on. Snort, carp, whatever. But this is how we did things then, back when browsers “innovated” with crap like BLINK and MARQUEE. A year later I was back to using text editors–haven’t touched a WYSIWYG since. Just a year later I was using CSS and disdaining FONT, and a year after that I was riding the dot-com boom as it crested. So it’s worth examining your old work product, if only to swell with pride over how far you’ve come since then.

What was your first Web page like?

A visit with HTML 5

September 9, 2009

Tags: , , ,

Now that HTML 5 has been declared victorious over XHTML 2, the last six to eight weeks have yielded a bouquet of tutorials, introductions, cheatsheets, and blog postings about it. I guess we’re so excited about anything new in markup we’ll even cheer a draft proposal. I can’t excuse myself from the mob, having joined it on a recent project for a future-minded client who encouraged me to take up the fashion for <!DOCTYPE html>.

On first and even second glances, the HTML 5 element list seems conservative, not much of a change. There are the intriguing new tags like <canvas>, but with limited cross-browser support. <menu>returns from, what, HTML 3.2?, but this time dressed up as a way to group form inputs (easy to confuse with how we’ve been using <fieldset>). Other elements, such as <header>, <footer>, and <section>, are good substitutions for the over-worked <div>, which lingers in HTML 5 for your block element needs. <article> is interesting–it’s supposed to enclose “standalone” content. <nav> is easy to type and remember.

However, some of these tags seem to presume usage in rather old-fashioned situations. For instance, which of the navigational blocks on your application screen will you exalt with <nav>? No fair using it more than once–it’s supposed to designate your primary navigation. And which of your content blocks are <section>s and which are <aside>s, especially if the user can rearrange them?

Where HTML 5 seems more ambitious, seems to pose more of a learning curve, is on attributes and APIs. Form elements seems especially enriched in this specification. I didn’t use any of these on this project, but I’m eager to try them when the browser support is sufficient. Many of the proposals will remove tedious DHTML chores, if ever supported; for instance, this block will replace all those unordered lists distorted by CSS and JavaScript into popup menus:

<menu type="popup">
    <command  label="Check messages" icon="messages.gif"/>
    <command  label="Logout" icon="logout.gif"/>
</menu>

By now I expect you’re asking, “But what about IE?”

Yeah, what about that? Hmmm.

I was blessed to have a client who’d discarded concern for IE 6. Problem solved, you think?

Not at all. IE 7 ignored even the most basic HTML 5 tags–even <section> proved uncharismatic. To the rescue, JavaScript; more specifically, the “HTML5 Shiv” (love the name, which captures the mood of destructive exasperation IE inspires) script popularized by John Resig and Remy Sharp.

Overall, it was an enjoyable stroll through HTML 5′s more accessible areas. Maybe XHTML 2 would’ve been a more thrilling excursion, but I’m content. Shiv or not, it looks to be sunny ahead.

5 Ways to Style dl

June 17, 2009

Tags: , , ,

Recently I lamented the rare usage of the supremely useful directory list, dl. The directory list is a pretty common data structure: one heading, followed by one or more related subsidiary data. It’s appropriate for more situations than it’s used for, probably because so many developers fixate on markup’s visual design rather than its information design. Browser defaults for dl obscure its versatility:

Firefox default for dl

Firefox default for dl

But there are so many occasions for which dl is the obvious data structure, once groomed by applicable CSS styling. As end users adopt standards-compliant browsers with better support for CSS 2+, styling dl into recognizable data structures becomes nearly fun, and will tempt you to try the ridiculous.

For instance, dl adapts readily to become the container for a recipe:

dl as recipe

dl as recipe

The CSS for achieving this assumes that you’re using one of those newfangled browsers with excellent support for CSS 2+:


dd {
display: inline;
margin: 0 .25em 0 0;
}
dd:before { content: " First, "; }
dd:after { content: ".  "; }
dd+dd:before { content: "Then, "; }
dd+dd+dd:before { content: "Finally, "; }

There’s a similar mechanism for forming dl into a citation:

dl as citation

dl as citation

CSS:


dt { font-weight: 700; }
dt:after { content: ":"; }
dt, dt:after, dd { display: inline; }
dd { margin: 0; }
dd:after { content: ","; padding-right: .25em; }
dl dd:last-child:after { content: "."; }

dl is, semantically, a good choice for an accordion menu, with a CSS :hover or JavaScript event attached to dt:

accordion, collapsed

accordion, collapsed

accordion, active

accordion, active

CSS:


dt {
font-weight: 700;
}
dt:after { content: "\203A"; padding-left: .25em;}
dd { margin-left: 0; visibility: hidden;}

dl:hover dt:after { content: "\2026"; }

dl:hover dd { visibility: visible; }

And then are ways to style dl which, yes, test the capabilities of CSS, but are just plain dumb. If, for instance, you feel compelled to style dl as a table or as a bulleted list, you should question why you’re using this particular markup, and not table or ul:

dl as table

dl as table

Picture 2

dl as bulleted list

The CSS for these stunts:


dl { display: table; }
dt {
display: table-caption;
font-weight: 700;
margin: 0;
text-align: center;
}

dd {
border: 1px solid #eee;
display:table-cell;
margin: 0;
padding: .25em;
}


dd {
display: list-item;
list-style: disc;
}

Versatility, it’s a burden.

I Still (Heart) RichInStyle

April 30, 2009

Tags: , , ,

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

April 15, 2009

Tags: , , , ,

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.

Powered by WordPress