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

input, i ♥️ you, but you're bringing me down

Monica Dinculescu
June 16, 2016
Programming
7
2.1k

input, i ♥️ you, but you're bringing me down

Browsers have had an <input> element since the dawn of time, and yet any time you talk to web developers about it, everyone complains about it. It's unpredictable. It's grumpy. It's got reaaaaally strong opinions about style, and it doesn't want to listen to yours. I'm going to tell you a story about how grew up to be the moody adult it is, and why it's maybe time we stood up to it.

Monica Dinculescu

June 16, 2016
Tweet

More Decks by Monica Dinculescu

See All by Monica Dinculescu
How to train your dragon (web standard)
notwaldorf
88
5.6k
Fontastic web performance
notwaldorf
18
4k
What you see is what you deserve: simple visual tools for all!
notwaldorf
5
770
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
890
How I didn't fix 📧Ⓜ️💣🚽ℹ️ in Chrome
notwaldorf
2
540
Building web components: lessons, I have them.
notwaldorf
5
1.6k
🎉🐱✨or: How I didn’t fix emoji in Chrome
notwaldorf
1
1.2k

Other Decks in Programming

See All in Programming
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
1.8k
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
670
Kotlinの好きなところ
kobaken0029
0
240
Prompt Engineering for Developers @ AWS Community Day Adria 2024
slobodan
0
120
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
330
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ～俺のやらかしを越えてゆけ～
techouse
51
31k
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
4
3k
gopls を改造したら開発生産性が高まった
satorunooshie
8
230
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
180
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
120
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Writing Fast Ruby
sferik
626
60k
Designing for humans not robots
tammielis
249
25k
Scaling GitHub
holman
458
140k
Code Review Best Practice
trishagee
64
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k

