extending your own and others' sites with html5
Post on 11-May-2015
409 Views
Preview:
TRANSCRIPT
Extending your own and others' sites with HTML5
Mark Reeder
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
• 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)
• pushState URLs• data- attributes• Local storage• HTML5 elements
• pushState URLso Allow site URL to be updated without refreshing the
whole page and without resorting to # or #! URLs• data- attributes• Local storage• HTML5 elements
• pushState URLso Allow site URL to be updated without refreshing the
whole page and without resorting to # or #! URLso Important for Beatport because of music playback
• data- attributes• Local storage• HTML5 elements
• pushState URLso Allow site URL to be updated without refreshing the
whole page and without resorting to # or #! URLso Important for Beatport because of music playbacko Examples: github Beatport
• data- attributes• Local storage• HTML5 elements
• pushState URLso Allow site URL to be updated without refreshing the
whole page and without resorting to # or #! URLso Important for Beatport because of music playbacko Examples: github Beatporto Using the history.js jQuery plugin
• data- attributes• Local storage• HTML5 elements
• pushState URLs• data- attributes
o Used to embed data on elements• Local storage• HTML5 elements
• pushState URLs• data- attributes
o Used to embed data on elementso data-queue-position in player queue
• Local storage• HTML5 elements
• pushState URLs• data- attributes
o Used to embed data on elementso data-queue-position in player queueo data-json for track elements
• Local storage• HTML5 elements
• pushState URLs• data- attributes• Local storage
o Persist user settings (items per page, for example)• HTML5 elements
• pushState URLs• data- attributes• Local storage
o Persist user settings (items per page, for example)o Persist player queue
• HTML5 elements
• pushState URLs• data- attributes• Local storage• HTML5 elements
o <!DOCTYPE html>
• pushState URLs• data- attributes• Local storage• HTML5 elements
o <!DOCTYPE html>o <nav>
• pushState URLs• data- attributes• Local storage• HTML5 elements
o <!DOCTYPE html>o <nav>o <input type="search">
• pushState URLs• data- attributes• Local storage• HTML5 elements
o <!DOCTYPE html>o <nav>o <input type="search">o Why not <audio>?
• Extension started out as a bookmarklet
• Extension started out as a bookmarklet• Motivations
o Rich front-end
• Extension started out as a bookmarklet• Motivations
o Rich front-endo Started exploring, found data that wasn't surfaced in
the UI
• Extension started out as a bookmarklet• Motivations
o Rich front-endo Started exploring, found data that wasn't surfaced in
the UIo My Music Hack Day Boston project: Living Playlist
• Extension started out as a bookmarklet• Motivations
o Rich front-endo Started exploring, found data that wasn't surfaced in
the UIo My Music Hack Day Boston project: Living Playlist
• Outgrew bookmarklet when I wanted to add scrobbling
• Extension started out as a bookmarklet• Motivations
o Rich front-endo Started exploring, found data that wasn't surfaced in
the UIo My Music Hack Day Boston project: Living Playlist
• Outgrew bookmarklet when I wanted to add scrobblingo http://gabek.github.com/TurntableScrobbler/
• Extension started out as a bookmarklet• Motivations
o Rich front-endo Started exploring, found data that wasn't surfaced in
the UIo My Music Hack Day Boston project: Living Playlist
• Outgrew bookmarklet when I wanted to add scrobblingo http://gabek.github.com/TurntableScrobbler/
• Learned about manifest.json and isolated worlds: Google Chrome Extensions: Content Scripts
Getting around Isolated Worlds - injectScript.js
(function() { var js, css; js = document.createElement('script'); js.src = chrome.extension.getURL("js/turntable.fm.extend.js?v=0.6_" + new Date().getTime()); document.body.appendChild(js); css = document.createElement('link'); css.rel = "stylesheet"; css.type = "text/css"; css.href=chrome.extension.getURL("css/turntable.fm.extend.css?v=0.6_" + new Date().getTime()); document.body.appendChild(css);
var themeCSS = document.createElement('link'); themeCSS.rel = "stylesheet"; themeCSS.type = "text/css"; themeCSS.href=chrome.extension.getURL("css/tt-ext-ui-theme/jquery-ui-1.8.14.custom.css?v=0.6_" + new Date().getTime()); document.body.appendChild(themeCSS);
})();
• Extension started out as a bookmarklet• Motivations
o Rich front-endo Started exploring, found data that wasn't surfaced in
the UIo My Music Hack Day Boston project: Living Playlist
• Outgrew bookmarklet when I wanted to add scrobblingo 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
Extension Features
• Desktop Notifications: window.webkitNotifications.createNotification
Extension Features
• Desktop Notifications: window.webkitNotifications.createNotificationo song change
Extension Features
• Desktop Notifications: window.webkitNotifications.createNotificationo song changeo chat
Extension Features
• Desktop Notifications: window.webkitNotifications.createNotificationo song changeo chato room users changes
Extension Features
• Desktop Notifications: window.webkitNotifications.createNotificationo song changeo chato room users changeso DJ changes
Extension Features
• Desktop Notifications: window.webkitNotifications.createNotificationo song changeo chato room users changeso DJ changeso vote notifications, both up and down
Desktop Notifications
• Natively they're not highly configurable• Chrome Extension to use Growl
o Custom Growl Build for Mac
Extension Features
• Desktop Notifications: window.webkitNotifications.createNotificationo song changeo chato room users changeso DJ changeso vote notifications, both up and down
• localStorage to persist data
Extension Features
• Desktop Notifications: window.webkitNotifications.createNotificationo song changeo chato room users changeso DJ changeso vote notifications, both up and down
• localStorage to persist datao Extension Settings
Extension Features
• Desktop Notifications: window.webkitNotifications.createNotificationo song changeo chato room users changeso DJ changeso vote notifications, both up and down
• localStorage to persist datao Extension Settingso Tags
Extension Features
• Desktop Notifications: window.webkitNotifications.createNotificationo song changeo chato room users changeso DJ changeso vote notifications, both up and down
• localStorage to persist datao Extension Settingso Tags
• data- attributes for message passing via the DOM
Message Passing
• Message Passing Div (MPD) created in contentscript.js
Message Passing
• Message Passing Div (MPD) created in contentscript.js • Messages are passed through dispatchEventToContentScript
Message Passing
• Message Passing Div (MPD) created in contentscript.js • Messages are passed through dispatchEventToContentScript• Event Listeners in contentscript on MPD
Message Passing
• Message Passing Div (MPD) created in contentscript.js • Messages are passed through dispatchEventToContentScript• Event Listeners in contentscript on MPD
o Listeners get data from data- attributes on elements
Extension Features
• Desktop Notifications: window.webkitNotifications.createNotificationo song changeo chato room users changeso DJ changeso vote notifications, both up and down
• localStorage to persist datao Extension Settingso Tags
• data- attributes for message passing via the DOM• Canvas behind the scenes for local file saving
Dangers of unofficially working with 3rd party code
• The weekend of June 25/26, the extension broke
Dangers of unofficially working with 3rd party code
• The weekend of June 25/26, the extension brokeo Random names were introduced for certain objects
within the turntable object
Dangers of unofficially working with 3rd party code
• The weekend of June 25/26, the extension brokeo Random names were introduced for certain objects
within the turntable objecto getTurntableObjects workaround
Questions?
http://twitter.com/Mark_Reederhttps://github.com/MarkReeder
top related