Tags: germany



Thursday, November 21st, 2019


I’ve made a few trips to Germany recently. I was in Berlin last week for the always-excellent Beyond Tellerrand. Marc did a terrific job of curating an entertaining and thought-provoking line-up of speakers. He also made sure that those speakers—myself included—were very well taken care of.

I was also in Frankfurt last month. It was for an event, but for once, it wasn’t an event that involved me in any way. Jessica was there for the Frankfurt Book Fair. I was tagging along for the ride.

While Jessica was out at the sprawling exhibition hall on the edge of town, I was exploring downtown Frankfurt. One lunch time, I found myself wandering around the town’s charming indoor market hall.

While I was perusing the sausages on display, I noticed an older gentleman also inspecting the meat wares. He looked familiar. That’s when the part of my brain responsible for facial recognition said “That’s Dieter Rams.” A more rational part of my brain said “It can’t be!”, but it seemed that my pattern matching was indeed correct.

As he began to walk away, the more impulsive part of my brain shouted “Say something!”, and before my calmer nature could intervene, I was opening my mouth to speak.

I think I would’ve been tongue-tied enough introducing myself to someone of Dieter Rams’s legendary stature, but it was compounded by having to do it in a second language.

Entschulding Sie!”, I said (“Excuse me”). “Sind Sie Dieter Rams?” (“Are you Dieter Rams?”)

“Ja, bin ich”, he said (“Yes, I am”).

At this point, my brain realised that it had nothing further planned and it left me to my own devices. I stumbled through a sentence saying something about what a pleasure it was to see him. I might have even said something stupid along the lines of “I’m a web designer!”

Anyway, he smiled politely as I made an idiot of myself, and then I said goodbye, reiterating that it was a real treat for me to meet him.

After I walked outside, I began questioning reality. Did that really just happen? It felt utterly surreal.

Of course afterwards I thought of all the things I could’ve said. L’esprit de l’escalier. Or as the Germans put it, Treppenwitz.

I could’ve told him that I collect design principles, of which his are probably the most well-known.

I could’ve told him about the time that Clearleft went on a field trip to the Design Museum in London to see an exhibition of his work, and how annoyed I was by the signs saying “Do Not Touch” …in front of household objects that were literally designed to be touched!

I could’ve told him how much I enjoyed the documentary that Gary Hustwit made about him.

But I didn’t say any of those things. I just spouted some inanity, like the starstruck fanboy I am.

There’ll be a lunchtime showing of the Rams documentary at An Event Apart in San Francisco, where I’ll be speaking in a few weeks. Now I wonder if rewatching it is just going to make me cringe as I’m reminded of my encounter in Frankfurt.

But I’m still glad I said something.

Saturday, November 24th, 2018


I just wrapped up my last speaking gig of the year. It came at the end of a streak of attending European conferences without speaking at any of them—quite a nice feeling!

I already mentioned that I was in Berlin for the (excellent) Indie Web Camp. That was immediately followed by a one-day Accessibility Club conference. It was really, really good.

I have to say, I was initially apprehensive when I saw the sheer amount of speakers on the schedule. I was worried that my attention couldn’t handle it all. But the talks were a mixture of shorter 20 minute presentations, and a few longer 40 minute presentations. That worked really well—the day fairly zipped by. And just in case you think it would hard to have an entire day devoted to accessibility, the breadth of talks was remarkably diverse. Hats off to a well-organised and well-executed event!

The next day was Beyond Tellerrand. This has my favourite conference format: two days; one track; curated; a mix of design and development (see also An Event Apart and Smashing Conference). Marc’s love and care shines through every pore of the event. I thoroughly enjoyed the talks, and the hanging out with lovely people.

Alas, I had to miss the final afternoon of Beyond Tellerrand to head home to Brighton. I needed to get back for FF Conf. It was excellent, as always. Remy and Julie really give it their all. Remy even stepped in to give a (great) talk himself this year, when a speaker couldn’t make it.

A week later, I went to Iceland for Material. I really enjoyed last year’s inaugural event, and if anything, this year’s topped it. I just love how eclectic and different the talks are, and yet it all weirdly hangs together in a thoughtfully curated way. (Oh, and Remy, when you start to put together the line-up for next year’s FF Conf, be sure to check out Charlotte Dann—her talk at Material was the perfect mix of code and creativity.)

As well as sharing an organiser with Accessibility Club, Material had a similar format—keynote talks from invited presenters, interspersed with shorter talks by locals. The mix was great. I won’t even try to describe the range of topics. I’m not sure I could explain how a conference podium morphed into a bar at the end of one of the talks. I think the best description of Material would be to say it’s like the inside of Brian’s head. In a good way.

I was supposed to be back in Brighton for one night after Material, but the stormy weather kept myself and Jessica in Reykjavik for an extra night. Thanks to Brian’s hospitality, we had a bed for the night.

There followed a long travel day as we made our way from Reykjavik to Gatwick, and then straight on to Thessaloniki, where we spent five days even though we only had the clothes we packed for the brief trip to Iceland. (Yes, we went shopping.)

I was there to speak at Voxxed Days. These events happen in various locations around the world, and just a few weeks ago, I spoke at the one in Bristol. It was …different.

After experiencing so many lovingly crafted events—Accessibility Club, Beyond Tellerrand, FF Conf, and Material—I’m afraid that Voxxed Days Thessaloniki was quite a comedown. It’s not that it was corporate per se—I believe it’s organised by developers for developers—but it felt like it was for people who worked in corporate environments. There were multiple tracks (I’m really not a fan of that), and some great speakers on the line-up like Stephanie and Simona, but the atmosphere felt kind of grim in a David Brentian sort of way. It probably wasn’t helped by the cheeky chappie of an MC who referred to one of the speakers as “darling.”

Anyway, I spoke first thing on the first day and I didn’t end up sticking around long. Normally I don’t speak and run, but I didn’t fancy the vibe of the exhibitor hall with its booth-babesque sales teams. Voxxed Days doesn’t pay its speakers so I didn’t feel any great obligation to hang around. The magnificent food and rembetika music of Thessaloniki was calling.

I just got back from Greece, and that wraps up my conference attending (and speaking) for 2018. I’ve already got a couple of events lined up for 2019. I’m delighted to be speaking at the return of Colly’s New Adventures conference. I’m less delighted about preparing a brand new talk I promised—I’m really feeling the pressure to deliver the goods at such an auspicious event with an intimidatingly superb line-up of speakers.

I’m also going to be preparing a different all-new talk for An Event Apart Seattle in March. For once, I’m going to try to make it somewhat practical and talk about service workers. If you know of any other events that might want a presentation like that in 2019, drop me a line.

Perhaps I will see you in Nottingham or in Seattle. If you’re planning on going to New Adventures, use the discount code ADACTIO10 to get 10% of the price of the conference or workshop ticket. If you’re planning on going to An Event Apart, use the discount code AEAKEITH for $100 off.

Tuesday, August 22nd, 2017

60 seconds over Idaho

I lived in Germany for the latter half of the nineties. On August 11th, 1999, parts of Germany were in the path of a total eclipse of the sun. Freiburg—the town where I was living—wasn’t in the path, so Jessica and I travelled north with some friends to Karlsruhe.

The weather wasn’t great. There was quite a bit of cloud coverage, but at the moment of totality, the clouds had thinned out enough for us to experience the incredible sight of a black sun.

(The experience was only slightly marred by the nearby idiot who took a picture with the flash on right before totality. Had my eyesight not adjusted in time, he would still be carrying that camera around with him in an anatomically uncomfortable place.)

