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.
