Presented by Jeremy Keith.

The Origins of Text

  • The development of language is what makes us human. This enabled us as a species to create civiliation.
  • The Library of Alexandria: We don’t know what the world would look like today if it hadn’t burned down.
  • Thomas Cahill’s How the Irish Saved Civilization
  • Chicago police chief Francis O’Neill wanted to preserve traditional Irish folk music in America during the Potato Famine. Recruited pipers, fiddlers, etc. onto the police force. He collected them in O’Neill’s 1001.
  • ABC notation: shorthand form of musical notation

URL-first Design

  • URLs are core to the Web, but most importantly, they are core to the Long Web.

URLs are the one universal syntax of the Web.

  • Make URLs guessable and hackable. Let URLs be an interface element; an API.
  • Pattern Primer

Navigation Second

  • Content first in the markup, navigation second.
  • Use an anchor link in the markup to direct users to the navigation (e.g. <a href="#nav">...</a>)


  • On The Session, password fields are shown by default with an optional “Hide password” checkbox.
  • Proposed inputmode attribute not generally useful yet, but the pattern attribute can be used with a type="number" field to mimic the proposed attribute.
  • <datalist> element as a JavaScript-less search-ahead/autocomplete-style input.

Progressive Enhancement

  • Design trends come and go, but progressive enhancement remains.
  • Progressive Enhancement is not about people who switch off JavaScript. It’s about expecting the unexpected. The problem with relying on JavaScript is that it’s a single point of failure.
  • Browser’s built-in error handling for HTML and CSS is much better than JavaScript’s model. The browser will ignore HTML and CSS it doesn’t understand, moving on to the next thing.
  • The Session’s progressively-enhanced “Sheet Music” buttons use JavaScript to generate an SVG version of the sheet music.
  • Jeremy’s Canvas Sparkline and Tom Ashworth’s sparksvg
  • You can embed JavaScript in an SVG and pass parameters to the file (e.g. file.svg?0,1,2,3,4). You can also have CSS and media queries inside of SVG.
  • Use with extreme care and caution: <link rel="dns-prefetch" href="..."> and <link rel="prefetch" href="..."> and <link rel="prerender" "...">

The Long Web