Thoughts From Eric Archive

In the course of a recent debugging session, I discovered a limitation of web inspectors (Firebug, Dragonfly, Safari’s Web Inspector, et al.) that I hadn’t quite grasped before: they don’t show pseudo-elements and they’re not so great with pseudo-classes.  There’s one semi-exception to this rule, which is Internet Explorer 8’s built-in Developer Tool.  It shows pseudo-elements just fine.

Here’s an example of what I’m talking about:

p::after {content: " -\2761-"; font-size: smaller;}

Drop that style into any document that has paragraphs.  Load it up in your favorite development browser.  Now inspect a paragraph.  You will not see the generated content in the DOM view, and you won’t see the pseudo-element rule in the Styles tab (except in IE, where you get the latter, though not the former).

The problem isn’t that I used an escaped Unicode reference; take that out and you’ll still see the same results, as on the test page I threw together.  It isn’t the double-colon syntax, either, which all modern browsers handle just fine; and anyway, I can take it back to a single colon and still see the same results.  ::first-letter, ::first-line, ::before, and ::after are all basically invisible in most inspectors.

This can be a problem when developing, especially in cases such as having a forgotten, runaway generated-content clearfix making hash of the layout.  No matter how many times you inspect the elements that are behaving strangely, you aren’t going to see anything in the inspector that tells you why the weirdness is happening.

The same is largely true for dynamic pseudo-classes.  If you style all five link states, only two will show up in most inspectors—either :link or :visited, depending on whether you’ve visited the link’s target; and :focus.  (You can sometimes also get :hover in Dragonfly, though I’ve not been able to do so reliably.  IE8’s Developer Tool always shows a:link even when the link is visited, and doesn’t appear to show any other link states.  …yes, this is getting complicated.)

The more static pseudo-classes, like :first-child, do show up pretty well across the board (except in IE, which doesn’t support all the advanced static pseudo-classes; e.g., :last-child).

I can appreciate that inspectors face an interesting challenge here.  Pseudo-elements are just that, and aren’t part of the actual structure.  And yet Internet Explorer’s Developer Tool manages to find those rules and display them without any fuss, even if it doesn’t show generated content in its DOM view.  Some inspectors do better than others with dynamic pseudo-classes, but the fact remains that you basically can’t see some of them even though they will potentially apply to the inspected link at some point.

I’d be very interested to know what inspector teams encountered in trying to solve this problem, or if they’ve never tried.  I’d be especially interested to know why IE shows pseudo-elements when the others don’t—is it made simple by their rendering engine’s internals, or did someone on the Developer Tool team go to the extra effort of special-casing those rules?

For me, however, the overriding question is this: what will it take for the various inspectors to behave more like IE’s does, and show pseudo-element and pseudo-class rules that are associated with the element currently being inspected?  And as a bonus, to get them to show in the DOM view where the pseudo-elements actually live, so to speak?

(Addendum: when I talk about IE and the Developer Tool in this post, I mean the tool built into IE8.  I did not test the Developer Toolbar that was available for IE6 and IE7.  Thanks to Jeff L for pointing out the need to be clear about that.)

• Pseudo-Phantoms was published on Tuesday, November 3rd, 2009.
• It was assigned to the Browsers, CSS, DOM, Tools, and Web categories.
• There have been nineteen replies.

So Louisiana Justice of the Peace Keith Bardwell has gained national notoriety for refusing to issue a marriage license to an interracial couple, referring them instead to another justice to have the marriage performed.  His action has, of course, provoked a great deal of condemnation.  Pretty much every elected Louisiana official above Mr. Bardwell (and plenty of them to either side) in the administrative hierarchy has called for his removal from his position.  That goes all the way up to Republican Governor Bobby Jindal, who said:

“This is a clear violation of constitutional rights and federal and state law. Mr. Bardwell’s actions should be fully reviewed by the Judiciary Commission and disciplinary action should be taken immediately – including the revoking of his license.”

As for Mr. Bardwell himself, he has claimed not to be racist, but instead concerned for the biracial children that result from mixed-race marriage.  Of all that he’s said, though, I was particularly interested by the following:

“I didn’t tell this couple they couldn’t get married. I just told them I wouldn’t do it.”

