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>Journal-Lightweight (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://adactio.com/journal/16797">

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

<article>
<h1>Journal-Lightweight</h1>
<nav>
  <p class="center">
    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  </p>
</nav>
<hr>
<h2><a href="https://adactio.com/journal/16797">Source originale du contenu</a></h2>
<p>It’s been fascinating to see how television programmes have adapted to The Situation. It’s like there’s been a weird inversion with the YouTube asthetic. Instead of YouTubers doing their utmost to emulate the look of professional television, now everyone on professional television looks like a YouTuber.</p>

<p>No more lighting or audio technicians. No more studio audiences. Heck, no more studios.</p>

<p>There are some kinds of TV programmes that are showing the strain. A lot of comedy formats just fall flat without the usual production values. But a lot of programmes work just fine. In fact, some of them might be better. Watching <a href="https://www.theguardian.com/books/2020/apr/15/margaret-atwood-showcase-gothic-puppet-show-mary-beard-bbc">Mary Beard present <cite>Front Row Late</cite></a> from her house is an absolute delight. It feels more direct and honest without the artiface of a television studio. It kind of makes you wonder whether expensive production costs are really necessary when what you really care about is the content.</p>

<p>All of this is one big belaboured metaphor for websites.</p>

<p>In times of crisis, informational websites sometimes offer a “lite” version. Max has even made an <a href="https://mxb.dev/blog/emergency-website-kit/">emergency website kit</a>:</p>

<blockquote>
  <p>The site contains only the bare minimum - no webfonts, no tracking, no unnecessary images. The entire thing should fit in a single HTTP request. It’s basically just a small, ultra-lean blog focused on maximum resilience and accessibility. The Service Worker takes it a step further from there so if you’ve visited the site once, the information is still accessible even if you lose network coverage.</p>
</blockquote>

<p>Eric emphasises the importance of performance in his post <a href="https://meyerweb.com/eric/thoughts/2020/03/22/get-static/"><cite>Get Static</cite></a>:</p>

<blockquote>
  <p>I’m thinking here of sites for places like health departments (and pretty much all government services), hospitals and clinics, utility services, food delivery and ordering, and I’m sure there are more that haven’t occurred to me.  As much as you possibly can, get it down to static HTML and CSS and maybe a tiny bit of enhancing JS, and pare away every byte you can.</p>
</blockquote>

<p>Tom Loosemore offers this <a href="https://twitter.com/tomskitomski/status/1241009376653012993">advice to teams building new coronavirus services</a>:</p>

<blockquote>
  <ol>
  <li>Get a 4 year-old Android phone, and use it as your test/demo device.
  </li><li><a href="https://design-system.service.gov.uk">https://design-system.service.gov.uk</a> is your friend. </li>
  <li>Full React isn’t your friend if it makes your service slow &amp; inaccessible</li>
  </ol>

  <p>Remember: This is for everyone.</p>
</blockquote>

<p>Indeed, Gov.uk are usually a paragon of best practices in just about any situation. But they dropped the ball recently, as <a href="https://twitter.com/dracos/status/1251836594509791232">Matthew attests</a>:</p>

<blockquote>
  <p><a href="https://coronavirus.data.gov.uk">coronavirus.data.gov.uk</a> is a static site, fetching and displaying remote data. It is also a 100% client-side JavaScript React site.</p>

  <p><a href="http://dracos.co.uk/made/coronavirus.data.gov.uk/">http://dracos.co.uk/made/coronavirus.data.gov.uk/</a> is 238K vs 770K (basics) on load. I’ve removed about 550K of JavaScript. It seems to work the same.</p>
</blockquote>

<p><a href="https://tom.loosemore.com/2020/04/19/shonky-coronavirus-react/">As Tom says</a>:</p>

<blockquote>
  <p>One sign that your website isn’t meeting the needs of all your users is when <a href="http://dracos.co.uk/">Matthew Somerville</a> gets sufficiently grumpy about it to do a proper version himself.</p>
</blockquote>

<p>It’s true enough that Matthew excels at creating lightweight, accessible versions of services that are too bloated or buggy to use. His <a href="http://www.dracos.co.uk/odeon/">accessible Odeon</a> project from back in the day is legendary. And I use his slimline version of the National Rail website all the time: <a href="https://traintimes.org.uk">traintimes.org.uk</a>—it’s a <a href="https://traintimes.org.uk/notes/performance">terrificly performant</a> progressive web app.</p>

<p><a href="https://twitter.com/dracos/status/1168856479782379520">It’s thankless work though</a>. It flies in the face of everything considered “modern” web development. (If you want to know the cost of “modern” framework-driven JavaScript-first web development, <a href="https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/">Tim has the numbers</a>.) <a href="https://twitter.com/adactio/status/256551142">But Matthew is kind of a hero to me</a>. I wish more developers would follow his example.</p>

<p>Maybe now, with this rush to make lightweight versions of valuable services, we might stop and reflect on whether we ever really needed all those added extras in the first place.</p>

<p>Hope springs eternal.</p>

<p><strong>Update</strong>: Matthew has written about his process in <a href="http://dracos.co.uk/wrote/coronavirus-dashboard/">Looking at coronavirus.data.gov.uk</a>.</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>