Archive: September, 2009

Having a neighbourhood bookshop will always add a few points in the “feel-good” column in the balance sheet of life. City Books is located just a short stroll from my front door. As well as stocking a remarkable amount of signed books, they also put on regular events at The Old Market—also a short stroll from my front door.

A couple of weeks ago Jessica and I saw Rick Stein there, cooking some recipes from his latest book. Tonight we saw Nick Cave reading from The Death of Bunny Munro—his first novel since And the Ass Saw the Angel twenty years ago. It was a thoroughly enjoyable event, mostly thanks to the rapport between Cave and the host for the evening, Will Self.

It’s certainly nice having all this so close to home. Usually I’d have to travel up to the big smoke, as I did for Michael Moorcock and Alan Moore at the British Library—and as I’m sorely tempted to do again for Seamus Heaney on Beowulf.

The next Brighton-based chat I’m planning to attend will be more filmic than literary. The Duke of York’s cinema—yes, the same place that will be hosting Full Frontal—will be celebrating the 30th anniversary of Alien on October 25th with a screening of the film followed by an interview with Terry Rawlings (of Bladerunner fame) and John Mollo (of designing-Darth-Vader’s-costume-yes-really fame).

If you are a fellow Brightonian geek, grab your ticket now. If you’re a non-Brightonian geek, you might want to consider a trip to Brighton for this.

Usually when I write about an upcoming event, it’s because I’ll be speaking at it. But there’s an event coming up in eight weeks that I’m pretty excited about, where I’ll be an attendee rather than a speaker.

The cheekily-named Full Frontal will be taking place in the Duke of York’s cinema in Brighton on November 20th. It’s going to be all JavaScript, all the time. Christian Heilmann, Peter-Paul Koch, Stuart Langridge, Simon Willison, and others will be on hand to blow your mind with all things scripty.

I’ve mentioned this event already over on the DOM Scripting blog but the reason I’m mentioning it here now is that this is the last chance to grab early bird tickets; an absolute steal at just £100.

Great location. Great line-up. Great subject matter. Great organiser.

See you there.

During the short time that I was at dConstruct, I nipped out with Paul and Marcus to record a quick interview about HTML5. That interview has now been published in the latest episode of Boagworld, complete with transcript. Just to show how fast HTML5 can move, on the very day that we were chatting about the content model of the footer element, the spec was duly updated.

Speaking of podcasting and dConstruct…

Thanks to always excellent Drew, the audio recordings from the day are starting to roll in. You can keep an eye on the podcast page or simply subscribe to the podcast to get all the aural goodness. Transcripts are on their way too, courtesy of Opera.

The first talk of the day is available now: Elements of a Networked Urbanism by Adam Greenfield.

Twitter doesn’t allow for much verbosity but sometimes it’s possible to squeeze some code into 140 characters or fewer. I particularly like Simon’s piece of JavaScript. Paste this into the address bar in Safari:

javascript:(function(){var d=0;setInterval(function()
{document.body.style['-webkit-transform']=
'rotate('+ d +'deg)';d+=1},10)}());

Earlier today, I wrote:

Writing &amp;</abbr> in my markup and abbr[title='and'] { font-family: Baskerville; font-style: italic; } in my CSS.

This is something that Dan has written about in the past, citing Bringhurst; In heads and titles, use the best available ampersand. Dan suggested wrapping ampersands in a span with a class of “amp” but in a comment, I proposed using the abbr element:

&amp;</abbr>

But really, you don’t even need the class because you can just use an attribute selector:

abbr[title='and'] {
 font-family: Baskerville, Palatino, "Book Antiqua", serif;
 font-style: italic;
}

But, asks Mat Marquis, what about a certain browser that can’t even handle the simplest of attribute selectors? Won’t IE666 still need a class attribute?

Well, it turns out that you can’t style the abbr element in the Browser of the Beast with or without a class attribute. That’s because Internet Explorer didn’t support the abbr element until version 8 (and yet people scoff at the 2022 date for two complete HTML5 implementations). If you want to slap some sense into earlier versions of IE, you can always use a smattering of DOM Scripting.

Bruce wonders:

