How to train your dragon (web standard)

They say there's two things you never want to see made: sausages and web standards. Sooooo I'm going to tell you about both! How do browsers work? What are web components even? Everyone's using them and maybe you should too! 🆒🐱🎉

Transcript

1. title-slide-final_updated.html how to train your dragon web standard
2. about.html title-slide-final_updated.html @notwaldorf
3. about.html title-slide-final_updated.html i built this Neelix Guest Manage People meownica meownica@example.com
4. intro.html how to train your dragon web standard
5. intro.html first, you need a dragon problem
6. intro.html …then wait until it’s everyone’s problem (this is very easy if you have dragons)
7. intro.html complain about it around browser people
8. intro.html (browser people loooove problems) complain about it around browser people
9. intro.html YAY! now it’s the browser’s problem!
10. intro.html standards are a compromise between all browser vendors standards.html
11. intro.html we need web standards so that browsers don’t copy each other’s bugs standards.html
12. intro.html standards.html also, standardizing things is really not new
13. intro.html standards.html railroads use standard tracks
14. intro.html standards.html hot dogs don’t
15. intro.html standards.html hot dogs don’t
16. intro.html standards.html don’t be like hot dogs.
17. intro.html some standards aren’t successful standards.html
18. intro.html 2011: standards.html <input type=“date”>
19. intro.html 2011: standards.html <input type=“date”> 2017: sigh
20. intro.html standards.html
21. intro.html standards.html :/
22. intro.html standards.html “I never want to implement another date picker again — rob wormald, 2017
23. intro.html web standards hindsight is 20/20 standards.html
24. intro.html standards.html you need to standardize the right thing not just any thing
25. intro.html standards.html extensible web manifesto 2013:
26. intro.html standards.html “The standards process should focus on adding new low-level capabilities
27. intro.html standards.html 4 things browser vendors want in a standards proposal vendors.html
28. intro.html standards.html vendors.html the browser already does the thing
29. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic
30. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended
31. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended people already used and liked the thing
32. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended people already used and liked the thing <input type=“date”>
33. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended people already used and liked the thing <input type=“date”>
34. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended people already used and liked the thing <input type=“date”>
35. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended people already used and liked the thing <input type=“date”>
36. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended people already used and liked the thing <input type=“date”>
37. intro.html standards.html vendors.html you need to standardize the right thing not just any thing
38. intro.html standards.html vendors.html you need to standardize the a component model not just a component
39. intro.html standards.html vendors.html you might say a web…component…model
40. intro.html standards.html vendors.html congratulations. you have become alex russell oops.html
41. intro.html standards.html vendors.html 2012ish: learn from what all component models have in common oops.html .html
42. intro.html standards.html vendors.html 2012ish: learn from what all component models have in common oops.html .html xbl2 htc javascripts
43. intro.html standards.html vendors.html standardize ideas not implementations oops.html .html
44. intro.html standards.html vendors.html oops.html .html a useful lifecycle
45. intro.html standards.html vendors.html oops.html .html a useful lifecycle extensibility
46. intro.html standards.html vendors.html oops.html .html a useful lifecycle extensibility (maybe) implementation encapsulation
47. intro.html standards.html vendors.html oops.html .html a useful lifecycle extensibility (maybe) implementation encapsulation a space suit to breathe in space
48. intro.html standards.html vendors.html oops.html .html a useful lifecycle extensibility (maybe) implementation encapsulation a space suit to breathe in space (DOM)
49. intro.html standards.html vendors.html oops.html .html this was exactly the web components proposal
50. intro.html standards.html vendors.html oops.html .html <shiny-button></shiny-button>
51. intro.html standards.html vendors.html oops.html .html <shiny-button></shiny-button> (maybe) implementation encapsulation a space suit to breathe in space (DOM)
52. intro.html standards.html vendors.html oops.html .html <shiny-button></shiny-button> class ShinyButton extends HTMLElement { constructor() { } connectedCallback() { } } customElements.define(‘shiny-button’, ShinyButton)
53. intro.html standards.html vendors.html oops.html .html class ShinyButton extends HTMLElement { constructor() { } connectedCallback() { } } customElements.define(‘shiny-button’, ShinyButton) a useful lifecycle extensibility
54. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended people already used and liked the thing
55. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended people already used and liked the thing
56. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended people already used and liked the thing
57. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended people already used and liked the thing
58. intro.html standards.html vendors.html oops.html .html because they’re low level you can build frameworks on top of them
59. intro.html standards.html vendors.html oops.html .html because they’re low level browsers can optimize them
60. intro.html standards.html vendors.html oops.html .html whew.
61. intro.html standards.html vendors.html 2017: why is progress so slow? oops.html .html polyfills.html
62. intro.html standards.html vendors.html realtalk: browsers are made by humans and they need to sleep oops.html .html polyfills.html
63. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended people already used and liked the thing
64. intro.html standards.html vendors.html oops.html .html polyfills.html people don’t trust a standard unless it’s shipped on browsers
65. intro.html standards.html vendors.html oops.html .html polyfills.html browsers don’t ship a standard unless it’s been used by people
66. intro.html standards.html vendors.html oops.html .html polyfills.html
67. intro.html standards.html vendors.html we should be waaaaaaaaaay more stoked about polyfills oops.html .html polyfills.html
68. intro.html standards.html vendors.html oops.html .html polyfills.html polyfills teleport your browser into the future
69. intro.html standards.html vendors.html oops.html .html polyfills.html unlike diamonds, polyfills aren’t forever
70. intro.html standards.html vendors.html oops.html .html polyfills.html unlike diamonds, polyfills aren’t forever polyfill.io
71. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended people already used and liked the thing
72. intro.html standards.html vendors.html the browser already does the thing the thing explains existing browser magic the thing can be extended people already used and liked the thing
73. intro.html standards.html vendors.html after 7 years, your standard will actually be 6 months old! oops.html .html polyfills.html
74. intro.html standards.html vendors.html oops.html .html polyfills.html 2010 2012 2014 2017 1st email 1st polyfill polymer 0.1 v0 spec ships
75. intro.html standards.html vendors.html oops.html .html polyfills.html 1st email 1st polyfill polymer 0.1 v0 spec ships
76. intro.html standards.html vendors.html questions we get asked a lot oops.html .html polyfills.html also.html
77. intro.html standards.html vendors.html oops.html .html polyfills.html also.html why isn’t it more successful? “
78. intro.html standards.html vendors.html why isn’t it more successful? oops.html .html polyfills.html also.html “ why aren’t we using it? “ usually means
79. intro.html standards.html vendors.html oops.html .html polyfills.html also.html you might not need a standard component model (and that’s ok!)
80. intro.html standards.html vendors.html oops.html .html polyfills.html also.html big companies need a standard component model (to share the same widgets)
81. intro.html standards.html vendors.html oops.html .html polyfills.html also.html component libraries need a standard component model (to share the widgets with everyone)
82. intro.html standards.html vendors.html oops.html .html polyfills.html also.html frameworks need a standard component model (to share the widgets with everyone)
83. intro.html standards.html vendors.html oops.html .html polyfills.html also.html
84. intro.html standards.html vendors.html is it viable without polymer? oops.html .html polyfills.html also.html “
85. intro.html standards.html vendors.html is it viable without polymer? oops.html .html polyfills.html also.html “ we’ve done bad dev rel-ing usually means
86. intro.html standards.html vendors.html oops.html .html polyfills.html also.html new API documented best practices 
 explained libraries do best practices framework interop utopia
87. intro.html standards.html vendors.html do web components toss view-source overboard? oops.html .html polyfills.html also.html “
88. intro.html standards.html vendors.html if the browser understands the semantics of your element it can add tools for it oops.html .html polyfills.html also.html
89. outro.html what’s next?
90. outro.html democratize web standards
91. outro.html https://discourse.wicg.io/
92. outro.html https://github.com/wicg/
93. outro.html shaping web standards shapes the web platform
94. lets-make-webs-together.html Image Credit from the Noun Project: Relationship, Complain, Holiday, Target, Idea, Presentation, Schedule, FAQ - Human Resource And Life Style Collection, by BomSymbols | Smile, Tubby Cat by Clara Joy | Glasses by Anton Anuchin | Hair by Vladimir Belochkin | Dead by Julien Deveaux | Traintracks by Guilhem | Balloons, Streamers by Made by Made | Mobile Calendar App by Creative Mania