Working with the DOM and Living to Tell

Ever wondered why it's hard to have all browsers act the same? This is a brief talk about the DOM. What it is, where it came from and why it's giving us headaches. The challenges of working with it are extracted from the writing of a text-styling jQuery plugin – cramify.js.

Transcript

1. @cassilup // tim .js Organizer // 3PG Senior Dev Working with the DOM & Living to Tell
3. 1990s Henry Ford?
4. 1990s Browser Wars
5. 1990s Browser Wars
6. 1990s Browser Wars Netscape vs. Internet Explorer
7. 1990s Browser Wars Netscape vs. Internet Explorer JScript vs. Javascript
8. DOM Level 0 / HTML 4 1995 Intermediate DOM / DHTML,
 ECMAScript 1997 1998 DOM Level 1 / weak browser upgrades 2000 DOM Level 2 / getElementById 1994 W3C 2004 DOM Level 3 / keyboard DOM Level 4 / Draft 2014
9. What exactly is the DOM?
10. css-tricks.com/dom
11. css-tricks.com/dom
12. css-tricks.com/dom
13. The Document Object Model (DOM) is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. (w3.org/DOM)
14. TL; DR The DOM is an API
15. wikipedia.org DOM
16. wikipedia.org DOM BOM
17. • Interact with it (JS, CSS) wikipedia.org
18. • Interact with it (JS, CSS) • Nodes (elements) wikipedia.org
19. • Interact with it (JS, CSS) • Nodes (elements) • Parents & Children (inheritance) wikipedia.org
20. • Interact with it (JS, CSS) • Nodes (elements) • Parents & Children (inheritance) • Events wikipedia.org
21. • Interact with it (JS, CSS) • Nodes (elements) • Parents & Children (inheritance) • Events • ≠ HTML (a markup
 language that enables
 representing a certain 
 kind of DOM in text.) wikipedia.org
22. • Designed for C, C++, JAVA, JavaScript and others.
23. • Designed for C, C++, JAVA, JavaScript and others. • "A camel is a horse designed by committee.” (source)
24. • Designed for C, C++, JAVA, JavaScript and others. • "A camel is a horse designed by committee.” (source) • Implemented in each browser, differently. (!!)
25. • Designed for C, C++, JAVA, JavaScript and others. • "A camel is a horse designed by committee.” (source) • Implemented in each browser, differently. (!!) quirksmode.org
26. quirksmode.org
27. Headaches! (link) • Getting the Cursor Position • Getting the Size of the Viewport, or Browser Window • IE, background transparent click (and many many many others) • DOM Ready (38-line solution) Solutions? • jQuery, • MooTools, • Prototype, • CSS Resets.
28. Whatever it is you want to do, you need to do it with DOM!
29. What did I want to do?
30. What did I want to do? the quick brown fox jumps over the lazy dog
31. What did I want to do? the quick brown fox jumps over the lazy dog
32. 1. Default Behaviour the quick brown fox jumps over the lazy dog <div> the quick brown fox jumps over the lazy dog </div>
33. 2. Add CSS the quick brown fox jumps over the lazy dog <div class=“styled”> the quick brown fox jumps over the lazy dog </div>
34. 3. Uppercase & Line Breaks THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG <div class=“styled”> THE QUICK<br> BROWN<br> FOX<br> JUMPS OVER THE<br> LAZY DOG<br> </div>
35. 4. Separate Lines THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG <div class=“styled”> <div class=“line”>THE QUICK</div> <div class=“line”>BROWN</div> <div class=“line”>FOX</div> <div class=“line”>JUMPS OVER THE</div> <div class=“line”>LAZY DOG</div> </div>
36. 5. Calculate Line Width THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
37. 5. Calculate Line Width THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
38. 6. Do the Math (Rule of Three, anybody?) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
39. 6. Do the Math (Rule of Three, anybody?) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
40. Voilá! THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
41. Voilá! FOOD & BEVERAGE
42. Voilá! WORLD WAR II Chrome
43. Voilá! WORLD WAR II Firefox
44. Voilá! WORLD WAR II I E
45. Voilá! WORL D WAR II Voilá!?!? Safari
46. Voilá! Voilá!?!?
48. WORL D WAR II Safari Tricky Hack
49. Tricky Hack WORLD WAR II Safari
50. Solution WORL D WAR II Safari WORLD WAR II Chrome Dynamically adjust font-size
51. Advantages • OS-agnostic • Infinite font support • Dynamic rendering Disvantages • Performance issues
52. Advantages • OS-agnostic • Infinite font support • Dynamic rendering Disvantages • Performance issues - use cookies!
53. Optimize TIM.JS ROCKS
54. Optimize TIM.J S ROCK S
55. Optimize TIM. JS ROC KS
56. Optimize TIM.J S ROCK S
57. Optimize TIM.JS ROCKS
58. cramify . JS
59. https://github.com/cassilup/cramify.js Try Fork Contribute cramify . JS
60. AngularJS
 Don’t touch the DOM!
 ReactJS
 Virtual DOM. What the Others did. (L.O.S.T. anybody?)
61. Thank You @cassilup // tim .js Organizer // 3PG Senior Dev