Archive: July, 2009


                    5th                     10th                     15th                     20th                     25th                     30th     

Thursday, July 30th, 2009

Extract colors from photos and make color schemes | ColorSuckr

A very handy tool for extracting colour schemes from photographs.

Wednesday, July 29th, 2009


I’ve been turned into a caricature. Again.

First there was my Happy Webby, now it’s Smashing Magazine (and that’s not even counting CSS Squirrel).

Happy Webby illustration by Brad Colbow

The very talented Brad Colbow created a comic version of my post Misunderstanding Markup. Not a bad likeness, eh? Mind you, I think Eva-Lotta Lamm really managed to capture my essence at dConstruct last year.

Jeremy Keith @ d.construct 2008: The System of the World

There’s no denying it; I’m much more likely to read something from start to finish when it’s in comic form. Scott McCloud’s Google Chrome comic is the perfect example—it’s unlikely that I would have read the entire technical documentation for a web browser if it hadn’t been presented as . Now take a look at the “about” page on Huffduffer—wouldn’t you be more likely to digest that content if it were illustrated?


At the start of this year I made a vow to myself to reduce my level of overseas travel. It’s working out pretty well. My Dopplr animal has been downgraded from a squirrel to a butterfly.

I’ve been to a grand total of two conferences in the states this year; the obligatory South by Southwest in Austin and An Event Apart in Boston—it’s always an honour (and a surprise) to be asked to speak at that one. That’s quite a reduction compared to last year and it looks like I won’t be adding to that short list before the year is out.

Reducing my overseas travel hasn’t meant a reduction in attending great events. As well as all the Barcamps and Hackdays, London can boast some world-class conferences like @media and UX London. In fact, if I want to attend kick-arse conferences in the UK, I don’t even need to leave Brighton.

dConstruct is just over a month away. The line-up is particularly stellar this year. Rather than playing it safe, we’ve decided to push the boat out with the challenge of Designing for Tomorrow. To answer that challenge, we’ve lined up the finest minds of the next decade. Adam Greenfield! Mike Migurski! Russell Davies! (no, that one). Expect plenty of mind-boggling talk on ubiquitous computing, data visualisation, mobile design, and science-fiction interfaces.

Think it’s not relevant to your day-to-day work? Think again. And learn to exercise your imagination.

Anyway, tickets are a measly £125 so if you think that’s not worth it, might I suggest diverting your funds to getting a good psychiatrist.

There are still tickets left. If you haven’t been able to make it to dConstruct in previous years because it sold out too quickly, now’s your chance. If you have been to dConstruct before, then you know how great it will be. I’m hoping that the event will be sold out by the day of the event. Partly that’s because I want to see Clearleft’s faith in our peers’ thirst for knowledge rewarded, but mostly it’s because I’ve got a wager to that effect with Cennydd. If his pessimism is rewarded, I’ll be £1 out of pocket.

You’ve still got a few weeks to grab a ticket for the conference itself but if you’re planning to come along to one of the workshops in the run-up to the conference, you’d better act fast; the early bird price of £345—which includes a ticket to the conference—runs out in 48 hours. After that, a workshop costs £395.

Far be it for me to suggest which workshop you should book—they’re all going to be good—but might I point you to HTML5 and CSS3 Wizardry which will be run by a trioka of Clearlefties; Richard, Natalie, and myself. They’ll be handling the CSS3 goodness and I’ll be regurgitating what I’ve been learning from immersing myself in the world of HTML5.

Maybe I should just get Remy to pop in and show off his demos but I suspect he’ll busy preparing for his own jQuery workshop the next day.

Not content with doing workshops, tutorials, screencasts, and a book, the tireless Remy Sharp is organising his own conference. Full Frontal will take place in the beautiful Duke of York’s cinema in Brighton on November 20th. This is going to be a serious JavaScript geekfest. Get this: for a mere £100, you get Simon Willison, Peter-Paul Koch, Christain Heilmann and more. If you’re a JavaScripter and you’ve felt frustrated by the lack of your favourite scripting language at most web conferences, Full Frontal is guaranteed to satiate you.

Between dConstruct, Flash on the Beach, and Full Frontal, I may never have to travel outside of Brighton for a conference again.

Douchebag Name Generator

The results are astounding accurate.

Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip | How-To | Smashing Magazine