It interested me because it’s exactly the kind of reasoning that underlies “conscience protection” laws that exempt medical professionals who wish to refuse participation in abortion, or dispensation of contraception.

So now I’m very curious to know whether what pro-life groups have to say about what this man has done and how he’s done it.  Or, for that matter, what Governor Jindal himself now thinks of the bill he recently signed into law.

• A Matter of Conscience was published on Saturday, October 17th, 2009.
• It was assigned to the Commentary, Culture, and Observations categories.
• There have been twenty-three replies.

cornpensation, noun.  The act of making mental adjustment for keming that doesn’t actually exist.

Example: “Wait, you wanted me to buy cheerleader pom poms?  Oh.  I totally cornpensated that one.  …Awkward.”

• Related Idea: A New Cognition Term was published on Friday, October 2nd, 2009.
• It was assigned to the Humor and Observations categories.
• There have been ten replies.

I mentioned in my previous post that I “had come away with my head reeling from the massive length and depth of the often-changing specification”, which is entirely true.  Printouts of the current draft of the HTML5 spec can reach, depending on your operating system and installed fonts, somewhere north of 900 pages.  Yes: nine hundred.  There are unabridged Stephen King novels that run shorter.

You might well say to yourself: “Self, is it just me, or are the people doing this completely off their everlovin’ rockers?  Because the specification for something as fundamentally simple as HTML should reach maybe 200 pages, max.”  You might even despair that the entire enterprise is doomed to failure precisely because nobody sane will ever sit down to read that entire doorstop.

But there’s no real reason to panic, because here’s the thing about the HTML5 specification that might not be obvious right away:  it’s not for you.  It’s for implementors.  And that’s a good thing.

If you do start reading the HTML5 draft, you’ll start running into really lengthy, excruciatingly detailed algorithms for, say, parsing a time component.  Or moving through the browser’s history.  Or submitting a form.  There’s an entire (long) chapter on how to process the HTML syntax.

Those are all good things, actually.  They greatly increase the chances of interoperability actually happening within our lifetimes.  There’s no guessing about, well, much of anything.  It’s all been exactingly defined, to the extent that one can exactingly define anything using a human language.  A browser team doesn’t have to wonder, or even guess, what to do when the document has been completely parsed.  It’s all spelled out.  And the people on those browser teams will, in the end, be the people who read that entire doorstop.  (Their sanity is another matter, and not discussed here.)

How is all that stuff relevant to you, the author?  In the sense that when browser teams follow the spec, their products will be interoperable, which is to say consistent.  (Just imagine that for a moment.)

Beyond that, though, the detailed implementation stuff isn’t relevant to you.  You are not expected to know all those algorithms in order to write HTML documents.  Pretty much all you need to know is the markup.  That’s the part that should be no more than 200 pages, yeah?

Turns out it is, and by a comfortable margin.  Michael(tm) Smith’s HTML5: The Markup Language is a version of the HTML5 draft with all of those eye-wateringly pedantic implementor sections stripped out, and when I generated a PDF it came in at 147 pages.  That’s what you really need in order to get up to speed on what’s in HTML5.  It’s for you.

• HTML5 And You was published on Monday, September 7th, 2009.
• It was assigned to the (X)HTML, HTML5, Standards, and Web categories.
• There have been eighteen replies.

Like so many others, I had tried to dig into the meat of HTML5 and figure out just what the heck was going on.  Like so many others, I had come away with my head reeling from the massive length and depth of the often-changing specification, unsure of the real meaning of much of what I had read.  And like so many others, I had gone to read the commentary surrounding HTML5 and come away deeply dispirited by the confusion, cross-claims, and rancor I found.

Then I received an invitation to join a small, in-person gathering of like-minded people, many of them just as confused and dispirited as I, to turn our collective focus to the situation and see what we found.  I already had plans for the meeting’s scheduled dates.  I altered the plans.

Over two long days, we poked and prodded and pounded on the HTML5 specification—doing our best to figure out what was meant by, and what would result from, this phrase or that example; trying to reconcile seemingly arbitrary design choices with what we knew of the web and its history and the stated goals of the HTML5 specification; puzzling over the implications of example code and detailed algorithms and non-normative notes.

In the end, we came away with a better understanding of what’s going on, and out of that arose some concerns and suggestions.  But in the main, we felt much better about what’s going on in HTML5, and have now said so publicly.

