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.1k
What you see is what you deserve: simple visual tools for all!
notwaldorf
5
780
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
900
How I didn't fix 📧Ⓜ️💣🚽ℹ️ in Chrome
notwaldorf
2
550
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
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
subpath importsで始めるモック生活
10tera
0
300
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
330
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
詳細解説！ ArrayListの仕組みと実装
yujisoftware
0
580
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
2
660
Amazon Qを使ってIaCを触ろう！
maruto
0
400
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
ヤプリ新卒SREの オンボーディング
masaki12
0
130
Flutterを言い訳にしない！アプリの使い心地改善テクニック5選🔥
kno3a87
1
140
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
100

Featured

See All Featured
Scaling GitHub
holman
458
140k
Making Projects Easy
brettharned
115
5.9k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Ruby is Unlike a Banana
tanoku
97
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
800
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Why Our Code Smells
bkeepers
PRO
334
57k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Rails Girls Zürich Keynote
gr2m
94
13k

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