My words have been given new life in comic form thanks to the very talented Brad Colbow.

Disorderly genius: How chaos drives the brain - life - 29 June 2009 - New Scientist

It turns out that the brain is a scale-free small-world network in a state of self-organised criticality. Just like the internet.

Tuesday, July 28th, 2009

Questionable Characters | Home

A beautifully presented site wherein Ben and Frank endeavour to answer your design-related questions.

Sunday, July 26th, 2009

the Movie title stills collection

Prepare to lose yourself in this collection of movie titles from the 1920s to the present day.

Font in your face | Nimbupani Designs

A good, clear-headed summation of font linking.


As you can probably tell from the Huffduffer logotype, I like .


Most ligatures are formed by the combination of the lowercase letter f and a subsequent letter—although the gorgeous includes a few more unusual ones.

There’s an old letter that looks a lot like the lowercase f and that’s .


Up until the 19th century, this was the default way of writing the letter s at the beginning or in the middle of words. Our letter s—called the short s—was mostly used when a word finished with an s or when an s followed an s (the word Congress on The Declaration of Independence matches both criteria).


I was in Warwick last weekend, the day before Richard’s wedding. While Jessica and I were exploring the crypts, I found some ligatures that were new to me.


This looks like a regular ft ligature but actually it’s a long s followed by a t—look at the way the crossbar on the long s doesn’t go all the way across the vertical stem like it would on an f. Another dead give-away is the fact that the word being spelled is Christian.

Christian ligature

On another headstone I found a ligature formed by the combination of a long s and the letter b, used to spell the word Husband.

Ligature Husband ligature

While there is a corresponding f-based ligature, I can’t remember ever seeing it in the wild. The combination of f and b is rare in the English language. The only examples I can think of are compound words like halfblood or halfbreed; words more often spelled with a hyphen separating the f and the b.

My photographs of the subterranean ligatures didn’t turn out great—my little point’n’shoot camera isn’t very good with low-light conditions—so I whipped out my sketchbook, put a page in front of the letters and recorded some pencil rubbings for posterity.

Friday, July 24th, 2009

A.P. Cracks Down on Unpaid Use of Articles on Web -

Foreheadslappingly stupid behaviour from the Associated Press.

The Pushbutton Web: Realtime Becomes Real - Anil Dash

Anil Dash writes about the realtime web, calling it Pushbutton.

An essay on W3C's design principles - Contents

Bert Bos's 2000 Treatise (published in 2003) is a must-read for anyone involved in developing any kind of format. "This essay tries to make explicit what the developers in the various W3C working groups mean when they invoke words like efficiency, maintainability, accessibility, extensibility, learnability, simplicity, longevity, and other long words ending in -y."

HEY-IT - We want to get rid of IE6!

A poster campaign aimed at encouraging IT departments to upgrade company browser policy. AND THAT'S WASSUP

I don't normally like all-Flash sites and I really don't like sites that mess with my cursor* but this one works really well. * I'm looking at you, Harry Potter Twitter site with the password anti-pattern.

arc90 lab : experiments : HashMask - Another (More Secure!) Experiment in Password Masking

Here's an interesting idea: generating a sparkline when you input a password ...familiarity with the generated sparkline acts as a visual aid to the user.

Tuesday, July 21st, 2009

Web fonts. Where are we? Will web fonts ever be a reality? | i love typography, the typography and fonts blog

A great round-up on the current state of web typography following TypeCon 2009.

The Typography Manual - For the iPhone and iPod Touch

A glossary of typography that you can carry around with you.

Monday, July 20th, 2009

Missed Connections

"Messages in bottles, smoke signals, letters written in the sand; the modern equivalents are the funny, sad, beautiful, hopeful, hopeless, poetic posts on Missed Connections websites. Every day hundreds of strangers reach out to other strangers on the strength of a glance, a smile or a blue hat. Their messages have the lifespan of a butterfly. I'm trying to pin a few of them down."

Hallvord R. M. Steen - Most expensive javascript ever?

How one line of JavaScript cost a hardware vendor millions. Browser sniffing is bad, m'kay?


The sign up process is using the Huffduffer model. Good to see more human forms in the wild.

MoonLander3D Apollo 11 40th Anniversary Edition

Celebrating the Apollo 11 anniversary with Seb's 3D lunar lander game.

Friday, July 17th, 2009


Remy's riposte to