Personally, there are two markup changes I’d like most to see:

1. The content model of footer should match that of header. As others have said, the English-language name of the footer element creates expectations about what it is and how it should work.  As the spec now stands, most of those expectations will be wrong.  To wit: if your page’s footer includes navigation links, and especially if you have an HTML5-structured “fat footer“, you can’t use footer to contain it.

   If this feels a little familiar, it should: the same problem happened with address, which was specified to mean only the contact information for the author of a page.  It was quite explicitly specified to not accept mailing addresses.  Of course, tons of people did just that, because they had an address and there was an address element, so of course they went together!

   A lot of us cringed every time this came up in the last ten years of conducting training, because it meant we’d have to spend a few minutes explaining that the meaning of the element’s name clashed with its technical design.  We saw a lot of furrowed brows, rolled eyes, and derisively shaken heads.  That will be magnified a millionfold with footer if things are allowed to stand as they are.

   As I said, the fix is simple: just change the content model of footer to state:

   Flow content, but with no header or footer element descendants.

   That’s exactly the same content model as header, and for the same reasons.

2. time needs to be less restrictive.  That’s not very precise, I know.  But as things stand now, you can only apply time to Gregorian datetimes, and you’re not supposed to use it for anything that couldn’t be easily represented in a calendaring program.  The HTML5 specification says:

   The time element is not intended for encoding times for which a precise date or time cannot be established.

   That makes me wonder, in a manner not at all like Robert Plant, how precise do we have to be?  The answer, I’m sorry to say, is too much.

   To pick an example: I have what I think of as a great use case for the time element, and while it uses the Gregorian calendar, it’s only accurate to whole months (as is Wikipedia’s version).  In some cases I could get the values down to specific days; but in others, maybe not.  So I can’t use the datetime attribute, which requires at least year-month-day, if not actual hours and minutes.  I could omit the attribute, and just have this:

   <time>October 2007</time>
   

   In that case, the content has to be a valid date string in content—which is to say, a valid date string with optional whitespace.  So that won’t work.

   I’ve pondered how best to tackle this, as did the Super Friends.  Our suggestion is to allow bare year and month-day values as permitted in ISO8601.  In addition, I think we should allow a valid date string to only require a year, with month, day, and time optional.  That seems good enough as long as we’re going to go with the idea that the Gregorian calendar contains all the time we ever want to structure.

   But what about other, older dates, some of which are fairly precisely known within their own calendars?  On that point, though the historian in me clamors for a fix, I’m uncertain as to what.  PPK, on the other hand, has put alot of thought into this and written a piece that I have skimmed but never, perhaps ironically, found the time to read in its entirety.

These are not my only concerns, but they’re the big ones.  For the rest, I concur with the hiccups guide, though of course to varying degrees.  I’m still trying to decide how much I care (or don’t) about the subtle differences between article and section, for example, or the way aside fits (or doesn’t) with its cousin elements.  And dialog just bugs me, but I’m not sure I have a better proposal, so I’ll leave it be for the time being.

At the other end of the two days, I felt a good deal more calm and hopeful than I did going in.  As Jeffrey said, “the more I study the direction HTML5 is taking, the better I like it”.  While there are still rough edges to be smoothed, there is time to smooth them.  We’ve already seen responsiveness on some of the points we addressed in the hiccups guide, and discussions around others.  The specification itself is daunting, especially to those who might remember the compact simplicity of the HTML2 spec.  Fortunately, it has good internal cross-linking so that you can, with effort, track down exactly what’s meant by “valid date string with optional time” or “sectioning content” or “formatBlock candidate“.

With HTML5, the web is not ending, nor is it starting over.  It’s evolving, slowly and in full view of the public, with an opportunity for anyone to have their say (which is not, of course, the same as having one’s proposals accepted).  It’s the next step, and I feel quite a bit more confident that it’s a step onto solid ground.

• Nine Into Five was published on Wednesday, September 2nd, 2009.
• It was assigned to the (X)HTML, Commentary, HTML5, Standards, and Web categories.
• There have been twenty-one replies.

Last week, I got an interesting inquiry from Velda Christensen:

@meyerweb *wondering just how many of your followers follow @zeldman and vice-versa*

