Upgrade to Pro — share decks privately, control downloads, hide ads and more …

input I <3 you, but you're bringing me down

Monica Dinculescu
November 06, 2015
Programming
4
900

input I <3 you, but you're bringing me down

Browsers have had native DOM elements since the dawn of time, and yet any time you talk to web developers about it, everyone complains about them. Key events are bananas. The element is unpredictable and grumpy. Have you ever tried to fill in one of those credit card forms where you can’t figure out what format the phone number should be in? Yeah, that’s what we’re talking about. Forms? Forms are magic, and not in a good way. Web Components let you stand up to browsers and build your own DOM elements that work the way they should, and Polymer is a new library that makes it easier than ever to do this.

Video: https://vimeo.com/144980655

Monica Dinculescu

November 06, 2015
Tweet

More Decks by Monica Dinculescu

See All by Monica Dinculescu
How to train your dragon (web standard)
notwaldorf
69
4.4k
Fontastic web performance
notwaldorf
18
2.6k
What you see is what you deserve: simple visual tools for all!
notwaldorf
5
620
Billions served, lessons learned: a Polymer story
notwaldorf
3
910
An app in 3 days [with an intro to PWA/Polymer]
notwaldorf
2
1k
An app in 3 days or: how I learned to stop worrying and love the Polymer toolbox
notwaldorf
3
710
How I didn't fix 📧Ⓜ️💣🚽ℹ️ in Chrome
notwaldorf
2
410
input, i ♥️ you, but you're bringing me down
notwaldorf
8
1.8k
Building web components: lessons, I have them.
notwaldorf
5
1.4k

Other Decks in Programming