Awwww... wook at the poor aniwals.

Thursday, July 16th, 2009

Make them Care! - a book by Joshua Porter

Josh is writing another book. Part copywriting manifesto, part psychology handbook, part design manual.

Table of Condiments

Table of Condiments That Periodically Go Bad

Wednesday, July 15th, 2009

Invading The Vintage - a set on Flickr

Cute aliens invading vintage postcards of Switzerland.

Greetings From Switzerland

Code Poetry: Blake’s Jerusalem |

foreach (tyger in night.forests) { burn(bright); }

Tuesday, July 14th, 2009

HTML5 structure—HTML4 and XHTML1 to HTML5 ・ @boblet | random notes

Oli gives a nice hands-on tutorial on using the new structural elements in HTML 5.

How to create EOT files without Microsoft WEFT — Edward O’Connor

@font-face for all — Ted shows how to convert TTF files to EOT using the command line.

The New York Review of Ideas

The colour scheme is a little odd (though I expect this will change from month to month) but the typography is tasteful and the content is king.

Sunday, July 12th, 2009

Shirky: In Praise of Evolvable Systems

A classic essay from Clay Shirky on the dumb nature of the web.

I don’t care about UX

When I wrote about designing for the street I tossed out this glib remark:

The Social Life of Small Urban Spaces was filled with lessons that can be applied to web design (or as it is more fashionably known now, UX design).

Or, as Mark put it:

Since when did good web design suddenly get called ‘UX’? Everywhere I look now, good UI design is called ‘UX’, good type = ‘UX’, Colour? UX.

My point in equating UX design with plain ol’ fashioned web design is similar to what Jeff was getting at when he wrote I don’t care about accessibility five years ago. It was a controversial thing to say but he explained it eloquently:

When you design for the Web — that is, when you design exclusively and specifically for this medium — when you do that natively, so many of the things we consider problems just start to fall away. … Because when Web design is practiced as a craft, and not a consolation, accessibility comes for free.

…and that’s the way I feel about what is often labelled as UX design. If someone claims to be a web designer but isn’t considering the user experience, they are deluding themselves. UX, like accessibility, should be a given, not a differentiating factor.

And that’s why I don’t care about UX.

Saturday, July 11th, 2009

Calligraphie lumineuse - a set on Flickr

Gorgeous photos of Arabic calligraphy drawn in light.

"Celui qui voyage sans rencontrer l'autre ne voyage pas il se déplace" Alexandra David-Néel

Garfield: Lost in Translation

Garfield, translated into Japanese and then translated back into English.

Digg the Blog » Blog Archive » Much Ado About IE6

Trammell outlines the thoughtful, research-based approach that Digg will be taking in phasing out IE6 support.

Thursday, July 9th, 2009 | @font-face central

Another font-linking service is on the way.

SlickMap CSS — A Visual Sitemapping Tool for Web Developers

A really nice stylesheet for sitemaps represented as nested unordered lists in HTML.

Wednesday, July 8th, 2009

Bug 25267 – Autobuffer on <audio /> cannot be disabled

This single issue is what's stopping me using the HTML 5 audio element on Huffduffer.

Thoughts on the whole XHTML/HTML5 affair | Morethanseven

I think Gareth is reading my mind. Get out my mind, Gareth!

BBC - Glow JavaScript Library

The BBC have released their JavaScript library. This one is worth paying attention to for its wide browser support base.

Tuesday, July 7th, 2009

Misunderstanding markup

The W3C announced last week that the XHTML 2 Working Group will wrap up at the end of this year. This should have been a straightforward, welcome announcement. Instead it has confused a lot of people who believe that it heralds the end of XHTML—see, for example, the comments on Zeldman’s blog post.

This confusion is understandable given the lamentable names that have been assigned to different technologies. This isn’t the first time this has happened…

sounds like it has something to do with Java. It doesn’t. Apart from some superficial syntactical similarities, they have nothing in common. Java is to JavaScript as ham is to hamster.

sounds like it has something to do with HTML. It doesn’t. DHTML is a catch-all term to describe the action of updating the CSS properties of HTML elements using JavaScript. I have my own catch-all term for the combination of HTML, CSS, and JavaScript; I call it web development.

And so to . You’d be forgiven for thinking it has something to do with or . It doesn’t.

