Archive: July, 2007

I’m back from my week in New York and, as promised, I took a whole bunch of typical tourist photos. Needless to say, I had a wonderful time: that city really is all it’s cracked up to be. But for most of my stay I wasn’t being a tourist; I was working.

I spent five days enjoying the company of the standards-savvy developers at Time Warner. They couldn’t have been nicer. I even had my own office on the 19th floor for the duration of my stay.

Two of my days were spent giving workshops in DOM Scripting and Ajax. These workshops went well but given the banner-ad driven business model of most Time titles, it seems unlikely that the marketing folk will allow much Ajax. It was kind of heartbreaking to see the developers’ ideas for improving the user experience get dashed on the rocks of page views. Still, things may change. Nielsen is changing its metrics from pages viewed to time spent. David Sleight is doing some celebratory cartwheels at this news. Had I known last week that he works in the office directly across from the Time Warner building, I might have been able to catch a glimpse of his gymnastics from my office window. Maybe next time.

The rest of my time in the belly of the publishing beast was spent looking at some code, chatting and generally geeking out with my Big Apple colleagues. I found some time in the middle of all this to give an impromptu presentation on microformats. Magazine-based sites (especially those in the sports and entertainment categories) are ripe candidates for some hCalendarisation.

I really enjoy talking about microformats as my captive audience at the BBC last month can attest. Just wind me up watch me go. When I’m on my microformats high horse, there are a number of recurring themes that I always touch on: where microformats come from, how you can consume them, and who’s publishing them already. On that last point, I usually cite some of the cool kids like Flickr, Upcoming and Twitter as well as the big names like LinkedIn and Yahoo Local. When Yahoo started supporting microformats, Richard MacManus was prompted to ask what chance, Google? Well, ever since Kevin Marks left Technorati to join Google the chances have been very good indeed.

Last week Google put hAtom in all newly created Blogger templates. That was a welcome step but today’s announcement completely overshadows it: Google Maps now returns search results in hCard:

Today we’re happy to announce that we are adding support for the hCard microformat to Google Maps results. Why should you care about some invisible changes to our HTML? By marking up our results with the hCard microformat, your browser can easily recognize the address and contact information in the page, and help you transfer it to an addressbook or phone more easily.

This is a huge leap in the number of published hCards on the Web. It would be interesting to get exact numbers but I’d guess that the amount of places returned in Google Maps searches runs into the millions. The beautiful thing about all this is that I suspect the change was trivially easy: just adding a few extra class names into a template.

With this seismic shift in the landscape of published microformats, I think we in the microformats community may have to shift our focus slightly. Instead of just being concerned with evangelising the publishing of microformats, it’s now incumbent upon us to show regular Web users how they can consume this wealth of semantic information, whether it’s through the use of a Firefox plugin like Operator, bookmarklets or—soon—native browser support.

Our work is just beginning but before we dive in, we can afford to pause for a few moments today to celebrate this great leap forward.

Playing a gig is tiring. There’s the actual playing on stage—which can get pretty sweaty—but it’s the hauling of amps and instruments that inevitably means that a gig night is a late night. So after playing a Salter Cane concert on Friday night, I had a nice long lie-in on Saturday.

When I did finally emerge, I slothfully sat with my iBook, casting a casual eye over the Web via Twitter, Flickr and all my habitual haunts. At five minutes to midday, I glanced at my mobile phone and saw that I had missed a call. In no particular hurry, I listened back to my voice mail.

The message was from Robert Harding, the authorised Apple service provider who was replacing the hard drive in my borked Macbook. The message said that my laptop was ready but I’d need to pick it up before noon. That was just five minutes away!

I quickly called him back and asked if he could stay open a little longer. It turns out that he normally doesn’t even work on a Saturday but he had gone the extra mile to get this done and he really needed to be somewhere else soon… but he would hang on until ten past twelve.

I’ve never dressed so fast in my life. While I was donning some clothing, Jessica called a taxi for me. I ran downstairs and began counting the seconds until the cab came ‘round the corner. It showed up, I hopped in, and away we went.

I made it. Just. While the taxi waited outside, I ran in and grabbed my Macbook, thanked Robert Harding profusely—he gets a thumbs-up from Jane and Richard too—and took the same cab back home.