Is there not some JS that can quietly add class=”and” when it sees an ampersand in a text node ?

Turns out that Tess has already written a script to do that.

If you want to be a real stickler, Erik Vorhes keeps his tongue firmly in cheek with this suggestion:

&amp;</abbr>

It’s common practice for sign-up forms to include duplicate fields for either password or email, where the user has to type the same thing twice. I deliberately avoided this on the Huffduffer sign-up form. Not long after Huffduffer launched, I was asked about this ommision on Get Satisfaction and I defended my position there, citing the audience demographic.

I still think I made the right decision although, in retrospect, I’ve changed my position completely from when I said, I can see more value in a ‘confirm your password’ field than a ‘confirm your email address’ field. Thinking about it, getting a correct email address is more important. If a password is entered incorrectly, it can always be reset as long as the site can send a reset link to a valid email address. But if an email address is entered incorrectly, the site has no way of helping a user in difficulty.

Here’s an interesting scripted approach to avoiding duplicate email fields:

The last thing you see before you submit is your own email address.

Sign-up is something that user should only ever experience once on a site. But the log-in process can be one of the most familiar actions that a user performs. A common convention for log-in forms is a “remember me” checkbox. I have one of those on the Huffduffer log-in page, labelled with “remember me on this Turing machine” (hey, I thought it was cute).

Here’s a question from 37 Signals:

Has the time come to kill the “Remember me” check box and just assume that people using shared computers will simply logout?

There are a lot of arguments, both for and against, in the comments. It prompted me to think about this use case on Huffduffer and I’ve decided to keep the checkbox but I’ve now made it checked by default. I think that while there are very good reasons why somebody wouldn’t want a permanent cookie set on the machine they’re using (many of the use cases are mentioned in the comments to that 37 Signals post), the majority of people find it convenient.

It always pays to think about default states in UI. Good defaults are important:

Defaults are arguably the most important design decisions you’ll ever make as a software developer. Choose good defaults, and users will sing the praises of your software and how easy it is to use. Choose poor defaults, and you’ll face down user angst over configuration, and probably a host of tech support calls as well.

When the original iPhone came out, it was pretty impressive. Every subsequent iteration has featured improvements of varying levels of impressiveness. The latest version, though, has bowled me over.

I’m not talking about faster speeds, bigger storage, or any new fangled gizmos or geegaws. I’m talking about VoiceOver in the iPhone.

Watch the video to get the low-down. Then read this first-hand account of using an accessible touch-screen device.

That’s quite a design challenge: an accessible touch-screen device! I doff my hat in the general direction of the Apple engineers who rose to this challenge.

Speaking of exciting developments in the world of accessibility…

The second Accessibility 2.0 conference will be taking place in London on the 22nd of this month. It was a cracking event last year and, judging by the line-up, this year is going to be a winner too. Grab a ticket now.

Looking through the list of hiccups highlighted by the HTML5 Super Friends and my own personal tally, things are progressing at a nice clip with HTML5.

• The pubdate attribute has been removed from the article element and shifted to a nested time element instead.
• The content model for the footer element has been changed to match author expectations—that’s a biggie.

That still leaves a few issues:

• The confusion between section and article that I’ve been researching.
• The restrictive content model of the small element not matching that element’s updated semantics.
• The time element not allowing month or year dates i.e. YYYY-MM or YYYY.

Then there’s the issue with details and figure. The insistence on recycling the legend element leads to all sorts of problems with browsers today, as described by Remy.

This has been an ongoing discussion in the HTML5 IRC channel and on the HTML5 mailing lists. It flared up again recently and I fired off an email to the HTML Working Group yesterday:

I understand the aversion to introducing a new element … but I don’t understand why legend is being treated as the only possible existing element to recycle.

For example, dt and dd are being recycled in the new context of dialog so they no longer mean “definition title” and “definition description”. Now they can also mean (presumably) “dialog title” and “dialog description”.

If those elements are already being recycled, why not apply the same thinking to details so that dt and dd could also mean “details title” and “details description”?

To be honest, I was just spouting that out without really thinking. How about… something like—not this, obviously, not this, but what if…

So imagine my surprise when Hixie responded:

That’s not a bad idea actually. Ok, done.

