HTML5 Outliers

HTML5 OUTLIERS REMY SHARP / @REM

http://www.ﬂickr.com/photos/12173213@N00/6410825167 I wanted to build apps that worked without the
ball ache. Is that so unreasonable?

'97 Yeah, I used to be thinner :(

๏JavaScript in the browser ๏Browser came preinstalled ๏Also discovered WSH
/ .hta ๏Made apps: wallpaper changer http://www.ﬂickr.com/photos/43805896@N00/3657783366/

๏Data storage ๏Real-time notifications ๏Desktop integration ๏Access to hardware ๏Local
"install" ๏Go naked http://www.ﬂickr.com/photos/21966325@N00/537474857/

caniuse.com

STUFF YOU SHOULD DO TODAY AKA PROGRESSIVE ENHANCEMENT

<!DOCTYPE html>

JSON parsing

Web Storage

sessionStorage.state = ↵ JSON.stringify(app.state); localStorage.lastLogin; delete localStorage.user;

http://www.ﬂickr.com/photos/redux/6188900810 "we have to stop advocating localStorage as a great
opportunity for storing data as it performs badly" http://rem.io/link/182

Be sensible. Think: cookie killer. http://ﬂickr.com/photos/41214178@N00/2822774896/

Events!!! window.addEventListener('storage', sync);

Web Forms

/([\w-\.]+)@((?:[\w]+\.)+)([a-z]{2,4})/gi /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA- Valid email anyone?

(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF \uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d| [\u00A0-\uD7FF\uF900-\uFDCF\uFDF0- \uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF \uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d| [\u00A0-\uD7FF\uF900-\uFDCF\uFDF0- \uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF \uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]| [\u00A0-\uD7FF\uF900-\uFDCF\uFDF0- \uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF
\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]| [\u00A0-\uD7FF\uF900-\uFDCF\uFDF0- \uFFEF])))\.?$/ Valid email anyone?

Valid email anyone? '@[10.10.10.10] user@[IPv6:2001:db8:1ff::a0b:dbd 0] "much.more\ unusual"@example.com "[email protected]"@exa mple.com
"very.(),:;<>[]\".VERY.\"very@\\ \ \"very \".unusual"@strange.example.com 0@a !#$%&'*+-/=?^_`{}|[email protected] "()<>[]:;@,\\\"!#$%&'*+-/=? ^_`{}|\ \ \ \ \ ~\ \ \ \ \ \ \ ? \ \ \ \ \ \ \ \ \ \ \ \ ^_`{}| ~.a"@example.org ""@example.org postbox@com

Valid email anyone? <input type=email>

Make use of free validation

History API

$('a[href^="/"]').click(function(e) { var target = e.currentTarget; if (!e.altKey && !e.ctrlKey
&& !e.metaKey && !e.shiftKey) { e.preventDefault(); url = target.pathname; navigate(url, { triggered: true }); } }); function navigate(url, data) { history.pushState(data, '', url); } window.onpopstate = function (event) { if (event.state.triggered) { ajaxLoad(location.pathname); } }

&& !e.metaKey && !e.shiftKey) { e.preventDefault(); url = target.pathname; navigate(url, { triggered: true }); } }); function navigate(url, data) { history.pushState(data, '', url); } window.onpopstate = function (event) { if (event.state.triggered) { ajaxLoad(location.pathname); } } Select all internal links

&& !e.metaKey && !e.shiftKey) { e.preventDefault(); url = target.pathname; navigate(url, { triggered: true }); } }); function navigate(url, data) { history.pushState(data, '', url); } window.onpopstate = function (event) { if (event.state.triggered) { ajaxLoad(location.pathname); } } If the user only clicked, ignore new tab clicks

&& !e.metaKey && !e.shiftKey) { e.preventDefault(); url = target.pathname; navigate(url, { triggered: true }); } }); function navigate(url, data) { history.pushState(data, '', url); } window.onpopstate = function (event) { if (event.state.triggered) { ajaxLoad(location.pathname); } } Send the url path to our pushState function

&& !e.metaKey && !e.shiftKey) { e.preventDefault(); url = target.pathname; navigate(url, { triggered: true }); } }); function navigate(url, data) { history.pushState(data, '', url); } window.onpopstate = function (event) { if (event.state.triggered) { ajaxLoad(location.pathname); } } Update window location and save the state data

$(document).on('click', 'a[href^="/"]', function(e) { var target = e.currentTarget; if (!e.altKey
&& !e.ctrlKey && !e.metaKey && !e.shiftKey) { e.preventDefault(); url = target.pathname; navigate(url, { triggered: true }); } }); function navigate(url, data) { history.pushState(data, '', url); } window.onpopstate = function (event) { if (event.state.triggered) { ajaxLoad(location.pathname); } } Now when the user navigates to a url, or we manually push a new url (pushState), it fires popstate, and we ajaxLoad new content.

