davidbgk
/
larlet-fr-david

<!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>R&amp;Day — David Larlet</title>
<meta name="description" content="The beauty is the build process works like progressive enhancement in the browser: the core experience is functional and accessible, then the build process enhances whatever you want to add by injecting those enhancements to the original, accessible HTML documents […]">
<!-- 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>

<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>R&amp;Day</h1>
</header>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2022/04/23/" title="Publication précédente : Quarantaine">← Précédent</a> •
    <nobr>
      <a href="/david/" title="Aller à l’accueil"
        ><svg class="icon icon-home">
          <use
            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
          ></use>
        </svg>
        Accueil</a
      >
    </nobr>
    •
    <nobr>
      <a href="/david/recherche/" title="Aller à la page de recherche"
        ><svg class="icon icon-search">
          <use
            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
          ></use>
        </svg>
        Recherche</a
      >
    </nobr>
     • <a rel="next" href="/david/2022/05/13/" title="Publication suivante : Aurore">Suivant →</a>
  </p>
</nav>
<hr>


<blockquote lang="en">
<p>The beauty is the build process works like progressive enhancement in the browser: the core experience is functional and accessible, then the build process enhances whatever you want to add by injecting those enhancements to the original, accessible HTML documents&nbsp;[…]</p>
<p><mark>The build process is a progressive enhancement to the core content of your website.</mark> Whether it runs or not, your site remains accessible and deployable at any point in&nbsp;time.</p>
<p><cite><em><a href="https://blog.jim-nielsen.com/2022/progressively-enhanced-builds/">Progressively Enhanced Builds</a></em>&nbsp;(<a href="/david/cache/2022/0707aa459878d644f14b65e9e05e9537/">cache</a>)</cite></p>
</blockquote>
<p>Cet article m’a fait <a href="https://inoads.com/articles/2021-01-09-Next-Gen-Static-Blogging">explorer l’usage</a>&nbsp;(<a href="/david/cache/2022/2458bbc9f86af47ffffcd1b99f19743a/">cache</a>) de la propriété <code>white-space</code> puis le <a href="https://news.ycombinator.com/item?id=25701053">retrait potentiel</a>&nbsp;(<a href="/david/cache/2022/6a8fadb032ab4c1951319268a1315655/">cache</a>) de balises fermantes pour alléger la charge codale (?!) du texte, ce qui semble être <a href="https://remysharp.com/2019/09/12/why-some-html-is-optional">historiquement pertinent</a>&nbsp;(<a href="/david/cache/2022/f761b745c18906fa98046badd51231c2/">cache</a>).</p>
<p>Et puis en parallèle, ça fait un moment que je regarde ce qui peut être fait avec des composants web <a href="https://www.zachleat.com/web/details-utils/">comme details/summary</a>&nbsp;(<a href="/david/cache/2022/ce44e844633f17f25d53f44c1ebd35e7/">cache</a>) pour apporter une <a href="https://cloudfour.com/thinks/web-components-as-progressive-enhancement/">couche d’amélioration progressive</a>&nbsp;(<a href="/david/cache/2022/72b4d15d286c2df85aba5742b1d98e62/">cache</a>). Mais alors que se passe-t-il lorsqu’on essaye de <a href="https://md-block.verou.me/">combiner les deux</a>&#8239;? <a href="https://md-block.verou.me/md-block.js">Ce code</a> est probablement bien plus important à comprendre que les <em>frameworks</em> JS à la mode (en bonus, essayer de décrypter les <a href="https://github.com/guybedford/es-module-shims/">module shims</a>).</p>
<p>Pour avoir récemment proposé un format Frontmatter en YAML histoire d’avoir la lisibilité du Markdown tout en ayant des méta-données, je me rends compte qu’une en-tête HTML pourrait être tout aussi (?) accessible. En revanche, on perd le rendu lisible en tableau depuis l’interface du dépôt git, ce qui est non&nbsp;négligeable.</p>
<p>Pour un usage un peu plus technique/personnel, je vois bien comment itérer à partir de cette base de réflexions. Ça rejoint un peu l’idée que <a href="https://www.robinrendle.com/notes/blogging-and-the-heat-death-of-the-universe/">le HTML d’une publication est son format pérenne</a>&nbsp;(<a href="/david/cache/2022/7f62798239c75130d19c030a4c695027/">cache</a>), ce que j’applique déjà <a href="https://git.larlet.fr/davidbgk/larlet-fr-david">par ici</a> d’une année sur l’autre. De simples <a href="https://sive.rs/plaintext">fichiers textes</a>&nbsp;(<a href="/david/cache/2022/1dd0383e3a416109e4259144d7a67e2d/">cache</a>) en&nbsp;somme.</p>
<p>Il y a des jours comme ça… et je ne vais pas m’en plaindre. Une façon de partager ma propre amélioration progressive&nbsp;🤷.</p>
<hr />
<p>Citation du&nbsp;moment&nbsp;:</p>