Wow. Okay.

While I was at it, I also did this for figure

Alright. Makes sense, I suppose …although the names of the elements dt and dd aren’t quite as intuitive in the context of figure as they are in details.

and removed dialog from the spec altogether.

Er …okay. Seems somewhat unrelated to the issue at hand but I guess that the dialog element has been a point of contention. It’s mentioned by the HTML5 Super Friends so that’s another one that we can tick off the list.

So how should we mark up conversations now? Here’s what the spec now suggests:

Authors who need to mark the speaker for styling purposes are encouraged to use span or b.

Um… what? The b element? Really? You have got to be kidding.

Excuse me while I channel Carrie’s mother, but I can predict exactly how authors are going to react to this advice: They’re all going to laugh at you!

@gcarothers: Jaw, floor, WHAT?! http://bit.ly/48Bhta Why in the world would #html5 suggest using <b> tags to markup names?

@akamike: There are more appropriate tags than <b> for marking up names in conversations. “The b element should be used as a last resort…” #html5

@cssquirrel: Well, if the <p><b> recommendations for dialog in #html5 persist for a week, I know what I’m drawing.

Perhaps now would be a good time to mention that the cite element is also listed by the HTML5 Super Friends. Call me crazy but I think it might just be the right element for marking up the person being cited.

<p> <cite>Costello</cite>: <q>Who's playing first?</q> </p>
<p> <cite>Abbott</cite>: <q>That's right.</q> </p>

Cennydd has written a great article for Johnny Holland magazine called Wayfinding Through Technology—a preview of his EuroIA talk, The Future of Wayfinding. It dovetails nicely with some of the stuff that Adam Greenfield spoke about at dConstruct.

Meanwhile, over on OpenType, there’s an article on Wayfinding observations: Landmarks and cardinal directions. It uses the specific example of navigating Vienna:

The city center was also easy to find and I can easily place it on my cognive map. It’s across the river and Southwest of my hotel.

It’s interesting that the river is mentioned as being particular useful as an orientation point. The new iteration of the London tube map has ditched the Thames, to much dismay.

As promised, I’ve gathered the data from one of the exercises I administered at the dConstruct HTML5 and CSS3 workshop and totted the results up in a table.

There were 30 people in the workshop but I only managed to retrieve 22 results—I don’t know what happened to the missing eight sheets of answers. This is a smaller sampling than I was hoping for and I realise that it’s too small to be considered scientifically accurate but I think it’s still interesting to see the responses of 22 smart, savvy web developers.

Across the top (in the table header) are the possible answers; nine new elements in the HTML5 spec. Each row shows the answers given for each element as workshop attendees attempted to match up the names of the elements with the nine definitions provided from the spec. The most common answer in each case has been highlighted.

HTML5 Workshop Results

	article	aside	details	figure	footer	header	hgroup	nav	section
article	5	0	2	1	1	1	0	1	9
aside	1	11	1	3	2	0	0	0	2
details	1	6	8	1	4	0	0	0	0
figure	3	2	2	14	1	0	0	0	0
footer	0	0	10	0	10	1	0	0	1
header	0	0	0	2	0	16	0	4	0
hgroup	0	0	0	0	0	1	21	0	0
nav	0	0	1	0	0	0	0	19	2
section	12	0	0	0	1	1	1	0	7

Ideally, the table would show a nice uniform graph: a solid diagonal line from the top left left to the bottom right. The diagonal line is there but it isn’t exactly uniform.

For the record, here are the element names together with their correct definitions. I’ve included a little sparkline with each one to show the distribution of answers. A unanimous result would show one clear spike. Wobbly uneven sparklines indicate a corresponding uncertainty in the answers.

article

…a section of a page that consists of a composition that forms an independent part of a document, page, or site.

aside

…represents a section of a page that consists of content that is tangentially related to the content around it, and which could be considered separate from that content.

details

…additional information or controls which the user can obtain on demand.

figure

…some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

footer

…typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

header

…a group of introductory or navigational aids.

hgroup

…used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

nav

…a section of a page that links to other pages or to parts within the page: a section with navigation links.

section

…a thematic grouping of content, typically with a heading, possibly with a footer.

