Extending your own and others' sites with HTML5

630 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
630
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Extending your own and others' sites with HTML5

  1. 1. Extending your own and others' sites with HTML5 Mark Reeder
  2. 2. <ul><li>About Me </li></ul><ul><ul><li>UI Developer at Beatport </li></ul></ul><ul><ul><li>Front-end developer working in the online music space for the past 5 years </li></ul></ul><ul><ul><li>http://twitter.com/Mark_Reeder </li></ul></ul><ul><ul><li>https://github.com/MarkReeder </li></ul></ul>
  3. 3. <ul><ul><li>Employed by </li></ul></ul><ul><ul><li>Read/write access to source code </li></ul></ul><ul><ul><li>Able to change data that is available </li></ul></ul><ul><ul><li>No official connection </li></ul></ul><ul><ul><li>No ability to officially modify code </li></ul></ul><ul><ul><li>Stuck with the data they provide (and anything else I can infer or record) </li></ul></ul>
  4. 6. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul>
  5. 7. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><ul><li>Allow site URL to be updated without refreshing the whole page and without resorting to # or #! URLs </li></ul></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul>
  6. 8. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><ul><li>Allow site URL to be updated without refreshing the whole page and without resorting to # or #! URLs </li></ul></ul></ul><ul><ul><ul><li>Important for Beatport because of music playback </li></ul></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul>
  7. 9. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><ul><li>Allow site URL to be updated without refreshing the whole page and without resorting to # or #! URLs </li></ul></ul></ul><ul><ul><ul><li>Important for Beatport because of music playback </li></ul></ul></ul><ul><ul><ul><li>Examples: github   Beatport </li></ul></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul>
  8. 10. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><ul><li>Allow site URL to be updated without refreshing the whole page and without resorting to # or #! URLs </li></ul></ul></ul><ul><ul><ul><li>Important for Beatport because of music playback </li></ul></ul></ul><ul><ul><ul><li>Examples: github   Beatport </li></ul></ul></ul><ul><ul><ul><li>Using the  history.js  jQuery plugin </li></ul></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul>
  9. 11. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><ul><li>Used to embed data on elements </li></ul></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul>
  10. 12. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><ul><li>Used to embed data on elements </li></ul></ul></ul><ul><ul><ul><li>data-queue-position in player queue </li></ul></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul>
  11. 13. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><ul><li>Used to embed data on elements </li></ul></ul></ul><ul><ul><ul><li>data-queue-position in player queue </li></ul></ul></ul><ul><ul><ul><li>data-json for track elements </li></ul></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul>
  12. 14. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><ul><li>Persist user settings (items per page, for example) </li></ul></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul>
  13. 15. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><ul><li>Persist user settings (items per page, for example) </li></ul></ul></ul><ul><ul><ul><li>Persist player queue </li></ul></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul>
  14. 16. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul><ul><ul><ul><li><!DOCTYPE html> </li></ul></ul></ul>
  15. 17. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul><ul><ul><ul><li><!DOCTYPE html> </li></ul></ul></ul><ul><ul><ul><li><nav> </li></ul></ul></ul>
  16. 18. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul><ul><ul><ul><li><!DOCTYPE html> </li></ul></ul></ul><ul><ul><ul><li><nav> </li></ul></ul></ul><ul><ul><ul><li><input type=&quot;search&quot;> </li></ul></ul></ul>
  17. 19. <ul><ul><li>pushState URLs </li></ul></ul><ul><ul><li>data- attributes </li></ul></ul><ul><ul><li>Local storage </li></ul></ul><ul><ul><li>HTML5 elements </li></ul></ul><ul><ul><ul><li><!DOCTYPE html> </li></ul></ul></ul><ul><ul><ul><li><nav> </li></ul></ul></ul><ul><ul><ul><li><input type=&quot;search&quot;> </li></ul></ul></ul><ul><ul><ul><li>Why not <audio>? </li></ul></ul></ul>
  18. 23. <ul><ul><li>Extension started out as a bookmarklet </li></ul></ul>
  19. 24. <ul><ul><li>Extension started out as a bookmarklet </li></ul></ul><ul><ul><li>Motivations </li></ul></ul><ul><ul><ul><li>Rich front-end </li></ul></ul></ul>
  20. 25. <ul><ul><li>Extension started out as a bookmarklet </li></ul></ul><ul><ul><li>Motivations </li></ul></ul><ul><ul><ul><li>Rich front-end </li></ul></ul></ul><ul><ul><ul><li>Started exploring, found data that wasn't surfaced in the UI </li></ul></ul></ul>
  21. 26. <ul><ul><li>Extension started out as a bookmarklet </li></ul></ul><ul><ul><li>Motivations </li></ul></ul><ul><ul><ul><li>Rich front-end </li></ul></ul></ul><ul><ul><ul><li>Started exploring, found data that wasn't surfaced in the UI </li></ul></ul></ul><ul><ul><ul><li>My Music Hack Day Boston project:  Living Playlist </li></ul></ul></ul>
  22. 27. <ul><ul><li>Extension started out as a bookmarklet </li></ul></ul><ul><ul><li>Motivations </li></ul></ul><ul><ul><ul><li>Rich front-end </li></ul></ul></ul><ul><ul><ul><li>Started exploring, found data that wasn't surfaced in the UI </li></ul></ul></ul><ul><ul><ul><li>My Music Hack Day Boston project:  Living Playlist </li></ul></ul></ul><ul><ul><li>Outgrew bookmarklet when I wanted to add scrobbling </li></ul></ul>
  23. 28. <ul><ul><li>Extension started out as a bookmarklet </li></ul></ul><ul><ul><li>Motivations </li></ul></ul><ul><ul><ul><li>Rich front-end </li></ul></ul></ul><ul><ul><ul><li>Started exploring, found data that wasn't surfaced in the UI </li></ul></ul></ul><ul><ul><ul><li>My Music Hack Day Boston project:  Living Playlist </li></ul></ul></ul><ul><ul><li>Outgrew bookmarklet when I wanted to add scrobbling </li></ul></ul><ul><ul><ul><li>http://gabek.github.com/TurntableScrobbler/ </li></ul></ul></ul>
  24. 29. <ul><ul><li>Extension started out as a bookmarklet </li></ul></ul><ul><ul><li>Motivations </li></ul></ul><ul><ul><ul><li>Rich front-end </li></ul></ul></ul><ul><ul><ul><li>Started exploring, found data that wasn't surfaced in the UI </li></ul></ul></ul><ul><ul><ul><li>My Music Hack Day Boston project:  Living Playlist </li></ul></ul></ul><ul><ul><li>Outgrew bookmarklet when I wanted to add scrobbling </li></ul></ul><ul><ul><ul><li>http://gabek.github.com/TurntableScrobbler/ </li></ul></ul></ul><ul><ul><li>Learned about manifest.json and isolated worlds:  Google Chrome Extensions: Content Scripts </li></ul></ul>
  25. 30. Getting around Isolated Worlds -  injectScript.js ( function () {      var js, css;      js = document .createElement( 'script' );      js.src = chrome.extension.getURL( &quot;js/turntable.fm.extend.js?v=0.6_&quot; + new Date ().getTime());      document .body.appendChild(js);           css = document .createElement( 'link' );      css.rel = &quot;stylesheet&quot; ;      css.type = &quot;text/css&quot; ;      css.href = chrome.extension.getURL( &quot;css/turntable.fm.extend.css?v=0.6_&quot; + new Date ().getTime());      document .body.appendChild(css);      var themeCSS = document .createElement( 'link' );      themeCSS.rel = &quot;stylesheet&quot; ;      themeCSS.type = &quot;text/css&quot; ;      themeCSS.href = chrome.extension.getURL( &quot;css/tt-ext-ui-theme/jquery-ui-1.8.14.custom.css?v=0.6_&quot; + new Date ().getTime());      document .body.appendChild(themeCSS); })();
  26. 31. <ul><ul><li>Extension started out as a bookmarklet </li></ul></ul><ul><ul><li>Motivations </li></ul></ul><ul><ul><ul><li>Rich front-end </li></ul></ul></ul><ul><ul><ul><li>Started exploring, found data that wasn't surfaced in the UI </li></ul></ul></ul><ul><ul><ul><li>My Music Hack Day Boston project:  Living Playlist </li></ul></ul></ul><ul><ul><li>Outgrew bookmarklet when I wanted to add scrobbling </li></ul></ul><ul><ul><ul><li>http://gabek.github.com/TurntableScrobbler/ </li></ul></ul></ul><ul><ul><li>Learned about manifest.json and isolated worlds:  Google Chrome Extensions: Content Scripts </li></ul></ul><ul><ul><li>Paid the $5 and registered with the Chrome Web Store:  Turntable.fm Extended </li></ul></ul>
  27. 32. <ul><li>Extension Features </li></ul><ul><ul><li>Desktop Notifications: window.webkitNotifications.createNotification </li></ul></ul>
  28. 33. <ul><li>Extension Features </li></ul><ul><ul><li>Desktop Notifications:  window.webkitNotifications.createNotification </li></ul></ul><ul><ul><ul><li>song change </li></ul></ul></ul>
  29. 34. <ul><li>Extension Features </li></ul><ul><ul><li>Desktop Notifications:  window.webkitNotifications.createNotification </li></ul></ul><ul><ul><ul><li>song change </li></ul></ul></ul><ul><ul><ul><li>chat </li></ul></ul></ul>
  30. 35. <ul><li>Extension Features </li></ul><ul><ul><li>Desktop Notifications:  window.webkitNotifications.createNotification </li></ul></ul><ul><ul><ul><li>song change </li></ul></ul></ul><ul><ul><ul><li>chat </li></ul></ul></ul><ul><ul><ul><li>room users changes </li></ul></ul></ul>
  31. 36. <ul><li>Extension Features </li></ul><ul><ul><li>Desktop Notifications:  window.webkitNotifications.createNotification </li></ul></ul><ul><ul><ul><li>song change </li></ul></ul></ul><ul><ul><ul><li>chat </li></ul></ul></ul><ul><ul><ul><li>room users changes </li></ul></ul></ul><ul><ul><ul><li>DJ changes </li></ul></ul></ul>
  32. 37. <ul><li>Extension Features </li></ul><ul><ul><li>Desktop Notifications:  window.webkitNotifications.createNotification </li></ul></ul><ul><ul><ul><li>song change </li></ul></ul></ul><ul><ul><ul><li>chat </li></ul></ul></ul><ul><ul><ul><li>room users changes </li></ul></ul></ul><ul><ul><ul><li>DJ changes </li></ul></ul></ul><ul><ul><ul><li>vote notifications, both up and down </li></ul></ul></ul>
  33. 38. <ul><li>Desktop Notifications </li></ul><ul><ul><li>Natively they're not highly configurable </li></ul></ul><ul><ul><li>Chrome Extension to use Growl </li></ul></ul><ul><ul><ul><li>Custom Growl Build for Mac </li></ul></ul></ul>
  34. 39. <ul><li>Extension Features </li></ul><ul><ul><li>Desktop Notifications:  window.webkitNotifications.createNotification </li></ul></ul><ul><ul><ul><li>song change </li></ul></ul></ul><ul><ul><ul><li>chat </li></ul></ul></ul><ul><ul><ul><li>room users changes </li></ul></ul></ul><ul><ul><ul><li>DJ changes </li></ul></ul></ul><ul><ul><ul><li>vote notifications, both up and down </li></ul></ul></ul><ul><ul><li>  localStorage to persist data </li></ul></ul>
  35. 40. <ul><li>Extension Features </li></ul><ul><ul><li>Desktop Notifications:  window.webkitNotifications.createNotification </li></ul></ul><ul><ul><ul><li>song change </li></ul></ul></ul><ul><ul><ul><li>chat </li></ul></ul></ul><ul><ul><ul><li>room users changes </li></ul></ul></ul><ul><ul><ul><li>DJ changes </li></ul></ul></ul><ul><ul><ul><li>vote notifications, both up and down </li></ul></ul></ul><ul><ul><li>  localStorage to persist data </li></ul></ul><ul><ul><ul><li>Extension Settings </li></ul></ul></ul>
  36. 41. <ul><li>Extension Features </li></ul><ul><ul><li>Desktop Notifications:  window.webkitNotifications.createNotification </li></ul></ul><ul><ul><ul><li>song change </li></ul></ul></ul><ul><ul><ul><li>chat </li></ul></ul></ul><ul><ul><ul><li>room users changes </li></ul></ul></ul><ul><ul><ul><li>DJ changes </li></ul></ul></ul><ul><ul><ul><li>vote notifications, both up and down </li></ul></ul></ul><ul><ul><li>  localStorage to persist data </li></ul></ul><ul><ul><ul><li>Extension Settings </li></ul></ul></ul><ul><ul><ul><li>Tags </li></ul></ul></ul>
  37. 42. <ul><li>Extension Features </li></ul><ul><ul><li>Desktop Notifications:  window.webkitNotifications.createNotification </li></ul></ul><ul><ul><ul><li>song change </li></ul></ul></ul><ul><ul><ul><li>chat </li></ul></ul></ul><ul><ul><ul><li>room users changes </li></ul></ul></ul><ul><ul><ul><li>DJ changes </li></ul></ul></ul><ul><ul><ul><li>vote notifications, both up and down </li></ul></ul></ul><ul><ul><li>  localStorage to persist data </li></ul></ul><ul><ul><ul><li>Extension Settings </li></ul></ul></ul><ul><ul><ul><li>Tags </li></ul></ul></ul><ul><ul><li>data- attributes for message passing via the DOM </li></ul></ul>
  38. 43. <ul><li>Message Passing </li></ul><ul><ul><li>Message Passing Div (MPD) created in contentscript.js </li></ul></ul>
  39. 44. <ul><li>Message Passing </li></ul><ul><ul><li>Message Passing Div (MPD) created in contentscript.js   </li></ul></ul><ul><ul><li>Messages are passed through dispatchEventToContentScript </li></ul></ul>
  40. 45. <ul><li>Message Passing </li></ul><ul><ul><li>Message Passing Div (MPD) created in contentscript.js   </li></ul></ul><ul><ul><li>Messages are passed through dispatchEventToContentScript </li></ul></ul><ul><ul><li>Event Listeners in contentscript on MPD </li></ul></ul>
  41. 46. <ul><li>Message Passing </li></ul><ul><ul><li>Message Passing Div (MPD) created in contentscript.js   </li></ul></ul><ul><ul><li>Messages are passed through dispatchEventToContentScript </li></ul></ul><ul><ul><li>Event Listeners in contentscript on MPD </li></ul></ul><ul><ul><ul><li>Listeners get data from data- attributes on elements </li></ul></ul></ul>
  42. 47. <ul><li>Extension Features </li></ul><ul><ul><li>Desktop Notifications:  window.webkitNotifications.createNotification </li></ul></ul><ul><ul><ul><li>song change </li></ul></ul></ul><ul><ul><ul><li>chat </li></ul></ul></ul><ul><ul><ul><li>room users changes </li></ul></ul></ul><ul><ul><ul><li>DJ changes </li></ul></ul></ul><ul><ul><ul><li>vote notifications, both up and down </li></ul></ul></ul><ul><ul><li>  localStorage to persist data </li></ul></ul><ul><ul><ul><li>Extension Settings </li></ul></ul></ul><ul><ul><ul><li>Tags </li></ul></ul></ul><ul><ul><li>data- attributes for message passing via the DOM </li></ul></ul><ul><ul><li>Canvas behind the scenes for local file saving </li></ul></ul>
  43. 48. <ul><li>Dangers of unofficially working with 3rd party code </li></ul><ul><ul><li>The weekend of June 25/26, the extension broke </li></ul></ul>
  44. 49. <ul><li>Dangers of unofficially working with 3rd party code </li></ul><ul><ul><li>The weekend of June 25/26, the extension broke </li></ul></ul><ul><ul><ul><li>Random names were introduced for certain objects within the turntable object </li></ul></ul></ul>
  45. 50. <ul><li>Dangers of unofficially working with 3rd party code </li></ul><ul><ul><li>The weekend of June 25/26, the extension broke </li></ul></ul><ul><ul><ul><li>Random names were introduced for certain objects within the turntable object </li></ul></ul></ul><ul><ul><ul><li>getTurntableObjects workaround </li></ul></ul></ul>
  46. 51. Questions? http://twitter.com/Mark_Reeder https://github.com/MarkReeder

×