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
1k

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
88
5.7k
Fontastic web performance
notwaldorf
18
4.2k
What you see is what you deserve: simple visual tools for all!
notwaldorf
5
790
Billions served, lessons learned: a Polymer story
notwaldorf
3
1.2k
An app in 3 days [with an intro to PWA/Polymer]
notwaldorf
2
1.2k
An app in 3 days or: how I learned to stop worrying and love the Polymer toolbox
notwaldorf
3
910
How I didn't fix 📧Ⓜ️💣🚽ℹ️ in Chrome
notwaldorf
2
560
input, i ♥️ you, but you're bringing me down
notwaldorf
7
2.1k
Building web components: lessons, I have them.
notwaldorf
5
1.6k

Other Decks in Programming

See All in Programming
htmxって知っていますか？次世代のHTML
hiro_ghap1
0
330
17年周年のWebアプリケーションにTanStack Queryを導入する / Implementing TanStack Query in a 17th Anniversary Web Application
saitolume
0
250
フロントエンドのディレクトリ構成どうしてる？　Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
440
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
3
940
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
160
14 Years of iOS: Lessons and Key Points
seyfoyun
1
770
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
4
170
Go の GC の不得意な 部分を克服したい
taiyow
2
760
From Translations to Multi Dimension Entities
alexanderschranz
2
130
【re:Growth 2024】 Aurora DSQL をちゃんと話します！
maroon1st
0
770
あれやってみてー駆動から成長を加速させる / areyattemite-driven
nashiusagi
1
200

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Optimising Largest Contentful Paint
csswizardry
33
3k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The Invisible Side of Design
smashingmag
298
50k
Typedesign – Prime Four
hannesfritz
40
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Side Projects
sachag
452
42k
Navigating Team Friction
lara
183
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
KATA
mclloyd
29
14k
A Tale of Four Properties
chriscoyier
157
23k
Build your cross-platform service in a week with App Engine
jlugia
229
18k

Transcript

  1. I YOU BUT YOU’RE BRINGING ME DOWN

  2. @NOTWALDORF

  3. None

  4. LET ME TELL YOU A STORY

  5. 1993 THE EARLY YEARS

  6. 1995 HTML2

  7. HTML2 > <input type =

  8. <input type = HTML2 TEXT PASSWORD CHECKBOX RADIO IMAGE HIDDEN

    SUBMIT RESET >

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

    <input type =
  10. None

  11. (710, 303)

  12. <input type=image src=“cat.png”>

  13. <input type=image>

  14. None
  15. None
  16. None

  17. <input type=file>

  18. None
  19. None
  20. None
  21. None

  22. COOL COOL COOL COOL

  23. 1995-2011 BIT SLOW, TBH

  24. 1999 HTML4

  25. <input type=button> HTML4

  26. None
  27. None
  28. None

  29. BECAUSE INPUT.

  30. 2011 HTML5

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

    TEL / URL > <input type =

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

    TEL / URL > <input type =

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

    TEL / URL > <input type =

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

    TEL / URL > <input type =
  35. None

  36. BUT AS WE KNOW, JAVASCRIPT

  37. <input type=number>

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

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

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

  41. WAIT FOR IT IT GETS BETTER

  42. AN IS AN HTMLInputElement HTMLInputElement

  43. <input type=checkbox>

  44. <input type=checkbox checked>

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

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

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

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

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

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

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

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

  53. None
  54. None

  55. LET’S DO BETTER!

  56. 2012 A NEW HOPE

  57. 2012 WEB COMPONENTS

  58. WE ENCAPSULATION

  59. <button></button>

  60. <link rel=”stylesheet” … href=“fancy.css” /> <button></button>

  61. <button class=“button”></button> <link rel=”stylesheet” … href=“fancy.css” />

  62. <button></button> <link rel=”stylesheet” … href=“fancy.css” /> <button class=“button”></button>

  63. <link rel=”stylesheet” … href=“shiny.css” /> <button></button> <link rel=”stylesheet” … href=“fancy.css”

    /> <button class=“button”></button>

  64. <button class=“button”></button> <link rel=”stylesheet” … href=“fancy.css” /> <button class=“button”></button> <link

    rel=”stylesheet” … href=“shiny.css” />

  65. <fancy-button></fancy-button> <shiny-button></shiny-button>

  66. WHAT WOULD IT LOOK LIKE?

  67. <html> <head> <title>Make a batman!</title> <link href=“a-batman.html" rel=“import"> </head> <body>

    <a-batman name=“monica”></a-batman> </body> </html>

  68. <html> <head> <title>Make a batman!</title> <link href=“a-batman.html" rel=“import"> </head> <body>

    <a-batman name=“monica”></a-batman> </body> </html>

  69. <html> <head> <title>Make a batman!</title> <link rel=“import” href=“a-batman.html”> </head> <body>

    <a-batman name=“monica”></a-batman> </body> </html>

  70. WHAT DO WE NEED?

  71. SPECS! IN THE MEANTIME…

  72. A BIT OF MAGIC POLYFILLS

  73. HTML IMPORTS <link rel=“import” href=“…” >

  74. CUSTOM ELEMENTS document.registerElement

  75. THE SHADOW DOM ENCAPSULATION

  76. THE SHADOW DOM THIS ISN’T NEW

  77. None
  78. None

  79. ONCE MORE WITH FEELING

  80. <link rel=“import” href=“a-batman.html">

  81. <link rel=“import” href=“a-batman.html"> <a-batman name=“monica”></a-batman>

  82. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">

  83. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">

  84. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">

  85. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">

  86. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">

  87. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman’; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">

  88. KINDA HARD

  89. LETS DO BETTER!

  90. 2014 POLYMER

  91. WEB COMPONENTS EVERYWHERE!!!

  92. SHOULD BE EASY TO WRITE

  93. <dom-module id='a-batman'> <template> <style> :host { color: red; } </style>

    <div>My name is <span>{{name}}</span></div> </template> </dom-module>

  94. <dom-module id='a-batman'> <template> <style> :host { color: red; } </style>

    <div>My name is <span>{{name}}</span></div> </template> </dom-module>

  95. <dom-module id='a-batman'> <template> <style> :host { color: red; } </style>

    <div>My name is <span>{{name}}</span></div> </template> </dom-module>

  96. <dom-module id='a-batman'> <template> <style> span { color: red; } </style>

    <div>My name is <span>{{name}}</span></div> </template> </dom-module>

  97. EASY TO USE SHOULD BE

  98. <script src=“components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href=“components/google-map/google-map.html”> <google-map latitude=“37.790" longitude=“-122.390"></google-map>

  99. <script src=“components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href=“components/google-map/google-map.html”> <google-map latitude=“37.790" longitude=“-122.390"></google-map>

  100. <script src=“components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href=“components/google-map/google-map.html”> <google-map latitude=“37.790" longitude=“-122.390"></google-map>

  101. <script src=“components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href=“components/google-map/google-map.html”> <google-map latitude=“37.790" longitude=“-122.390"></google-map>

  102. <script src=“components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href=“components/emoji-rain/emoji-rain.html”> <emoji-rain></emoji-rain>

  103. <better-input> </better-input>

  104. @NOTWALDORF