There are some interesting results here; some of them surprising, some of them expected.

The most easily identified element is hgroup. That’s also the only element name that isn’t taken from an existing English word. I don’t think that’s a coincidence. When the name of an element is created specifically to describe what that element does, it’s no surprise that the name and the definition are tightly coupled.

I was expecting to see more confusion between aside and figure. Both elements serve a similar purpose and in my opinion, the names could be swapped around without changing the definitions in the spec. But the data doesn’t support my hypothesis.

The confusion around footer surprised me. I would have expected to see more confusion between footer and aside than between footer and details.

The most glaring problem lies with section and article. This doesn’t surprise me. At this point, section and article are practically indistinguishable. For a while there, article had some more optional attributes—cite and pubdate—but those have now been removed. Now section and article have the same content model and appear to cover much the same kind of content:

…a thematic grouping of content, typically with a heading, possibly with a footer.

…a section of a page that consists of a composition that forms an independent part of a document, page, or site.

Witness the recent article on HTML5 Doctor wherein Bruce attempts to clear up the confusion and points out where the HTML5 Doctor site has been getting it wrong. If it’s tough for those smart guys to figure out when to use section, article or div, it doesn’t bode well for the rest of us.

Choosing the right element would be easier if there were some clear rules like “You can only use sections within articles” or “You can only use articles within a section” but as it is, you can nest sections in articles and articles in a section. With that much rope, authors are likely to hang themselves, overdosing on the semantic freedom.

I don’t think there needs to be a section element and an article element. I don’t have a particularly strong opinion about which one should stay and which one should go but a little trimming is definitely in order.

Now, if you’ll excuse me, I’m off to present this data to the list.

dConstruct 2009 took place in the Brighton Dome on Friday, September 4th. By all accounts, it was excellent this year. I saw less than a quarter of it.

I arrived bright and early with my suitcase in tow, ready to make a quick exit. My flight to Vancouver was leaving Heathrow shortly after 5pm and I was going to be making the two hour bus ride from Brighton. I watched Richard open the show, listened to Adam Greenfield melt people’s brains (in a good way), did a quick podcast recording for Boagworld, caught a bit of Mike and Ben’s talk and then I was out of there; dragging my suitcase over to the bus station to catch the 12:30 to Heathrow via Gatwick.

Melanie Wisden works in a Starbucks in Cardiff. But on Friday, September 4th, she took the day off work. She was driving her friend Samantha to Gatwick airport. Samantha was newly married—Melanie’s eleven year old daughter Mia was a bridesmaid at the wedding. Now Samantha was heading off on her honeymoon. Melanie dropped her off at Gatwick’s North terminal and then got back on the road at about 1:30pm.

The bus ride from Brighton to Heathrow takes about two hours. It would be shorter but there are a few stops along the way. Halfway through the journey, the bus pulls into Gatwick’s South terminal, lets passengers off, lets passengers on, and then moves on to Gatwick’s North terminal where it does the same thing. The bus is back on the road at 1:30pm.

I was sitting about halfway back in the bus, listening to a podcast on my iPod as we exited the North terminal roundabout. The bus juddered and smacked into a road sign—we had come off the road. We’ve gone over the kerb! I thought. The bus came to a rest on the median. It was a bumpy ride there for a moment but everyone seemed to be okay. I heard the bus driver say something like Where is she? or Where’d she go? (I can’t quite recall his exact words) and I thought Oh crap! Did we hit a pedestrian? I knew we hadn’t hit a car …I would have felt that, right?

A woman motorist has died in a collision involving a coach and a car at Gatwick Airport in West Sussex.

The bus driver was shaken up but he clearly instructed us to get off the bus immediately. We started to file out. I couldn’t understand why we were taking so long. Then I got to the door and saw that there was quite a gap between the door and the ground. That’s when I knew we were on top of something. It wasn’t until we were off the bus and walking away that I saw what was underneath.

Melanie Wisden, 34, from Cardiff, was killed instantly when her Ford Ka was crushed by a National Express coach just after 1330 BST on Friday.

The emergency services—ambulances, fire engines, and a helicopter—were on the scene in moments but it was clear that whoever was in the car must have died instantly.