Now I had my Macbook back with a brand new hard drive. Thus began a long day of file transfers, downloads, SVN checkouts and cabalistic command-line push-ups involving Apache, PHP and MySQL. I’ve just about managed to restore the machine back to the state it was in before its meltdown.

And not a moment too soon: in a few minutes I’ll be heading to the airport to grab a flight to New York where I’ll spend the week giving workshops and consulting with Time Warner. I had more or less resigned myself to bringing the iBook but, assuming that this machine stays fixed, the extra power of the Macbook will come in handy.

Expect numerous clichéd tourist photos in my Flickr stream.

I attended my first Brighton Geek Girl Dinner last week. I was there as a guest of Jessica—guys are permitted to attend if they are guests of girl attendees—but I was also present in the more official role of being a sponsor.

The event was partly sponsored by dConstruct. As part of the sponsorship deal, we’re giving away two sets of two tickets to the conference. If you’re a girl geek, you’ve got until July 31st to win these tickets (and you know how coveted they are). You can find all the details on Rosie’s blog.

Denise Wilton, who will be speaking at this year’s dConstruct, was the guest of honour at the dinner. She gave a great talk about building personality into applications. A lot of it was about the importance of good, suitable copy. This is the kind of thing that Tom Armitage talked about at Reboot this year in his presentation The Uncanny Valet. In fact, Tom specifically mentioned the example of “little moo” and “big moo”.

Denise works at Moo, you see. Those lovely people are responsible for cute business cards and note cards. Now they’ve added another tactile toy into the mix: stickers.

I was lucky enough to get a sneaky try of the latest product before it officially launched. As expected, the process of putting together a sticker book is straightforward and fun. And the stickers themselves are really nicely finished. I expect to see lots of these little pics cropping up on notebooks, laptops and mobile phones.

To celebrate the official launch of Moo stickers, there’ll be a party in London tonight. I’ll be going (of course!) and in true coals-to-Newcastle fashion, I’ll be bringing some stickers with me… microformats stickers, courtesy of Dan.

It sounds like Mashup Camp was a hive of very productive activity. Kevin Lawver gave a presentation on portable social networks but instead of just talking about it, he wrote some Ruby code. Kevin is using OpenID for log in, followed by hCard parsing and XFN spidering (see also: Gavin Bell’s work). Superb stuff!

Meanwhile, Plaxo is now supporting OpenID and microformats thanks to the efforts of Kaliya and Chris.

And just in case you think that this is still a niche geek thing, here are the job details for Program Manager of Internet Explorer over at Microsoft:

Does the idea of redefining the role of the Internet browser appeal to you? Do the terms HTTP, RSS, Microformats, and OpenID, excite you? If so, then this just might be the opportunity for you.

When I got my new Macbook just over two months ago, I was somewhat wary of how it would compare to the workhorse of an iBook that I’d had for so long. I’m not necessarily saying that Intel chips are inherently shit but I had heard enough horror stories from friends to make me think that a good ol’ G4 was a geek’s best friend.

Pretty soon though, I got used to the Macbook’s speed and power and I quickly learned to live its quirky reflective screen. Before long, it became my main machine.

How premature of me! Last night the Macbook started making regular ticking noises. A loud click is emitted every second. I tried shutting down the laptop and was confronted with the spinning beachball of death so I held down the power button to force a shutdown.

After letting it cool off for a while, I tried starting up the Macbook. The ticking resumed immediately. And now, instead of booting into OS X, I get the dreaded flashing question mark folder. PRAM zapped. System Management Controller reset. All to no avail.

I’ll probably have to send the laptop away to get repaired. But I really can’t afford to be without a laptop—I’ve got a trip to New York coming up next week that involves two days of workshops. So I dug out my old iBook and—touch wood—it seems to be working okay. No freezes or kernel panics yet. Sure, the iBook feels a bit slow and claustrophobic compared to the Macbook but at least it isn’t constructed made of shoddy hardware.

I have a lemon that’s less than three months old. Tomorrow I’ll begin the long hold’n’explain with the Corkonian support staff. I hope they’ll deal with this situation lickety-split. I’m not happy about this.

It could be worse though. At least I’ve only got a couple of months of photos and music to lose. Over at The Onion, you can see ongoing coverage of Webcrash 2007:

