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>The (extremely) loud minority (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)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- 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://andy-bell.co.uk/the-extremely-loud-minority/">

<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>The (extremely) loud minority</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-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://andy-bell.co.uk/the-extremely-loud-minority/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Often on Twitter, we’ll hear stuff like this:</p>
<blockquote class="wp-block-quote">
<p>Best practices don’t actually work</p>
</blockquote>
<p>Or: </p>
<blockquote class="wp-block-quote">
<p>TypeScript has won, and it’s only a matter of time you’re using it whether you like it or not.</p>
</blockquote>
<p>These may be true for a <em>tiny</em> minority of cases, such as in a code-factory: full of developers, independently working on small pieces of a very large product, but this doesn’t represent the web industry. In fact, the JS-driven cohort represents a <em>tiny</em> percentage of the web industry as a whole.</p>
<p>How small is that percentage, though? I’m glad you asked. We’re going to be using data from <a href="https://w3techs.com/faq">W3Techs, who crawl the <strong>top 10 million websites</strong></a> to calculate what market share certain technologies have. For this example, I’ll compare WordPress with React and Vue, because if you didn’t look at the data, you’d think everyone was building with them, right? Absolutely wrong. </p>
<blockquote class="wp-block-quote">
<p>WordPress is used by 63.4% of all the websites whose content management system we know. This is <strong>43.1% of all websites</strong>.</p>
<cite><a href="https://w3techs.com/technologies/details/cm-wordpress">W3Techs</a></cite></blockquote>
<p>And to compare:</p>
<blockquote class="wp-block-quote">
<p>React is used by 4.0% of all the websites whose JavaScript library we know. <strong>This is 3.3% of all websites</strong>.</p>
<cite><a href="https://w3techs.com/technologies/details/js-react">W3Techs</a></cite></blockquote>
<p>And finally:</p>
<blockquote class="wp-block-quote">
<p>Vue.js is used by 0.9% of all the websites whose JavaScript library we know. <strong>This is 0.8% of all websites.</strong></p>
<cite><a href="https://w3techs.com/technologies/details/js-vuejs">W3Techs</a></cite></blockquote>
<p>Emphasis on both examples, mine and the data is accurate as of February 14th, 2023. Also worth mentioning that this is just one data source. You could merge various sources, but the difference between the majority of the web industry—AKA people slinging websites with WordPress etc—and the loud, but very small web industry is <strong>huge.</strong></p>
<p>Even when you consider the reality that these technology paths likely cross and some sites hide the tech they are using, the difference is <em>extreme</em>. Even if you <a href="https://w3techs.com/technologies/comparison/js-react,js-vuejs">add together React and Vue</a>, it’s still <strong>less than 5% of all websites</strong>.</p>
<p>It’s also worth caveating (for the sake of my mentions) that React and Vue usage doesn’t mean that we’re only talking about single page apps (SPAs). Those likely account for such a small percentage of the web, it’s barely worth counting. That percentage is likely going to fall now too, because the JavaScript community have seemingly finally woken up to the idea that SPAs are not good actually. <a href="https://infrequently.org/2022/12/performance-baseline-2023/">Shame about the decade we lost on them</a>…</p>
<p>Just for fun, here’s React and Vue’s combined, rounded market share, visually represented by 100 people:</p>
<p class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"></p>
<p>Now, here’s WordPress:</p>
<p class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"></p>
<h2 id="heading-the-point-i-am-trying-to-make">The point I am trying to make</h2>
<p>It’s understandable to think that JavaScript frameworks and their communities are eating the web because places like Twitter are <em>awash with very loud voices from said communities</em>.</p>
<p>Always remember that although a <strong>subset of the JavaScript community</strong> can be <strong>very loud</strong>, they represent a <strong>paltry portion of the web as a whole</strong>. This means that when <em>they</em> say something like “Best practices don’t actually work”—what they mean is “Best practices don’t actually work for a small subset of less than 5 percent of the web”.</p>
<p>Now when you look at it like that, it makes you wonder why we give these people such a large stage while the <em>very quiet</em> <strong>majority</strong> don’t get a voice at all. The very quiet majority are out there building more than 90% of the web, after all.</p>
<p>Even a slight change in that dynamic would likely have a massive positive impact.</p>
<hr class="wp-block-separator has-alpha-channel-opacity">
<p><strong>Update</strong>: I just want to emphasise that W3Tech’s data is for the top 10 million websites. Based on that, React’s &lt; 4% share is probably microscopic on the web as a whole. Even if you discount that: considering React has been around for a decade now, &lt; 4% share of the top 10 million websites is <em>pathetic</em>, considering how much we are made to feel like it is the “biggest framework” (well, at least in bundle size, that’s true).</p>
<p>Another point I want to address is the “well, the web is massive and old, so of course there are loads of WordPress sites”. This is very true, but WordPress keeps growing in popularity*! I’d accept that if its share was depleting. Also, again, all of the above is in reference to the top 10 million websites, which if React is as popular as it’s made out to be, it would feature a lot more prominently…</p>
<p></p>
<p>* based on when I last monitored this report for <a href="https://www.youtube.com/watch?v=8oMekThCB9k">my talk on CUBE CSS</a> when WordPress’ share was around 36%.</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-2021-12.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-2021-12.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-2021-12.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-2021-12.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-2021-12.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-2021-12.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>