I had no idea.  Furthermore, I didn’t know of a tool that could tell me.  So I built one: Followerlap.

As it turned out, the Twitter API made answering the specific question pretty ridiculously easy, thanks to followers/ids.  All it takes is two API requests, one for each username.  The same would be true of friends/ids, on top of which I suspect I’ll fairly shortly build a tool quite similar to Followerlap.

Since I announced Followerlap’s existence on (where else?) Twitter, I’ve had a few repeated (and not unexpected) bits of feedback.

• Why not list the common followers?  Because followers/ids returns a list of numeric IDs.  Resolving those IDs as usernames would require one API hit per ID.  If there are 15 followers in common, that’s not such a big deal, but if there are 1,500, well, I’ll run out of my hourly allotment of API requests very quickly.  Maybe there’s a better way; if so, I’d love to hear about it, because that would be a great addition.

• Why can’t I find out how many people follow both Stephen Fry and Shaquille O’Neal?  Past a certain number of followers, somewhere in the 200,000–250,000 range, the API just dies.  You can’t even count on getting a consistent error message back.  There are ways around this, but I didn’t want to stress the API that way, so it just fails.  Sorry.

• How can I link to a specific comparison?  At the moment, you can’t.  I hope to make that happen soon, but I decided that a tool this simple should have a similarly simple launch.  Ship early, ship often, right?  Anyway, it’s on the list of things to add soon.  Use the new “Livelink to this result” link underneath a result.  (See update below for more.)

So that’s Followerlap.  Any other questions?  I’ll do my best to answer them in the comments, though for a number of reasons I may be slow to respond.

Update 6 Jul 09: as noted in the edited point above, livelinking of comparison results is now, um, live.  So now you can pass around results like the number of people who follow both God and the Devil (thanks to Paul M. Watson for coming up with that one!).  I call this “livelinking” because hitting a result URL will get you the very latest results for that particular comparison.  “Permalinking” to me implied that it would link to a specific result at a specific time, which the tool doesn’t do and very likely never, ever will.

• Announcing Followerlap was published on Monday, July 6th, 2009.
• It was assigned to the Projects, Tools, and Web categories.
• There have been twenty-nine replies.

It’s taken me slightly more than a month to write this post.  It’s about people at their best.

Last month, just after speaking at a conference in Amsterdam, my laptop was stolen.

Actually, to be more painfully accurate, my laptop case was stolen—and inside it at the time was the laptop, my mobile phone, and my wallet.  Plus the usual assortment of stuff that goes into a laptop case.

Because I still remember to this day advice Tantek gave me just before we boarded a bus to Narita airport, I had my passport on me.  I happened to have picked up my camera to take some pictures of the conference hall.  My clothes were still in my hotel room.  Everything else was gone.

I can’t really describe the feeling.  Maybe you’ve felt it.  Shaking and stunned and self-blaming and nakedly vulnerable.  All that magnified by the complete loss of funds and communication with my family.

And the data.  The lost data.  I have backups, but they’re never as current as one would want.  (Which reminds me: if you aren’t backing up, and you aren’t doing so regularly, learn from my loss and start.)  Besides, at that moment, as the full realization of what had happened slid coldly into my gut and started its slow, merciless expansion throughout my entire body, I didn’t think “Oh, I have backups until that date, and all my work mail is on the mail server, and I’ve been uploading the best pictures to online services.”  Those things didn’t occur to me.  They were completely blocked by the continual, sickening, endlessly looping thought: IT’S ALL GONE.

And that’s when people started pitching in to help me out.

In addition to helping me look for the case in hopes that it had just been moved somewhere non-obvious, Khris Loux of JS-Kit let me call home from his iPhone without a second thought, so I could tell Kat what had happened and get her immediately started on contacting banks and credit card companies.  And the honest concern in his eyes helped snap me back from near-paralysis, touched by the regard coming from someone I’d only met an hour before.

Then Gabe Mac, having heard what was going on, came up to me with a fully charged mobile phone I could borrow so that I could remain in contact with my family until I went home.  He didn’t ask me how I would get it back to him, because I don’t think it had occurred to him.  He just said, “Eric, I have a spare phone.  You need it.  Take it.”

So I did.  And much, much later that same night, it was nearly a lifeline.