XHTML 1.0 is simply a reformulation of HTML 4 with XML syntax:

  • lowercase tag and attribute names,
  • quoted attribute values,
  • mandatory closing tags for p and li elements,
  • a slash at the end of standalone elements like img, br, and meta.

XHTML 1.1 is the same reformulation but with the added unrealistic demand that documents must served with an XML mime-type.

XHTML 2, by contrast, has had very, very little in common with HTML 4. It was an attempt at a fresh start, to create a theoretically “pure” vocabulary with little concern for backwards compatibility. It was, of course, doomed to failure:

This was a philosophically pure specification that was so backwardly incompatible that it nearly deprecated the img element.

Now that XHTML 2 is dead, some people think that this means XHTML is dead. It doesn’t.

Henri Sivonen apparently attempts to clear up this confusion by writing An Unofficial Q and A about the Discontinuation of the XHTML2 WG which, alas, is not very clearly written. Also, Henri, as pointed out by John Allsopp, your snark is showing:

There are two meanings to XHTML: technical and marketing. The technical kind (XHTML served using the application/xhtml+xml MIME type) is a formulation of HTML as an XML vocabulary. The marketing kind (XHTML served using the text/html MIME type) is processed just like HTML by browsers but the authors attempt to observe slightly different syntax rules in order to make it seem that they are doing something newer and shinier compared to HTML.

Belittling authors who prefer a stricter syntax is no way to explain technical differences between formats.

There are perfectly good reasons for choosing to use the XHTML syntax. Take, for example, Drew’s comment:

Whenever this argument surfaces, there seems to be the assumption that loose syntax is easier for beginners. This baffles me. In my experience simple, strict rules are much easier to learn and code to than loose rules with multiple shortcuts. I like XHTML because attributes must always be quoted. Tags must always be closed. These are simple rules that require no thought, and result in uniform, predictable markup.

I’m not saying that XHTML syntax is better or worse than HTML syntax. I’m saying it’s a personal choice. If you prefer a different syntax to me, that doesn’t mean that one of us is wrong. If I like Thai food and you prefer Italian, neither of us is wrong.

The death of XHTML 2 does not mean the death of XHTML syntax. If you want to continue to close all tags and quote all attributes, you can do so. You can either use the existing XHTML 1 spec or you can use HTML 5.

That’s right; HTML 5 allows you to use whichever syntax you are most comfortable with. Doctor Bruce has the diagnosis:

I like the XHTML syntax. It’s how I learned. I’m used to lowercase code, quoted attributes and trailing slashes on elements like br and img. They make me feel nice and comfy, like a cup of Ovaltine and The Evil Dead on the telly.

But you might not. You might want SHOUTY UPPERCASE tags, no trailing slashes and attribute minimisation. And, in HTML 5 you can choose.

Thanks to the “pave the cowpaths” principle, it’s up to you. As you like it. What you will. Whatever you want, whatever you like.

If you want, you can even serve your documents as application/xhtml+xml, instantly transforming them from HTML 5 into XHTML 5 …yes, another confusing name.

Just remember, XHTML 2, the spec, has nothing to do with XHTML, the syntax. XHTML lives on in HTML 5.

But, but, but…, I hear you cry, surely that does us no good because HTML 5 isn’t supported yet, right?

Define support. HTML 5, unlike XHTML 2, is designed to be backwards compatible. So here’s how you can take an existing XHTML 1 document and convert it to HTML 5…

Take this line:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Replace it with:

<!DOCTYPE html>


XHTML 2 is dead. Long live XHTML …as HTML 5.

Update: What Zeldman said.

Monday, July 6th, 2009

Building Reprieve

The front page of today’s Guardian ran with a story on Binyam Mohamed and his fight to stop evidence of his torture from being destroyed:

The photograph will be destroyed within 30 days of his case being dismissed by the American courts — a decision on which is due to be taken by a judge imminently, Clive Stafford Smith, Mohamed’s British lawyer and director of Reprieve, the legal charity, said today.

Reprieve recently relaunched their website and they chose Clearleft to help them. I was responsible for the front-end build; that’s my usual role. But unusually, I also had to build a CMS.

