A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.html 17KB

2 år sedan
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  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>Web Components as Progressive Enhancement (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://cloudfour.com/thinks/web-components-as-progressive-enhancement/">
  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>Web Components as Progressive Enhancement</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://cloudfour.com/thinks/web-components-as-progressive-enhancement/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <div class="u-bgGray u-pad1 u-pullSides1 u-spaceItems1 u-textGrow1"><p>Web components are a powerful tool for creating custom HTML elements, but you can run into challenges if you try to replace existing elements with web components. To get the best of both worlds, try wrapping existing elements in web components instead.</p></div>
  71. <p>I learned this the hard way&#8230; On a few recent projects we&#8217;ve wanted to create an auto-expanding <code>textarea</code>: When a user types its height would increase so that its content is never clipped.</p>
  72. <p>I was tired of rewriting this behavior across projects and frameworks and began thinking through how it could be written as a reusable web component. My first draft of an API looked like this:</p>
  73. <pre><code class="language-html">&lt;elastic-textarea name="textarea-name" id="textarea-id" rows="4"&gt;
  74. Here is my textarea content
  75. &lt;/elastic-textarea&gt;
  76. </code></pre>
  77. <p>This is pretty sweet. Developers can use this exactly like the <code>textarea</code> they&#8217;re already used to! But, as I was testing this out I noticed a couple of major downsides:</p>
  78. <ol>
  79. <li>Web components require JavaScript to render <sup id="fnref-6408-1"><a href="#fn-6408-1" class="jetpack-footnote" title="Read footnote.">1</a></sup>. This means that until the JavaScript is downloaded, parsed, and run, no <code>textarea</code> is displayed. Instead &#8220;Here is my textarea content&#8221; is displayed as an unstyled string. If a user has JavaScript disabled, or the JavaScript fails to load, the textarea just won&#8217;t work.</li>
  80. <li>The <code>textarea</code> element has its own complex behavior, APIs, and accessibility behaviors. I&#8217;d need to recreate a lot of this from scratch for my component. I&#8217;d need to apply the <code>name</code>, <code>id</code>, and <code>rows</code> to the actual <code>textarea</code> element that my JavaScript renders. I&#8217;d also need to add all of the <code>textarea</code> JavaScript APIs to my custom element (<code>.value</code>, <code>.is-valid</code>, etc.) <sup id="fnref-6408-2"><a href="#fn-6408-2" class="jetpack-footnote" title="Read footnote.">2</a></sup></li>
  81. </ol>
  82. <div class="HashHeading HashHeading--h2">
  83. <h2 id="the-solution">The Solution</h2>
  84. <a href="#the-solution"
  85. aria-label="Permalink for The Solution"
  86. class="HashHeading-link">
  87. <svg viewBox="0 0 24 24" width="24" height="24" class="Icon" role="presentation"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/><path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/></g></svg>
  88. </a>
  89. </div>
  90. <p>We can avoid both of these drawbacks by wrapping and enhancing an existing element instead of replacing it. Here&#8217;s what that looks like:</p>
  91. <pre><code class="language-html">&lt;elastic-textarea&gt;
  92. &lt;textarea name="textarea-name" id="textarea-id" rows="4"&gt;
  93. Here is my textarea content
  94. &lt;/textarea&gt;
  95. &lt;/elastic-textarea&gt;
  96. </code></pre>
  97. <p>This is a little more verbose, but it gets me the best of both worlds. Before JavaScript loads I have a fully functioning <code>textarea</code>. After JavaScript loads my <code>textarea</code> is progressively enhanced with additional functionality.</p>
  98. <p>It could get a little tedious to wrap every <code>textarea</code> on the page. To avoid this we could set the component up so it can wrap multiple <code>textarea</code>s and enhance all of them at once. This would allow you to wrap a whole form or page to enable this behavior:</p>
  99. <pre><code class="language-html">&lt;elastic-textarea&gt;
  100. &lt;textarea name="textarea-name" id="textarea-id" rows="2"&gt;
  101. Here is my textarea content
  102. &lt;/textarea&gt;
  103. &lt;textarea name="textarea-2" id="textarea-id-2" rows="5"&gt;
  104. Here is another textarea
  105. &lt;/textarea&gt;
  106. &lt;/elastic-textarea&gt;
  107. </code></pre>
  108. <p>You can play with the finished component below:</p>
  109. <figure class="Figure" style="text-align: center;">
  110. <script type="module" src="https://unpkg.com/@cloudfour/elastic-textarea/index.min.js"></script><br />
  111. <elastic-textarea><br />
  112. <label for="textarea-id">Type in the textarea below to watch it expand and contract.</label><br />
  113. <textarea name="textarea-name" id="textarea-id" style="resize: horizontal;width:100%;margin-top: 1em;"></textarea><br />
  114. </elastic-textarea><figcaption class="Figure-caption">
  115. We released this as an <a href="https://www.npmjs.com/package/@cloudfour/elastic-textarea">open source component</a> you can use in your projects. Most of the JavaScript logic was borrowed from an excellent implementation my colleague <a href="https://cloudfour.com/is/scott">Scott Vandehey</a> wrote for a previous project.<br />
  116. </figcaption></figure>
  117. <div class="HashHeading HashHeading--h2">
  118. <h2 id="the-skys-the-limit">The Sky&#8217;s the Limit</h2>
  119. <a href="#the-skys-the-limit"
  120. aria-label="Permalink for The Sky&#8217;s the Limit"
  121. class="HashHeading-link">
  122. <svg viewBox="0 0 24 24" width="24" height="24" class="Icon" role="presentation"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/><path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/></g></svg>
  123. </a>
  124. </div>
  125. <p>The <code>elastic-textarea</code> component is a single example of how web components can be used for progressive enhancement, but there are tons of other potential use cases for this technique. Here are a couple other examples to check out for inspiration:</p>
  126. <ul>
  127. <li><a href="https://www.zachleat.com/">Zach Leatherman</a> created an <em>excellent</em> <a href="https://www.zachleat.com/web/details-utils/"><code>details-utils</code></a> component that wraps and progressively enhances the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details"><code>details</code> element</a>. (This was a big source of inspiration for my approach here.)</li>
  128. <li>I used this same technique to create <a href="https://cloudfour.com/thinks/building-an-accessible-image-comparison-web-component/">a progressively enhanced image comparison component</a>.</li>
  129. </ul>
  130. <div class="HashHeading HashHeading--h2">
  131. <h2 id="sharing-is-caring">Sharing is Caring</h2>
  132. <a href="#sharing-is-caring"
  133. aria-label="Permalink for Sharing is Caring"
  134. class="HashHeading-link">
  135. <svg viewBox="0 0 24 24" width="24" height="24" class="Icon" role="presentation"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/><path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/></g></svg>
  136. </a>
  137. </div>
  138. <p>I&#8217;m a big fan of this strategy and I&#8217;m excited to create and share more progressively enhanced components. At Cloud Four we work on a lot of different projects for a lot of different clients, and I&#8217;ve found myself rewriting the same functionality across several projects. Next time I catch myself rewriting the same component logic for the third or fourth time I&#8217;m going to make it a web component so I don&#8217;t have to write it a fifth time.</p>
  139. <p>By packaging these chunks of interactive logic as custom elements, we can make them easy to share and reuse across projects and frameworks. By enhancing native HTML instead of replacing it, we can provide a solid baseline experience, and add progressive enhancement as the cherry on top.</p>
  140. <div class="footnotes">
  141. <hr />
  142. <ol>
  143. <li id="fn-6408-1">
  144. There are various libraries that allow server side rendering of web components, but they usually require you to buy into a specific web component framework, and/or modify your build steps. These are useful tools for individuals projects, but don&#8217;t work as well for creating easily shareable components.&#160;<a href="#fnref-6408-1" title="Return to main content."><svg viewBox="0 0 24 24" width="24" height="24" class="Icon" role="presentation"><g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M4,14H16a5.76,5.76,0,0,0,6-6,5.76,5.76,0,0,0-6-6"/><polyline points="8 8 2 14 8 20"/></g></svg>
  145. </a>
  146. </li>
  147. <li id="fn-6408-2">
  148. There&#8217;s a spec to allow <a href="https://web.dev/custom-elements-v1/#extending-native-html-elements">extending existing elements</a> but it looks unlikely that Safari will adopt it. On some projects, <a href="https://cloudfour.com/thinks/mighty-morphin-web-components/">recreating element APIs can have a big payoff</a> but it&#8217;s a lot of work if you&#8217;re just trying to add a little functionality to an existing element.&#160;<a href="#fnref-6408-2" title="Return to main content."><svg viewBox="0 0 24 24" width="24" height="24" class="Icon" role="presentation"><g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M4,14H16a5.76,5.76,0,0,0,6-6,5.76,5.76,0,0,0-6-6"/><polyline points="8 8 2 14 8 20"/></g></svg>
  149. </a>
  150. </li>
  151. </ol>
  152. </div>
  153. </article>
  154. <hr>
  155. <footer>
  156. <p>
  157. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  158. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  159. </svg> Accueil</a> •
  160. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  161. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  162. </svg> Suivre</a> •
  163. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  164. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  165. </svg> Pro</a> •
  166. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  167. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  168. </svg> Email</a> •
  169. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  170. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  171. </svg> Légal</abbr>
  172. </p>
  173. <template id="theme-selector">
  174. <form>
  175. <fieldset>
  176. <legend><svg class="icon icon-brightness-contrast">
  177. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  178. </svg> Thème</legend>
  179. <label>
  180. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  181. </label>
  182. <label>
  183. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  184. </label>
  185. <label>
  186. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  187. </label>
  188. </fieldset>
  189. </form>
  190. </template>
  191. </footer>
  192. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  193. <script>
  194. function loadThemeForm(templateName) {
  195. const themeSelectorTemplate = document.querySelector(templateName)
  196. const form = themeSelectorTemplate.content.firstElementChild
  197. themeSelectorTemplate.replaceWith(form)
  198. form.addEventListener('change', (e) => {
  199. const chosenColorScheme = e.target.value
  200. localStorage.setItem('theme', chosenColorScheme)
  201. toggleTheme(chosenColorScheme)
  202. })
  203. const selectedTheme = localStorage.getItem('theme')
  204. if (selectedTheme && selectedTheme !== 'undefined') {
  205. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  206. }
  207. }
  208. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  209. window.addEventListener('load', () => {
  210. let hasDarkRules = false
  211. for (const styleSheet of Array.from(document.styleSheets)) {
  212. let mediaRules = []
  213. for (const cssRule of styleSheet.cssRules) {
  214. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  215. continue
  216. }
  217. // WARNING: Safari does not have/supports `conditionText`.
  218. if (cssRule.conditionText) {
  219. if (cssRule.conditionText !== prefersColorSchemeDark) {
  220. continue
  221. }
  222. } else {
  223. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  224. continue
  225. }
  226. }
  227. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  228. }
  229. // WARNING: do not try to insert a Rule to a styleSheet you are
  230. // currently iterating on, otherwise the browser will be stuck
  231. // in a infinite loop…
  232. for (const mediaRule of mediaRules) {
  233. styleSheet.insertRule(mediaRule.cssText)
  234. hasDarkRules = true
  235. }
  236. }
  237. if (hasDarkRules) {
  238. loadThemeForm('#theme-selector')
  239. }
  240. })
  241. </script>
  242. </body>
  243. </html>