davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>HTML with Superpowers (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
<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>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://daverupert.com/2021/10/html-with-superpowers/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>HTML with Superpowers</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://daverupert.com/2021/10/html-with-superpowers/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Earlier this year I spoke at An Event Apart’s Spring Summit and today I’m happy to share with you that talk called <em>HTML with Superpowers</em>, which is all about Web Components.</p>
<p><a href="https://noti.st/davatron5000/k6N2LP/html-with-superpowers" class="button">View slides on Notist</a></p>
<p>This talk had two major objectives. Firstly, In January 2021 I joined the <a href="https://www.w3.org/community/webcomponents/">W3C Web Components Community Group</a>, which is hoping to advance Web Components and raise awareness. It’s a worthwhile cause to get over some of Web Components’ historical marketing problems. I also get a chance to provide feedback on nascent stage proposals. I’m a fringe member in this group, but happy to escalate any questions or feedback you have.</p>
<p>The second reason I wanted to talk about Web Components is that I feel there’s an education gap.  I noticed that nearly all the people I know that love HTML, CSS, and Design Systems… they don’t use Web Components. It makes sense when you realize a lot of web component education targets JavaScript developers. Every <em>How-To Web Components</em> post on <a href="http://Dev.to">Dev.to</a> starts with the class-based JavaScript API. That’s great… if you like JavaScript. But if I’m 100% honest, if you already have a JS framework that works for you, I don’t see much point in switching. That’s an intense amount of sunk costs and organizational entropy to overcome. I wanted to write a talk that approaches Web Components from a different angle.</p>
<p>Emulating <a href="https://speaking.adactio.com/87IIn1#sn3gBTn">Jeremy Keith’s pacing layers for the Web</a>, which emulates Stuart Brand’s pacing layers for architecture, I start with the slower layers of the Web. The layers unlikely to change from under you and then build up to the “<a href="https://www.youtube.com/watch?v=RFm9ClqlGuo">Jeremy Beremy</a>” velocity of JavaScript. That means starting with HTML, then talk about CSS, then talk about JavaScript.</p>
<h2>Part 1: How to use Web Components with HTML</h2>
<p>Let’s start with HTML. Let’s use Web Components that someone else built. No build tools. No NPM install blah blah. Copy and paste a script tag from the web like the old days. I walk through half a dozen examples on how to use Web Components to make interactive sites, reusable components, and even 3D realms using HTML and a humble <code>&lt;script&gt;</code> tag.</p>
<p>My favorite is <a href="https://github.com/GoogleChromeLabs/two-up"><code>&lt;two-up&gt;</code> from Google Chrome Labs</a> which you can use in your code today to make one of those neat before/after picture sliders.</p>
<pre><code class="language-html">&lt;two-up&gt;
  &lt;div&gt;&lt;img src="before.jpg" alt="before"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;img src="after.jpg" alt="after"&gt;&lt;/div&gt;
&lt;/two-up&gt;

&lt;script src="path/to/two-up.js"&gt;&lt;/script&gt;
</code></pre>
<p>I love it because I didn’t have to code it myself. I didn’t have to fuss with absolute positioning, pointer events, nothing. It gives me a great effect with ~5 lines of HTML.</p>
<h2>Part 2: How to style Web Components with CSS</h2>
<p>In the second part of the talk we come face to face with the most frustrating part of Web Components… styling.</p>
<p>Styling Web Components is the biggest foot gun of the entire Web Component system because it involves something called “Piercing the Shadow DOM”. The Shadow DOM is a boundary inside the component where no styles bleed in and no styles bleed out… but some styles do pass through! Why??!? This is figure-outable, but it’s not intuitive and can leave you with a sour first experience.</p>
<pre><code class="language-css">/* This does not work */
custom-alert button {
  background: pink;
}
</code></pre>
<p>When some styles pass through the shadow boundary and some styles don’t, it creates a bit of a frustrating developer experience. A loss of agency. As a CSS professional, I’m used to having access to style nearly everything on the page. But Web Components break that social contract and there’s not even a mechanism to say “Hey, I’m an expert, let me style this.”</p>
<p>I did the thing where I chucked a lot of CSS at a Web Component to see what sticks. We also walk through options like CSS Custom Properties and CSS Named Parts that you can add to your components to offer more customizable styling APIs.</p>
<h2>Part 3: Build Web Components with JS</h2>
<p>The final step, I sort of bring it all together and write a <code>&lt;custom-alert&gt;</code> component using Lit. It’s a hundred lines of code and I’d wager it’s half CSS. If I could redo the talk I’d probably rip out the styles and layer them in at the end.</p>
<p>The biggest takeaway that I hope people get is that components have a lifecycle, like a React or Vue component. And there are micro-libraries that give you different flavors of Web Components to suit your niche aesthetics. They also have a bit of reactive component state built-in and I could probably cover that more better next time around. Point being… they’re probably a little bit better than the last time you checked them out.</p>
<h2>tl;dr</h2>
<p>I think if you were using Web Components before 2020 you were an early adopter and you probably have some scars to show for it. But in 2021, now that all modern browsers support Web Components, I think they’re worth investigating. They have one superpower that no other JavaScript framework offers called the Shadow DOM which is both powerful but frustrating.  But another superpower — the power I’m most excited about — is that you can use them standalone without any frameworks, build tools, or package managers.</p>
<p>And from there, if we have good, robust Web Components… I believe they can inform the Web Platform and we can get more native elements in the future.</p>
<p>If you have questions, want to air grievances, or would like to know more about Web Components, hit me up on Twitter. I’m also putting together a workshop on Web Components so if that interests you or your company please reach out.</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>