Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Devcon5, NYC 2013: Intro to HTML5

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

Jesse Cravens

July 24, 2013
Tweet

More Decks by Jesse Cravens

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. July 2013 Devcon5 NYC 2013 Intro to HTML5 11 EVENTS

    EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  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. “readystatechange” 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 EVENTS

    EVENT QUEUE EVENT LOOP ACTIONS Sunday, December 29, 13
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. July 2013 Devcon5 NYC 2013 Intro to HTML5 22 Device

    Orientation Sunday, December 29, 13
  30. 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
  31. July 2013 Devcon5 NYC 2013 Intro to HTML5 29 Recent

    Tech.pro Article Sunday, December 29, 13