Although the Internet did restart, all data had been lost. At an emergency press conference, White House Press Secretary Tony Snow revealed that the goverment does not have a back of the internet but had “always meant to get around to making one.”

I’m preparing for a big day at the Clearleft HQ. Tickets for dConstruct 2007 go on sale at 11am today.

Historically, dConstruct has always been fast to sell out (to sell out of tickets I mean… not to betray its principles). The first dConstruct sold out in just half an hour but there were only a hundred places to fill. Last year’s conference had 350 places and took a day and a half to sell out. This year we’ve got a lot more room—about 600 seats. I think we’ll manage to fill all the seats but tickets probably won’t sell out quite as fast as previous years. If you’re of the gambling persuasion, place your bets now.

I’m reviving the podcast of the conference; it was pretty popular last year. Once again I’ll be releasing sporadic, short, snappy episodes in the run-up to the event. I’ve already got two in the can: a retrospective of last year’s talks and a chat with some of the Last.fm folks which was recorded at the culmination of a night of carousing in San Francisco. I think that one will be hard to top. I may have to record all my interviews in the same manner.

This year’s dConstruct will be quite different from previous years. There’s the subject matter for a start: Designing the User Experience. Then there’s the workshops. For two days before the conference, you have the chance to attend full-day hands-on workshops in the salubrious surroundings of Casa Clearleft. Places on the workshops are limited to 15 people to keep things intimate and two of the workshops have already sold out. But you can still book a place on Thomas Vander Wal’s Tagging workshop and there are still places left for the workshop that’s dearest to my heart: Microformats.

The microformats workshop will be a joint effort by myself and Tantek. With our combined strength, we can end this destructive conflict and bring order to the galaxy… or, failing that, deliver a kick-ass workshop that will embed knowledge of microformats straight into your neocortex. We’ve got lots of ideas and I hope we can squeeze them all into one day.

So if you or your organisation has any interest in the semantic power of microformats, then you or your boss should book a ticket now.

Oh, and did I mention that attending a workshop automatically gets you a free ticket to the conference too?

Update: Wow. Tickets sold out faster than I thought—just 6 hours. Now the only way to secure a ticket to the conference is to grab a workshop ticket.

I’ve been making some tweaks to the CSS for the default skin here at adactio. If you only ever read via RSS then you won’t have noticed but I’ve been adjusting the vertical rhythm.

I also wanted to get some horizontal alignment: I wanted to make sure that the bottom of the first heading in the main column lined up with the baseline of the first heading in the sidebar.

My basic unit is 20 pixels: a font size of 12 pixels with a line height of 1.6667. Whatever sizes I made the headings, I wanted to be sure that they were multiples of this basic unit.

body {
 font: 12px/1.6666 Helvetica,Arial,Verdana,sans-serif;
}
body * {
 font-size: 1em;
}
* html body {
 font-size: 76%;
}

Because Internet Explorer refuses to resize text specified in pixels, I’m using the * html hack to give it a percentage value. Using any kind of hack—or filter—makes me feel slightly icky. Once I’ve established the base font size using pixels, percentages, or any other unit, I can use ems to scale up and down from here on out.

The level two heading in the main content takes up 40 pixels in total (twice the basic unit). The font size is 24 pixels, the top padding is 8 pixels and the bottom padding is also 8 pixels.

h2 {
 line-height: 1;
 font-size: 2em;
 padding-top: 0.3333em;
 padding-bottom: 0.3333em;
}

So while the overall size is 40 pixels, the descent is at 32 pixels: 40 minus 8 (the bottom padding).

I wish I could accurately calculate the baseline but as far as I can tell, font-size is calculated from the ascender height to the descender height. In the absence of any reliable way to pinpoint the baseline, I’m going to have to work with where the descent begins instead.

Level three headings also take up 40 pixels in total but the space is apportioned differently. The font size is 18 pixels, the bottom padding is still 8 pixels but the top padding is 14 pixels.

h3 {
 font-size: 1.5em;
 padding-top: 0.7778em;
 padding-bottom: 0.4444em;
}

The descent is still at 32 pixels: 18 plus 14.

The same pattern follows through for level four headings. The font size is 16 pixels, the top padding is 16 pixels and the bottom padding is 8 pixels. So the overall size is still 40 pixels (twice the base unit) and the descent remains at 32 pixels (16 plus 16).

