Posts in the Tech Category

Off the road again: I’m back from User Interface 8, where a good time was (once more) had by all.  Especially me.  I don’t know exactly how I ended up with good-looking women in my lap so often, but I don’t think I’ll complain about it too much.  I have a huge collection of pictures that cry out to be shared, and a huge lack of time to assemble a gallery.  I could use iPhoto’s export-to-Web function, except I hate it.  I’ll have to dig up one of those cleaner plug-ins I’ve been hearing about and give it a whirl.

To catch up things that happened while I was away:

• A List Apart is back.  That in itself is cause for celebration, even if my article “Going To Print” no longer makes sense in the new template.  However, the real news from where I sit is the publication of “Sliding Doors of CSS” by the always brilliant and readable Douglas Bowman.  Check out the presentation, HTML source, and text-zooming robustness of this demonstration page from the article, and then read the article if you’re impressed—as I suspect you will be.  I’m seriously thinking about publishing a followup article to “Rounding Tab Corners” using Doug’s Sliding Doors technique, and comparing it to the techniques presented in the the original article.  Some have said that Doug built on my article, but that’s not true.  He came up with his approach independently, and if anything I’ll be building on his ideas, not the other way around.
• Russ Weakley published the Floatutorial, which “takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.”  It does this with a simple yet powerful step-by-step approach that reminds me a bit of Eric Meyer on CSS, except it’s much more concise.  The Floatutorial joins the Listutorial in Russ’ oeuvre.
• The House of CSS (not to be confused with the House of Style) opened its doors, and the crowd went wild.  I like it.  Sure, it’s a whole lot of structural hacking to achieve a purely visual effect, but so what?  I didn’t think of it, and neither did you.  Or if you did, you didn’t bother to assemble it.  Chris Hester did, and he deserves recognition for the creativity and skills it took to do so.
• Apparently Microsoft’s recently started admitting that Longhorn will launch in 2006, as I predicted a few weeks ago.  A few people wrote to ask if I’m always so prescient.  The truth is, it didn’t take an oracle, a guru, or a clairvoyant to figure out that Longhorn was likely to be delayed by a year or more.  As I’ve been known to say every so often, the best predictor of future behavior is past behavior.
• In a possibly related move, Microsoft has apparently decided to save time by releasing their critical-flaw fixes in groups, or what I’m going to start calling “patch batches.”  You know what to do, right?

For no apparent reason, I’ve had the song “Rhinestone Cowboy” stuck in my head all day.  Even a potent cocktail dosage of Ministry, Joe Boyd Vigil, Crystal Method, The Prodigy, and DJ Z-Trip has failed to dislodge it.  I’m starting to think that a power drill is my only hope.

• Roundup was published on Wednesday, October 22nd, 2003.
• It was assigned to the CSS, Speaking, and Standards categories.
• There have been no replies.

Doug Bowman’s observations on the separation of presentation and content are well made, and illuminate an oft-overlooked corner of the whole standards debate.  Even with some semantic correction, we still have room for discussion.

My semantic correction is that we aren’t trying to separate presentation and content, but presentation and structure.  Doug makes this point throughout the latter part of his post, but I think this is the important thing to state right up front.  Without content, it’s very difficult to have any presentation, except maybe a blank browser window (very minimalist, but not necessarily useful).

Even there, however, the divorce is not complete and never can be.  I’ve been saying this in public presentations for a while now, and it bears repetition here: you can have structure without style, but you can’t have style without structure.  As Doug observes, you have to have elements (and, also, classes and IDs and such) in order to apply style.  This is absolutely the case, and it should come as little surprise, really.  If I have a document on the Web containing literally nothing but text, as in no HTML or other markup, just text, then it can’t be styled.  Presented, yes, using the browser’s defaults for showing raw text.  But not styled.

This is also why I’ve argued that the document structure is dependent on your presentational needs.  Document structure is like the support beams for a building.  The final layout and appearance of the building will depend very heavily on the shape those support beams create.  If you ignore that, and assemble the beams with no thought toward the final product (not following the blueprints, as it were), the best you can hope for is an inefficient, almost unusable building.  In the worst case, the building will utterly collapse as soon as you try to add anything useful to the structure.

This has been a minor issue in HTML, but XML throws the issue into sharp relief.  Consider the following fragment of XML:

<city name="Cleveland" state="Ohio">23</city>

Okay… any idea what that number represents?  No, probably not.  What’s worse is that if I hand that element to a user agent, it will display the element’s content: 23.  The user won’t even have the attribute values to give them what little hints you got by looking at the source.  They just see the number 23.

That’s because attribute values don’t get displayed, while element content does.  Yes, we can use CSS generated content to make the attribute values show up, but how crazy is it that the following would be needed to make the display more useful?

