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>as days pass by (archive) — David Larlet</title>
<!-- 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://www.kryogenix.org/days/2020/05/06/hammer-and-nails/">

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

<article>
<h1>as days pass by</h1>
<nav>
  <p class="center">
    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  </p>
</nav>
<hr>
<h2><a href="https://www.kryogenix.org/days/2020/05/06/hammer-and-nails/">Source originale du contenu</a></h2>
<p>There is a Linux distribution called Gentoo, named after a type of penguin (of <em>course</em> it&#8217;s named after a penguin), where installing an app doesn&#8217;t mean that you download a working app. Instead, when you say &#8220;install this app&#8221;, it downloads the source code for that app and then compiles it on your computer. This apparently gives you the freedom to make changes to exactly how that app is built, even as it requires you to have a full set of build tools and compilers and linkers just to get a calculator. I think it&#8217;s clear that the world at large has decided that this is not the way to do things, as evidenced by how almost no other OSes take this approach &#8212; you download a compiled binary of an app and run it, no compiling involved &#8212; but it&#8217;s nice that it exists, so that the few people who really want to take this approach can choose to do&nbsp;so.</p>

<p>This sort of thing gets a lot of sneering from people who think that all Linux OSes are like that, that people who run Linux think that it&#8217;s about compiling your own kernels and using the Terminal all the time. <em>Why would you want to do that sort of thing, you neckbeard,</em> is the underlying message, and I largely agree with it; to me (and most people) it seems complicated and harder work for the end user, and mostly a waste of time &#8212; the small amount of power I get from being able to tweak how a thing is built is vastly outweighed by the annoyance of <em>having</em> to build it if I want it. Now, a Gentoo user doesn&#8217;t actually have to know anything about compilation and build tools, of course; it&#8217;s all handled quietly and seamlessly by the install command, and the compilers and linkers and build tools are run for you without you needing to understand. But it&#8217;s still a bunch of things that my computer has to do that I&#8217;m just not interested in it doing, and I imagine you feel the&nbsp;same.</p>

<p>So I find it disappointing that this is how half the web industry have decided to make websites these&nbsp;days.</p>

<p>We don&#8217;t give people a website any more: something that already works, just <span class="caps">HTML</span> and <span class="caps">CSS</span> and JavaScript ready to show them what they want. Instead, we give them the bits from which a website is made and then have <em>them</em> compile&nbsp;it.</p>

<p>Instead of an <span class="caps">HTML</span> page, you get some templates and some <span class="caps">JSON</span> data and some build tools, and then that compiler runs in your browser and assembles a website out of the component parts. That&#8217;s what a &#8220;framework&#8221; <em>does</em>… it builds the website, in real time, from separate machine-readable pieces, on the user&#8217;s computer, every time they visit the website. Just like Gentoo does when you install an app. Sure, you could make the case that the browser is always assembling a website from parts &#8212; <span class="caps">HTML</span>, <span class="caps">CSS</span>, some <span class="caps">JS</span> &#8212; but this is another step beyond that; we ship a bunch of stuff in a made-up framework and a set of build tools, the build tools assemble <span class="caps">HTML</span> and <span class="caps">CSS</span> and JavaScript, and <em>then</em> the browser still has to do its bit to build that into a website. Things that should be a long way from the user are now being done much closer to them. And why? &#8220;<a href="https://macwright.org/2020/05/10/spa-fatigue.html">We&#8217;re layering optimizations upon optimizations in order to get the <span class="caps">SPA</span>-like pattern to fit every use case</a>, and I’m not sure that it is, well, worth it.&#8221; says Tom&nbsp;MacWright.</p>

<p>Old joke: someone walks into a cheap-looking hotel and asks for a room. You&#8217;ll have to make your own bed, says the receptionist. The visitor agrees, and is told: you&#8217;ll find a hammer and nails behind the&nbsp;door.</p>

<blockquote class="twitter-tweet" data-conversation="none" data-theme="dark"><p lang="en" dir="ltr">What about the About page? That is just static text, surely that’s quicker? No, it is worse. (Of course, all the <span class="caps">JS</span>/<span class="caps">CSS</span> would be cached, but so to on mine, and you still don’t have to wait for <span class="caps">JS</span> to construct your <span class="caps">HTML</span> if you just give it <span class="caps">HTML</span>.) <a href="https://t.co/Rxyz322ngt">pic.twitter.com/Rxyz322ngt</a></p>&mdash; Matthew Somerville (@dracos) <a href="https://twitter.com/dracos/status/1251836599421329410?ref_src=twsrc%5Etfw">April 19, 2020</a></blockquote>

<p><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p>

<p>Almost all of us don&#8217;t want this for our native apps, and think it would be ridiculous; why have we decided that our users have to have it on their websites? Web developers: maybe stop insisting that your users compile your apps for you? Or admit that you&#8217;ll put them through an experience that you certainly don&#8217;t tolerate on your own desktops, where you expect to download an app, not to be forced to compile it every time you run it? <em>You&#8217;re</em> not neckbeards… you just demand that your users have to be. You&#8217;re neckbeard <em>creators</em>. You want to browse this website? Here&#8217;s a hammer and&nbsp;nails.</p>

<p>Unless you run Gentoo already, of course! In which case… compile away. <img src="https://kryogenix.org/images/penguin.png"
alt="" style="display:inline;box-shadow:none;vertical-align:text-top"></p>
</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>