See All in Programming
SpringIO_19-05-2023.pdf
ancaghenade
0
120
Ruby JIT Hacking Guide / RubyKaigi 2023
k0kubun
0
3.7k
「無ければ作る」Backlogに欲しい機能を自分で作った話
nsuz
0
200
KubeCon + CNCon Europe 2023 Recap Flux Beyond Git: Harnessing the Power of OCI
ksudate
0
310
Kotlin Multiplatform Library 배포하기
fornewid
0
210
若者とGPTのすべて
pyama86
0
220
Composing a Design System
stewemetal
0
200
シン・リッチエディタ徹底解説
microcms
1
600
次なるルーターパッケージ選定のしざまと決め手について
yuzuy
2
300
Revisiting TypeProf - IDE support as a primary feature
mame
1
840
Kotlin 2.0을 통해 알아보는 코틀린의 미래
dalinaum
1
1.6k
Semantic Kernel(C#)でAzure OpenAI ServiceのGPT-4を使ってみる
tomokusaba
1
170

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
3.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
How to name files
jennybc
51
80k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
16
1.3k
Fireside Chat
paigeccino
18
2.1k
YesSQL, Process and Tooling at Scale
rocio
158
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
GraphQLとの向き合い方2022年版
quramy
23
11k
Designing with Data
zakiwarfel
92
4.3k
Scaling GitHub
holman
453
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
218
21k

Transcript

  1. I YOU
    BUT YOU’RE BRINGING ME DOWN

    View Slide

  2. @NOTWALDORF

    View Slide

  3. View Slide

  4. LET ME
    TELL YOU A STORY

    View Slide

  5. 1993
    THE EARLY YEARS

    View Slide

  6. 1995
    HTML2

    View Slide

  7. HTML2
    >

    View Slide

  8. HTML2
    TEXT
    PASSWORD
    CHECKBOX
    RADIO
    IMAGE
    HIDDEN
    SUBMIT
    RESET
    >

    View Slide

  9. HTML2
    TEXT
    PASSWORD
    CHECKBOX
    RADIO
    IMAGE
    HIDDEN
    SUBMIT
    RESET
    >

    View Slide

  10. View Slide

  11. (710, 303)

    View Slide


  12. View Slide


  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide


  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. COOL
    COOL COOL COOL

    View Slide

  23. 1995-2011
    BIT SLOW, TBH

    View Slide

  24. 1999
    HTML4

    View Slide


  25. HTML4

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. BECAUSE INPUT.

    View Slide

  30. 2011
    HTML5

    View Slide

  31. HTML5
    COLOR
    DATE/ TIME
    WEEK/ MONTH
    NUMBER
    RANGE
    SEARCH
    EMAIL
    TEL / URL
    >

    View Slide

  32. HTML5
    COLOR
    DATE/ TIME
    WEEK/ MONTH
    NUMBER
    RANGE
    SEARCH
    EMAIL
    TEL / URL
    >

    View Slide

  33. HTML5
    COLOR
    DATE/ TIME
    WEEK/ MONTH
    NUMBER
    RANGE
    SEARCH
    EMAIL
    TEL / URL
    >

    View Slide

  34. HTML5
    COLOR
    DATE/ TIME
    WEEK/ MONTH
    NUMBER
    RANGE
    SEARCH
    EMAIL
    TEL / URL
    >

    View Slide

  35. View Slide

  36. BUT AS WE KNOW,
    JAVASCRIPT

    View Slide


  37. View Slide

  38. $(‘input[ type=number ]’).value

    View Slide

  39. $(‘input[ type=number ]’).value

    View Slide

  40. $(‘input[ type=number ]’).value

    View Slide

  41. WAIT FOR IT
    IT GETS BETTER

    View Slide

  42. AN
    IS AN
    HTMLInputElement
    HTMLInputElement

    View Slide


  43. View Slide


  44. View Slide

  45. $(‘input[ type=checkbox ]’).checked = true

    View Slide

  46. $(‘input[ type=checkbox ]’).checked = true

    View Slide

  47. $(‘input[ type=checkbox ]’).checked = true
    number

    View Slide

  48. $(‘input[ type=checkbox ]’).checked = true
    number

    View Slide

  49. $(‘input[ type= text ]’).selectionStart = 4

    View Slide

  50. $(‘input[ type= text ]’).selectionStart = 4

    View Slide

  51. $(‘input[ type=number ]’).selectionStart = 4

    View Slide

  52. $(‘input[ type=number ]’).selectionStart = 4

    View Slide

  53. View Slide

  54. View Slide

  55. LET’S DO BETTER!

    View Slide

  56. 2012
    A NEW HOPE

    View Slide

  57. 2012
    WEB COMPONENTS

    View Slide

  58. WE
    ENCAPSULATION

    View Slide


  59. View Slide



  60. View Slide



  61. View Slide




  62. View Slide





  63. View Slide





  64. View Slide



  65. View Slide

  66. WHAT WOULD IT
    LOOK LIKE?

    View Slide



  67. Make a batman!






    View Slide



  68. Make a batman!






    View Slide



  69. Make a batman!






    View Slide

  70. WHAT
    DO WE NEED?

    View Slide

  71. SPECS!
    IN THE MEANTIME…

    View Slide

  72. A BIT OF MAGIC
    POLYFILLS

    View Slide

  73. HTML IMPORTS

    View Slide

  74. CUSTOM ELEMENTS
    document.registerElement

    View Slide

  75. THE SHADOW DOM
    ENCAPSULATION

    View Slide

  76. THE SHADOW DOM
    THIS ISN’T NEW

    View Slide

  77. View Slide

  78. View Slide

  79. ONCE MORE
    WITH FEELING

    View Slide


  80. View Slide



  81. View Slide


  82. var proto = Object.create(HTMLElement.prototype);
    proto.attachedCallback = function() {
    this.innerText = this.getAttribute(‘name') + ‘ is batman';
    };
    document.registerElement(‘a-batman', {prototype:proto});

    View Slide


  83. var proto = Object.create(HTMLElement.prototype);
    proto.attachedCallback = function() {
    this.innerText = this.getAttribute(‘name') + ‘ is batman';
    };
    document.registerElement(‘a-batman', {prototype:proto});

    View Slide


  84. var proto = Object.create(HTMLElement.prototype);
    proto.attachedCallback = function() {
    this.innerText = this.getAttribute(‘name') + ‘ is batman';
    };
    document.registerElement(‘a-batman', {prototype:proto});

    View Slide


  85. var proto = Object.create(HTMLElement.prototype);
    proto.attachedCallback = function() {
    this.innerText = this.getAttribute(‘name') + ‘ is batman';
    };
    document.registerElement(‘a-batman', {prototype:proto});

    View Slide


  86. var proto = Object.create(HTMLElement.prototype);
    proto.attachedCallback = function() {
    this.innerText = this.getAttribute(‘name') + ‘ is batman';
    };
    document.registerElement(‘a-batman', {prototype:proto});

    View Slide


  87. var proto = Object.create(HTMLElement.prototype);
    proto.attachedCallback = function() {
    this.innerText = this.getAttribute(‘name') + ‘ is batman’;
    };
    document.registerElement(‘a-batman', {prototype:proto});

    View Slide


  88. KINDA HARD

    View Slide


  89. LETS DO BETTER!

    View Slide

  90. 2014
    POLYMER

    View Slide

  91. WEB COMPONENTS
    EVERYWHERE!!!

    View Slide

  92. SHOULD BE
    EASY TO WRITE

    View Slide



  93. <br/>:host { color: red; }<br/>
    My name is {{name}}


    View Slide



  94. <br/>:host { color: red; }<br/>
    My name is {{name}}


    View Slide



  95. <br/>:host { color: red; }<br/>
    My name is {{name}}


    View Slide



  96. <br/>span { color: red; }<br/>
    My name is {{name}}


    View Slide

  97. EASY TO USE
    SHOULD BE

    View Slide




  98. View Slide




  99. View Slide




  100. View Slide




  101. View Slide




  102. View Slide


  103. View Slide

  104. @NOTWALDORF

    View Slide