We were taken to a staff canteen at Gatwick airport where the police took our statements, National Express tried to sort out our luggage and British Airways organised alternative travel arrangements. I wasn’t going to make my flight; something that normally would have been very annoying but now seemed insignificantly trivial. A day later, I made it to Heathrow—in a taxi, courtesy of National Express—and, after a mercifully uneventful flight, I arrived in Vancouver. From there I travelled on to Whistler, arriving the day before Jessica’s brother’s wedding.

Jeb and Anne were married in a lovely, relaxed ceremony in Canada on Sunday, September 6th.

A memorial service will be held for Melanie Wisden on Friday, September 18th at the Ely Church Of The Resurrection in Cardiff at 1.15pm, followed by cremation at Thornhill Crematorium, Wenallt Chapel.

dConstruct week is in full swing. The conference itself is tomorrow. Remy and Brian are doing their workshops today. Myself, Rich and Nat did our HTML5 and CSS3 Wizardry workshop yesterday.

I was handling the HTML5 side of things and had quite a bit of fun with it. I put together an HTML5 pocket book using using Natalie’s superb CSS. View it in a Webkit or Gecko-based browser and then print it out to experience the CSS3 transform magic. Natalie made a CSS3 pocket book for the workshop which was a nice self-documenting example of CSS transforms. Hers turned out much neater than mine—my folding fu isn’t so good. But hey, it’s the thought that counts and I figured it was nice to give every attendee something hand-crafted.

I prepared some exercises for the workshop and I have to admit that I had an ulterior motive with one of them. Each attendee was provided with two sheets of paper. One sheet of paper listed some new elements in HTML5 in alphabetical order:

1. article
2. aside
3. details
4. figure
5. footer
6. header
7. hgroup
8. nav
9. section

On another sheet of paper, I listed definitions of those elements taken from the spec but in no particular order:

• …a group of introductory or navigational aids.

• …represents a section of a page that consists of content that is tangentially related to the content around it, and which could be considered separate from that content.

• …used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

• …typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

• …some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

• …a section of a page that links to other pages or to parts within the page: a section with navigation links.

• …a thematic grouping of content, typically with a heading, possibly with a footer.

• …a section of a page that consists of a composition that forms an independent part of a document, page, or site.

• …additional information or controls which the user can obtain on demand.

I then asked the attendees to match up the definitions with the element whose name sounded like the best match. To be clear: this wasn’t a test of knowledge. I was testing the spec.

Giving this exercise to thirty very savvy web developers yielded some clear results. There’s definitely a lot of confusion around when to use section and when to use article. I’m not convinced that there needs to be two different elements, especially now that the article element no longer takes the cite or pubdate attributes. figure and aside were also an area of confusion.

When the workshop was over, I collected the pages with everyone’s answers. Once I get some time I’ll publish the results, probably in a spreadsheet. Then I can present that data to the WHATWG list. Some people on IRC were wondering why my superfriends and I haven’t presented our concerns by email. Well, we will. But I think there’s a lot of value in publicly discussing this stuff (and soliciting feedback). Mostly though, I’ll feel a lot more comfortable about raising an issue if I can back it up with some data. There’s a big difference between telling Hixie your opinion and giving Hixie data.

So, in a very real sense, I got a lot of the workshop. It took quite a while to put the workshop together. The face-to-face meeting with my unicorn-powered peers in New York proved to be absolutely invaluable. I was tweaking the slides right up till the day of the workshop; not because I was rearranging the content, but because the spec was literally changing overnight (albeit in small ways).

Now that the workshop is over, I can relax. And relax I will …in Canada. I’m off to Whistler this weekend for Jessica’s brother’s wedding, followed by a couple of days in Vancouver.

Alas, that means I won’t be around for all of dConstruct. I’ll be able to catch Adam Greenfield followed by Mike Migurski with Ben Cerveny before heading up to Heathrow. But I won’t be able to make it to BarCamp.

Well, I’m sure that everyone who’s coming to Brighton will have plenty of fun without me. And I plan to have plenty of fun in British Columbia …though at some stage, I need to make some time to collate all that yummy data from the workshop.