16. it’s getting better
• new browser features
• newly discovered techniques (hacks)
• powerful new open source libraries
• published literature?
Sunday, September 18, 2011
27. first impressions count
• hard to get website owners to
update their script includes
• people are still using blocking disqus
include (deprecated mid-2009)
• who still uses blocking GA include?
Sunday, September 18, 2011
29. global collisions
• unknown scripts executing on same
page
• may introduce conflicting variables
• DOM queries may inadvertently
select your elements (or vice versa)
Sunday, September 18, 2011
31. bonus points: html
• id=”dsq-comment-8”
• class=”dsq-comment”
• data-dsq-username=”jimbob”
• Bad: class=”dsq-comment active”
Sunday, September 18, 2011
32. js libs
• you should use ‘em
• what if they already exist on the
page?
Sunday, September 18, 2011
33. $.noConflict
• utility method for assigning jQuery
global ($) to a variable
• great for namespacing
• becoming a standard pattern
Sunday, September 18, 2011
34. libs w/ noConflict
• LABjs
• Underscore.js
• Backbone.js
• Ender.js and its assoc. microlibs
• easyXDM
Sunday, September 18, 2011
36. sandboxing
• run your code inside a src-less iframe
• clean js environment
• no global state leak
Sunday, September 18, 2011
37. twitter @anywhere
• twitter widget library
• supports multiple lib versions/
instances per page
• each version is sandboxed in a
separate iframe
Sunday, September 18, 2011
39. hiro.js
• QUnit-like js testing library
• each test suite runs in a new iframe
• optional: seed iframe environment
Hiro (http://github.com/antonkovalyov/hiro)
Sunday, September 18, 2011
41. cross-domain ajax
• can’t initiate XmlHttpRequest from
foo.com to bar.com
• same-origin policy (host, port,
protocol)
• subdomains a ected too
Sunday, September 18, 2011
42. w/o same-origin pol.
• What if I hosted a page with the
following ...
Sunday, September 18, 2011
43. CORS
• Cross-Origin Resource Sharing
• special http headers that permit XD
access to resources
• W3C working draft
• Firefox 3.5+, Chrome 3+, Safari 4+,
IE8+
Sunday, September 18, 2011
44. CORS headers
Cors Example (http://saltybeagle.com/cors)
Sunday, September 18, 2011
45. JSONP
• load JSON using <script> elements
• script element bypasses same-origin
policy
• built-in helpers in most js frameworks
Sunday, September 18, 2011
48. JSONP cont’d
• only supports GET requests
• script loading can’t detect 400, 500
errors (rely on timeouts)
• caching complications when
generating new response each time
Sunday, September 18, 2011
49. postMessage
• HTML5 API for cross-window
communication
• works with iframes, new windows
• Firefox 3+, Safari 4+, Chrome (all),
IE8+
Sunday, September 18, 2011
50. postMessage
foo.com
bar.com
Sunday, September 18, 2011
52. easyXDM
• postMessage-like API for window objs
• uses Flash, obscure transport
protocols when postMessage is n/a
• wider browser support
• Disqus, Twitter, Scribd, LinkedIn ...
easyXDM (http://easyxdm.net)
Sunday, September 18, 2011
54. how do you debug
this mess?
Sunday, September 18, 2011
55. switches
• serve unminified js for specific sites,
users*
Sunday, September 18, 2011
56. proxies
• send all http tra c to a proxy server
• rewrite production urls
• from widget.com to ...
• localhost
• staging.widget.com
• newfeature.staging.widget.com
Sunday, September 18, 2011
