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
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
120
暇に任せてProxmoxコンソール 作ってみました
karugamo
1
720
tidymodelsによるtidyな生存時間解析 / Japan.R2024
dropout009
1
740
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ！
maroon1st
0
450
Jakarta EE meets AI
ivargrimstad
0
230
Security_for_introducing_eBPF
kentatada
0
110
Full stack testing :: basic to basic
up1
1
930
あれやってみてー駆動から成長を加速させる / areyattemite-driven
nashiusagi
1
200
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
CSC509 Lecture 14
javiergs
PRO
0
130
useSyncExternalStoreを使いまくる
ssssota
6
1k
KubeCon + CloudNativeCon NA 2024 Overview at Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
250

Featured

See All Featured
Bash Introduction
62gerente
608
210k
Designing Experiences People Love
moore
138
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Automating Front-end Workflow
addyosmani
1366
200k
Docker and Python
trallard
41
3.1k
Building Your Own Lightsaber
phodgson
103
6.1k
How to Ace a Technical Interview
jacobian
276
23k
Thoughts on Productivity
jonyablonski
67
4.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Side Projects
sachag
452
42k

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