Eighteen years and eleven days later, Jessica and I climbed up a hill to see our second total eclipse of the sun. The hill is in Sun Valley, Idaho.

Here comes the sun.

Travelling thousands of miles just to witness something that lasts for a minute might seem disproportionate, but if you’ve ever been in the path of totality, you’ll know what an awe-inspiring sight it is (if you’ve only seen a partial eclipse, trust me—there’s no comparison). There’s a primitive part of your brain screaming at you that something is horribly, horribly wrong with the world, while another part of your brain is simply stunned and amazed. Then there’s the logical part of your brain which is trying to grasp the incredible good fortune of this cosmic coincidence—that the sun is 400 times bigger than the moon and also happens to be 400 times the distance away.

This time viewing conditions were ideal. Not a cloud in the sky. It was beautiful. We even got a diamond ring.

I like to think I can be fairly articulate, but at the moment of totality all I could say was “Oh! Wow! Oh! Holy shit! Woah!”


Our two eclipses were separated by eighteen years, but they’re connected. The Saros 145 cycle has been repeating since 1639 and will continue until 3009, although the number of total eclipses only runs from 1927 to 2648.

Eighteen years and twelve days ago, we saw the eclipse in Germany. Yesterday we saw the eclipse in Idaho. In eighteen years and ten days time, we plan to be in Japan or China.

Wednesday, June 7th, 2017

Victor - WordRidden

This is what Jessica has been working on for the past year—working very hard, I can attest.

This wrap-up post is a fascinating insight into the translation process.

Monday, July 18th, 2016

Wednesday, May 11th, 2016

Indie Web Camp Düsseldorf

Indie Web Camp Düsseldorf took place last weekend and it was—no surprise—really excellent.

It felt really good to have one in Germany again so soon after the last one in Nuremberg. Lots of familiar faces showed up as well as plenty of newcomers.

I’m blown away by how much gets done in two short days, especially from people who start the weekend without a personal website and end it with something to call their own. Like Julie’s new site for example (and once again she took loads of great photos).

My own bit of hacking was quite different to what I got up to in Nuremberg. At that event, I was concentrating on the interface, adding sparklines and a bio to my home page. This time round I concentrated more on the plumbing. I finally updated some the code that handles webmentions. I first got it working a few year’s back at an Indie Web Camp here in Brighton, but I hadn’t really updated the code in a while. I’m much happier with the way it’s working now.

I also updated the way I’m syndicating my notes to Twitter, specifically how I send photos. Previously I was using the API method /statuses/updatewithmedia.

When I was at the Mobile @Scale event at Facebook’s London office a while back, Henna Kermani gave a talk about the new way that Twitter handles file uploads. There’s a whole new part of the API for handling that. When she got off stage, I mentioned to her that I was still using the old API method and asked how long it would be until it was switched off. She looked at incredulously and said “It’s still working‽ I thought it had been turned off already!”

That’s why I spent most of my time at Indie Web Camp Düsseldorf updating my PHP. Switching over to the TwitterOAuth library made it a bit less painful—thanks to Bea for helping me out there.

When it came time to demo, I didn’t have much to show. On the surface, my site looked no different. But I feel pretty good about finally getting around to changing the wiring under the hood.

Besides, there were plenty of other great demos. There was even some more sparklining. Check out this fantastic visualisation of the Indie Web Camp IRC logs made by Kevin …who wasn’t even in Düsseldorf; he participated remotely.

If you get the chance to attend an Indie Web Camp I highly, highly recommend it. In the meantime you can start working on your personal site. Here’s a quick primer I wrote a while back on indie web building blocks. Have fun!

IndieWebCamp Düsseldorf | Flickr - Photo Sharing!

Lovely, lovely pictures from last weekend’s brilliant Indie Web Camp in Düsseldorf.

IndieWebCamp Düsseldorf in motion

Sunday, April 24th, 2016

IndieWebCamp Düsseldorf 2016 // beyond tellerrand

Marc writes about why you (yes, you!) should come to Indie Web Camp in Düsseldorf in just under two week’s time.

Sunday, May 10th, 2015

100 words 049

The second day of Indie Web Camp Germany was really productive. It was amazing to see how much could be accomplished in just one day of collaborative hacking—people were posting to Twitter from their own site, sending webmentions, and creating their own micropub endpoints.

I made a little improvement to the links section of my site. Now every time I link to something, I check to see if it accepts webmentions and if it does, I ping it to let you know that I’ve linked to it.

I’ve posted the code as a gist. Feel free to use it.

Saturday, May 9th, 2015

100 words 048

Today was the first day of Indie Web Camp Germany here in Düsseldorf. The environment couldn’t have been better—the swank sipgate building has plenty of room, fantastic food, and ridiculously friendly people on hand to make sure that everything goes smoothly.

Day one is the discussion day. The topics fortuitously formed a great narrative starting with the simple building blocks of microformats, leading into webmentions, then authentication, and finally micropub and posting interfaces.

My brain is full after talking through these technologies in increasing order of complexity. Enough talking. Now I’m ready to start coding. Bring on day two.

Friday, May 8th, 2015

100 words 047

One of the great pleasures of travelling is partaking of the local cuisine. Today I travelled to Düsseldorf. As soon as I arrived, I went out for ramen.

Wait, what?

You might be thinking that I should really be making the most of the pork and potato dishes that Germany is famed for, but the fact is that the ramen here is really good.

Düsseldorf, you see, has one of the largest Japanese populations of anywhere in Germany. It all started in the ’50s when a number of Japanese companies set up shop here.

The result: great ramen in Düsseldorf.

Saturday, November 2nd, 2013

Smashing Conference closing keynote

The final talk at the Smashing Conference held in Freiburg in September 2013.

I had a presentation. I had a slide deck for you, but I’ve thrown it away and I’m not going to use any slides today.

I was quite impressed by Elliot’s opening and the way he put himself out there, put his old work in front of you, because like Vitaly said, the whole idea here was just going to be about stories and showing failures, so I thought, I’m going to do that as well. I’m going to put my old, embarrassing websites up there in front of you, and I figure maybe you guys will get a kick out of that too. I think you’re the only people who have a word for getting joy from the misfortune of others. I think Schadenfreude is a particularly German concept, and I think you’re going to get a lot of Schadenfreude out of this.

So, I used to live here in Freiburg, back in the 90s. Saying I moved here probably gives the wrong impression, because it makes it sound like I had a fixed abode, I had somewhere to live, which I didn’t. I had no fixed abode. I was in Freiburg, but I was playing music on the streets of Freiburg.

I’d like to direct your attention to the stained glass window at the back of the room, the very back. You see that one back there? See the long haired hippie playing the musical instrument? That was basically me. On the Kaiser Joseph Straße, playing my bouzouki, earning my money that way. Playing music between…(handclap)…yeah, buskers! Straßenmusiker. I was playing music between the hours of eleven and twelve in the mornings and half past four and six in the afternoons, because those were the official busking hours in Freiburg. I don’t know if that’s still the case.

See, I was a long-haired hippie like Brad, playing music on the streets. Some daya I was playing Irish music. I’m from Ireland, and it’s only after I left Ireland that I really grew to appreciate the music of Ireland—traditional music—and later on when I did have somewhere to actually live, I had this abode, I’d occasionally come across other Irish musicians on the streets of Freiburg, and I’d say, “Hey, come on, let’s play music together, you can crash with me.” I remember there was this couple, Kerry and Christian from Northern Ireland playing guitar and fiddle, playing tunes, and I’d be like, “Yeah, come over, you can crash at my place, play some tunes together.”