We don’t normally do back-end work at Clearleft. That’s a conscious decision; we don’t want to tie ourselves to any particular server-side language. Usually we partner up with server-side developers; either those of the client or independent agencies like New Bamboo. In the case of Reprieve, the budget didn’t allow for that option. We were faced with three possibilities:

  1. Write a CMS from scratch, probably using PHP and MySQL—the technologies I’m most comfortable with.
  2. Take an off-the-shelf platform like WordPress or Expression Engine and twist it to make it fit the needs of the client.
  3. Create a CMS using Django which would give us an admin interface for free.

There was a three person team responsible for the project: myself, Cennydd and Paul. We did a little card-sorting exercise, weighing up the pros and cons of each option. Django came out on top.

I had conflicting emotions about this. On the one hand, I was pleased to have the chance to learn a new technology. On the other hand, I was absolutely terrified that I would be completely out of my depth.

I had seen Simon giving a talk on Django just a few weeks previously. I stuck my hand up during the Q and A to ask Is it possible to learn Django without first learning Python? Simon said that a year ago, he would have said No. But given the work of fellow designers like Jeff and Bryan, the answer isn’t so clear cut. Maybe Django could be a really good introduction to Python.

By far the hardest part of building a Django website was the initial set-up. Sure, installing Django was pretty straightforward …once you’ve made sure you’ve installed the right image libraries, the right database bindings, blah, blah, blah. I can deal with programming challenges but I have no desire to become a sysadmin. Setting up my local dev environment on my Mac was a hair-tearing experience. Setting up the live environment, even on a Django-friendly host like WebFaction, was almost as frustrating …no thanks to the worst. screencast. EVER.

But I persevered, I obediently followed the tutorial, and I discovered all the things that make Django such a powerful framework; the excellent separation of concerns, the superb templating system, the lack of so-called front-end “helpers” that cripple other server-side frameworks. I think Gareth was really onto something when he noticed the way that the web standards world appears to be choosing Django.

In the end, Django proved to be absolutely the right choice for Reprieve. It provided enough flexibility for me to build a site tailored to the specific needs of the client while at the same time, giving me plenty of pre-built tools like RSS and, crucially, the admin interface. The client is extremely happy with the power that the admin interface offers.

For my part, it was an honour to work on a project with this mission statement:

We investigate, we litigate and we educate, working on the frontline, providing legal support to prisoners unable to pay for it themselves. We promote the rule of law around the world, and secure each person’s right to a fair trial. And in doing so, we save lives.

PHP Typography 1.0 beta 3 • KINGdesk

A PHP script that adds nice typography to your markup.


A free open source planetarium for your computer.

Easily Mused: Panels 66: Why Chicks Cry

What makes women cry, according to comic book panels.

Sunday, July 5th, 2009

Social Media Icons — Paul Robert Lloyd

A set of icons (in different sizes) from various trendy websites to use in your designs.

Saturday, July 4th, 2009

Eternal moonwalk - A tribute to Michael Jackson.

Add your moonwalk to the collection.

Friday, July 3rd, 2009

Inflatable Tower Promises Easy Access to Outer Space: Discovery News

An alternative to the space elevator, an inflatable tower nine miles tall and tethered to a mountain top, could be made of commercially available materials.

Thursday, July 2nd, 2009

Archive of W3C News in 2009

It looks like XHTML2 is going to get mothballed at the end of this year.

The Future of Code

Steven Pemberton, one of my favourite long-term thinkers, talks about programming, markup and XForms.

HTML5 Video + CSS Visual Effects

Experimenting with CSS3 and HTML5 features implemented in Webkit.

camen design · Video for Everybody!

The smart way to put video on the web: don't choose one single delivery method.

Wednesday, July 1st, 2009

HANDCRAFTED CSS by Dan Cederholm with Ethan Marcotte

Double the awesomeness: Dan and Ethan made a book ...and a DVD ...and a workshop.

Bruce Lawson’s personal site : Impasse on HTML 5 video

The spectre of patents is hurting progress on the web.

HTML5 Demos

Courtesy of Remy. Doesn't he ever sleep?

Sputnik Observatory For the Study of Contemporary Culture : Vint Cerf : Node : Dynamic Meshes

The latest project from Jonathan Harris is a not-for-profit educational organization dedicated to the study of contemporary culture: "We fulfill this mission by documenting, archiving, and disseminating ideas that are shaping modern thought by interviewing leading thinkers in the arts, sciences and technology from around the world."

Maintainability Guide (Beta) – Jens Meiert

A surface skim of maintainability in front-end development.