h4 {
 font-size: 1.3333em;
 padding-top: 1em;
 padding-bottom: 0.5em;
}

So far, so good. With a little bit of addition, it isn’t too hard to ensure that everything slots nicely into the rhythm established by the base unit.

It gets a little trickier with the content in the sidebar. There, the basic unit has been scaled down to 15 pixels: a font size of 10 pixels with a line height of 1.5.

.box {
 font-size: 0.8333em;
 line-height: 1.5;
}

I wanted to make the bottom of the level three heading in the sidebar line up with the baseline of the level two heading in the main content, but I still wanted everything in the sidebar to follow its own vertical rhythm.

The font size of a level three heading in the sidebar is now scaled down to 15 pixels (18 pixels multiplied by 0.8333). I’ve changed the top padding to be 17 pixels and the bottom padding to 8 pixels.

.box h3 { padding-top: 1.1333em; padding-bottom: 0.5333em; }

This gives me the descent at 32 pixels that I wanted. Unfortunately, the overall size of 40 pixels isn’t a multiple of the base unit of the sidebar (15 pixels).

Further down the page, there are so many factors influencing the positioning of all the elements that it’s almost impossible to guarantee any kind of horizontal alignment between both columns. Still, I was happy to get things lining up at least at the beginning of the page.

You can peruse the style sheet if you like. You’ll see that I’ve also made some changes to the fonts I’m using. Gone are the headlines set in Verdana with body copy in Trebuchet MS. Instead, I’m using the oh-so-hip Lucida Grande for the body with some negative-spaced Helvetica for the headlines… the same kind of headline style I’ve been using in my presentation slides.

I really ought to tweak the vertical rhythms on all the other skins too but I’m not sure I can face all the maths just yet.

In the meantime I’ll be doing my homework by re-reading Richard’s classic 24 Ways article and Mark’s trials with incremental leading.

When I arrived at the Clearleft office yesterday morning, I found Andy and Richard in mid argument.

“Indigo? No! It’s India”, said Andy.

“It says Indigo here,” Rich responded.

“Well I’m using the CAA alphabet.”

“Are you talking about phonetic alphabets” I interjected, “‘cause there’s more than one, y’know.”

I was then challenged to see how far I could get. “Alpha, Bravo, Charlie, Delta…” I did alright for a while but my brain started giving up later in the alphabet.

But it got me thinking. I should at least know how to spell certain things phonetically. For those phone calls when it really matters, it would be nice to be able to rattle off my postcode as Bravo November Three, One Delta Hotel. And really, everyone should know how to phonetically spell out their own name, right?

The office conversation turned to other matters—like which parts of Brighton were the most dangerous, with Sophie informing us that Waterloo Street (the street right down from mine) leads in the category of murder.

Cut to this morning. After a nice long lie-in, I sauntered into the living room, still pyjamad and robed, to the sound of some shouting from outside.

“Sounds like there’s another random crazy person shouting out there” said Jessica.

I looked outside and saw that the shouting was coming from a scarily stocky looking guy in the garden of the house directly across from us. Just a week ago, that house was the centre of a huge police raid involving detectives and officers in what looked like riot gear. I’m assuming that whatever they arrested him for didn’t stick.

Then things got scary. The guy came out onto the street. He had something in his hand. That something turned out to be a knife. He started shouting at strangers walking along the street and waving the knife about.

I ran to the phone and dialled 999. I could see some other people on the street doing the same thing with their mobiles. At least I was safe on the balcony—the people at ground level needed to take care of their own safety.

I started giving a blow-by-blow account over the phone of what I could see. I made sure to mention that this guy was almost certainly previously known to detectives as part of an ongoing investigation.

He started chasing people… down Waterloo Street. It was beginning to look like the street would be holding onto to its reputation for a while.

A police car arrived, screeching around the corner. The knife-wielder stopped chasing the civilians and started running towards the police car. They met in the middle of the street. He pounced on top of the car and started hammering on the roof.

I was doing my best to relay all of this down the line but this was all happening about 400 feet away from me at this point.

Another police car arrived. The officers got out. I couldn’t see clearly what was going on but I’m guessing they were trying to get him to put down the knife.