But then after a while I got a proper job. I started working in a bakery. So if you’ll direct your attention to this stained glass window over here, this would be my guild when I was living in Freiburg working in the bakery, baking …well I wasn’t actually baking. I was just selling the bread. It was a bakery called Bäckerei Bueb. It doesn’t exist any more. But it was good. It was really good bread. I miss German bread. It’s the best bread. And pretzels, obviously. Over there on the Münster, there’s a stained glass window which contains the very first pictorial representation of the pretzel.

So I’m working in the bakery, selling bread, and the web is starting to come along. I remember the first time I was online I think was in America with my girlfriend, now wife, Jessica, and it was a text only browser, and I thought it was pretty cool, these things connected: you go online looking for one thing and before you know it, you’re looking at something completely different, going down a rabbit hole. And then about a year later I remember Jessica taking me into an internet café, it used to be the Rombach, is that still there, the bookshop on the corner? Who here’s from Freiburg? Okay, it’s called Rombach? Okay, so in the basement of Rombach there was a little internet café. I remember the old Bondi blue iMacs, the classic original iMacs, and Jessica was showing me the graphical web, how it had come a long way. So now we were on Netscape 3, Internet Explorer 3, and I distinctly remember, I couldn’t get the difference between …there was Netscape, Internet Explorer, Yahoo! and Alta Vista, and to me they were all four versions of the same kind of thing. I didn’t grasp the difference between a search engine and a browser; they were all something with this text field and you typed in what you wanted to look for, right? And matters weren’t helped by the fact that you open up Netscape the browser and it automatically had a homepage which was netscape.com. It was very confusing for me; something that I bear in mind, when we laugh at newbie users, but I was that newbie user.

This whole time while I was working in a bakery, I was playing music still. Not on the street this time, but with some bands. I was playing bass guitar in a surf rock band, called Leopold Kraus Wellenkapelle. Die gibst noch! Who’s heard Leopold Kraus? All right, cool! Excellent, really good, you can get their music online. They’re good now, because I’m not playing with them any more. They got a lot better after I left.

I was playing in this other band with my girlfriend and some other guys called Beam, which is a terrible name for a band. We’re playing music and someone says, we should really have one of those new-fangled websites; everyone’s got a website. We had an email address; that was something. Hotmail. But we needed a website. So I said, I’ll do it, I’ll make us a website. So my first ever website was the website for the band, Beam, and I’ve still got the files for this.

I’ll just open it …so we got a splash. I don’t think it looks that bad really. This is 1998 that I launched it.

It has this really smug thing down here …so this was the time when everybody had those buttons on their sites saying, best viewed in Internet Explorer; best viewed in Netscape Navigator. I’ve got this thing down the bottom, “this website looks best on any browser set at any width.”

Smug! Insufferably smug really.

Once you get inside, it kind of looked …I don’t know what it was in the 90s; every website had to have coloured bars down the side. It didn’t matter whether they were needed or not, you had to have coloured bars. It’s kinda nuts.

So this is my first website. Hand-crafted, and I enjoyed it. I had a lot of fun, and after this launchd, people liked it, and someone who was in another band, the brother of a friend who was living in Vienna said, “Would you make the website for our band? We’ll pay you.”

That was my first paid job, first client. That was the Salonorchester Alhambra and I don’t know if they still exist or not. This was the website. Again, there’s kind of a splash page, but this time it had a purpose, which was the site existed in English and in German, so… I like this: when you hovered over you got the album cover showing up. I will point out, this was a nice, lightweight image, because it was only literally two colours in it, the picture of Louise Brooks.

So English or Deutsch?


Okay… English.

So it looked like this. God! Pretty awful, but I will point something out. So this is 1998, 99. Liquid! Some of us were doing it right from the beginning.

It’s using tables for layout and I don’t know if I even want to view source on this, shall I view source? This is going to be really, really embarrassing but …oh yeah, that’s nasty. Look at that. All the upper case tags and the tables and the bgcolors and …phew …is this bringing back memories for anybody?

Okay, so my first paid gig. Now of course, now that I’m going down the road of being a professional web designer, I of course had to have my own website. You may have seen my website, adactio.com. You may have visited it. But you haven’t seen the first version of adactio.com. Ladies and gentlemen, this is the first version of adaction.com.

Notice that this is the nineties, so anytime you had a letter “a”, you had to turn it into the “@” symbol. That showed you were modern. That showed it was the future, the information superhighway.

Deutsch oder Englisch?

Deutsch. Also gut.

Wait for it… whoa! So, Elliot was showing all the Flash stuff he was doing when he started. This is me faking Flash stuff, because I couldn’t do Flash, so I was using what we called DHTML, which is just this nasty, nasty marketing term for horrible JavaScript, and CSS, and the CSS was literally just positioning stuff. It’s like, watch this …watch this… Pschewww….see that? So talking about faking Flash…pschewww… pschewww …see that? So I’m doing that with three different images and I’m swapping them out really quickly, one after the other to give the impression of some kid of effect. Here we go…weyhey, look at that! That is actually me. I used to look like that. I was young once.

You know… scrolling …faking Flash, I’m using DHTML. It was awful, trying to programme this stuff.

(Am I cutting out a lot? Should I switch over or shall I carry on with… I’ll carry on.)

You had to fork your code for both browsers, because there were only two browsers back then obviously, Netscape and Internet Explorer, and you had to fork your JavaScript to make it work.

Nasty stuff. Tables, a frameset, DHTML… I was ticking all the boxes.

I also made a website for my girlfriend, now my wife, Jessica. Got the domain name, lostintranslation.com, because this was a while ago. And again it has a splash page, but it serves a purpose, which is choosing Englisch oder Deutsch.

Englisch oder Deutsche?

English. There we go.

So she’s a translator and this is the website for her work. Here’s the interesting thing. This is actually still online. If you go to lostintranslation.com, this is what you’ll see. So this was made in the nineties, and I know it looks very dated and some things are showing their age, but it’s not that bad.

Oh, and I will point out: pixel fonts. Pixel fonts; Elliot had them. I’ve got ‘em. Gotta have your pixel fonts.

This is long overdue for a redesign, and I will get round to it soon. I promise. But it’s been online for fourteen, fifteen years. It’s still kinda working.

I want to tell you a story about someone else who left Ireland for foreign shores. Francis O’Neill was born in 1848. The mid 1840s was kind of a bad time for Ireland in general, when we had a famine. Millions died, and millions more left the country. In fact the emigration from Ireland continued for well over a century. Into the twentieth century, Ireland was a country with a decreasing population. As you know, there are Irish people all over the world, because there were no prospects at home. A lot of them ended up in America, and Francis O’Neill, he had lots of adventures. He got shipwrecked at one point, and he ended up in America, travelled across the West, ended up in Chicago. Ended up becoming a police officer in Chicago. Ended up working his way up to become Chief of Police in Chicago.

Now Francis had always loved Irish music as well. I think maybe like me, once he had left Ireland, he really missed the culture. Didn’t maybe appreciate it at the time, but once you leave, you really going to miss it. So he started making sure that if you played an Irish instrument, you were pretty much guaranteed a job in the Chicago Police Force. If you played fiddle or pipes or anything like that, he’d sort you out with a job. So that’s why when you watch the old movies, it’s always the cop on the beat is always, “begob and begorrah; top of the morning to you”, the Irish cliché cop. There was some truth to that. And he’d get them to play tunes and he would transcribe the tunes. And he got enough tunes together that he ended up making a whole book. It was called O’Neill’s One Thousand and One Melodies. Jigs, reels, hornpipes.