Throughout all this, Boris and Patrick, the conference founders, were working to find out if one of the tech crew had accidentally picked it up, or it had been turned in to venue staff.  And when it became inescapably clear that the case was well and truly gone, they sent one of their staff to get a SIMM card for the phone Gabe had loaned me and 200 euros in cash so I could get home.  Just did it, because they could see that I would need those things even when I couldn’t.  They also arranged a ride for me to get to my evening’s social appointment.

That appointment was with Steven Pemberton and his lovely family, who fed me a great dinner in their fabulous top-floor flat and were more than gracious about my disordered mental state.  After dinner, Steven took me to the nearby police station and acted as translator as I filled out a report.  And then he loaned me use of his home phone to call a couple of credit card companies that I had to speak with personally in order to make sure my business credit cards were cancelled.

It wasn’t the relaxed evening of dinner and shop talk I’d been hoping to have, but I did several things that needed to be done and Steven made it possible.  And we did get in a tiny smidgen of (very interesting) shop talk near the end.

At every step of that evening, someone was there to help push me forward, help me lower the unexpected barriers just a little bit, help ease the situation however they could.  So many people coming together to help out someone they’d known for years or never before met.  Thanks to them all, I was able to get home without further incident.  Thanks to them all, I had a major yang to the theft’s yin, a powerful reminder of just how good people can be.

Thank you, all.

• Kept Afloat In Amsterdam was published on Wednesday, May 20th, 2009.
• It was assigned to the Personal and Travel categories.
• There have been no replies.

There’s something about the Diggbroglio that has left me scratching my head:  how is it that so many people are up in arms about the DiggBar when they’ve had nothing to say about the framing bars of StumbleUpon, FaceBook, etc. etc.?

Now, please note that I’m not saying the DiggBar, or any other framing bar, is cool and we should all love it.  I’m not.  I absolutely, completely, totally get all the reasons why framing bars are bad for breaking bookmarking and navigating and search engines and copyright and hijacking content and so on.  But that’s precisely why I’m so confused, because we’ve known for years now that framing bars are bad mojo—and yet StumbleUpon, for example, is based on bars.  There is a browser extension/plugin StumbleUpon thingy you can install, but there’s also a web-based framing bar thing (see this link, for example) that they offer, and I bet people use.  You don’t have to be a member to use it: I hit that link in a browser that allows cross-site frame loading and I get the bar and the page it’s framing, and I’ve never been a StumbleUpon member.  The source shows it’s using iframes to make it happen.  So far as I can tell, it’s not really different from the DiggBar.

So why do we have people writing JavaScript and PHP and Ged-knows-what-else that specifically busts out of the DiggBar framing, instead of busting out of all framing?  After all, site framing is universally agreed to be objectionable; even yet-to-be-discovered life forms orbiting distant stars think it’s a bad idea.  So why is one instance of it being targeted while the rest are tolerated?  Why are we all not just using if (top != self) {top.location.replace(self.location.href);} and other-language equivalents?  Yes, I know, some of you do just that, but why isn’t everyone?

Perhaps because I have yet to eradicate a stubborn streak of faith in the rationality of my peers, I assume that there’s some technical difference here that I’m missing and that, once understood, would let me understand the source of the outcry.  So can someone please explain to me, or point at an explanation that states, the technical ways in which the DiggBar is worse enough than already-extant framing bars that it’s triggered this outrage?  Again, nobody has to enumerate the complete list of the DiggBar’s sins; I understand.  A list of any different and more egregious sins would be just fine, though.

Also, if anyone comes up with a way to bust out of the frames while still preserving the bar—that is, correcting the problems framing bars cause while preserving their functionality for the people who want to use them—that would be extra-cool.  After all, people who use those services like the bars.  If we could let them browse the web the way they prefer while fixing bookmark/SEO/etc. problems framing bars can cause, that would be a win all the way around.

Update 14 Apr 09: looks like Porter‘s trying to keep the bar without the framing.

Update 16 Apr 09: in his post about Digg changing the way the DiggBar will work, John Gruber lists (by way of quoting Digg VP John Quinn’s post about it) the two things that made the DiggBar extra-objectionable (at least in his eyes).  Thanks, John!

• Digging in the Mud was published on Tuesday, April 14th, 2009.
• It was assigned to the Questions, Tech, and Web categories.
• There have been twenty-two replies.