He started running back up the street. The four police officers followed. He turned. I saw him lash out with the knife. One of the police officers jumped back. I couldn’t tell if the knife had connected.

I saw truncheons in the hands of the police officers. It was clear at this point that he wasn’t about to give up the knife willingly. With a few co-ordinated blows, he was down. I’m generally not a big fan of resolving situations with violence but in this case, I felt relieved.

At the other end of the phone line, the man taking my call was thanking me for my help.

“Can I just get your name?” he asked.

“Sure. It’s Jeremy Keith”, I said.

“Jeremy… ?”

“Keith”, I said, and I started to frantically try to remember how that would be spelt in the phonetic alphabet. My mind was a blank. Must have been all the adrenaline.

“K.E.I.T.H.” I said, lamely.

Of course as soon as I put the phone down, I remembered. “Kilo!… Kilo Echo Indigo Tango Hotel. Damn it!”

As I write this, Waterloo Street has been cordoned off. The “suspect” is in custody. I’m still in my pyjamas. The first thing I did when I put the phone down was to Twitter. Then I Flickred. Now I’m blogging.

Yeah, I reckon I’ve got my priorities about right.

Date

3 July 2007 10:37:16 BDT

Subject

Adactio message from Michael McDonald

Mister Wong, Europe’s largest Social Bookmarking portal, is now available in English!

My name is Michael, from Mister Wong, and I am preparing the launch of the portal for the English speaking community. Your blog, Adactio, caught our eye while researching. We would, therefore, like to warmly invite you to try out Mister Wong as a beta tester.

In exchange for importing your bookmarks and feedback, you will receive a Mister Wong T-shirt and a pin set. In addition, we are also giving away an iPod Nano to one of our lucky testers.

Date

3 July 2007 10:47:09 BDT

Subject

Re: Adactio message from Michael McDonald

Hi Michael,

Great! Here’s a bookmark I’d like to share with you:

Mister Wong, the Offensive Social Bookmarking Portal

kthxbai!

Tchuess,

Jeremy

The latest social networking app de jour is called Pownce. Like most people, I signed up a few days ago and starting playing around.

If you read the 140 character reviews of Pownce on Twitter, you’d be forgiven for thinking that Pownce is some kind of Twitter clone. Here, for example, is the collected wisdom of Paul Boag:

Just dont get pownce. Just feels like Twitter but i need to invite all my friends again

Not sure I can be bothered to update both twitter and pownce. Might have to make a decision soon.

It’s understandable, I suppose. Pownce lets you send little updates… just like Twitter. You can share links… just like Del.icio.us. You can share share events… just like Upcoming. So comparing Pownce to any of these services is understandable, I suppose. But I am reminded of the story of the blind men and the elephant. It seems that many of my own friends are displaying a disappointing lack of imagination by only comparing Pownce to what they already know.

The key feature of Pownce is the ability to share files. If you read the about page, the service is defined in a nutshell:

Pownce is a way to send stuff to your friends.

Stuff + friends. And like all the best apps, it was built to scratch an itch:

Pownce is brought to you by a bunch of geeks who were frustrated trying to send stuff from one cube to another.

If you want to compare it to anything, Dropsend feels like the closest competitor. Pownce is a pain-free way of sharing music, video and images amongst a discrete group of people.

And that’s the other key point: groups of people. It’s no coincidence that this app has support for groups built in from the start. The combination of file sharing with groups could potentially make it a killer app. It could be a social app like Twitter or whatever, but I think it could just as easily be a productivity app, more akin to something from 37 Signals.

Here’s an example: I’ve got everyone in the Clearleft office signed up. Each of us can have as many friends as we want but as long as we each have a Clearleft group, we can share files, links, events and notes with one another.

I’ve also created a Britpack group. If enough of my fellow Illuminati sign up, I can share stuff privately with them—something I can’t do on the mailing list because it quite rightly strips out attachments.

Another potential use would be for my band, Salter Cane. Emailing songs around is a royal pain. Being able to share MP3 files with an addressable but private URL could be really handy.

Far from being another Twitter or Jaiku, Pownce is a completely different part of the ecosystem of the social web.

I still plan to put public events on Upcoming and videos on YouTube, Viddler, Vimeo or wherever. But for that space between private and public, when I want to share something with a certain number of people, Pownce sure beats CCing a bunch of email addresses.

