the long web JSON HTML SVG CSS ABC JavaScript RSS X: 1 T: - PowerPoint PPT Presentation

the long web

JSON HTML SVG CSS ABC JavaScript RSS

X: 1 T: Chief O'Neill's Favourite R: hornpipe M: 4/4 L: 1/8 K: Dmaj |:de|fefg afge|fdec dBAG|FEDE FGAB|=cAd^c A2 de| fefg afge|fdec dBAG|FEDF GBAG|F2 D2 D2:| |:DE|=F2FE FGAB|=cAdB =cAGB|Adde fded|=cAd^c A2de| fefg afge|fdec dBAG|FEDF GBAG|F2 D2 D2:|

thesession.org

mobile first

content first

URL first

URL design

/events /events/add /events/ID /events/ID/edit

/tunes /tunes/add /tunes/ID /tunes/ID/edit

/tunes/new /tunes/popular /tunes/search

/tunes/new?format=rss /tunes/popular?format=rss /tunes/search?format=rss

/tunes/new?format=json /tunes/popular?format=json /tunes/search?format=json

content first

github.com/adactio/Pattern-Primer

navigation second

input

input type="number" input type="search" input type="email" input type="url"

input type="number"

input type="number" inputmode="numeric"

input type="number" pattern="[0-9]"

<input type="text" name="town" list="towns"> <datalist id="towns"> <option value="Clonakilty"></option> <option value="Cloyne"></option> <option value="Cobh"></option> <option value="Cork"></option> </datalist>

<input type="text" name="town" list="towns" placeholder="e.g. Clonakilty"> <datalist id="towns"> <option value="Clonakilty"></option> <option value="Cloyne"></option> <option value="Cobh"></option> <option value="Cork"></option> </datalist>

gist.github.com/adactio/3332444

progressive enhancement

<a href="javascript:void(0)"> Download Chrome </a>

<a href="javascript:void(0)"> <span class="li_icon"></span> </a>

<span class="link"> Create a new list </span>

<form method="post"> <button type="submit"> sheet music </button>

github.com/adactio/ Canvas-Sparkline

github.com/phuu/ sparksvg

sparkline.svg? 9,37,23,28,44,26,43,43,24 <svg> <script> //JavaScript </script> </svg>

conditional loading

<link rel="dns-prefetch" href="http://api.flickr.com"> <link rel="prefetch" href="next-page"> <link rel="prerender" href="next-page">

futurefriend.ly

JSON HTML SVG CSS ABC JavaScript RSS

the long web