extending your own and others' sites with html5

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


whole page and without resorting to # or #! URLso Important for Beatport because of music playback

• data- attributes• Local storage• HTML5 elements


whole page and without resorting to # or #! URLso Important for Beatport because of music playbacko Examples: github Beatport



whole page and without resorting to # or #! URLso Important for Beatport because of music playbacko Examples: github Beatporto Using the history.js jQuery plugin


• pushState URLs• data- attributes

o Used to embed data on elements• Local storage• HTML5 elements


o Used to embed data on elementso data-queue-position in player queue

• Local storage• HTML5 elements


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


o <!DOCTYPE html>


o <!DOCTYPE html>o <nav>


o <!DOCTYPE html>o <nav>o <input type="search">


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


o Rich front-endo Started exploring, found data that wasn't surfaced in

the UI



the UIo My Music Hack Day Boston project: Living Playlist




• Outgrew bookmarklet when I wanted to add scrobbling




• 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);

})();





• 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


• localStorage to persist data

Extension Features


• localStorage to persist datao Extension Settings

Extension Features


• localStorage to persist datao Extension Settingso Tags

Extension Features



• 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



• 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


• The weekend of June 25/26, the extension brokeo Random names were introduced for certain objects

within the turntable object


• 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

extending your own and others' sites with html5

Technology

elements dataqueue

example html5 elements

urls important

player queue html5 elements

player queue datajson

html5 mark reeder

beatport frontend developer

music hack day boston