Slide 1
Slide 1 text
HTML5
OUTLIERS
REMY SHARP / @REM
Slide 2
Slide 2 text
http://www.flickr.com/photos/12173213@N00/6410825167
I wanted to build
apps that worked
without the ball ache.
Is that so unreasonable?
Slide 3
Slide 3 text
'97
Yeah, I used to be thinner :(
Slide 4
Slide 4 text
๏JavaScript in the browser
๏Browser came preinstalled
๏Also discovered WSH / .hta
๏Made apps: wallpaper changer
http://www.flickr.com/photos/43805896@N00/3657783366/
Slide 5
Slide 5 text
๏Data storage
๏Real-time notifications
๏Desktop integration
๏Access to hardware
๏Local "install"
๏Go naked
http://www.flickr.com/photos/21966325@N00/537474857/
Slide 6
Slide 6 text
caniuse.com
Slide 7
Slide 7 text
STUFF YOU SHOULD DO TODAY
AKA PROGRESSIVE ENHANCEMENT
Slide 8
Slide 8 text
Slide 9
Slide 9 text
JSON parsing
Slide 10
Slide 10 text
Web Storage
Slide 11
Slide 11 text
sessionStorage.state = ↵
JSON.stringify(app.state);
localStorage.lastLogin;
delete localStorage.user;
Slide 12
Slide 12 text
http://www.flickr.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
Slide 13
Slide 13 text
Be sensible.
Think:
cookie
killer.
http://flickr.com/photos/41214178@N00/2822774896/
Slide 14
Slide 14 text
Events!!!
window.addEventListener('storage', sync);
Slide 15
Slide 15 text
Web Forms
Slide 16
Slide 16 text
/([\w-\.]+)@((?:[\w]+\.)+)([a-z]{2,4})/gi
/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-
Valid email anyone?
Slide 17
Slide 17 text
(\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?
Slide 18
Slide 18 text
Valid email anyone?
'@[10.10.10.10]
user@[IPv6:2001:db8:1ff::a0b:dbd
0]
"much.more\ unusual"@example.com
"very.unusual.@.unusual.com"@exa
mple.com
"very.(),:;<>[]\".VERY.\"very@\\
\ \"very
\".unusual"@strange.example.com
0@a
!#$%&'*+-/=?^_`{}|~@example.org
"()<>[]:;@,\\\"!#$%&'*+-/=?
^_`{}|\ \ \ \ \ ~\ \ \ \ \ \ \ ?
\ \ \ \ \ \ \ \ \ \ \ \ ^_`{}|
~.a"@example.org
""@example.org
postbox@com
Slide 19
Slide 19 text
Valid email anyone?
Slide 20
Slide 20 text
Make use of
free validation
Slide 21
Slide 21 text
History API
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
$('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);
}
}
Slide 24
Slide 24 text
$('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);
}
}
Select all internal links
Slide 25
Slide 25 text
$('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);
}
}
If the user only clicked, ignore new tab clicks
Slide 26
Slide 26 text
$('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);
}
}
Send the url path to our pushState function
Slide 27
Slide 27 text
$('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);
}
}
Update window location and save the state data
Slide 28
Slide 28 text
$(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.
Slide 29
Slide 29 text
๏Build non-JS version
๏Detect history.pushState support
๏Progressively enhance
๏Pat yourself on the back
Slide 30
Slide 30 text
EventSource
Slide 31
Slide 31 text
EventSource
๏ Events emit from server
๏ Read only stream
๏ Simple API
๏ Possible to polyfill (so IE support)
Slide 32
Slide 32 text
EventSource
๏Supports connection dropping
and resuming with Last-Event-ID
๏Supports bespoke events other
than `message`
๏CORS is coming (x-domain SSE)
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
var es = new EventSource('/console');
es.onmessage = function (event) {
var data = JSON.parse(event.data);
execute(data.command);
};
Slide 35
Slide 35 text
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();
});
Slide 36
Slide 36 text
Dnd / File API
for uploads
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
"HTML5 drag and
drop module is
not just a disaster
it’s a fucking
disaster"
http://rem.io/link/228
http://www.flickr.com/photos/redux/4640052438/
Slide 40
Slide 40 text
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);
}
Slide 41
Slide 41 text
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);
}
Slide 42
Slide 42 text
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);
}
Slide 43
Slide 43 text
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);
}
Slide 44
Slide 44 text
Step #2
File API
http://www.flickr.com/photos/98411817@N00/231524220/
Slide 45
Slide 45 text
function readFiles(files) {
for (var i = 0; i < files.length; i++) {
preview(files[i]);
}
}
function preview(file) {
var reader = new FileReader();
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
holder.appendChild(image);
};
reader.readAsDataURL(file);
}
Slide 46
Slide 46 text
function readFiles(files) {
for (var i = 0; i < files.length; i++) {
preview(files[i]);
}
}
function preview(file) {
var reader = new FileReader();
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
holder.appendChild(image);
};
reader.readAsDataURL(file);
}
Slide 47
Slide 47 text
function readFiles(files) {
for (var i = 0; i < files.length; i++) {
preview(files[i]);
}
}
function preview(file) {
var reader = new FileReader();
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
holder.appendChild(image);
};
reader.readAsDataURL(file);
}
Slide 48
Slide 48 text
upload!!!
Slide 49
Slide 49 text
var formData = new FormData();
Slide 50
Slide 50 text
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('file', files[i]);
}
Slide 51
Slide 51 text
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('file', files[i]);
}
// now post a new XHR request
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
Slide 52
Slide 52 text
var formData = new FormData();
for (var i = 0; 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;
}
}
Slide 53
Slide 53 text
var formData = new FormData();
for (var i = 0; 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);
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
TOMORROW
http://www.flickr.com/photos/nasamarshall/5654415647
Slide 56
Slide 56 text
dataset & classList
Slide 57
Slide 57 text
Slide 58
Slide 58 text
Slide 59
Slide 59 text
Slide 60
Slide 60 text
element.classList
querySelectorAll
== jQuery?
+
Slide 61
Slide 61 text
http://www.flickr.com/photos/ilmatte81/4052670882/
Fullscreen
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
๏ requestAnimationFrame
๏ WebGL
๏ Blobs (with urls)
๏
Slide 64
Slide 64 text
SOOOOOOOOOOOOON
http://www.flickr.com/photos/altoexyl/3840879992
Slide 65
Slide 65 text
REAL-TIME
COMMUNICATION
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
๏ WebRTC - audio
๏ Web Audio/Audio Data
๏ WebGL
๏ Full Screen
Slide 69
Slide 69 text
CHROMELESS
http://www.flickr.com/photos/daveynin/4899888908
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
๏Not headless
๏Not just fullscreen
๏Sans-chrome
๏Installable
๏Business as usual: HTML, CSS, JS
Slide 72
Slide 72 text
Windows: .hta
IE7 FTW!!!
Slide 73
Slide 73 text
Chrome: app shortcuts
http://rem.io/link/185
Slide 74
Slide 74 text
Opera Widgets
Slide 75
Slide 75 text
Windows 8
Slide 76
Slide 76 text
WebRT
http://rem.io/link/186
http://rem.io/link/187
navigator.mozApps.install
{
"version": "1.0",
"name": "ABBAInfo",
Slide 77
Slide 77 text
.webapp?
Slide 78
Slide 78 text
DO NOT UNDERESTIMATE USER
EXPERIENCE. GOOD WEB SITES
DO NOT AUTOMATICALLY MAKE
GOOD APPLICATIONS.
Slide 79
Slide 79 text
PARTING THOUGHTS
1. START USING TECHNOLOGY AVAILABLE TO YOU
2. VIABILITY COMES FROM MULTIPLE
IMPLEMENTATIONS
3. DEMAND MORE ACCESS TO APIS
4. HTML5 = JAVASCRIPT
Slide 80
Slide 80 text
OTHERWISE: ROCK ON.
@REM
LEFTLOGIC.COM