Tuesday, January 6th, 2009
The Audio of the System of the World
Four months after the curtain went down on dConstruct 2008, the final episode of the podcast of the conference has just been published. It’s the audio recording of my talk The System Of The World.
I’m very happy indeed with how the talk turned out: dense and pretentious …but in a good way, I hope. It’s certainly my favourite from the presentations I have hitherto delivered.
Feel free to:
- listen to the recording of The System Of The World,
- read the hypertext document The System Of The World or
- look through the slides on Slideshare.
The whole thing is licenced under a Creative Commons attribution licence. You are free—nay, encouraged—to share, copy, distribute, remix and mash up any of those files as long as you include a little attribution lovin’.
If you’ve got a Huffduffer account, feel free to huffduff it.
Sunday, January 4th, 2009
The Rise of HTML5
Registration opened a couple of days ago for the latest Clearleft event. UX London will be taking place from June 15th to 17th. This will be a very different event to dConstruct.
For a start, the format is based around workshops (although there will also be a day of presentations). Then there’s the timescale: UX London will last for three days. Finally, there’s the intimacy factor. Whereas the attendance for dConstruct is somewhere between 700 and 800 people, UX London will be deliberately limited to around 150.
Our motivation for putting together this event was partly to bring a kick-ass UX here in the UK for a change. But mostly we wanted to put together the kind of event that we wanted to attend. So we drew up our dream line-up and incredibly, we got everyone we wanted: Dan Saffer, Jared Spool, Jeff Veen …and Don fucking Norman (excuse my French but I find it very hard to say Don Norman will be speaking at UX London
without interjecting some indication of my excitement).
Andy has written more about the event on his blog which has, over the past week, arisen from its deep slumber.
The site itself launched right before Christmas. Natalie and I did the front-end build and I’m pretty damned pleased with how it turned out. Behold the liquidy goodness!
We used this as an opportunity to really push what Dan has been calling progressive enrichment
: sprinkling in some modern CSS declarations even if not every browser gets all of them—something that Malarkey has been banging on about for quite a while now.
So if you view the UX London site in IE6 it looks fine. Nothing special though. But if you view the site in a browser like Safari, a lot of little details shine through. The design is pretty much a test-case for the box-shadow property using RGBa. Depending on the browser width, multiple translucently shadowed elements can overlap and it’s interesting to see how browsers handle this (Safari’s additive approach seems correct to me).
On the markup side of things, we decided to write the site in HTML5. But wait! Isn’t HTML5 going to take another few decades before it’s finished?
Well, no. That little bit of bollocks was spread ‘round by people who misread the timeline, underestimating the importance of “working draft” and overestimating the importance of “proposed recommendation”. Admittedly, those are pretty confusing and unintuitive labels for it’s ready
and it’s been finished for ages and now it’s 100% supported in at least two implementations.
It turns out that when it comes to the markup, HTML5 isn’t all that different to what has come before. It’s all the DOM gubbins—which should allow a more declarative approach to building web apps—that is the real hard stuff that requires browser support in order to work. If you’re not interested in that side of things, much of the HTML5 spec won’t even be relevant to you. For your convenience, Michael Smith has put together a markup-only version of the spec.
From a semantic perspective, the most important additions to the markup language are the structural elements such as header, article, section and so on. Bruce Lawson has put together a test case to show that you can use these elements and still style them in most browsers. For pesky Internet Explorer, you can use a neat little JavaScript trick that John Resig discovered a while back. Alas, Camino still doesn’t play nice with styling the new elements. But that isn’t going to stop Bruce realigning his site to use HTML5’s new structural elements.
For the UX London site, we didn’t go quite that far. We stuck to using divs with class attributes for our structure. But we could still build on the work that has gone into the HTML5 structural elements. Rather than coming up with our own class names, we used the names proposed in the spec: article, section, aside, etc.
Now our document structure has pre-built documentation. Want to know what class="article" denotes? RTFM.
Using HTML5 elements as a basis for a naming convention isn’t a new idea. Malarkey has written about developing naming conventions from HTML5. Jon Tan also wrote about preparing for HTML5 with semantic class names. Oli Studholme put both of those articles together to create a handy little structural cheatsheet. Use microformat class names for the small stuff; use HTML5 class names for the bigger stuff.
Apart from providing easier documentation, there’s another good reason to take this approach: interoperability. Think about how much easier user styling would be if sites shared many of the same class names. Even if you don’t think that they are the best class names—I know, for instance, that Malarkey doesn’t like the presentational smell of footer—the benefits of an aggregate shared vocabulary could be very empowering. So if you do insist on creating a CSS framework that mandates using certain specific names (a concept I despise) please, please, please use those class names.
On the subject of user styling, there’s a site ID of uxlondon-com on the UX London site. Huffduffer, another HTML5 site, has an ID of huffduffer-com on every page. But rather putting these IDs on the body element, it seems more meaningful to me to add them on the html element itself.
A couple of weeks after the UX London site launched, another event site went live: the beautifully-redesigned An Event Apart. It’s also written in HTML5. Jeffrey has written about the design and Eric has written about the markup.
Huffduffer, UX London, An Event Apart and now The Watchmaker Project …there’s quite an exciting air of experimentation around using HTML5 right now. Personally, I’ve found it to be a fun way of breaking out and trying something new. I recommend giving it a whirl. Until recently you would have needed to use validator.nu to test your markup but now that’s been integrated into the W3C validator so all your old bookmarklets and tools will still work.
Even if you decide against writing in HTML5 itself, at least consider using those HTML5-inspired class names for your structural naming convention where appropriate.
Friday, January 2nd, 2009
Antipatterns for sale
Twply is a straightforward little Twitter app that sends @replies to email. It uses the password anti-pattern. Oh, but don’t worry. It states quite clearly on the site that Your password is safe with us. No worries!
Twply is up for sale …sold. That means all those passwords are available to the highest bidder ($1200 in this case).
Sleep tight, Twply users. May you wake to a better day.
Thursday, January 1st, 2009
Oh Nine
At the start of 2008, my past self wrote down a few resolutions for my future (now present) self:
- Reduce and/or offset your non-renewable energy output.
- Give blood.
- Lose some weight, you fat bastard.
- Play more bouzouki.
Let’s take them one at time…
Reduce and/or offset your non-renewable energy output.
Yeah… um… so that didn’t really work out all that well. Yes, I did fit energy-efficient light bulbs. Also, I don’t drive a car. That’s something of which I am not just proud but downright smug. But I did end up doing a helluva lotta travelling. Some of that was offset—all the Web Directions conferences are carbon neutral, for example—but I’m still responsible for a lot of jet fuel. My Dopplr animal is a squirrel, for crying out loud!
Still, I made the most of all that travel. Thailand and Japan—both new destinations for me—were certainly highlights but I also loved getting back to San Francisco and any trip to Alaska is bound to be good.
This year I’ll be cutting down on my travel. No, really! I mean… of course I’ll be going to South By Southwest again and I will be speaking at An Event Apart in Boston in June but apart from that, I’ll be staying close to home. Honest.
Give blood.
Score! I did this. Twice. I would have done it more but all that travelling makes it hard—they don’t like you to donate if you’ve just come back from somewhere exotic like, oh, the USA. Apparently it’s just awash with the West Nile virus in Summertime.
Seriously though… please, please, please give blood. Not only will you be doing a great service but I guarantee it will restore your faith in humanity to see the cross-section of society there with you.
Lose some weight, you fat bastard.
Alas, no. If anything, I might well be portlier now than I was this time a year ago. I need to start taking brisk walks along Brighton seafront and practising portion control in my food intake.
Yeah, we’ll see how that works out.
Play more bouzouki
Again, no. I played plenty of bouzouki with the band but my proficiency with jigs’n’reels is lacking. Being in Ireland for Christmas, including two days in Galway, has been a timely reminder of just how much I love trad music. I need to maintain that enthusiasm throughout the year and maybe even get out to a session or two.
So that was my scorecard for 2008. One out of four.
Given this woeful result, rather than add or replace any resolutions, I’m going to carry them over into 2009. I’ll start fulfilling them tomorrow. Or maybe Monday.
Please don’t hate me, future self.
Friday, December 26th, 2008
Sparklining Huffduffer
I’m back in Ireland for a little while. ‘Tis the season for merrymaking, munching mince pies, imbibing wine and—if you’re a geek—fiddling with code. That’s what I’ve been doing, sitting by the fire with my Macbook on my lap, hacking on Huffduffer.
I’ve been messing around with Google’s Chart API. I thought it would be nice to have some discreet little sparklines on profile pages. I had a little help from the ghost of Christmas past in the form of Brian’s 24 Ways article from last year.
The data I’m graphing is activity over time (huffduffing in this case). The time stamp of the first action is the starting point. The current time stamp is the end point. This timeline is then divided into 50 equal parts; the final sparkline will be 150 pixels long, giving 3 pixels per time period. Each action is allocated to the appropriate time slot. Once that’s done, the results are normalised according to the largest amount. So if the maximum activity in the timeline is six, then six becomes 100%; if the maximum activity is just one, then one is 100% and the resultant chart will be quite spiky.
You can see an example sparkline on my huffduffer profile, showing my huffduffing history at a glance. While I was at it, I added sparklines to tag pages as well. Here’s the tag page for “music”. I’ve styled them so that they don’t stand out too much. They’re supposed to look like quick pencil sketches.
For more than you ever wanted to know about sparklines, here’s Sparklines: theory and practice from the Ask E.T. forum.
Wednesday, December 17th, 2008
Welcome to the machine tag
At the same time that Flickr are demonstrating idiocy in the human resources department, they continue to do so some very cool stuff behind the scenes.
Aaron has been walking through some new API methods over on the Flickr code blog, quoting something I said in a chat with Steve Ivy:
something:somethingelse=somethingspecific
…which I don’t even remember saying but the shoe fits.
There’s something about the mix of rigidity and haphazardness in machine tags that appeals to me. While they all share the same structure, everyone is free to invent their own usage. If machine tags were required to go through a specification process we would have event:lastfm=... and event:upcoming=... instead of lastfm:event=... and upcoming:event=... but really, it simply doesn’t matter as long as people are actually doing the tagging.
With the introduction of these new API methods, it looks like there’s room to build more finely-tuned apps to pivot around namespaces, predicates and values.
Paul Mison has written an desktop-like machine tag browser which shows at a glance just how many different machine tag namespaces are out there. Quite a few pictures have been tagged with adactio:post=... since I first introduced the idea.
Tuesday, December 16th, 2008
The tragedy of The Commons
When Flickr announced The Commons at the start of this year, I made no secret of my enthusiasm for the project. Since then it has gone from strength to strength with more and more institutions adding their collections; the Powerhouse Museum in Sydney, the National Maritime Museum in Greenwich, and many more. That growth has largely been as a result of the tireless work of George Oates.
George has been fired. It beggars belief—it certainly beggars mine.
The Commons is not just one of the finest achievements on Flickr, it’s a shining example of just how great the web can be. If the project dies because of the idiotic actions of some short-sighted bean counters at Yahoo, it will be a great loss for you, me and our culture.
My trust in Flickr has been shaken. I’m beginning to think that entrusting Flickr with my photos, my data and my memories might prove to be an ill-judged decision.
Hacking Huffduffer with Last.fm
The Last.fm hack day took place in London yesterday. Much nerdy fun was had by all and some very cool hacks were produced.
Nigel made a neat USB-powered arduino-driven ambient signifier à la availibot that lights up when one of your friends is listening to music. Matt made Songcolours which takes your recently listened-to music, passes the songs through LyricWiki, extracts words that are colours, passes them through the Google chart API and generates a sentence of cut up lyrics (Hannah’s was the best: love drunk home fuck good night
). The winning hack, Staff Wars, is a Last.fm-powered quiz that allows people to battle for control of the office stereo—something that could prove very useful at Clearleft.
I knew I’d never be able to compete with the l33t hax0rs in attendance, so I cobbled together a very quick little hack to enhance Huffduffer. I hacked it together fairly quickly which gave me some time to hang out with Hannah in the tragically hip environs of Shoreditch. My hack has one interesting distinguishing feature: it doesn’t make use of the API. Instead, it uses two simpler technologies: microformats and RSS.
- Microformats. User profiles on Last.fm are marked up with hCard. If a URL is provided, the user profile also makes use of the most powerful value of XFN:
rel="me". If that URL also links back to the Last.fm profile withrel="me"—even if in a roundabout way—that reciprocal link will be picked by Google’s Social Graph API. I’m already making use of that API on Huffduffer to display links to other profiles under the headingElsewhere
. So if someone provides a URL when they sign up to Huffduffer and they’re linking to their social network profiles, I can find out if they use Last.fm and what their username is. The URL structure of user profiles is consistent:http://www.last.fm/user/USERNAME. - RSS. Last.fm provides users with a list of recommended free MP3s. This list is also provided as RSS. More specifically, the RSS feed is a podcast. After all, a podcast is nothing more than an RSS feed that uses
enclosures. The URL structure of these podcasts is consistent:http://ws.audioscrobbler.com/2.0/user/USERNAME/podcast.rss.
So if, thanks to magic of XFN, I can figure out someone’s Last.fm username, it’s a simple matter to pull in their recommended music podcast. I’m pulling in the latest three recommended MP3s and displaying them on Huffduffer user profiles under the heading Last.fm recommends
. You can see it in action on my Huffduffer profile or the profiles of any other good social citizens like Richard, Tom or Brian.
This isn’t the first little Huffduffer hack I’ve built on top of the Social Graph API. If a Huffduffer user has a Flickr account, their Flickr profile picture is displayed on their Huffduffer profile. When I get some time, I need to expand this little hack to also check for Twitter profiles and grab the profile picture from there as a fallback.
None of these little enhancements are essential features but I like the idea of rewarding people on Huffduffer for their activity on other sites. Ideally I’d like to have Huffduffer’s recommendation engine being partially driven by relationships on third-party sites. So your user profile might suggest something like, You should listen to this because so-and-so huffduffed it; you know one another on Twitter, Flickr, Last.fm…
Tuesday, December 9th, 2008
Shape shifting
I’ve been with the same ISP for years: Eclipse Internet. I never had any cause to complain until recently. I’ve been finding that certain types of requests simply weren’t completing; file uploads, some forms, Ajax requests…
I started googling for any similar reports. I found quite a few forum posts, all of them expressing the same sentiment; that Eclipse used to be good but that since getting bought out by Kingston, service had really gone downhill. Most alarmingly of all, I read reports of traffic shaping.
I called up technical support. They didn’t deny it. Instead, they tried to upsell me on a package that would give me an admin panel to allow more control over exactly how my packets were throttled.
Screw. That.
I started shopping around for a new ISP. When I twittered what I was doing, I received some good recommendations. Eventually, I was able to narrow my search down to two providers who both sounded good: Zen and IDNet. With little else to distinguish between the two companies, their respective websites became the deciding factor. That settled it. IDNet was the clear winner. Not only is their site prettier, it also validates and even uses hCard.
To cancel my Eclipese account, I needed to call them to request a MAC. Of course the reason why they make you call is so that they can try to persuade not to leave. Sure enough, the guy who took my call asked And can you tell me why you’re moving away from Eclipse?
Traffic shaping,
I responded.
Ah right,
he said. Technical reasons.
I corrected him. Moral reasons, actually.
I got the info I needed. I ordered my new broadband service. Today I switched over.
If you want to find out if your broadband provider is a filthy traffic-shaper, check to see if it’s listed on this wiki page of bad ISPs.
If you find yourself changing to a more ethical ISP, you too will probably be asked to explain why you’re jumping ship. Just tell them what you want:
Monday, December 8th, 2008
Feedback loopy
24 Ways is back again this year. Today’s article is a little something I penned called The IE6 Equation. Share and enjoy!
The design of 24 Ways has been refreshed for this festive season and it has prompted quite a varied reaction. That’s always a good sign. You might love it or you might hate it but you’re probably not ambivalent about it. Veerle has written more on this subject, provocatively asking Do you innovate or opt for the safe route in web design?
The implementation prompted as much feedback as the design itself. Clearly, 24 Ways is a site with an immovable deadline. It’s an advent calendar so it must go live on December 1st. This year, that meant that some cross-browser issues weren’t sorted out on the first day. A few days after the site launched, everything was hunky-dory but in the interim, there was a clamour of epic fail!
from indignant visitors to the site. I’m finding that Andy’s thoughts on this term of derision has become the canonical document to point people to for a healthy dose of perspective.
Merlin Mann’s observation, delivered in fewer than 140 characters, deserves to be framed and mounted next to every input device:
If you’ve ever created anything on the web—a story, a picture, a video or an application—then you’ll be familiar with the range of responses that will result. I don’t just mean the laughably mindless babblings of the Diggtards and Reddidiots; I’m referring to that peculiar effect that sitting behind a monitor has on otherwise level-headed well-adjusted people. In the same way that some people undergo a Jekyll and Hyde transformation behind the wheel of a car, computer keyboards have a tendency to bring out the fuckwad in many of us—I include myself amongst that group.
The upshot of this effect is that criticism tends to be harsher online than if it were delivered in real life, which might just be due to the lack of phatic communication. Should you find yourself on the receiving end of some criticism, having built a labour of love, I’ve put together a hierarchy of verb tenses by which you can weigh the feedback you’re receiving:
- Past. Advice from someone who has also built something is valuable. Their opinion is informed by experimental data.
- Present. If someone else is also building something, it’s worth paying attention to what they have to say.
- Conditional. This is the bottom of the pile. If someone describes what they “would” have done or what you “should” have done, it isn’t worth wasting your retinas on the photons of that feedback.
Although this hierarchy of verb tenses was prompted by web-native creations, it probably works equally well for film-making, plumbing, literature, dentistry, music, or just about any endeavour of the human spirit.