๏Build non-JS version ๏Detect history.pushState support ๏Progressively enhance ๏Pat yourself
on the back

EventSource

EventSource ๏ Events emit from server ๏ Read only stream
๏ Simple API ๏ Possible to polyfill (so IE support)

EventSource ๏Supports connection dropping and resuming with Last-Event-ID ๏Supports bespoke
events other than `message` ๏CORS is coming (x-domain SSE)

var es = new EventSource('/console'); es.onmessage = function (event) {
var data = JSON.parse(event.data); execute(data.command); };

var es = new EventSource('/console'); es.onmessage = function (event) {
var data = JSON.parse(event.data); execute(data.command); }; // custom message type es.addEventListener('reload',function() { reloadData(); });

Dnd / File API for uploads

"HTML5 drag and drop module is not just a disaster
it’s a fucking disaster" http://rem.io/link/228 http://www.ﬂickr.com/photos/redux/4640052438/

var root = document.documentElement; root.addEventListener('dragover', cancel, false); root.addEventListener('dragend', cancel, false);
root.addEventListener('drop', drop, false); function cancel(event) { event.preventDefault(); } function drop(event) { cancel(event); readFiles(event.dataTransfer.files); }

Step #2 File API http://www.ﬂickr.com/photos/98411817@N00/231524220/

upload!!!

var formData = new FormData();

var formData = new FormData(); for (var i = 0;
i < files.length; i++) { formData.append('file', files[i]); }

i < files.length; i++) { formData.append('file', files[i]); } // now post a new XHR request var xhr = new XMLHttpRequest(); xhr.open('POST', url);

i < files.length; i++) { formData.append('file', files[i]); } // now post a new XHR request var xhr = new XMLHttpRequest(); xhr.open('POST', url); xhr.upload.onprogress = function (event) { if (event.lengthComputable) { var complete = (event.loaded / event.total ⏎ * 100 | 0); progress.value = complete; } }

i < files.length; i++) { formData.append('file', files[i]); } // now post a new XHR request var xhr = new XMLHttpRequest(); xhr.open('POST', url); xhr.upload.onprogress = function (event) { if (event.lengthComputable) { var complete = (event.loaded / event.total ⏎ * 100 | 0); progress.value = complete; } } xhr.send(formData);

TOMORROW http://www.ﬂickr.com/photos/nasamarshall/5654415647

dataset & classList

<img class="boss-baddie" data-health="13" data-damage="5" src="..."> <script> var boss = document.getElementsByClassName('boss-baddie');
if (gotHit) { me.health -= boss.dataset.damage; } else if (hitBaddie) { boss.dataset.health -= 1; if (boss.dataset.health === 0) { boss.classList.add('dead'); } } </script>

if (gotHit) { me.health -= boss.dataset.damage; } else if (hitBaddie) { boss.dataset.health -= 1; if (boss.dataset.health === 0) { boss.classList.add('dead'); } } </script> element.dataset

if (gotHit) { me.health -= boss.dataset.damage; } else if (hitBaddie) { boss.dataset.health -= 1; if (boss.dataset.health === 0) { boss.classList.add('dead'); } } </script> element.classList

element.classList querySelectorAll == jQuery? +

http://www.ﬂickr.com/photos/ilmatte81/4052670882/ Fullscreen

๏ requestAnimationFrame ๏ WebGL ๏ Blobs (with urls) ๏ <datalist>

SOOOOOOOOOOOOON http://www.ﬂickr.com/photos/altoexyl/3840879992

REAL-TIME COMMUNICATION

๏ WebRTC - audio ๏ Web Audio/Audio Data ๏ WebGL
๏ Full Screen

CHROMELESS http://www.ﬂickr.com/photos/daveynin/4899888908

๏Not headless ๏Not just fullscreen ๏Sans-chrome ๏Installable ๏Business as usual:
HTML, CSS, JS

Windows: .hta IE7 FTW!!!

Chrome: app shortcuts http://rem.io/link/185

Opera Widgets

Windows 8

WebRT http://rem.io/link/186 http://rem.io/link/187 navigator.mozApps.install { "version": "1.0", "name": "ABBAInfo",

.webapp?

DO NOT UNDERESTIMATE USER EXPERIENCE. GOOD WEB SITES DO NOT
AUTOMATICALLY MAKE GOOD APPLICATIONS.

PARTING THOUGHTS 1. START USING TECHNOLOGY AVAILABLE TO YOU 2.
VIABILITY COMES FROM MULTIPLE IMPLEMENTATIONS 3. DEMAND MORE ACCESS TO APIS 4. HTML5 = JAVASCRIPT

OTHERWISE: ROCK ON. @REM LEFTLOGIC.COM

HTML5 Outliers

HTML5 Outliers

More Decks by Remy Sharp

Other Decks in Technology

Featured

Transcript