And it turned out what had happened was the music back home was in danger of dying out, because so many people were leaving Ireland. The diaspora was so big that in a way, O’Neill saved the music, by noting it down, and it ended up travelling back to Ireland, and becoming kind of the bible of Irish music.

When I was learning to play Irish music on the mandolin and the bouzouki, you just referred to it as The Book. If someone played a tune, you’d say, oh is that tune in The Book? And that meant, was it in O’Neill’s One Thousand and One.

Sheet music, staff notation, was the format he used. Now there’s another interesting way of notating music that started in 1991. This is about the time when we had the internet. We didn’t really have the web yet. We had email…

(It’s cutting out a lot, isn’t it? Shall I switch over? I should switch over.)

Okay… so if you were trying to send a piece of music over the internet at the time, bandwidth was at a premium, you couldn’t send an image of sheet music; an image was far too high bandwidth. You certainly couldn’t send a sound file; that would’ve been crazy. You got 14k modems.

So John Chambers came up with this format called ABC, which you can see is kind of JSON-like to begin with, with the metadata, indicating information about the tune, and then the actual tune itself is notated just using Western alphabet: A, B, C, D, E, F, G.

I suppose if it was in Germany, it would be A, H, C, D, E, F, G. Yeah. You guys need to fix that. That’s just confusing.

But it’s really, really lightweight; it’s just text, so you could send this in an email on a bulletin board, and then people had software to convert both directions. So somebody could take this text file and convert it into an image or a soundfile, or some people just read straight from the ABC file like this. A really nice little format.

And so I’m in Freiburg, it’s getting towards the end of the nineties, and I know I want to do something related to Irish music; I want to make a website about Irish music. And some people just started putting tune collections online, so I thought I would do something like that. So I made a site called The Session. It didn’t even have its own domain. And this time it has a splash page for no reason whatsoever! There’s no choice here other than to enter. And also, I’ve got a meta element on the top of this page, so if you just actually leave it and don’t press Enter, after seventeen seconds, it enters anyway!

(laughter and applause)

It totally looked like I timed that, didn’t it? That was pure coincidence!

So this was the original version of The Session. Kinda dated; it still looks okay. Tables for layout, all that stuff. But the idea here was, every week I was putting a tune online in ABC format and then also maybe in gif, and maybe a midi file. Hey, midi files! And also, I learned enough Perl to do a cgi-bin script so that people could sign up to an email list.

And so people started… the email list started to grow as people were coming back every week: “Hey, what’s the new tune this week?” So this was working really well, it actually started to take off, but there was a fatal flaw, which was: I only know so many tunes. The tunes are going to run out at some point. And sure enough, they did, so I needed to change the site, it needed to become more of a user generated content site where people could submit tunes.

So I sat down and I learned PHP and I learned MySQL so that I could build a proper website. That was The Session version 2, which looked like this. Bit of an improvement. The idea here is people—anybody—can submit a tune, and you submit the tune in a ABC format as I described. But then I have to convert that tune into sheet music, into a gif, into a midi file or whatever, so I’m a bit of a blocker here; no matter how many tunes get submitted, I have to go through the backlog and convert them and manually upload them. But it worked pretty well, and I added new sections to the site about events and sessions, and importantly, a discussions area where people could just hang out and chat. And so the site really took off; I was really proud of this …for a while.

For the first few years, it was great. But it didn’t really change that much. In fact, after ten years it was pretty much unchanged. I think this version launched in 2001 and my pride was high, but over time, my shame got higher. My shame at the missed opportunities here.

I’ve got events and sessions, but I’m not doing anything with the geolocation; I’m not making the site as useful as it could be. It could be improved so many ways.

I wanted to relaunch The Session; I wanted to make it better. But now the task had become so big, because now it’s this big sprawling site with a big database that I had done everything wrong with when I launched in 2001.

It was my New Year’s Resolution two years running: update The Session; fix The Session; launch a new version of The Session. And I never got round to it.

I remember I was in Sydney, I was coming back from speaking at Webstock in New Zealand two years ago, and a geek event had been organised in a bar by John Allsopp, one of the geeks down there. I’m chatting away to this geek, we’re talking about web stuff and we’re talking for a few minutes and there’s kind of a lull in the conversation. He says, “You know, actually we’ve met before.” I said, “Oh really? Where was that?” I’m thinking was it some other geek conference, was it South by Southwest? I meet a lot of people. I’m like, “Give me some context.”

And he says, “Freiburg.” Wait. What? I wasn’t… I’ve got him in the geek category, and now suddenly he’s saying Freiburg? And then it suddenly clicked. This was Christian, the guy who was playing music on the street that I said, “Hey, come stay at my place.” And this was like, fifteen years later, more! And he’s doing web stuff as well! And he’d come out because he’d seen it was me and of course he’s a member of The Session. And so we get talking about that, and he’s like, “When are you going to update that site?” “Oh God! I know, I know, but it’s such a big task.” But he offered to help, he was like, “I’m a geek and I play Irish music: I can help.”

And I realised that I could reach out to others, this monumental task, I could break it down into smaller chunks and maybe farm out some of those to other people. So I got him doing geolocation stuff on all this information I’ve got on the database. And I start working weekends and evenings, really hacking on this, and I actually enjoyed it, I really got into it. Coming home from work and not watching TV or anything like that, but actually just hacking, hacking, hacking.

So the current version of The Session looks like this.

This is The Session. You’ve got the tunes section, recordings, discussions …not a huge visual change really from what was there before. You don’t want to scare people too much by changing too dramatically, but I’m much happier with the way it works and there’s a lot more features on this.

Now one of the things when I was making this, I knew this time things would be a little different, and I knew I wanted to go mobile first. I wanted to make sure it was working on small screens before I started worrying about the big screens, because times have changed. Now, luckily, because I work at Clearleft, and we’ve got this Device Lab, so I had access to all these small mobile devices.

The way the Device Lab came about; this isn’t a new idea. I remember a couple of years ago at the Mobilism Conference in Amsterdam, the first Mobilism conference, we were talking about this idea, it’d be great to have this communal Device Lab, and Jason Grigsby from Portland was like, “Yeah, I’m gonna do it; I’m gonna have the world’s first Open Device Lab in Portland.” And then I’d see him occasionally, I’d say, “Hey, how’s that mobile Device Lab thing going?” He said “Great! I’ve done the paperwork to get it set up as a non-profit and the next step is filling out these forms and applying for this and that…” I just thought, “It’s never going to actually launch, is it?”

So at Clearleft, I’d started gathering one or two devices together, maybe a handful. And I decided, aw, screw it. And I wrote a blog post and I wrote a tweet and I said, “Hey, if anybody in Brighton wants to come round and just use our devices, feel free. It’s an Open Device Lab.” I didn’t do anything with liability or insurance or any paperwork or anything like that, I just did it. I thought, if something goes horribly wrong, I’ll deal with the problem then rather than worrying about everything beforehand.

And nothing’s gone wrong. In fact, within hours of me posting this, I had other people in Brighton, people like Remy Sharp and other designers and developers saying, “Hey, you know what? I’ve got this device that’s just sitting here on my desk or it’s in my drawer. Why don’t I drop that round to your office so that all the devices are together?” I was like, “Yes please, that’d be great!” Within twenty four hours, we had doubled the devices. Now we’ve got forty, fifty devices, and none of them are mine really. People have donated them, which is wonderful.