There’s another unspoken advantage that Pownce has over other social uploading sites like YouTube. If you’re sharing a file that might be slightly bending the law around license agreements or copyright, the ability to restrict the circulation could save everyone a lot of hassle. What the RIAA and MPAA don’t know won’t hurt ‘em.

The utility of Pownce isn’t the only reason I like it. It’s also really nicely designed. I don’t just mean the visual design—which is lovely, thanks to Daniel. The interaction design is well thought-out.

This is a surprisingly full-featured app considering that just four people put it together. There was just one full-time programmer for the website: Leah Culver. In spite of that, the site has launched (still in Alpha) with a whole bunch of features. The notifications and privacy settings, for example, are really nicely done. There’s also a nice “friends of friends” feature to help you track down people you might know.

Oh, and it’s got one of the best 404 pages ever.

Under the hood, everything has been put together with Django with storage handled by Amazon’s Simple Storage Service. If you peek into the markup, you’ll also find a bunch of nice microformats.

There’s also a desktop app for the service. It’s built using AIR née Apollo. It’s pretty slick and frankly, seeing an independent product like this is going to be far more likely to convince me of the benefits of the platform than any product demo from Adobe.

There are whole bunch of other little things that I like about Pownce that add to its personality—like the gender options in the profile form or the ability to choose themes—but I’ll stop going on about it. The key thing is that I can see this service filling a need through the combination of groups + file sharing.

If you’ve tried Pownce and come away feeling that it’s just like Twitter, you’re doing it wrong.

When I gave my somewhat pretentiously entitled talk at XTech—Microformats: The Nanotechnology of the Semantic Web—I stretched the whole nanotech metaphor to its limit. One of the things I talked about was grey goo. I was referring to the danger of there being a microformat for everything. As has been said many times, if in two or three years there are hundreds of microformats then we will have failed.

There’s a danger of grey goo from another quarter: the temptation to unnecessarily extend existing microformats. This is something that has come up a few times on the microformats-discuss list. I believe that this temptation can be battled using the same prophylactic that protects the web from an over-infestation of microformats… The Process (cue dramatic music).

The first question to answer is whether or not there is a real problem to be solved. Remember that microformats operate on the 80/20 principle so if I proposed extension doesn’t apply to around 80% of use cases and requires more than 20% extra effort, then the price is too high.

The next step in the process is to look at whether an existing format already solves the problem. In my experience, this is the point at which the call for potential extensions can be resolved by casting the microformat net a little wider.

Here’s a recent example that came up on the mailing list…

Why not extend hCard to add a “date of death” field?

Now, first of all, I don’t think that this is a common use case but let’s set that aside for the moment and concentrate on whether it makes sense to add a new field to the hCard spec.

hCard is a one-to-one mapping of vcard to HTML and vcard doesn’t have a “died” field. There is, however, a bday for date of birth. So it doesn’t seem unreasonable to ask for a corresponding field for date of death. Here, for example, is the hCard for an historical figure that encodes a birth date but there’s no way of encoding the date of death:

<p class="vcard">
<span class="fn">Robert Hooke</span>
was born on
<abbr title="1635-07-18" class="bday">
July 18, 1635
</abbr>
and died on
March 3, 1703.
</p>

As it turns out, this is unnecessary. There’s already a format for encoding start and end dates. That format is hCalendar. If you reconsider a person’s life as an event, then you can encode birth and death:

<p class="vevent">
<span class="summary">Robert Hooke</span>
was born on
<abbr title="1635-07-18" class="dtstart">
July 18, 1635
</abbr>
and died on
<abbr title="1703-03-03" class="dtend">
March 3, 1703
</abbr>.
</p>

Now you’ve successfully encoded the event data but you aren’t explicitly marking this up as being a person.

One of the design principles of microformats is that they can be embedded within one another. So there is no reason why you can’t combine a person with an event like this:

<p class="vcard vevent">
<span class="fn summary">Robert Hooke</span>
was born on
<abbr title="1635-07-18" class="dtstart bday">
July 18, 1635
</abbr>
and died on
<abbr title="1703-03-03" class="dtend">
March 3, 1703
</abbr>.
</p>

