Tweet
Tweet

Slide 1

Slide 1 text

Loading. Please wait...

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

BUILD ANYTHING

Slide 4

Slide 4 text

http://www.flickr.com/photos/12173213@N00/6410825167

Slide 5

Slide 5 text

'97 Yeah, I used to be thinner :(

Slide 6

Slide 6 text

๏JavaScript in the browser ๏Browser easy to obtain ๏Also discovered WSH / .hta ๏Made apps: wallpaper changer http://www.flickr.com/photos/43805896@N00/3657783366/

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Making your apps more appish. AKA progressive enhancement i.e. stuff you need to use today.

Slide 9

Slide 9 text

Slide 10

Slide 10 text

JSON parsing

Slide 11

Slide 11 text

Web Storage

Slide 12

Slide 12 text

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

Slide 13

Slide 13 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 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Web Forms

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Valid email anyone?

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Valid email anyone?

Slide 21

Slide 21 text

Make use of free validation

Slide 22

Slide 22 text

History API

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

AppCache for performance

Slide 26

Slide 26 text

"you might still want to use app cache to boost performance of online apps as well" http://flickr.com/photos/48889073931@N01/5079921433/ http://rem.io/link/184

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

EventSource

Slide 29

Slide 29 text

๏Runs over HTTP ๏API filthy simple ๏Polyfill-able!

Slide 30

Slide 30 text

Drag & Drop + File API for uploads

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Real-Time Communication

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Still early. Audio not working. Sorta.

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Warning, challenge ahead:

Slide 46

Slide 46 text

๏ WebRTC - audio ๏ Web Audio / Audio Data ๏ WebGL / 2D API ๏ Full Screen

Slide 47

Slide 47 text

Chromeless

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Windows: .hta IE7 FTW!!!

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Opera Widgets

Slide 53

Slide 53 text

WebRT http://rem.io/link/186 http://rem.io/link/187 navigator.mozApps.install

Slide 54

Slide 54 text

.webapp?

Slide 55

Slide 55 text

It's not "HTML5". It's JavaScript.

Slide 56

Slide 56 text

Cheers, ʵ @rem