Fluent 2012 v2


Published on

Gary Flake's (Founder and CEO of Clipboard) Keynote at Fluent 2012 on "Bookmarklets vs Applications"

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Fluent 2012 v2

  1. 1. Bookmarklets as Applications Fluent 2012 Gary Flake, CEO / Founder flake@clipboard.com Select. Collect. Reflect.
  2. 2. Bookmarklet Demo Select. Collect. Reflect.
  3. 3. How it works Select. Collect. Reflect.
  4. 4. What does our bookmarklet do?• Check login state• Rewrites the page• Interactive UI• Analyzes DOM & CSS• Preview UI• Transmits Data• Reports back status
  5. 5. Some obvious challenges• Fast hit detection elementFromPoint()• Robustly render UI CSS sandboxing• Secure API calls XDM + USTORE + HMAC
  6. 6. Some obvious challenges• Fast hit detection elementFromPoint()• Robustly render UI CSS sandboxing• Secure API calls XDM + USTORE + HMAC
  7. 7. Safe but naïve hit detection method1. Get positions and sizes of all possible hits.2. On mouse hover, look for the “best” hit.3. Factor in z-index, nesting, and sizes to disambiguate.Many problems: slow, imprecise, breaks on reflow.
  8. 8. Much better hit detection• document.elementFromPoint()• Does everything that we want.• Will return an iframe if anywhere on an iframe.• Can use the iframe’s document to find elements nested (e.g., gmail).
  9. 9. Some obvious challenges• Fast hit detection elementFromPoint()• Robustly render UI CSS sandboxing• Secure API calls XDM + USTORE + HMAC
  10. 10. Three steps• Programmatically reset (block, inline, input, li, table, tbody, tr, td)• Use specific selectors and !important (avoids having to write brittle CSS)• Customize jQuery internals (.style takes flag for important for animations)
  11. 11. Forced CSS resetsshared: { background-image: none, background-origin: padding-box, background-size: auto, border-spacing: 0, border: 0 solid black, border-image: none, bottom:auto, clear: none, content: normal, crop: auto, cursor: auto, direction: ltr, float: none, font-size-adjust: none, font-stretch: normal, font-style: normal, font-variant: normal, font-weight: normal, height: auto, left: auto, letter-spacing: normal, line-break: auto, line-height: normal, margin-bottom: 0, margin-left: 0,margin-right: 0, margin-top: 0, max-height: none, max-width: none, min-height: none, min-width: none, outline-color: invert, outline-style: none, outline-width:medium, overflow-wrap: normal, padding-bottom: 0, padding-left: 0, padding-right: 0, padding-top: 0, position: static, right: auto, text-autospace: none, text-decoration: none, text-outline: none, text-overflow: clip, text-shadow: none, text-transform: none, text-wrap: none, top: auto, unicode-bidi: normal, visibility:visible, white-space: normal, width: auto, word-break: normal, word-spacing: normal, z-index: auto},block: { display: block, overflow: visible, overflow-clip: auto, overflow-style: auto, overflow-x: visible, overflow-y: visible, text-align: left, text-indent: 0, widows:2’},inline: { display: inline, vertical-align: baseline’},table: { border-collapse: separate, table-layout: auto, display: table’},tableCell: { empty-cells: show, vertical-align: baseline, display: table-cell’},tableRow: { display: table-row’},list: { list-style-image: none, list-style-position: outside, list-style-type: disc’},link: { cursor: pointer},listItem: { display: list-item},textInput: { cursor: text}
  12. 12. Not perfect but good enough Original Site Our CSS Their CSS with !important Inline resets Our Custom jQuery with Our UI !important
  13. 13. Some obvious challenges• Fast hit detection elementFromPoint()• Robustly render UI CSS sandboxing• Secure API calls XDM + USTORE + HMAC
  14. 14. API challenges• Our code is running on a 3rd party page.• We don’t want host page to be able to infer user’s secret.• We don’t want our API calls to be spoofed.
  15. 15. How we send a signed XDP foo.com/ XDP.js page clipboard.com Clip data via HMAC with easyXDM.js secret key Client local storage in the User’s browser Secret Key clipboard.com domain Promise token for asynch result check
  16. 16. Doing it yourself Select. Collect. Reflect.
  17. 17. Add clipping to your page1. Include our embed script2. Add a DIV3. ????4. Profit!!!Full details at: http://clipboard.com/tools
  18. 18. Example<!DOCTYPE html><html> <head> <title>Embed test</title> <script type="text/javascript" src="//clipboard.com/js/bookmarklet_boot.js?origin=embed" /> </head> <body> <p id="embedMe">Hello World</p> <div class="clipboardEmbedButton" data-start="#embedMe" /> </body></html>
  19. 19. Button attributesdata-start – CSS selector for first (or only) element to be copied.data-end – optional selector to specify range.data-theme – light or dark (default)style – restricted styles (position, display, float, margin, top, right, bottom, left)
  20. 20. Closing Remarks Select. Collect. Reflect.
  21. 21. Bookmarklets as applications• Bookmarklets are one of the few methods for creating in-browser mashups between services.• There are a ton a gotchas around security, safety, and performance.• See http://clipboard.com/tools for embed instructions and details.
  22. 22. Thanks! Select. Collect. Reflect.
  23. 23. Product Basics Select Discover, search, Save any part of and transact any Web page Reflect Collect Organize, share, and publish
  24. 24. Architecture web-01 web-02 web-03 Node.js + Nginx Node.js + Nginx Node.js + Nginx riak-01 cache-01 redis-01 riak-05 riak-02 cache-02 redis-02 cache-03 riak-04 riak-03 admin-01 thumb-01 thumb-02 job-01 job-02