Slide 1

Slide 1 text

Sail Navigating the DOM APIs Kit Cambridge Voxer

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

CSS Selectors Attributes Properties Traversal Manipulation Styles Positioning Storage Wrappers Effects Plug-ins

Slide 4

Slide 4 text

Simplify Find problems in disguise

Slide 5

Slide 5 text

Element Storage Associate arbitrary metadata with an element MooTools Prototype jQuery store, retrieve, eliminate store, retrieve, purge, getStorage data, removeData, hasData

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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; }

Slide 8

Slide 8 text

The Perils of Generality Tailored solutions are the answer Attributes

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

Considerations Opportunity cost

Slide 13

Slide 13 text

File size Complexity Performance Micro-Libraries General solutions Edge cases

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

“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

Slide 16

Slide 16 text

Accept constraints Think about what you need Reduce abstractions Write only what you need

Slide 17

Slide 17 text

Thank you! @kitcambridge git.io/kit