city:before {content: attr(name) " " attr(state) ": ";}

And then, if you wanted to make the bits of data lay out like a table—you can’t.  Oh, sure, you could get the generated content into one layout piece, and the element content into another, but you can’t get the city name and the state name into separate cells.  Even if you could apply display: table-cell to the generated content, you can’t split it into different cells.

We can argue that this illustrates limitations in CSS, and to a degree that’s true, but to do so misses the point entirely.  There will always be some limitation we can’t overcome, something the styling language of the moment can’t make possible.  What I’m talking about is the fact that presentation is inextricably bound to structure, and document authors ignore that connection at their peril.  Let’s return to that XML fragment and restructure it to be more intelligent:

<city region="midwest">
  <name>Cleveland</name>
  <state>Ohio</state>
  <hightemp scale="c">23</hightemp>
</city>

Now, not only do we have more actual content to be displayed by default, but we have more elements to actually style.  So we might turn the above into a table-like structure, complete with some useful cues for the user, like so:

city {display: table-row;}
city > * {display: table-cell; width: 33%;}
hightemp[scale="c"]:after {content: " degrees Celsius";}
hightemp[scale="f"]:after {content: " degrees Fahrenheit";}

Now, thanks to our structure, we can make the display much more useful for the user, and understand it better ourselves.  We can even style the city and state differently now, whereas before that was impossible.  We’ve also been able to use an attribute value to affect presentation.  I included the attributes to show that attributes aren’t at all useless, or even have to stay completely out of the presentation.  They can be quite handy.  However, the region attribute is a good example of data that has to be carefully considered.  If we ever want to display a city’s region next to its name, then it’s probably a good idea to use an element (like <region>...</region>) instead of an attribute.  If we just want that information in the data structure for purposes of transformation, or to style descendant content without actually displaying the region’s name, then an attribute makes far more sense.  For example:

city[region="midwest"] {background: green; color: white;}
city[region="northeast"] {background: purple; color: white;}

If we’re going to do that kind of thing, treat the region almost like it’s a class, then we definitely want it as an attribute.  If it were an element, with the region name as content, we’d have no way to style it (or anything else) based on its content.

What it comes down to is that structure is critical to presentation, with or without the style—although intelligent structure makes styling lots easier.  Contrary to what some may have claimed or implied, you can’t just create an arbitrary structure with no consideration toward its presentation.  If you want something on the screen, it needs to be element content.  That may not be ideal, but it is inescapable.  Structure may be able to break up with style, but style still needs and depends on structure in a big, big way.  Personally, I’m not sure it can ever be otherwise.

• The Incomplete Divorce was published on Wednesday, October 15th, 2003.
• It was assigned to the Standards category.
• There have been no replies.

Today I received my first Complex Spiral paycheck.  Yay!  I’ve done several paying jobs by now, and more are underway, but this is the first check to actually show up for deposit.  Let that be a lesson to those of you who might be thinking about striking out on your own: if you can’t cover all of the expenses you’ll incur between leaving your old job and the point two months after you finish your first project at the new job, you can’t afford it.

Yesterday, the mail brought to me a package from New Zealand.  It contained a copy of the Digital Life episode on Web standards.  That was especially fascinating since this morning an article on standards support (and the limits thereof in Internet Exporer) was published on c|net quoting me, Zeldman, and others.  With Explorer’s development at an apparent end, it’s becoming a heavier and heavier millstone around the necks of designers.  Let’s assume that there are no advances in Microsoft’s Web standards support between now and Longhorn.  That’s close to three more years of the millstone getting heavier.  By then, we’ll all have serious back problems.

(Yes, I can count: Microsoft’s Longhorn launch date of 2005 says to me it’ll actually launch in 2006.  I’m just drawing a historical inference here.)

Of course, the whole Eolas situation probably doesn’t have the Microsoft folks in a benevolent frame of mind regarding standards.  If they just abandoned the public Web and moved everything into a closed, proprietary sandbox of some kind, they might be able to avoid these sorts of problems altogether.  That’s exactly what I expect them to do in Longhorn, and the expectation worries me.  If the whole world moves into the sandbox—and let’s face it, in an e-commerce sense, IE/Win is the whole world—what reason would there be to pay any more attention to the Web?

We might say hey, fine, let’s get Microsoft and its partners the hell off the Web so we can go back to developing it the right way; let’s take back the neighborhood.  That would make about as much sense as rooting for Flash to be the technology used on every Web site in existence.  When one company owns the medium, everyone else loses.  Thus far, the Web has been a community asset, with no one company calling the shots.  How can we make sure that situation continues past the next few years?

• Checks and Balances was published on Thursday, October 9th, 2003.
• It was assigned to the Consulting and CSS categories.
• There have been no replies.