So if you feel like you don’t have enough devices to test on, and we should all probably feel like we don’t have enough devices to test on, an Open Device Lab is a really great idea. You can go to opendevicelab.com and see if there’s an Open Device Lab near you, and if there isn’t, you can get information on starting one up. And actually, you can go to Nuremburg on 25th October and you can attend an event called Border None. So you can go to border-none.net. And there’s going to be a bunch of us there talking about Open Device Labs and stuff like that, and actually if you’re interested in that in general, you need to talk to Joschi. Where’s Joschi? Where are you? There’s Joschi. So talk to him about everything related to Open Device Labs and this new event.

So anyway, I’ve got access to devices. Great, I’m going to do the mobile first thing. You’ve all read Mobile First by Luke Wroblewski, right? Who’s read Mobile First? Good, because it’s great, it’s really good, and one of the things he talks about is the constraints, how mobile forces you to really, really figure out what’s important in your content. That’s what Natalie was talking about earlier as well, really getting down to it. So I started doing that.

Mobile first is kind of a way of saying content first. It’s kind of like saying, figuring out what’s the most important content. What’s the most important thing at this URL. And when I say content, I don’t mean copy or images. I mean tasks. What’s the most important task that needs to be accomplished at this particular URL?

There’s also this corollary to this “content first” idea, which is something that Luke did on his start-up Bag Check, which is content first, navigation second, which I’ve done literally on The Session where the navigation is at the bottom of the screen.

So if you’re looking at this on a small screen, you hit this arrow to bring up the navigation. What it’s actually doing, it’s just a hyperlink to an internal anchor, which is where the navigation is. And then using the magic of media queries, once it gets large enough I can shove the navigation up the top, using whatever …display table, absolute positioning, any of the CSS positioning tools we have at our disposal. So content first, navigation second.

And one of the other ways, kinda doing the content first thing, is getting my content in order. Much like what Natalie was talking about with her pattern portfolio, this idea of a pattern primer, which is something we do at Clearleft all the time. A lot of our systems thinking around things like pattern portfolios, pattern primers, is very much influenced by Natalie, because she used to work at Clearleft, and she’s probably the best Front End Developer I know. She’s amazing.

So this idea of a pattern primer is that you’re breaking things down into their constituent parts, and I wrote this little script, so you’ve got, here’s the mark-up, the output, here’s the source. Makes for really nice deliverable. But I found that I was doing it even on a personal project like this. This isn’t for a client: this is for me. It’s still really useful because it kinda acts like a unit test case for your CSS. As you fiddle with the CSS you just keep coming back to this page and hitting refresh and make sure you haven’t screwed anything up. Very handy.

Back to The Session. Something I very much had in mind is something that’s come up a lot over the past two days, which I’m pleased to see, and that’s this whole idea of progressive enhancement. And there’s been a lot of talk about progressive enhancement lately. I’ve been building websites for a while now, as you’ve seen, going way back, and pretty early on I got the progressive enhancement bug, even before we were calling it that. The idea was pretty straightforward, that with the web, we have these different stacks; stacks of technology, stacks of experience as well, and you want to make sure that whatever your core content is, whatever the core task is, that everybody should be able to get to that content or accomplish that task. I mean, everybody, no matter what the device, no matter what the capabilities. But you don’t stop there. You then enhance for whatever capabilities that device, that browser has.

I think there’s a bit of a myth about progressive enhancement, that it means designing for the lowest common denominator, but it doesn’t; it means starting from the lowest common denominator. But there’s absolutely no limit to where you can go. It’s basically just making sensible use of the technologies we have.

Now we can use progressive enhancement really easily in HTML and CSS. Every time we use something new from HTML5 that doesn’t work in all the browsers yet, that’s kind of progressive enhancement, so, using new input types like input type="search". Now, not all the older browsers will know what that is, but that’s fine, they’ll just treat it as input type="text". It won’t break, and this is really, really important. The error handling model of HTML is to be very forgiving, so if a browser sees something it doesn’t understand, it just ignores it. In the case of input types, it just treats it as input type="text", so you’re free to use all these new input types, even if they’re not supported everywhere.

Likewise in CSS, that’s how we can have new selectors. We can have new properties, new values. Because when browser is passing a CSS file, if it sees a property or value or selector it doesn’t understand, it just ignores it and moves onto the next one. And that’s enormously powerful; it means we can keep expanding the standards, keep adding new stuff, and more importantly, we can start using this stuff, even if it isn’t universally supported, because the browser won’t break; it won’t throw an error message, it won’t refuse to render that stuff.

Now JavaScript is a little trickier. With JavaScript, if you use some property or method that the browser doesn’t understand, it will throw an error, so you have to be sure to use feature detection. And this is why it’s really important not to rely on JavaScript. I’m not saying don’t use JavaScript. I love JavaScript; I’ve written books about JavaScript. But you shouldn’t rely on JavaScript for your core content or for your core tasks. Because that’s kind of what the discussions around progressive enhancement lately have been about.

It’s exactly what Andy Hume was talking about. It’s about being robust. He said, “Progressive enhancement is more about dealing with technology failing than technology not being supported.” I think that’s very true. It’s about planning for the unexpected.

I’ll give you an example: the website to download Google Chrome, it was useless for two hours. There was one day where nobody could download Google Chrome. It was because the hyperlink that was the download link, saying “Download Chrome”, it wasn’t a proper hyperlink, in the sense that it didn’t have what I would call a valid href attribute. It was a href="javascript..." and then some JavaScript, and then in the JavaScript file there was one error. One misplaced semicolon, something like that. But it was enough that all the JavaScript was basically screwed up, and for two hours, nobody in the world could download Google Chrome. That could have been avoided using progressive enhancement, and that’s exactly the kid of situation that progressive enhancement is all about. It’s a kind of situation you would never foresee. You can’t plan for that kind of stuff; that’s why it makes sense to use progressive enhancement.

I kind of think of progressive enhancement like electricity. You can use it to enhance stuff, but you shouldn’t rely on it. Buildings, if they have smart doors or smart elevators, you’ve got to make sure they have safe defaults, and that’s certainly the case with the web technologies, I think. We’ve got to think about safe defaults. But use electricity to enhance stuff.

There’s the old joke about escalators can never break: they can just become stairs. So I guess an escalator is stairs with progressive enhancement. Or those walkways in the airports that make you walk really fast. I guess that’s just a floor that’s been progressively enhanced. An electric toothbrush is a progressively enhanced toothbrush.

So I’m using progressive enhancement at all the levels here; I’ve CSS properties that aren’t universally supported. That’s fine. HTML attributes and elements that aren’t universally supported. That’s fine too. And in the way that the display of sheet music works, I’m kind of using progressive enhancement as well.

By default, this is a form with a button and it’s just pointing off to a script on the server. Actually, that’s a third party server that will generate an image, a gif in this case. But if your browser has enough capabilities—if it cuts the mustard, as Andy was talking about, which means that you support the JavaScript required and you support SVG—then it will load in that JavaScript and convert music to SVG. Because as per Atwood’s Law—which is that anything that can be done in JavaScript will be done in JavaScript—some genius has written JavaScript that converts ABC to sheet music in SVG! It’s brilliant, and because it’s SVG, it just stays super-crisp, no matter what the size, way better than those old gifs.

I love SVGs. SVGs are awesome. In fact, let me show you another example.

Here’s another site I built a few years ago, called Huffduffer. Does anybody use Huffduffer? A few people. It’s weirdly popular in Germany; I’m not sure why. Got a lot of German people Huffduffing.

