Devcon5, NYC 2013: Intro to HTML5

HTML5 Hacks introduces the audience to the umbrella of HTML5 specifications that will have you rethinking the possibilities of browser based applications.

Join Jesse Cravens, author of O'Reilly's best selling 'HTML5 Hacks', as he demonstrates intriguing uses of HTML5-related technologies. In each hack, he provides a complete code example for specifications that include Canvas, SVG, CSS3, multimedia, data storage, web workers, WebSocket, Web Components and geolocation.

Here are just a few of the hacks you’ll find in this book and related talk:

Make iOS-style card flips with CSS transforms and transitions
Replace the background of your video with the Canvas tag
Use Canvas to create high-res Retina Display-ready media
Make elements on your page user-customizable with editable content
Cache media resources locally with the filesystem API
Reverse-geocode the location of your web app user
Process image data with pixel manipulation in a dedicated web worker
Push notifications to the browser with Server-Sent Events

Transcript

1. Intro to HTML5 July 2013 Sunday, December 29, 13
2. @jdcravens github.com/jessecravens frog Sunday, December 29, 13
3. July 2013 Devcon5 NYC 2013 Intro to HTML5 3 Experience Sunday, December 29, 13
4. Sunday, December 29, 13
5. July 2013 Devcon5 NYC 2013 Intro to HTML5 5 Offline Storage CSS3 Styling Device Access Connectivity Effects Multimedia Semantics Perf/Integrate The HTML5 Umbrella Sunday, December 29, 13
6. July 2013 Devcon5 NYC 2013 Intro to HTML5 6 Agenda Web Forms Web Workers WebSocket Device Orientation Sensors Geo Location Web Components Sunday, December 29, 13
7. Web Forms Forms Playground Sunday, December 29, 13
8. July 2013 Devcon5 NYC 2013 HTML5 Web Forms 8 Sunday, December 29, 13
9. Web Workers Background Threads Sunday, December 29, 13
10. July 2013 Devcon5 NYC 2013 HTML5 Web Workers 10 Sunday, December 29, 13
11. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
12. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 JavaScript runs code from an event loop that takes events off a queue of all the events that have happened in the browser. EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
13. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 JavaScript runs code from an event loop that takes events off a queue of all the events that have happened in the browser. “click” EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
14. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 JavaScript runs code from an event loop that takes events off a queue of all the events that have happened in the browser. EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
15. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 JavaScript runs code from an event loop that takes events off a queue of all the events that have happened in the browser. “mouseover” EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
16. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 JavaScript runs code from an event loop that takes events off a queue of all the events that have happened in the browser. EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
17. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 JavaScript runs code from an event loop that takes events off a queue of all the events that have happened in the browser. “load” EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
18. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 JavaScript runs code from an event loop that takes events off a queue of all the events that have happened in the browser. EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
19. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 JavaScript runs code from an event loop that takes events off a queue of all the events that have happened in the browser. “change” EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
20. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 JavaScript runs code from an event loop that takes events off a queue of all the events that have happened in the browser. EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
21. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 JavaScript runs code from an event loop that takes events off a queue of all the events that have happened in the browser. “readystatechange” EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
22. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 JavaScript runs code from an event loop that takes events off a queue of all the events that have happened in the browser. EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
23. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
24. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 element.addEventListener('click', function() { //do something }); EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
25. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 element.addEventListener('click', function() { //do something }); Whenever the JavaScript runtime is idle, it takes the first event off the queue and runs any handlers that were registered to that event EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
26. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 element.addEventListener('click', function() { //do something }); EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
27. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 element.addEventListener('click', function() { //do something }); As long as those handlers run quickly, this makes for a responsive user experience. EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
28. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 element.addEventListener('click', function() { //do something }); EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
29. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 Events can be queued while code is running, but they can’t fire until the runtime is free. element.addEventListener('click', function() { //do something }); EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
30. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 element.addEventListener('click', function() { //do something }); EVENTS EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
31. July 2013 Devcon5 NYC 2013 Intro to HTML5 12 Sunday, December 29, 13
32. July 2013 Devcon5 NYC 2013 Intro to HTML5 13 Processing large arrays or JSON responses. Prefetching and/or caching data for later use. Analyzing video or audio data. Polling of webservices. Image filtering in Canvas. Updating many rows of Local Storage DB. Use Cases Sunday, December 29, 13
33. July 2013 Devcon5 NYC 2013 Intro to HTML5 14 var a = false; asyncFunction(function({ console.assert(a, 'a should be true'); }) a = true; Sunday, December 29, 13
34. July 2013 Devcon5 NYC 2013 Intro to HTML5 15 data = file.read("/foo/bar"); // wait... doSomething(data); file.read("/foo/bar", function(data) { // called after data is read doSomething(data); }); otherThing(); // executes immediately; Sunday, December 29, 13
35. July 2013 Devcon5 NYC 2013 Intro to HTML5 16 Web Workers provide a simple means for web content to run scripts in background threads. Main Window Context Worker Context Spawn Sunday, December 29, 13
36. July 2013 Devcon5 NYC 2013 Intro to HTML5 17 // Simple Worker Spawn from Main Thread var message = {"row": 1000, "col": 1000} var worker = new Worker('worker.js'); worker.postMessage(JSON.stringify(message)); worker.addEventListener('message', function(event){ // do something with the computated data }, false); //continue executing Sunday, December 29, 13
37. July 2013 Devcon5 NYC 2013 Intro to HTML5 18 // Move high Computation to the Worker self.addEventListener('message', function(e) { var msg = JSON.parse(e.data); var r = msg.row; var c = msg.col; var a = new Array(r); for (var i = 0; i < r; i++) { a[i] = new Array(c); for (var j = 0; j < c; j++) { a[i][j] = "[" + i + "," + j + "]"; } } postMessage(a); }, false); Sunday, December 29, 13
38. Device Access + WebSocket GeoLocation, Device Orientation, Sensors Sunday, December 29, 13
39. July 2013 Devcon5 NYC 2013 HTML5 WebSocket 20 Sunday, December 29, 13
40. July 2013 Devcon5 NYC 2013 HTML5 Device Orientation 21 Sunday, December 29, 13
41. July 2013 Devcon5 NYC 2013 Intro to HTML5 22 Device Orientation Sunday, December 29, 13
42. July 2013 Devcon5 NYC 2013 Intro to HTML5 sensors 23 Sunday, December 29, 13
43. July 2013 Devcon5 NYC 2013 Intro to HTML5 24 Embedded JS, HTML5 and the Internet of Things http://www.youtube.com/watch?v=H00_BGRkBRM&t=37m50s Sunday, December 29, 13
44. Nerdclustr Geo Location and Web Sockets Sunday, December 29, 13
45. July 2013 Devcon5 NYC 2013 HTML5 GeoLocation 26 Sunday, December 29, 13
46. Nerdclustr Refactoring with Web Components Sunday, December 29, 13
47. July 2013 Devcon5 NYC 2013 HTML5 Shadow DOM 28 Sunday, December 29, 13
48. July 2013 Devcon5 NYC 2013 Intro to HTML5 29 Recent Tech.pro Article Sunday, December 29, 13
49. © 2012 frog. All rights reserved. Sunday, December 29, 13