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
とにかくAWS GameDay！AWSは世界の共通言語！ / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
860
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Outline View in SwiftUI
1024jp
1
320
初めてDefinitelyTypedにPRを出した話
syumai
0
400
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
2
660
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
ふかぼれ！CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Remix on Hono on Cloudflare Workers
yusukebe
1
280
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
230
役立つログに取り組もう
irof
28
9.6k
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k

Featured

See All Featured
A Philosophy of Restraint
colly
203
16k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Navigating Team Friction
lara
183
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Designing for humans not robots
tammielis
250
25k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
800
A better future with KSS
kneath
238
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
What's in a price? How to price your products and services
michaelherold
243
12k
Writing Fast Ruby
sferik
627
61k

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