I think I’ve been semi-Slashdotted.  Having one’s site mentioned in the comments associated with a post isn’t as good as having a whole post about your book, but it’s probably still driven a lot of traffic this way.  So howdy, Slashdotters!  Hopefully this will also drive a little more traffic to my standards-oriented consulting business,  Complex Spiral Consulting.  Ser Zeldman is right on about the shift in tone over at Slashdot when it comes to standards issues.  It’s a nice change to witness.  This may be one more bit of support to my claim that Microsoft didn’t win the browser wars: standards did.

Mac OS X folks should delay not a moment longer their introduction to xlab, which I found thanks to Jeremy Keith.  xlab is chock full of tips and pointers, and it looks clean and attractive to boot.  And is that a CSS-driven layout I spy?  Why yes, I believe it just might be.

For those who were thinking about asking, I won’t be sharing with you what’s in my Dock.  This is partly because I keep it on the left and so it’s very tall, and I don’t want to waste that much space.  It’s also because I’m getting very close to dumping the Dock in favor of a registered copy of DragThing, which I use on my Classic OS machine and sorely miss in OS X.  The Dock just doesn’t have enough features to be an effective replacement.  If people indicate an interest, I suppose I could talk about OS X tools and widgets I find useful.  Otherwise, I’ll stick to the usual foolishness that passes for witty discourse ’round these parts.

• Slash Or Dot? was published on Wednesday, October 1st, 2003.
• It was assigned to the CSS, Mac, and Standards categories.
• There have been no replies.

An interesting idea: Pixy’s fast no-preload rollovers, which I first heard about in a presentation at Seybold.  It seems to me there’s one potential drawback in this method, which is that it requires that your links be an exact size, or at least never be taller than a certain size.  Since I spend a lot of time thinking about techniques that will work well even if the text is scaled up 300% or more, this “drawback” is probably more of a concern to me than to the rest of you.  I don’t mean to denigrate what Petr has done—it’s a clever technique, and has a great deal to commend it, including reduced server load.

So, Eolas.  Their claims of inventing plug-ins or applets or whatever put me in mind of a similar yet much dorkier situation surrounding the new movie Underworld, summarized rather well by the guys at Penny Arcade, as usual.  Of course, Microsoft itself patented style sheets back in the late Nineties, so it’s not like they’ve never been down that road themselves.  I’ll freely admit that Microsoft never did anything with said patent, and that puts them a step above Eolas in the trudge toward something resembling the faintest shadow of a moral high ground.

One of the reasons I’ve not gotten too worked up about all this is I still have this idiotic faith that reason will, eventually, prevail.  The British Telecom “patent” on hyperlinks came to nothing, so far as I can tell.  Whether this was due to a court throwing out the claim, or the collective will of the Web ignoring it outright, I’m not sure, but that’s sort of the point: it was never a big deal.  I keep thinking whatever process got us there will similarly operate in the Eolas case.  I can’t do much about it either way.  Hey, maybe Eolas did patent the process of whatever it is they claim to have invented years after other people had already done it.  Great.  As soon as I secure a patent for my novel method of representing complex information using only the integers one and zero, I am so going to clean up in the courts.  (Hat tip: Chris Lilley, ca. 1999.)

Of course, we also have ISO and OCLC poisoning the community well in different but still deeply distasteful ways, so maybe I should reconsider my faith in reason winning the day.  Is it time to pull out the term “morons” yet?  How about “scummy bastards?”  Somebody let me know.  Meanwhile, I generally find relief from goofy humor and mind games (of the good sort), so let’s try some of that on for size, shall we?

Davezilla shares a semi-coherent translation on a snack-food packet (for more such goodness, please to enjoy the site of Engrish).  I’m reminded of one of my favorite business cards of all time; it came from a fortune cookie factory in San Francisco’s Chinatown.  This card stated, in bold red capital letters near to bursting with pride, “WE SPECIALIZE TO MAKE ALL OCCASIONAL COOKIES.”  Sadly, this glorious bit of prose no longer graces the new cards they now hand out, which instead inform us that they are happy to offer novelty adult cookies.  I sometimes wonder if that simply means that the fortunes come with the words “in bed” already printed at the end of the phrase.

The page I’m about to point to is best viewed with a fairly wide browser window, because it’s peppered with some very wide images, but “The latest works” is very much worth visiting if you’re fascinated by optical illusions.  I’m always intrigued by examples of the brain percieving motion where there is none, and sometimes wonder if this capacity is in some weird way the neurological basis for conspiracism.  Note that not all the examples may work for you; only about half to two-thirds did for me.  But the ones that did… wow.  I expect it’s the closest I’ll ever come to being a synaesthetic.

