A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>You can't capture the nuance of my form fields (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://drewdevault.com/2021/06/27/You-cant-capture-the-nuance.html">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>You can't capture the nuance of my form fields</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://drewdevault.com/2021/06/27/You-cant-capture-the-nuance.html" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>Check out this text box:</p>
  71. <style>
  72. textarea {
  73. width: 100%;
  74. }
  75. </style>
  76. <p><textarea rows="10" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">Consectetur qui consequatur voluptatibus voluptatem sit sint perspiciatis. Eos aspernatur ad laboriosam quam numquam quo. Quia reiciendis illo quo praesentium. Dolor porro et et sit dolorem quisquam totam quae.
  77. Ea molestias a aspernatur dignissimos suscipit incidunt. Voluptates in vel qui quaerat. Asperiores vel sit rerum est ipsam. Odio aut aut voluptate qui voluptatem.
  78. Quia consequatur provident fugiat voluptatibus consequatur. Est sunt aspernatur velit. Officiis a dolorum accusantium. Sint est ut inventore.</textarea></p>
  79. <p>Here are some of the nuances of using this text box on my operating system
  80. (Linux) and web browser (Firefox):</p>
  81. <ul>
  82. <li>Double clicking selects a word, and triple-clicking selects the whole line. If
  83. I double- or triple-click-and-hold, I can drag the mouse to expand the
  84. selection word-wise or line-wise, not just character-wise. This works with the
  85. paragraphs of text in the body of this blog post, too.</li>
  86. <li>Holding control and pressing right will move move word-wise through the file.
  87. It always moves to the start or end of the next or prior word, so pressing
  88. “control+left, control+left, control+right” will end up in a different
  89. position than “control+left” alone. Adding “shift” to any of these will mutate
  90. the text selection.</li>
  91. <li>Clicking any of the whitespace after the end of the text will put the cursor
  92. after the last character, even if you click to the left of the last character.
  93. This makes it easy to start appending text to the end.</li>
  94. <li>Clicking and dragging from any point, I can drag the mouse straight upward,
  95. exceeding the bounds of the text box or even the entire web browser, to select
  96. all text from that point to the start of the text box. (Thanks minus for
  97. mentioning this one)</li>
  98. <li>Selecting text and middle clicking anywhere will paste the text at the clicked
  99. location. This uses a separate, distinct clipboard from the one accessed with
  100. ctrl+c/ctrl+v. I can also use shift+insert to paste text from this secondary
  101. clipboard (this is called the “primary selection”).</li>
  102. </ul>
  103. <p>I rely on all of these nuances when I use form controls in my everyday life.
  104. This is just for English, by the way. I often type in Japanese, which has an
  105. entirely alien set of nuances. Here’s what that looks like on Android (mobile is
  106. another beast entirely, too!):</p>
  107. <video src="https://l.sr.ht/u274.webm" muted autoplay loop controls>
  108. If you're seeing this, your browser doesn't support HTML5 video, or webm, idk.
  109. </video>
  110. <p>Here’s another control:</p>
  111. <p><select></p>
  112. <option>Alabama</option>
  113. <option>Alaska</option>
  114. <option>Arizona</option>
  115. <option>Arkansas</option>
  116. <option>California</option>
  117. <option>Colorado</option>
  118. <option>Connecticut</option>
  119. <option>Delaware</option>
  120. <option>Florida</option>
  121. <option>Georgia</option>
  122. <option>Hawaii</option>
  123. <option>Idaho</option>
  124. <option>Illinois</option>
  125. <option>Indiana</option>
  126. <option>Iowa</option>
  127. <option>Kansas</option>
  128. <option>Kentucky</option>
  129. <option>Louisiana</option>
  130. <option>Maine</option>
  131. <option>Maryland</option>
  132. <option>Massachusetts</option>
  133. <option>Michigan</option>
  134. <option>Minnesota</option>
  135. <option>Mississippi</option>
  136. <option>Missouri</option>
  137. <option>Montana</option>
  138. <option>Nebraska</option>
  139. <option>Nevada</option>
  140. <option>New Hampshire</option>
  141. <option>New Jersey</option>
  142. <option>New Mexico</option>
  143. <option>New York</option>
  144. <option>North Carolina</option>
  145. <option>North Dakota</option>
  146. <option>Ohio</option>
  147. <option>Oklahoma</option>
  148. <option>Oregon</option>
  149. <option>Pennsylvania</option>
  150. <option>Rhode Island</option>
  151. <option>South Carolina</option>
  152. <option>South Dakota</option>
  153. <option>Tennessee</option>
  154. <option>Texas</option>
  155. <option>Utah</option>
  156. <option>Vermont</option>
  157. <option>Virginia</option>
  158. <option>Washington</option>
  159. <option>West Virginia</option>
  160. <option>Wisconsin</option>
  161. <option>Wyoming</option>
  162. <p></select></p>
  163. <p>There’s an invisible edit buffer, so I can type “Pennsylvania” (or just P) to
  164. select what I want. I can type “New” and then press down to select “New Jersey”.
  165. If I make a mistake and I’ve kept track of what I’ve typed in my head, I can use
  166. backspace to make a correction, and it just works. I have lived in both of these
  167. places, and worked both of these keystrokes into my muscle memory. Filling out a
  168. form with my address on it and using an input box like this to select my state
  169. of residence takes me less than a second.</p>
  170. <p>You cannot capture all of this nuance in a home-grown form control, or even
  171. anything close to it, but many JavaScript programmers do it anyway. Whenever I
  172. encounter a custom form control, the time required to complete the form
  173. increases from under a second to as much as a minute.</p>
  174. <p>For myself, this is just very annoying. Imagine the same situation if you were
  175. blind. The standard form inputs work everywhere, and are designed with
  176. accessibility in mind, so you’re used to them and can easily fill in forms which
  177. use the standard browser controls. But, when you hit a JavaScript-powered
  178. organic cage-free non-GMO text box, you’re screwed.</p>
  179. <p>There are hundreds of little nuances that users learn to use their computers
  180. efficiently. The exact features a user relies on will vary between operating
  181. systems, browsers, hardware, natural languages, physical ability, and personal
  182. preferences and experience. There are dozens of tiny workflows that people
  183. depend on every day that have never even occurred to you.</p>
  184. <p>Making a custom form control with JavaScript is going to make life worse for a
  185. lot of people. Just don’t do it. The browser’s built-in controls are quite
  186. sufficient.</p>
  187. </article>
  188. <hr>
  189. <footer>
  190. <p>
  191. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  192. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  193. </svg> Accueil</a> •
  194. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  195. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  196. </svg> Suivre</a> •
  197. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  198. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  199. </svg> Pro</a> •
  200. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  201. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  202. </svg> Email</a> •
  203. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  204. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  205. </svg> Légal</abbr>
  206. </p>
  207. <template id="theme-selector">
  208. <form>
  209. <fieldset>
  210. <legend><svg class="icon icon-brightness-contrast">
  211. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  212. </svg> Thème</legend>
  213. <label>
  214. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  215. </label>
  216. <label>
  217. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  218. </label>
  219. <label>
  220. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  221. </label>
  222. </fieldset>
  223. </form>
  224. </template>
  225. </footer>
  226. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  227. <script>
  228. function loadThemeForm(templateName) {
  229. const themeSelectorTemplate = document.querySelector(templateName)
  230. const form = themeSelectorTemplate.content.firstElementChild
  231. themeSelectorTemplate.replaceWith(form)
  232. form.addEventListener('change', (e) => {
  233. const chosenColorScheme = e.target.value
  234. localStorage.setItem('theme', chosenColorScheme)
  235. toggleTheme(chosenColorScheme)
  236. })
  237. const selectedTheme = localStorage.getItem('theme')
  238. if (selectedTheme && selectedTheme !== 'undefined') {
  239. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  240. }
  241. }
  242. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  243. window.addEventListener('load', () => {
  244. let hasDarkRules = false
  245. for (const styleSheet of Array.from(document.styleSheets)) {
  246. let mediaRules = []
  247. for (const cssRule of styleSheet.cssRules) {
  248. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  249. continue
  250. }
  251. // WARNING: Safari does not have/supports `conditionText`.
  252. if (cssRule.conditionText) {
  253. if (cssRule.conditionText !== prefersColorSchemeDark) {
  254. continue
  255. }
  256. } else {
  257. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  258. continue
  259. }
  260. }
  261. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  262. }
  263. // WARNING: do not try to insert a Rule to a styleSheet you are
  264. // currently iterating on, otherwise the browser will be stuck
  265. // in a infinite loop…
  266. for (const mediaRule of mediaRules) {
  267. styleSheet.insertRule(mediaRule.cssText)
  268. hasDarkRules = true
  269. }
  270. }
  271. if (hasDarkRules) {
  272. loadThemeForm('#theme-selector')
  273. }
  274. })
  275. </script>
  276. </body>
  277. </html>