Sail

Sometimes, it makes sense to use an existing third-party solution. Other times, it makes sense to chart your own course. Presented at CascadiaJS 2012.

Transcript

1. Sail Navigating the DOM APIs Kit Cambridge Voxer
2. Sometimes, it makes sense to use an existing third-party solution. Other times, it makes sense to chart your own course.
3. CSS Selectors Attributes Properties Traversal Manipulation Styles Positioning Storage Wrappers Effects Plug-ins
4. Simplify Find problems in disguise
5. Element Storage Associate arbitrary metadata with an element MooTools Prototype jQuery store, retrieve, eliminate store, retrieve, purge, getStorage data, removeData, hasData
6. function isSupported() { var element = document.createElement("div"); return typeof element.uniqueNumber == "number" && typeof document.documentElement.uniqueNumber == "number" && element.uniqueNumber != document.documentElement.uniqueNumber; } var Storage = {}; Index data by unique element identi er
7. var UID = 2; function identify(element) { if (element == window) { return 0; } else if (element.nodeType == 9) { return 1; } else if (element.nodeType == 1) { if (!/^(?:embed|object|applet)$/i.test(element.nodeName)) { var property = (isSupported() ? "unique" : "sail") + "Number"; return element[property] || (element[property] = UID++); } } return null; }
8. The Perils of Generality Tailored solutions are the answer Attributes
9. style href src width height enctype contenteditable type checked selected compact declare defer disabled ismap multiple nohref noresize noshade nowrap readonly allowtransparency truespeed Buggy Attributes
10. maxLength selected tabIndex enctype rows cols size value contentEditable profile classid url vrml dynsrc lowsrc pluginspage background cite codeBase data longDesc profile useMap action classid Buggy Properties
11. Many of these attributes and properties are deprecated...but browsers still support them. If you’re writing a general solution, you’ve committed yourself to supporting them as well.
12. Considerations Opportunity cost
13. File size Complexity Performance Micro-Libraries General solutions Edge cases
14. Targeted, low-level utility libraries Stop writing library plug-ins General libraries are abstraction layers with a different syntax Don’t aim for identical experiences across every browser Learn and target DOM APIs instead Save cross-browser consistency for low-level methods
15. “Any change to a low-level abstraction propagates to its dependencies.” “Before attempting to x any bug, the author must rst get an understanding of the problems caused by their code.” — Garrett Smith
16. Accept constraints Think about what you need Reduce abstractions Write only what you need
17. Thank you! @kitcambridge git.io/kit