Transcript

  1. but you’re bringing me down i you <input>

  2. @notwaldorf

  3. emojineer

  4. None
  5. None

  6. type=date not working properly empty input is invalid regardless of

    minlength type=number doesn’t work with pattern type=number can type eee without firing event weird caret offset with type=search typing moves cursor to the end

  7. story time

  8. 1993 the early years

  9. 1993 <isindex>

  10. 1995 html2

  11. 1995 <input type=button>

  12. <input type=button> 1995 checkbox text password radio image hidden submit

    reset file

  13. 1995 <input type=button> checkbox text password radio image hidden submit

    reset file
  14. None

  15. (710, 303)

  16. <input type=image src=“map.png”>

  17. <input type=image>

  18. None
  19. None
  20. None

  21. <input type=file>

  22. None
  23. None
  24. None
  25. None

  26. cool cool cool because input

  27. 1995 1999 bit slow, tbh -

  28. in which input does a lot of suffering

  29. An element satisfies its constraints if it is not suffering

  30. Suffering from being missing

  31. Suffering from being too short

  32. Suffering from being too long

  33. Suffering from a step mismatch

  34. Suffering.

  35. html4 1999

  36. <input type=button> 1999

  37. None
  38. None
  39. None

  40. cool cool cool because input

  41. html5 2011

  42. <input type=button> 2011 week/month color date/time number range search email

    tel url

  43. <input type=button> 2016 week/month color date/time number range search email

    tel url

  44. <input type=button> 2011 week/month color date/time number range search email

    tel url

  45. but, as we know, CSS

  46. None

  47. input[type=range] { … } // Webkit ::-webkit-slider-thumb { … }

    ::-webkit-slider-runnable-track { … } // FF ::-moz-range-thumb { … } ::-moz-range-track { … } // Never stop being different, IE <3 ::-ms-thumb { … } ::-ms-track { … } ::-ms-fill-lower { … } ::-ms-fill-upper { … }

  48. input[type=range] { … } // Webkit ::-webkit-slider-thumb { … }

    ::-webkit-slider-runnable-track { … } // FF ::-moz-range-thumb { … } ::-moz-range-track { … } // Never stop being different, IE <3 ::-ms-thumb { … } ::-ms-track { … } ::-ms-fill-lower { … } ::-ms-fill-upper { … }

  49. input[type=range] { … } // Webkit ::-webkit-slider-thumb { … }

    ::-webkit-slider-runnable-track { … } // FF ::-moz-range-thumb { … } ::-moz-range-track { … } // Never stop being different, IE <3 ::-ms-thumb { … } ::-ms-track { … } ::-ms-fill-lower { … } ::-ms-fill-upper { … }

  50. input[type=range] { … } // Webkit ::-webkit-slider-thumb { … }

    ::-webkit-slider-runnable-track { … } // FF ::-moz-range-thumb { … } ::-moz-range-track { … } // Never stop being different, IE <3 ::-ms-thumb { … } ::-ms-track { … } ::-ms-fill-lower { … } ::-ms-fill-upper { … }
  51. None
  52. None

  53. but as we know,
 JavaScript

  54. <input type=number>

  55. value = “1234”

  56. value = “1234” value = “”

  57. value = “1234” value = “” value = “”

  58. wait for it

  59. is an HTMLInputElement

  60. is an HTMLInputElement is an HTMLInputElement

  61. is an HTMLInputElement is an HTMLInputElement is an HTMLInputElement

  62. None
  63. None
  64. None

  65. <input type=checkbox>

  66. <input type=checkbox checked>

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

  68. $(‘input[type=checkbox]’).checked = false

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

  70. $(‘input[type=number]’).checked

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

  72. None
  73. None

  74. cool cool cool because input

  75. let’s do better

  76. <input type=text> <input type=number> <input type=color>

  77. <text-input> <number-input> <color-input>

  78. a new hope 2012

  79. web components 2012

  80. we reusable things

  81. we encapsulation

  82. None
  83. None

  84. how?

  85. <html> <head> <link rel=“import” href=“number-input.html”> </head> <body> <input type=“number” value=“3”></input>

    </body> </html>

  86. <html> <head> <link rel=“import” href=“number-input.html”> </head> <body> <number-input value=“3”></number-input> </body>

    </html>

  87. <html> <head> <link rel=“import” href=“number-input.html”> </head> <body> <number-input value=“3”></number-input> </body>

    </html>

  88. what do we need?

  89. what do we need? specs!

  90. encapsulation shadow DOM 1

  91. reusability document.registerElement 2

  92. imports <link href=“my-input.html”> 3

  93. but like, with code

  94. <html> <head> <link rel=“import” href=“number-input.html”> </head> <body> <number-input value=“3”></number-input> </body>

    </html>

  95. class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput);

  96. class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput);

  97. class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput);

  98. class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput);

  99. class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); createdCallback() { this._value = null; }

  100. class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); attachedCallback() { this._input = document.createElement('input'); this._input = 'text'; this._input = this._value; this.createShadowRoot().appendChild(this._input); this._input.addEventListener(‘keypress’, _restrict); this._input.addEventListener(‘input’, _onInput); }

  101. class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); attachedCallback() { this._input = document.createElement('input'); this._input = 'text'; this._input = this._value; this.createShadowRoot().appendChild(this._input); this._input.addEventListener(‘keypress’, _restrict); this._input.addEventListener(‘input’, _onInput); }

  102. class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); attachedCallback() { this._input = document.createElement('input'); this._input = 'text'; this._input = this._value; this.createShadowRoot().appendChild(this._input); this._input.addEventListener(‘keypress’, _restrict); this._input.addEventListener(‘input’, _onInput); }

  103. class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); attachedCallback() { this._input = document.createElement('input'); this._input = 'text'; this._input = this._value; this.createShadowRoot().appendChild(this._input); this._input.addEventListener(‘keypress’, _restrict); this._input.addEventListener(‘input’, _onInput); }

  104. class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); getValue() { return this._value; }

  105. class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); setValue(v) { this._input.value = this._value = this._fix(v); } getValue() { return this._value; }

  106. class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); _fix(value) { if (!value) return null; if (awfulRegex.test(value)) return Number(value); return NaN; }

  107. class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); attributeChangedCallback(which, oldV, newV) { if (which == 'value') { this._input.value = newV; } }
  108. None

  109. when do we get it? now! sort of.

  110. when do we get it? ~~polyfills~~

  111. <better-input> cool cool cool

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

  113. @notwaldorf