Jeremy Keith: The Long Web

Jeremy Keith (@adactio) was speaking at Handheld Conference about the long term status of the web, these are my notes from his talk.

I'd love to talk to you about the web - I like the web a lot.

A website is made up of a number of file formats - HTML, CSS, JS, SVG, ABC...

Francis O'neil - an Irishman who settled in Chicago and became the chief of police.  He wanted to collect traditional Irish music, if you could play Irish music you were on the force and he noted the music in "the book" of Irish folk music.  It was noted in staff notation, a form of text format just not in western alphabet.  In 1991 there was a change in music format for the internet - called ABC and used the western alphabet to encode music in ASCII.  thesession.org was my website for Irish music and published music in ABC format which was converted into other formats, soon had more music than "the book".  Last year finally got round to relaunching it so got to see how my approach to building a website had changed (or stayed the same) over 10 years.

No longer sure what device will be used to access the site - not just desktop computers:  Mobile first.  Having lots of devices helps with this.  Mobile first (or content first) forces you to focus on your priorities.  URL first forces you to think about how you address your content.   URLs should be guessable, readable and hackable - they are a form of API.  (Content isn't just content, it's also tasks.)  Don't think of layouts, think of items of content - you can't rely on how things look based on context - github.com/adactio/Pattern-Primer

Navigation second.  The navigation appears below you content, there's just a link to it from the top of the page.  People don't come to your site to navigate - they come to read the content, the navigation just gets them there.

Progressive enhancement.  At one point everyone would have known about PE, now not so much.  HTML, CSS, JS  - can strip away each layer of this and it still works.  Can also enhance within each layer.  [See also building for the device agnostic web]  Older browsers ignore things they don't understand in HTML and CSS, we should be fin with this.  JS is more fragile - don't rely on this.  An electric toothbrush is just a progressively enhanced toothbrush.  Use the hell out of JS, it's awesome, but don't rely on it.  PE helps you cope with situations you haven't anticipated.  Don't merge the stacks, don't use inline JS and CSS in HTML.  PE is more about things failing than things not being supported.  Using a styled <span> for a button?  Why not use <button>?  Isn't that what it's for?

Once you have a basic level of functionality you can safely enhance with JS.  Sheet music is generated from ABC via a server side component but if JS is available there is a client side version that does it faster and produces SVG.

You can't rely on any 3rd party service or API (especially Google).  jQuery !== JavaScript.  Created a sparkline JS renderer in canvass then  someone else came along and made it from SVG which is more appropriate.  It's the same SVG file but with parameters - this works because SVG is a markup document that can contain scripts.  SVG is a text only image format.  Problem was that this took time so, as they were an enhancement, they were removed from the critical path - conditional loading.  Not core content but enhancements.  Do it after the page has loaded and based on parameters.  Ideal for 3rd party content, you are no longer reliant on their service for the critical path - if you are relying on twitter to load a script and your user has twitter blocked (i.e. China or Corporate) then your page will never finish loading.

There are two timescales:  performance (ms) and availability (years).   We should measure our success in terms of decades, not days, weeks, months.

How do you prepare for the future (futurefriend.ly)?  Be backwards compatible.  HTML has been around for a long time and will probably be around for a very long term.  The HTML spec codifies how to recreate a browser so that HTML can be re-read in future generations.

Consider how technologies can help the long web.