<blockquote>
<p>C’est une erreur de croire que les bottes sont dangereuses, ce sont les pantoufles qui le&nbsp;sont.</p>
</blockquote>
<h2 id="w-lit">W&amp;Lit <a href="#w-lit" title="Ancre vers cette partie">#</a></h2>
<blockquote lang="en">
<p>🏰 Looking at how we responded to the virus I am not optimistic at all. Nobody wants to believe or know that things will be bad, so we’ll all try to live life as normally as possible, whatever normal means. Prevention is better than cure, but prevention is also a lot of hard&nbsp;work.</p>
<p>Unlike my younger self I don’t blame people for wanting <mark>to stay in their made-belief Disneyland</mark> while fire is burning outside. Even without all the issues we face, life is inherently difficult. I think we have limited emotional and psychological&nbsp;capacity.</p>
<p><cite><em><a href="https://winnielim.org/journal/bearing-witness/">bearing witness</a></em>&nbsp;(<a href="/david/cache/2022/ce69309198dcbdbcb1d5ff9f784c4925/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>🦋 Un·e charmant·e&nbsp;amoureux·se.</p>
<p><cite><em><a href="https://typo-inclusive.net/inventaire/">Révolution typographique&nbsp;post-binaire</a></em></cite></p>
</blockquote>

<blockquote lang="en">
<p>🛠 With version 2&nbsp;of pandoc came a new option: <code>--pdf-engine</code>. That option lets you specify which tool to use when doing a conversion to PDF. While you can still use LaTeX (and a few other tools) to do the deed, you don’t need to bother with all that&nbsp;bulk.</p>
<p><cite><em><a href="https://plaintextproject.online/articles/2022/04/06/pdf.html">Creating a Nice-Looking PDF with pandoc</a></em>&nbsp;(<a href="/david/cache/2022/4d01ca34a54c4be19535df17fdf0c9d2/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>🗳 Le fait que GvoT soit un logiciel libre ne protège pas de tous les risques de&nbsp;manipulation.</p>
<p><cite><em><a href="https://voter.cliss21.org/consid%C3%A9rations-g%C3%A9n%C3%A9rales-sur-le-vote-en-ligne/">Considérations générales sur le vote en ligne</a></em>&nbsp;(<a href="/david/cache/2022/7616326c2896e35714a26de5d2898736/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>🤹 Mais surtout, la notion de capital numérique évite les termes d’inclusion/exclusion. Il faut bien admettre qu’on peut faire le choix de ne pas développer de capital numérique, parce qu’on n’en voit pas l’intérêt, qu’on ne développe pas d’appétence numérique. Et il faudra bien finir par accepter que <mark>tous les citoyens ne sont pas intéressés par les technologies numériques,</mark> n’en déplaise à certains politiques ou champions de la&nbsp;tech.</p>
<p><cite><em><a href="https://louisderrac.com/2020/11/19/du-concept-de-fractures-numeriques-a-celui-de-capital-numerique/">Du concept de «&nbsp;fracture(s) numérique(s)&nbsp;» à celui de capital numérique&#8239;?</a></em>&nbsp;(<a href="/david/cache/2022/34e73243a6ed7e36a8348b98ea79e52b/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>😔 Une femme a très peu de chances de parvenir à quitter un conjoint maltraitant tant qu’elle reste convaincue d’avoir <mark>la possibilité de l’amener à changer.</mark> Et, tant qu’elle restera à ses côtés, il aura tout le loisir de continuer à la meurtrir, en instaurant une escalade graduelle de la violence qui aura pour effet de resserrer de plus en plus sur elle l’étau de l’attachement traumatique, caractéristique des situations&nbsp;d’emprise.</p>
<p><cite><em><a href="https://centre-bertha-pappenheim.fr/2021/10/20/un-homme-peut-il-etre-un-conjoint-violent-malgre-lui/">Un homme peut-il être un conjoint violent malgré lui&#8239;?</a></em>&nbsp;(<a href="/david/cache/2022/0195a7767c46de6bc21bb35b542911a6/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>💪 Ma devise, c’est “Tout est possible”. Quand j’ai commencé le chantier, se souvient-elle, on me disait que je n’y arriverais pas. <mark>Les gens rêvent puis crèvent sans avoir pris de risques, assis sur leur canapé.</mark> Moi, j’ai le soleil dans la tête. La peur m’est étrangère. Je risque quoi&#8239;? Ce ne sera jamais un échec, j’aurai&nbsp;appris.</p>
<p><cite><em><a href="https://bag.fiat-tux.fr/share/6252865f762331.80369904">La maison en A, plan B des «&nbsp;fauchés&nbsp;»</a></em>&nbsp;(<a href="/david/cache/2022/4687697ee56ee244b7d9d17a4a328c6a/">cache</a>)</cite></p>
</blockquote>


<nav>
  <p class="center">
    <a rel="prev" href="/david/2022/04/23/" title="Publication précédente : Quarantaine">← Précédent</a> •
    <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
     • <a rel="next" href="/david/2022/05/13/" title="Publication suivante : Aurore">Suivant →</a>
  </p>
</nav>
</article>


<hr>

<footer>
  <p>
    <nobr>
      <a href="/david/" title="Aller à l’accueil"
        ><svg class="icon icon-home">
          <use
            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
          ></use>
        </svg>
        Accueil</a
      >
    </nobr>
    •
    <nobr>
      <a href="/david/log/" title="Accès au flux RSS"
        ><svg class="icon icon-rss2">
          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
        </svg>
        Suivre</a
      >
    </nobr>
    •
    <nobr>
      <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-2022-03.svg#icon-user-tie"></use>
        </svg>
        Pro</a
      >
    </nobr>
    •
    <nobr>
      <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
        ><svg class="icon icon-mail">
          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
        </svg>
        Email</a
      >
    </nobr>
    •
    <nobr>
      <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-2022-03.svg#icon-hammer2"></use>
        </svg>
        Légal</abbr
      >
    </nobr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.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>