Your SlideShare is downloading. ×
Extending your own and others' sites with HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Extending your own and others' sites with HTML5

403
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
403
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×