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>
  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>Building with Friction (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="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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 type="text/javascript">
    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://timkadlec.com/remembers/2020-03-18-building-with-friction/">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
  <header>
    <h1>Building with Friction</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="https://timkadlec.com/remembers/2020-03-18-building-with-friction/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <p>I <a href="https://timkadlec.com/remembers/2020-01-02-making-the-right-thing-easy/">recently wrote about how important it is to make the right thing easy</a>. The opposite is also true: it’s important to make the wrong things difficult. I did allude to it in that post a little bit, but I thought it was worth calling out explicitly. It’s important to introduce some friction in our workflow to help prevent the wrong actions.</p>

<p>Continuing on the health-related analogies, friction is a big part of how I manage my sweet tooth. I work by myself in a small office. Nothing is preventing me from constantly snacking on a bunch of sweets, and <em>wow</em> would I ever love to. I’m a sucker for just about anything with sugar.</p>

<p>But I discovered something else about myself: I’m also kinda lazy. So I take a two-part approach. The first is to make the right thing easy. I have apples, oranges, almonds, dried cranberries, and all sorts of healthier snacking options right next to my desk. If I’m hungry, I don’t even have to move. I reach out my arm, and there they are.</p>

<p>But the second part of that process is just as important. I make the wrong thing harder. I do have some sweets, but they’re tucked away in an adjacent room. It’s not difficult to get to them, but it does require more effort than the healthy alternatives right next to me. It doesn’t stop me from having sweets, but it means that reaching for that chocolate involves a conscious decision to put in more work than if I decide to have an apple. It’s just enough friction to change the way I snack.</p>

<p>A lot of modern workflow improvements have been around <em>removing</em> friction. We want to make it easier to deploy rapidly. Tools like npm make it <em>very</em> easy to gain access to any and all modules we could think of. Tag management enables folks to very quickly add another third-party service.</p>

<p>All of these things, on the surface, provide some value, but the consequences are tremendous. Because these processes remove friction, they don’t ever really give us a chance to pause and consider what we’re doing.</p>

<p>Re-introducing some healthy friction, some moments of pause, in our processes is critical to ensuring a higher level of quality overall.</p>

<p>For example, let’s tackle the trouble with <a href="https://www.npmjs.com/">npm</a>.</p>

<p>npm transformed the way we build, but I don’t think anyone can argue that it hasn’t wreaked some serious havoc in the process. The ready availability of a JavaScript module for pretty much anything you can imagine has lead to security issues, accessibility concerns and overall bloat. It’s made it <em>too easy</em> to add more code to our sites without ever considering the trade-offs.</p>

<p>I’m with <a href="https://twitter.com/slightlylate/status/1239404640656998400">Alex on this one</a>. Adding more code should be a very intentional decision:</p>

<blockquote>
<p>JavaScript should be a *deeply” intentional choice on the client. Tools that remove intentionality, whatever else they may have done for your team, probably sunk your perf battleship.</p>
</blockquote>

<p>Here’s an example of how we could introduce some friction into the process to help with the performance challenges by focusing on two critical points in our workflow: install and build/deploy.</p>

<h2 id="during-install">During install</h2>

<p>The first thing we can do is introduce some friction when we first install a script. After all, the easiest issues to fix are the ones that haven’t happened yet.</p>

<p>I like <a href="https://github.com/AdrieanKhisbe/bundle-phobia-cli#bundle-phobia-install"><code>bundle-phobia-install</code></a> for this. <code>bundle-phobia-install</code> is a wrapper around <code>npm install</code> that uses information from <a href="https://bundlephobia.com/">Bundlephobia</a> to conditionally install npm modules. It does this by comparing the size of the package against some predetermined limits. It defaults to a size limit of 100kB overall (as in, the total of all dependencies), but you can configure that however you would like.</p>

<p>You can also set up limits on individual packages.</p>

<p>For example, the following settings (configured in a <code>package.json</code> file) would ensure that no individual package with a size of over 20kB could be installed, and that the total size of all dependencies can be no more than 100kB.</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">...
  <span>"bundle-phobia"</span><span>:</span> {
    <span>"max-size"</span><span>:</span> <span>"20kB"</span>,
    <span>"max-overall-size"</span><span>:</span> <span>"100kB"</span>
  },
...
</code></pre></div>

<p>Now, if we were to try to install, say, <code>lodash</code>, the install would fail because <code>lodash</code> exceeds our individual package size limit.</p>

<figure class="banner">
    <img src="https://timkadlec.com/images/friction-bundle-phobia.png" alt="Running bundle-phobia-install instead of npm install lets us enforce size limits on npm modules, preventing us from adding significantly heavy dependencies to our site."/> <figcaption>
            <p>Running <code>bundle-phobia-install</code> instead of <code>npm install</code> lets us enforce size limits on npm modules, preventing us from adding significantly heavy dependencies to our site.</p>
        </figcaption>
</figure>

<p>You could still install <code>lodash</code>, but that now requires you to run <code>bundle-phobia-install</code> with the interactive flag (<code>-i</code>) and manually approve the install despite the fact that it exceeds your limits. It turns an unconscious decision into a conscious one.</p>

<h2 id="during-build-deploy">During build/deploy</h2>

<p>By having some friction on the install process, we help to provide a better base for size of our JavaScript. It’s still critical to put some friction on the build and deploy process, though. For one, our install approach is only limiting npm modules, not really our own code. We also don’t really know the exact shape of our bundles at install—that comes later.</p>

<p>For webpack-driven projects, you can take advantage of webpack’s <a href="https://webpack.js.org/configuration/performance/">performance hints</a>. There are two hints available to us: <code>performance.maxEntrypointSize</code> and <code>performance.maxAssetSize</code>. <code>performance.maxEntrypointSize</code> lets us set a limit for all webpack produced assets for a given route. <code>performance.maxAssetSize</code> lets us set a limit for any individual webpack produced assets.</p>

<p>By default, the hints are just that—hints. They show up as warnings but don’t do anything concrete. You can change that by setting the <code>peformance.hints</code> property to <code>error</code>.</p>

<p>So, given the following configuration, webpack would throw errors whenever an individual asset exceeds 100kB or all total assets for a given route exceed 150kB.</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span>module</span>.<span>exports</span> <span>=</span> {
  <span>//...
</span><span/>  <span>performance</span><span>:</span> {
    <span>hints</span><span>:</span> <span>'error'</span>,
    <span>maxEntrypointSize</span><span>:</span> <span>100000</span>,
    <span>maxAssetSize</span><span>:</span> <span>150000</span>
  }
};
</code></pre></div>

<figure class="banner">
    <img src="https://timkadlec.com/images/friction-webpack.png" alt="webpack&amp;rsquo;s performance hints let us throw errors if individual assets are too large, or if all assets for a given route get too heavy."/> <figcaption>
            <p>webpack’s performance hints let us throw errors if individual assets are too large, or if all assets for a given route get too heavy.</p>
        </figcaption>
</figure>

<p>If you’re not using webpack, or if you are and still want to augment these hints, we can also introduce some bundle size checking at the pull request or deploy levels. <a href="https://github.com/siddharthkp/bundlesize">Bundlesize</a> is a common choice here.</p>

<p>With Bundlesize, we setup maximum sizes for each bundle we want to track. Then we can run Bundlesize against those limits on every pull request or during our continuous integration process to stop us from deploying if any of those bundle sizes have been exceeded.</p>

<figure class="banner">
    <img src="https://timkadlec.com/images/friction-bundlesize.png" alt="Bundlesize will check each bundle against the limits we set so that we can break the build if any of those limits are exceeded."/> <figcaption>
            <p>Bundlesize will check each bundle against the limits we set so that we can break the build if any of those limits are exceeded.</p>
        </figcaption>
</figure>

<h2 id="building-with-friction">Building with friction</h2>

<p>Healthy friction in our processes, paired with automation and reporting where appropriate, can have a substantial impact on what we ship. When we force ourselves to take these moments to consider the implications of what we’re about to add to our codebase, when we make it hard to add more bloat to our applications by default, we not only change the way we build, but we change the way we <em>think</em> about building. It’s the observer effect applied to the way we code.</p>

<p>When we have to consider the weight of every module we add to our project (or which vulnerabilities are included or what accessibility concerns they bring along), we start to inherently pay a little more attention to at least a part of performance every single day. It won’t magically fix all our performance woes by itself, but it certainly gets us pointed in the right direction.</p>
  </main>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>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 type="text/javascript">
    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>