It’s basically like Instapaper but for audio; you want to listen to something later, you put it on Huffduffer. And I am using a local version, but it seems to be taking its own sweet time. Let me jump straight to my profile page. One of the things I have on the profile pages—you have Huffduffed this much stuff; you’ve saved this many files—is I’ve got a sparklines. I love sparklines (we’ll see one in a moment if this thing ever loads).

Sparklines are something created by Edward Tufte, and he calls them “a small, intense, simple word sized graphic with typographic resolution.” So this is the Sparkline right there. And this is actually using Google’s Charts API, which is really handy; you can just say img src= and then Google servers and you pass in this string and you say, this is how I want it to look. It’s a really, really useful API. So Google are shutting it down.

So on The Session, I didn’t want to rely on Google or any other third party APIs frankly, because when you’ve been making websites as long as I have, you learn to trust no one! Especially when it comes to third party APIs.

I was looking into generating these Sparklines on the fly myself, and I searched to see if somebody else had done this, and actually lots of people had done this using JavaScript, and all of them, all of them used jQuery.

Now, nothing against jQuery, but when you just want to do one thing, loading in an entire library kinda seems like overkill. It’s kinda like the spam of stack overflow at this stage. It’s like, “How do I do this thing in JavaScript?” “Step 1: here’s jQuery. Here’s your jQuery plug-in.” What if I don’t want to use jQuery? “Oh, just use JQuery for that!”

jQuery’s great, but as it turns out, on The Session, I’m not using jQuery; I don’t need to. So I ended up writing a little script that generated Sparklines and created them using the canvas element. And I put it on GitHub, and I blogged about it and I said, “Hey, there’s this thing that generates sparklines in canvas.” But I also said, because I had this feeling like… I don’t think canvas is the right element for this. It’s not a dynamic image; it should probably be SVG. But I couldn’t figure out how to get that to work.

And oh, I love the web! I swear to God, within like an hour or two of blogging this, Stuart Langridge, he sends me a link saying, “There you go, I’ve done it for you, here’s the SVG version.”

And then my friend Tom took that code and turned it into a service, so it basically works like Google Charts but better, because it’s SVG and it’s scalable!

So these Sparklines on the member profiles are done with SVGs, so they’re lovely and small. Now, SVG, I love this format, because yes, it’s an image format, but it’s also a text format. You can view source in SVG and it’s an XML file. So all those Sparklines are actually pointing to the same file; they’re all pointing to just this one file that has a script element in it, and when you point to the file, you use the query string, and you pass in your numbers.

The script is inside the SVG, so there’s a script element inside the image element, which is like Inception! SVG, it’s an image, but it’s also text file. It’s also a document. You can put scripts in there. You can put CSS in there! So you could make responsive logos. In fact, on The Session, that’s kinda what happens. You see the large screen, the logo looks like this, but at smaller sizes, it’s more like that. It’s a responsive logo.

Actually, I’m not using SVG for that. That’s a piece of text that says, “The Session”, and has got CSS applied to it. Nice and scalable too. That works.

Progressive enhancement, sparklines, SVG: awesome.

One example of progressive enhancement that I don’t see talked about much—not enough in my opinion, certainly when it comes to responsive design—is this idea of conditional loading. Andy was talking about this with The Guardian: they’re doing fantastic work in this way where they’ve really figured out what’s the core content, and you send that to everyone. Everyone, no matter what kind of browser, no matter what kind of device. But then, after the page load, after everyone’s got the content, then you can start to do stuff with JavaScript, because now you know more information. You know how wide the screen is; you know what kind of JavaScript capabilities are there.

On this homepage here, these pictures from Flickr are loaded in after the page load, and only if the page is wide enough to display them. So everyone can get to these pictures, because there’s a link to this group on Flickr, but on a small screen, if I was loading that page, you just don’t get the pictures. You get them on the large screen, using conditional loading. And they’re not going to hold up performance or anything like that, because it’s happening after the main page load.

Performance; and you’ve heard it multiple times today again, so important. And with The Session, I was really tweaking every last thing. Obviously, I’m gzipping my files; I’m minifying my JavaScript, squeezing my CSS down, I’m minifying that. Basically, avoiding images wherever possible, the little logo is an example of that. Avoiding every unnecessary HTTP request.

And as an example of where you should be using conditional loading, I said I’m doing it with Flickr, and that’s certainly a good idea, because if Flickr goes down, I don’t want my performance to depend on Flickr. So any third party content, I think you should be conditionally loading. Particularly those widgets that say “Like” or “Tweet this” or “+1”. They make you look needy and they could potentially affect the performance of your site. Because most of them, the way they work is they say, “Oh just insert this script element into the middle of your document.” A blocking script element from a third party into the middle of your document! And you think, well, you know, those servers are really robust, they’re not going to go down. And then somebody in China tries to look at your website, but you’ve got a script element from Twitter, which is blocked in China, and your page never finishes loading.

There’s a bunch of little performance things I won’t go into, because it’s kinda like Andy was talking about, it’s not really about technology, it’s about the mindset.

But this is the interesting thing; when I was coming to redesign The Session, obviously I’m thinking in large timescales because it’s been online for so long, so I’m thinking actually in terms of decades. It’s already been up for over ten years. I’m thinking about, how will it work for the next ten years? And partly that involves placing some bets on technologies; what’s still going to work?

It’s also kind of deciding what approaches are going to stand the test of time, and progressive enhancement is absolutely an approach that has stood the test of time. Throughout the years, it doesn’t matter what new technologies come along, progressive enhancement just keeps working as a philosophy, I guess, so when Ajax came along, it made total sense not to rely on Ajax, but to use Ajax and progressive enhancement. Same with all the greatest technologies that have come along meantime.

So I’m thinking long term, and I think it’s important that we do that. Mandy Brown said, “We should not measure our work in months or years, but in decades.” I think there’s something to that.

And the other timescale that interests me—apart from decades and the really long term; I feel like I’m part of a longer tradition that stretches back literally hundreds of years—the other timescale is microseconds, which is the performance stuff. I’m really, really interested in the long term stuff and I’m really, really interested in the very, very short term stuff as in, “How fast can I make this site?”, because performance is so, so important, for all the reasons that Tim pointed out.

But the timescales in between, I kinda don’t care about as much. And yet those are the timescales we tend to focus on in our work. Weeks and months. Deadlines: when will this project be finished? It’s usually weeks, it’s usually months. And I think we do need to think a bit more long term, and not be so focused on what’s in right now. Even though I know you’re all itching to get out so you can see the keynote to find out what’s the new thing from Apple? What’s the new shiny?

I would like you to evaluate technologies with their long term effect, not just the short term. It’s a weird thing: the best way to be future friendly is to be backwards compatible. We’re kinda lucky that we do use technologies that have stood the test of time, like HTML.

When Håkon Wium Lie was at CERN when the web was first being invented, he placed a bet that HTML would still be around in fifty years, which is a crazy idea, because no file format lasts that long. But now, I think it’s a pretty safe bet. HTML has evolved, and that’s really important. If it were to stand still, it would atrophy, like any tradition, like the Irish music tradition. But it evolves and it gets better and it goes forward, and those websites I showed you that are fifteen years old, still work today in a modern browser. More importantly, you could find a web browser from fifteen years ago and visit The Session with it today, and it would still work. It’s not going to look the same. It’s not going to behave exactly the same, but the core content, the core tasks are available. That’s pretty amazing, right? And it’s not by accident that HTML is so robust.

In fact, Ian Hickson, who’s the editor of the HTML spec at the WHATWG, he said this about it; this is in an email to a mailing list from years ago. He said:

The original reason I got involved in this work is that I realised the human race has written literally billions of electronic documents but without ever actually saying how they should be processed. I decided that for the sake of our future generations, we should document exactly how to process today’s documents so that when they look back, they can still re-implement HTML browsers and get our data back.

I think it’s really important. We’ve already seen how easily we lose stuff. Elliot couldn’t find a lot of the stuff he wanted to show us; it was just gone, it’s just not out there.

Here’s something from Owen Briggs back in 2001. Does anybody remember a site called The Noodle Incident? Okay, one or two.

Now he was talking about HTML. He was actually writing a post about validation, why it’s important that your code validates, and he said—he was talking about HTML and how it’s changed, but it’s amazing:

The code has to expand its capabilities as we do, yet never in a way that blocks out our earlier documents. Everything we put down now will continue to be readable, as long as it was recorded using mark-up valid in its time.

That’s amazing. Already, we can’t read CD-ROMs. They’re outdated. The earliest iPhone apps are already becoming pretty much pointless; they’re kind of like the CD-ROMs of today. These isolated islands that can’t link to each other, that can’t be part of this broader thing, this amazing web, the ocean of the web.

We have all these technologies like every day; CoffeeScript, Yeoman, Grunt, Sass, Less, Git, Node, Backbone, Ember. Do you ever feel like, “I can’t keep up with all these technologies?” I feel that way all the time, and I think it’s Okay. Obviously we should use these technologies, but we should evaluate them not just for how they help us today, but for how they’re going to help us in the future.

You see that building out there? The Münster, Freiburger Münster? Beautiful building; an amazing achievement. It’s made of sandstone mostly, which isn’t the most durable material. That’s why there’s always scaffolding on the Münster. There’s always some part of it being kept up. It’s kinda like the web. It’s this beautiful thing in aggregate. The sheer scale of it is amazing, but it actually requires upkeep to keep it going. If it weren’t for the Münsterbauhütte, it would just start to fall apart.

They’re thinking in generations, keeping this thing going, and I think we need to think about that with the web. And we don’t. In fact, quite the opposite. With the web, we’re constantly hearing “the internet never forgets.” Quatsch! Where’s the data to support that statement? We hear it all the time; we believe it all the time. “Oh, be careful what you put online because you know the internet never forgets.” “Oh that’s right yeah. Google never forgets. Facebook never forgets.” Bollocks!

If you’re not careful, you will lose that data. Don’t rely on somebody else to keep it, right? We need to take care of what we put online. We need to take care of our URLs, make sure that the cool URLs don’t change.

I’m reminded of a story, I’ll finish with this. We could take some questions if there’s time. I was reminded of a story, this thing about the Münster, of a medieval traveller coming across a construction site where there’s builders with stone blocks, and the traveller says to the first builder, he says, “What are you doing?” He says, “I’m piling blocks of stone one on top of the other.” And he says to the second builder, “What are you doing?” He says, “I’m building a wall.” And he says to the third builder, “What are you doing?” He says, “I’m building a cathedral.” Now, they’re all doing the same thing, but they’re viewing it in different ways. They’re viewing it through a different timescale, and I wish we’d do that more with the web. We’re so lucky that we have these standards to work with, and standards are important.

Remember I said I worked in a bakery? I ate pretzels, brotchen, bread, all that good stuff. There’s been bakers in Freiburg for hundreds of years. There’s been a market outside the Münster for hundreds of years. If you go over to the Münster, and I encourage you to do this when we’re finished here, go round to the front entrance, and you’ll see these shapes scrawled in there. They’re standards. They’re standards of measurement for blocks of stone, but there’s also standards like this. These are bread standards. So at the market, in this particular year, this was the size of a loaf of bread. This was the size of a brotchen, or a long bread. Standards evolve, they change with time, but they’re what allow us as a society to keep going, and I think we’re pretty lucky on the web.

So have a think about what your work is and how you want to view it, and whether it’s important. Elliot talked about being defined potentially by your personal projects, and I hope that’s true. I can’t think of any of the work I’ve done at Clearleft for clients or anything like that, that I’d like to define me, but The Session, this community website that people have contributed to, that now contains ten times as many tunes as Francis O’Neill collected …I’m incredibly proud of that, despite being very ashamed of the site for a long time. And I hope that that defines me.

Thank you.

Bread standards

Thursday, September 12th, 2013


It was a crazy time in Brighton last week: Reasons To Be Creative followed by Improving Reality followed by dConstruct followed by Maker Faire and Indie Web Camp. After getting some hacking done, I had to duck out of Indie Web Camp before the demos so that I could hop on a plane to Germany for Smashing Conference—the geek party was relocating from Brighton to Freiburg.

I was there to deliver the closing keynote and I had planned to reprise a talk that I had already given once or twice. But then Vitaly opened up proceedings by declaring that the event should be full of stories …and not just stories of success either; stories of failure. Then Elliot opened the show by showing some of his embarrassing early Flash websites. I decided that, in the spirit of Vitaly’s entreaty, I would try something similar. After all, I didn’t have anything quite as embarrassing as Atomic Kitten or Hilary Duff e-cards in my closet.

So I threw away my slidedeck and went Keynote commando. My laptop was connected to the projector but I only used it to bring up a browser to show embarrassing old sites like the first version of adactio.com complete with frames, tables for layout, and gratuitous DHTML animation. But I spent most of the time just talking, telling the story of how I first started making websites back when I used to live in Freiburg, and describing the evolution of The Session—a long-term project that’s given me a lot of perspective on how we often approach our work from too short a timescale.

It was fun. It was nice to be able to ditch the safety net of slides and talk off-the-cuff to a group of fellow geeks in the intimate surroundings of Freiburg’s medieval merchant’s hall.

Preparing to speak Leaving Smashingconf

I finished by encouraging people to look out the window of the merchant’s hall across to the splendid cathedral. The Freiburger Münster is a beautiful, magnificent creation …just like the web. But it’s made of sandstone and so it requires constant upkeep …just like the web. The Münsterbauverein are responsible for repairing and maintaining the building. They can only ever work on small parts at a time, but the overall result—over many generations—is a monument that’s protected for the future.

I hope that when we work on the web, we are also contributing to a magnificent treasure for the future.


Monday, May 6th, 2013


First published in issue 3 of The Manual.

Before I settled into making websites, I was something of a drifter. I spent my early twenties busking and hitch-hiking my way around Europe. In retrospect, it was as if I were waiting for the web to be invented.

I eventually settled in the town of Freiburg in Germany’s Black Forest. There was still no sign of the web so I continued to earn money by playing music on the street. German society has a reputation for being efficiently well-structured and, true to form, there were even rules about which times of day were suitable for busking. I could play music on the street between 11am and noon, and between 4:30pm and 6pm. Playing outside those hours was verboten.

I sometimes bent the rules. Technically, I didn’t play on the street outside the officially-designated times, but I did play under the street in a pedestrian passageway that had particularly good acoustics. I think I could legitimately claim that I was just practicing and if any passers-by happened to throw money into my bouzouki case, well that was just a bonus.

There was just one problem with this underground passageway. It was quite close to the local police station and the occasional police officer would pass through on his way to work. There was one plainclothes policeman in particular who told me to stop playing the first time he walked past. When he caught me again, his warning was more stern. He recognised me. I recognised him. Even when I wasn’t playing music, we would see each other on the street and exchange glares. In my mind I filed him under the “nemesis” category.

One day I was walking into town to find a good spot to play (during the appointed hours, I might add) when it started to rain. I didn’t have much further to go but there was a tram stop right next to me and a tram was pulling up, headed in the right direction. “It’s only one or two stops,” I thought. “I might as well hop on.”