Et voila! Now you’ve encoded the date of the person’s death without unnecessarily extending hCard.

The trick is not to get too fixated on using a single format. Use the right tool for the job.

It’s kind of like the situation with front-end development. There are three separate technologies, each one with its own purpose:

1. HTML for structure.
2. CSS for presentation.
3. DOM Scripting for behaviour.

Here too there’s a danger of trying to overextend a technology beyond its purpose. Hence the call for “CSS-only” fly-out menus and JavaScript that generates page content.

Thinking about it, the existence of a bday field in hCard is kind of like the :hover pseudo-class in CSS. Putting event data into a format for contact details is as slippery a slope as putting behavioural controls into presentation.

As soon as you stop fixating on trying to encode everything in one single format then a whole world of possibilities opens up with microformats simply by embedding them within one another. The proposed hResumé format is an amalgam of existing microformats: skills marked up with rel-tag, previous jobs marked up with hCalendar, and so on.

Likewise there’s been a call for a genealogy microformat. But I think that the information required for a family tree—at least for the 80/20 situation—can be handled with a combination of existing microformats:

• hCard for people,
• hCalendar for lifespans and
• XFN for relationships.

I really enjoy coming up with unexpected combinations of microformats. It’s as if the semantic information is increased exponentially.

Staying with the hCard/hCalendar example above, suppose I used Robert Hooke’s Wikipedia entry as the url field:

<p class="vcard vevent">
<a class="fn url summary"
href="http://en.wikipedia.org/wiki/Robert_Hooke">
Robert Hooke
</a>
was born on
<abbr title="1635-07-18" class="dtstart bday">
July 18, 1635
</abbr>
and died on
<abbr title="1703-03-03" class="dtend">
March 3, 1703
</abbr>.
</p>

Because of Wikipedia’s tag-space URLs, I could tag the current document with “Robert Hooke” by adding rel-tag:

<p class="vcard vevent">
<a class="fn url summary" rel="tag"
href="http://en.wikipedia.org/wiki/Robert_Hooke">
Robert Hooke
</a>
was born on
<abbr title="1635-07-18" class="dtstart bday">
July 18, 1635
</abbr>
and died on
<abbr title="1703-03-03" class="dtend">
March 3, 1703
</abbr>.
</p>

And seeing as I greatly admire Robert Hooke I can also encode his relationshipto me as “muse”:

<p class="vcard vevent">
<a class="fn url summary" rel="tag muse"
href="http://en.wikipedia.org/wiki/Robert_Hooke">
Robert Hooke
</a>
was born on
<abbr title="1635-07-18" class="dtstart bday">
July 18, 1635
</abbr>
and died on
<abbr title="1703-03-03" class="dtend">
March 3, 1703
</abbr>.
</p>

hCard, hCalendar, rel-tag and XFN all together in a single sentence. Microformats are interesting enough on their own but they get really powerful when you mash them up together.

I moved to Brighton almost seven years ago now. It’s funny, I still think of myself as a newcomer but I guess if you can remember the West Pier before it burned down, you can consider yourself a local.

Brighton has always had a great web/tech scene. While there’s no one big employer in the town, there are lots and lots of small agencies and freelancers. Rather than seeing one another as rivals, there’s a nice spirit of cooperation between all these geeks (helped in no small part by the Brighton New Media mailing list).

Lately, I’ve had the feeling that the scene has, if anything, improved. There are definitely more geek-related activities going on in Brighton. In fact, I’d say that on any given night of the week, Brighton would give London a run for its money.

Some friends of mine have put together a new site called Sussex Digital to aggregate all the geek-related activity into one place.

Scanning down the list of regular events reveals just how much is going on:

• Brighton Bloggers meetups,
• Brighton Coding Dojo nights,
• Brighton Girl Geek Dinners,
• Flash Brighton,
• Skillswap
• £5 App,
• …and more.

Recently I attended a Geek Wine Thing. On the same night there was a Flash Brighton meetup and an Agile Forum. I am, quite literally, spoiled for choice.

If you live in Brighton, be sure to check out the Sussex Digital website and subscribe to the events calendar. You can also get updates via Twitter.

I love the fact that Sussex Digital is a grassroots effort made by a couple of enthusiastic guys… that would be Josh and Dave then.