Tags: freiburg

I’ve just returned from a little European tour of Germany, Italy, and Romania, together with Jessica.

More specifically, I was at Smashing Conference in Freiburg, From The Front in Bologna, and SmartWeb in Bucharest. They were all great events, and it was particularly nice to attend events that focussed on their local web community. Oh, and they were all single-track events, which I really appreciate.

Now my brain is full of all the varied things that all the excellent speakers covered. I’ll need some time to digest it all.

I wasn’t just at those events to soak up knowledge; I also gave a talk at From The Front and SmartWeb—banging on about progressive enhancement again. In both cases, I was able to do that first thing and then I could relax and enjoy the rest of the talks.

I didn’t speak at Smashing Conf. Well, I did speak, but I wasn’t speaking …I mean, I was speaking, but I wasn’t speaking …I didn’t give a talk, is what I’m trying to say here.

Instead, I was MCing (and I’ve just realised that “Master of Ceremonies” sounds like a badass job title, so excuse me for a moment while I go and update the Clearleft website again). It sounds like a cushy number but it was actually a fair bit of work.

I’ve never MC’d an event that wasn’t my own before. It wasn’t just a matter of introducing each speaker—there was also a little chat with each speaker after their talk, so I had to make sure I was paying close attention to each and every talk, thinking of potential questions and conversation points. After two days of that, I was a bit knackered. But it was good fun. And I had the pleasure of introducing Dave as the mystery speaker—and it really was a surprise for most people.

It’s always funny to return to Freiburg, the town that Jessica and I called home for about six years back in the nineties. The town where I first started dabbling in this whole “world wide web” thing.

It was also fitting that our Italian sojourn was to Bologna, the city that Jessica and I have visited on many occassions …well, we are both foodies, after all.

But neither of us had ever been to Bucharest, so it was an absolute pleasure to go somewhere new, meet new people, and of course, try new foods and wines.

I’m incredibly lucky that my job allows me to travel like this. I get to go to interesting locations and get paid to geek out about web stuff that I’d be spouting on about anyway. I hope I never come to take that for granted.

My next speaking gig is much closer to home; the Generate conference in London tomorrow. After that, it’s straight off to the States for Artifact in Providence.

I’m going to extend that trip so I can get to Science Hack Day in San Francisco before bouncing back to the east coast for the final Brooklyn Beta. I’m looking forward to all those events, but alas, Jessica won’t be coming with me on this trip, so my enjoyment will be bittersweet—I’ll be missing her the whole time.

Thank goodness for Facetime.

• Listen to the audio.
• Watch the video.

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?

Lauter…

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.

I just got back from Nürnberg where I gave the closing talk at the cheap’n’cheerful border:none event. It was my first time in Nürnberg and I wish I could’ve stayed longer in such a beautiful place. I would’ve liked to stick around for today’s Open Device Lab admin meetup, but alas I had to get up at the crack of dawn to start making my way back to Brighton.

I was in Germany last month too. That time I was in Freiburg, where I was giving the closing talk at Smashing Conference. That was a lot of fun:

So I threw away my slidedeck and went Keynote commando.

The video from that slideless talk is up on Vimeo now for your viewing and/or downloading pleasure.

If you watch it through to the end, then you’ll know why I could be found immediately afterwards showing people some centuries-old carvings on Freiburg’s cathedral.

Update: I’ve published a transcript of the talk.

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.

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.

When I was travelling back from Webstock in New Zealand at the start of this year, I had a brief stopover in Sydney. It coincided with one of John and Maxine’s What Do I Know? events so I did a little stint on five things I learned from the internet.

It was a fun evening and I had a chance to chat with many lovely Aussie web geeks. There was this one guy, Christian, that I was chatting with for quite a bit about all sorts of web-related stuff. But I could tell he wasn’t Australian. The Northern Ireland accent was a bit of a giveaway.

“You’re not from ‘round these parts, then?” I asked.

“Actually,” he said, “we’ve met before.”

I started racking my brains. Which geeky gathering could it have been?

“In Freiburg” he said.

Freiburg? But that was where I lived in the ’90s, before I was even making websites. I was drawing a complete blank. Then he said his name.

“Christian!” I cried, “Kerry and Christian!”

With a sudden shift of context, it all fit into place. We had met on the streets of Freiburg when I was a busker. Christian and his companion Kerry were travelling through Europe and they found themselves in Freiburg, also busking. Christian played guitar. Kerry played fiddle.

I listened to them playing some great Irish tunes and then got chatting with them. They didn’t have a place to stay so I offered to put them up. We had a good few days of hanging out and playing music together.

And now, all these years later, here was Christian …in Sydney, Australia …at a web event! Worlds were colliding. But it was a really great feeling to have that connection between my past and my present; between my life in Germany and my life now; between the world of Irish traditional music and the world of the web.

One of the other things that connects those two worlds is The Session. I’ve been running that website for about twelve or thirteen years now. It’s the thing I’m simultaneously most proud of and most ashamed of.

I’m proud of it because it has genuinely managed to contribute something back to the tradition: it’s handy resource for trad players around the world.

I’m ashamed of it because it has been languishing for so long. It has so much potential and I haven’t been devoting enough time or energy into meeting that potential.

At the end of 2009, I wrote:

I’m not going to make a new year’s resolution—that would just give me another deadline to stress out about—but I’m making a personal commitment to do whatever I can for The Session in 2010.

Well, it only took me another two years but I’ve finally done it.

I’ve spent a considerable portion of my spare time this year overhauling the site from the ground up, completely refactoring the code, putting together a new mobile-first design, adding much more location-based functionality and generally tilting at my own personal windmills. Trying to rewrite a site that’s been up and running for over a decade is considerably more challenging than creating a new site from scratch.

Luckily I had some help. Christian, for example, helped geocode all the sessions and events that had been added to the site over the years.

That’s one thing that the worlds of Irish music and the web have in common: people getting together to share and collaborate.

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.

One of the services we offer at Clearleft is on-site training… a bit of this, a bit of that. It’s something that I really enjoy. Not only do I get to spend a day talking incessantly about the technologies that tickle my fancy, I also get to travel and meet web developers who are digging away at the coalface behind their company firewalls.

Thus far, our little roadshow has travelled within the UK to companies in London, York, and elsewhere. This week, we’re spreading our wings a little further. On Friday, I’ll be doing some DOM Scripting training in Basel, Switzerland located right on the nexus of France, Germany and the Confoederatio Helvetica.

It won’t be my first time to Basel. I’ve been there on a few occasions, mostly for the unique annual spectacle of the Morgensterich carnival. I used to live fairly close by, over the border in Freiburg, Germany.

I arrived in Freiburg many years ago with my bouzouki in hand and started busking on the streets. I ended up staying for about five or six years. Along the way I met Jessica, worked in a bakery and played bass in a surf-rock band. Then that whole web thing came along and set me on my present course.

I haven’t been back to Freiburg since moving to England six years ago. Seeing as I’m going to be in Basel anyway, I think I’ll take a trip up to the old town this weekend. I’ll revisit my old haunts and revisit the beer and wurst while I’m at it.

I hope my German hasn’t become too rusty in the intervening time. I guess I’ll find out if I’m able to comprehend the Schweizerdeutsch spoken in Basel.

Expect my Flickr photostream to fill up with pictures of Freiburg’s quaint alleyways and its wonderful cathedral. Tchüß… bis später.