• Dynamic Mental Static was published on Friday, September 26th, 2003.
• It was assigned to the CSS, Humor, and Politics categories.
• There have been no replies.

Okay, XSLT folks, here’s one for you.  I had the following fragment in my journal recipes, with some whitespace to make everything more readable:

<xsl:element name="a" use-attribute-sets="plink">
  <![CDATA[&para;]]>
</xsl:element>

The goal was to get output something like this:

<a ... >&para;</a>

Instead, what I got was this:

<a ... >&amp;para;</a>

So how do I reach my goal?  And please don’t tell me that I should just generate the character directly.  It isn’t the result I want, even though I’m doing it now as a stopgap measure.  All I want to know is how to get what I want, if for no other reason than it will clarify more about XSLT, XML, and how they handle CDATA and entities.  Several Google searches turned up nothing useful, but it may very well be that I wasn’t using the right search terms.

Update: Curtis Pew pointed me to an XML.com article that led to the answer.  It is:

<xsl:element name="a" use-attribute-sets="plink">
  <xsl:text disable-output-escaping="yes">&para;</xsl:text>
</xsl:element>

The article talks about defining a custom entity, which I tried but failed to do even I’ve done it successfully in the past for less ambitious purposes.  xsltproc kept complaining that the namespace prefix xsl wasn’t defined, even though everything else in the recipe didn’t seem to have that problem.  Moving the xsl:text into the recipe itself was the answer.  Thanks to Curtis for the lead!

• Entity Errors was published on Thursday, September 25th, 2003.
• It was assigned to the Standards and XSLT categories.
• There have been no replies.

Spotted in and around Cedar Falls, Iowa:

• The license plate 007 JFK.  Because Iowa plates are formatted as three numbers followed by three letters, this is likely a random occurence instead of a vanity plate; typically vanity plates aren’t allowed to be in the same format as the random plate series, for fear of platespace collisions.  Maybe that was a poor choice of words.
• Two minutes later, a license plate reading 152 EGO.
• A sign attached to a traffic light stating “OBEY ONLY YOUR SIGNAL.”  The one the CIA transmits via my fillings, or just the one I get on the car radio?  (The same signs were later spotted in the Chicago area.)
• A gas station called “Kum ‘n’ Go.”  Seriously.  It has great big signs at each station reading “PAY AT PUMP.”
• A whole bunch of people (as in a few dozen) standing around the downtown Cedar Falls area with nametags on their chests and clipboards in hand, looking at the buildings and putting pencil to paper.  It turns out they were design students studying the downtown, which is award-winning, but it was still just a tad creepy.  I couldn’t help wondering if they were collecting information for TIPS or not.

Spotted in the Minneapolis International Airport:

• Restaurants called “Miami Subs” and “Malibu Al’s” adjacent to each other.  Doubtless they were related, probably had the same owner, but it was still strange to see in Minnesota—particularly since elsewhere in the airport I passed a “Maui Tacos.”
• Pay-to-surf WiFi.  I thought about ponying up the money just so I could use Airport in the airport, but my cheapitude got the better of me.

I also noticed a lot of attention being paid to Jeff Veen’s article on the business benefits of standards, coincidentally published on the same day I delivered a talk on that very subject at the University of Northern Iowa.  Jeff’s piece is a great overview of why using standards can save you money, so if you haven’t read it, you should; this is an important and often overlooked aspect of the whole standards movement, even though it’s the thing that is most likely to drive more standards adoption.  Tristan Nitot published an article with a very similar title on DevEdge back in February, and it might be worth revisiting.  Of course, I believe so strongly in this that I founded a consultancy with a core goal of helping organizations figure out how to save money by better using standards in their Web sites, both internal and external.

• Signs and Importants was published on Tuesday, September 23rd, 2003.
• It was assigned to the General and Standards categories.
• There have been no replies.

The second Complex Spiral article is now on-line: “Rounding Tab Corners.”  The scheduling of this article was dictated by a promise I made at Seybold last week during the “CSS For Navigation” talk.  I’d been planning to write it later on, but due to interest in the audience I decided to move up publication.

A few days back I badgered you, as you may recall; now, thanks to Jeffrey, I am here to bring you the joys of Histology-World and its Relentless Flash Splash Screen, which is the whole point of linking to it.  By the end of the intro, as you’re redirected to the site’s home page, you may well ask yourself, as I did: “What the hell is histology?”  The site is fairly adamant about not admitting to anything, so I looked it up.  I think I can say with absolute confidence that if there’s one subject that really cries out for a lengthy, overblown Flash intro, histology most definitely isn’t it.

• Round and Round was published on Wednesday, September 17th, 2003.
• It was assigned to the CSS and Writing categories.
• There have been no replies.