The tram system operated on a trust system. You could just get on a tram and it was up to you to make sure you had a valid ticket. This system was enforced with occasional inspections but they were very rare. I was taking my chances by riding the tram for two stops without a ticket but it didn’t seem like much of a gamble. This was the day that my luck ran out.

Two inspectors got on the tram and started checking tickets. When they came ‘round to me, I told them that I didn’t have a ticket. The punishment for schwarzfahren—riding without a ticket—was an on-the-spot fine of 60 deutschmarks (this was back in the days before the euro). I didn’t have 60 marks; I didn’t have any money at all. They asked to see my identification. I didn’t have any identification with me. They took me from the tram and marched me off to the police station.

One of the cops sat me down at his desk. He asked me for my details and pecked my answers into his typewriter. Once he had my name and my address, we got down to the tricky matter of figuring out what to do next. I told him to simply let me go so that I could play music on the street during the appointed hours. Once I had busked up 60 marks, I would go to the transport authority and pay my fine. He gruffly pointed out the flaw with that plan: because I had no ID with me, there was no way they could know for sure that I was who I said I was or that I lived where I said I lived. So if they let me go, there’s no incentive for me to pay the fine. I gave him my word. He didn’t accept it. We had reached an impasse.

At that moment, who should walk in to the police station but my plainclothes nemesis. “You!” he said as soon as he saw me. My heart sank. Now I was in real trouble.

“Oh, you know this guy?” asked the policeman at whose desk I was sitting. “He was riding the tram without a ticket and he doesn’t have money for the fine. He claims he’s going to make enough money to pay the fine by playing music on the street. Can you believe that?” he asked mockingly.

“Yes,” said the plainclothes cop. “He’s good. He’s got a really unique voice.”

I was flabbergasted! My sworn enemy was vouching for me! He looked at me, nodded, and continued on his way.

His word was good enough. They let me go with a slip of paper that I was to take to the transportation office when I paid my fine. I’m sure they thought that it was a lost cause but I went out busking that afternoon and the next morning until I had earned 60 marks. Then I went out to the transport authority—paying for my tram fare this time—and I gave them the money and the slip of paper from the police station. I kept my word.

There’s a lesson to be learned here, and it’s this: you should always give money to buskers.

Friday, September 21st, 2012

Return to Freiburg

I was in southern Germany this week to speak at the inaugural Smashing Conference. It was a really good event, packed with in-depth talks and workshops for web developers. Its practical nature contrasted nicely with the more inspirational value of dConstruct. I always say it’s good to have a balanced conference diet: too much code and I start itching for big-picture thinking; too much big-picture thinking and I start jonesing for some code.

That said, I have to admit that I missed out on quite a few of the talks. That’s because I was outside exploring Freiburg. Or should I say, I was outside rediscovering Freiburg.

I used to live there. I lived there for about six years, all told, during the ’90s. That’s where I met Jessica.

To start with, I was playing music on the streets of Freiburg. Later, I got a job in a bakery, selling bread, pretzels and all manner of excellent baked goods. Meanwhile, I was playing in a band (two bands actually: for a while I was the bassist in Leopold Kraus, the finest surf band in the Black Forest). At some point, the band decided we needed a website. I said I’d give it a go. That’s when this whole web thing started for me. I started freelancing on the side. Before too long, I was able to give up the bread-selling day job.

But after six years, Jessica and I decided that we were done with Freiburg. We moved to Brighton, where we’ve lived for twelve years now.

So it was with some excitement and a certain amount of nervous anticipation that we returned to Freiburg for the Smashing Conference. What would Freiburg be like now? Would it feel weird to be back there?

Well, Jessica has written all about what it was like to go back. I highly recommend that you read what she’s written because she puts it far better than I ever could.

Jessica has been publishing online at wordridden.com since we lived in Germany. Reading back through her posts from way back then about life in Freiburg makes me wish that I had started writing on adactio.com sooner. I don’t have much evidence of my time there: a box of cassettes (cassettes!) that the band recorded; a handful of photographs.

On this trip, I took quite a few photographs. In three days, I recorded an order of magnitude more data than I had done in six years of living in Freiburg.

Tuesday, May 1st, 2012

Deutsch Doodles

These lovely doodles from Carla give me Fernweh for Germany.

Thursday, March 31st, 2011

Tell-all telephone | Data Protection | Digital | ZEIT ONLINE

A dataviz demo of creepiness: displaying the movements of Malte Spitz by correlating her phone activity and web usage.

Wednesday, March 25th, 2009


I seem to be spending a lot of time in German-speaking countries these days. That’s good. It means I get to practice my rusty German.

In a few weeks from now, I’ll be in Berlin for a . A few weeks ago, I was in Austria to meet some clients—I had to bite my tongue not to answer every greeting of Grüß Gott! with a response of Grüß Wissenschaft!

Tomorrow, I’m off to Franfurt for the European Accessibility Forum which takes place on Friday.

I’ll be moderating a panel on accessible web applications. I’ve made no secret of how much I enjoy moderating panels. I’m hoping that this one will be fun and informative. Alas, I don’t think my German language skills are up to the task of conducting the questioning auf Deutsch.

If you’re going to be at the conference and you’ve got a question you’d like to put to my distinguished panelists, let me know on Twitter. If the connectivity at the conference allows, I’ll keep a browser tab with Twitter open during the panel too. I’ll keep an eye on everything with the string “eafra”, so—much as I hate hashtags—I guess posting a remark with #eafra will be the best way to speak your mind.

Thursday, November 8th, 2007

BBC NEWS | World | Europe | Boxing clever in Germany

I wonder if I can find a game of Chess Boxing before I leave Berlin.

Friday, December 8th, 2006


I lived in Germany for about five or six years in the nineties. In all that time, while I was ensconsed in the beautiful Black Forest town of Freiburg, I never once made it to the capital. Now I’m finally here.

I was invited to come to Berlin to be part of the jury for the highly-prized Biene awards. This is quite an honour. In the Biene awards, the emphasis is on accessibility and the criteria are really quite strict. It’s no cliché to say that just being nominated is quite an achievement.

One of the restictions on entries for the awards is that the site is primarily in German. I suspect that it’s my familiarity with the language that secured my place on the jury. The only problem is that I haven’t spoken German for six years.

Yesterday was judgment day. The jury gathered to debate and discuss the relative merits of the sites on offer. I had absolutely no problem understanding what everyone else was saying but as soon as I opened my mouth to add my opinion, I found that words and grammar were failing me at every turn. It was quite frustrating. I know if I was here for a few more days, it would all come back to me but having to dust down the German-speaking part of my brain after an interval of half a decade felt like quite a tough task.

I learned most of my German from sitting in pubs chatting with Germans, which is why I’m still fairly crap at reading and writing in the language. I usually find that my German improves greatly after one or two beers. Strangely though, after another three or four beers, I can’t understand a word anyone is saying. Komisch, nicht wahr?

The prize-giving ceremony will take place tonight. I can’t give away any of the results yet; that’s verboten. But I’ll definitely be blogging about some of the sites as soon as the pre-ceremony gag order is removed.

Until then, I have a few hours to explore Berlin. The good people from Aktion Mensch are putting me up at the ludicrously swanky Westin Grand, once the crown jewel of East Berlin. Its central locataion means that I’m just a short stroll away from the Brandenburg gate and plenty of other must-see attractions. Flickr demands pictorial evidence of such visual delights: I must obey.