davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799
							<!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>Tag #web — David Larlet</title>
<meta name="description" content="Publications relatives au tag #web">
<!-- 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>

<style type="text/css">
  details[open] summary {
    display: none;
  }
</style>

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<header>
  <h1>Publications relatives au tag #web</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 rel="tags" href="/david/#tags" title="Liste de toutes les étiquettes"><svg class="icon icon-tags">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
      </svg> Étiquettes</a>
  </p>
</nav>
<hr>
<main>
  <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  
    <h2><a href="/david/2021/12/07/" title="Lien permanent vers cet article">Natif</a> (2021-12-07)</h2>
    
      
<blockquote lang="en">
<p>For myself, this is just very annoying. Imagine the same situation if you were blind. The standard form inputs work everywhere, and are designed with accessibility in mind, so you’re used to them and can easily fill in forms which use the standard browser controls. But, when you hit a JavaScript-powered organic cage-free non-GMO text box, you’re screwed.</p>
<p>There are hundreds of little nuances that users learn to use their computers efficiently. The exact features a user relies on will vary between operating systems, browsers, hardware, natural languages, physical ability, and personal preferences and experience. There are dozens of tiny workflows that people depend on every day that have never even occurred to you.</p>
<p><mark>Making a custom form control with JavaScript is going to make life worse</mark> for a lot of people. Just don’t do it. The browser’s built-in controls are quite sufficient.</p>
<p><cite><em><a href="https://drewdevault.com/2021/06/27/You-cant-capture-the-nuance.html">You can’t capture the nuance of my form fields</a></em> (<a href="/david/cache/2021/1a6493b2d0049ae88f2b331a990a85b8/">cache</a>)</cite></p>
</blockquote>
<p>Il y a une notion de <em>refus de parvenir</em> à explorer dans le Web. Ce n’est pas parce que l’on peut que l’on doit. Chaque «&nbsp;adaptation&nbsp;» de la norme apporte son lot d’inconnues et d’incapacités futures. Chaque tentative de sur-technicisation apporte son lot de <a href="/david/2021/11/20/" title="Hypertélie">traits hypertéliques</a> qui requièrent une adaptation non négligeable.</p>
<p>Bien trop souvent <a href="/david/2021/11/01/" title="Inaccessible">négligée</a>.</p>
<p>Ironiquement, <mark>au moment de publier</mark>, je suis en train d’<a href="https://github.com/Delegation-numerique-en-sante/mesconseilsprevention">explorer des choses</a> avec le moins de code possible. Et c’est vraiment plaisant de pouvoir prototyper avec de petits outils robustes.</p>

    
    <h2><a href="/david/2021/11/20/" title="Lien permanent vers cet article">Hypertélie</a> (2021-11-20)</h2>
    
      
<blockquote>
<p>Il est assez courant qu’une innovation consiste à réutiliser un objet technique plus ancien, en particulier quand les générations récentes d’une lignée technique ont évolué vers ce que Simondon appelle <mark>«&nbsp;l’hypertélie&nbsp;», c’est-à-dire quand le fonctionnement de l’objet a été suradapté à une fonction précise et à un milieu donné</mark>. Ses performances sont inégalables dans cette configuration, mais il ne peut plus être employé pour remplir d’autres fonctions qu’il assurait auparavant et il se dérègle ou tombe en panne dès que le milieu varie. Il a perdu en «&nbsp;généricité&nbsp;». Alors, il faut revenir à la génération précédente avant d’envisager un progrès majeur, c’est-à-dire une réorganisation globale de l’objet qui le rende plus synergique.</p>
<p><cite><em>Penser l’innovation sur Arrakis</em>, Vincent Bontems dans <em>Dune&nbsp;: exploration scientifique et culturelle d’une planète-univers</em></cite></p>
</blockquote>
<p>J’ai maintenant un <a href="https://fr.wikipedia.org/wiki/Caract%C3%A8re_hypert%C3%A9lique">mot/concept/caractère</a> pour décrire ce qu’il s’est passé dans le Web ces cinq dernières années. J’ai l’impression que c’est en train de se <a href="https://resilientwebdesign.com/">réorganiser</a> pour créer des <a href="https://stimulus.hotwired.dev/">synergies</a> entre les <a href="https://htmx.org/">différentes</a> <a href="/david/2021/11/03/" title="Composants">parties</a>.</p>
<p>C’est marrant de le retrouver dans un livre sur Dune qui cite Simondon dans <em><a href="https://fr.wikipedia.org/wiki/Du_mode_d%27existence_des_objets_techniques">Du mode d’existence des objets techniques</a></em>.</p>

<blockquote>
<p>En fait, les traits hypertéliques ou exubérants résultent de l’action de la sélection sexuelle et du conflit sexuel entre les partenaires.</p>
<p><cite><em><a href="https://fr.wikipedia.org/wiki/Caract%C3%A8re_hypert%C3%A9lique">Caractère hypertélique</a></em></cite></p>
</blockquote>
<p>Oh non, rien.</p>

    
    <h2><a href="/david/2021/11/03/" title="Lien permanent vers cet article">Composants</a> (2021-11-03)</h2>
    
      
<blockquote lang="en">
<p>Web Components had so much potential to empower HTML to do more, and make web development more accessible to non-programmers and easier for programmers. Remember how exciting it was every time we got new shiny HTML elements that actually do stuff? Remember how exciting it was to be able to do sliders, color pickers, dialogs, disclosure widgets straight in the HTML, without having to include any widget libraries?</p>
<p>The promise of Web Components was that we’d get this convenience, but for a much wider range of HTML elements, developed much faster, as nobody needs to wait for the full spec + implementation process. We’d just include a script, and boom, we have more elements at our disposal!</p>
<p><cite><em><a href="https://lea.verou.me/2020/09/the-failed-promise-of-web-components/">The failed promise of Web Components</a></em> (<a href="/david/cache/2021/68cd338e37c60a8ed179222c6b1af01f/">cache</a>)</cite></p>
</blockquote>
<p>Le constat ne souffrait pas d’ambiguïté il y a un an. Qu’en est-il aujourd’hui&#8239;?</p>
<p>Il y a Simon Willison qui commente un <a href="https://til.simonwillison.net/web-components/understanding-single-file-web-component">Web Component tenant dans un seul fichier</a> (<a href="/david/cache/2021/8016f83f512107dd26e5780b08ea7305/">cache</a>). Et Dave Rupert qui <a href="https://daverupert.com/2021/10/html-with-superpowers/">parle de leurs super-pouvoirs</a> (<a href="/david/cache/2021/eb14bb1071cfe2bd952aa9280c6a4860/">cache</a>). Tout le monde espère pouvoir <a href="https://elisehe.in/2021/08/22/using-the-platform">les utiliser nativement</a> (<a href="/david/cache/2021/0f1f65d09181752916216e892bb192d8/">cache</a>).</p>
<p>En attendant, il y a des petits <em>frameworks</em> comme <a href="https://tonicframework.dev/">Tonic</a> ou <a href="https://lego.js.org/">Lego</a>. Des plus conséquents comme <a href="https://lit.dev/">Lit</a>.</p>
<p>Tout espoir n’est pas perdu. Juste <a href="/david/blog/2013/python-javascript/">une décennie</a>.</p>

    
    <h2><a href="/david/2021/08/31/" title="Lien permanent vers cet article">Abstraction</a> (2021-08-31)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>Take a moment and think about this super power: if you write vanilla HTML, CSS, and JS, all you have to do is put that code in a web browser and it runs. Edit a file, refresh the page, you’ve got a feedback cycle. <mark>As soon as you introduce tooling, as soon as you introduce an abstraction not native to the browser, you may have to invent the universe for a feedback cycle.</mark> No longer writing CSS and instead writing Sass? Now you need a development server with a build process to watch your files and compile your changes <em>just to develop and test your project</em>. You’ve just added a giant, blocking dependency for your project to work. And if you can’t get that dependency working, your project is dead in the water until you can—both now and in the future.</p>
<p><cite><em><a href="https://blog.jim-nielsen.com/2020/cheating-entropy-with-native-web-tech/">Cheating Entropy with Native Web Technologies</a></em> (<a href="/david/cache/2021/74eae1dc26bd4537941491b4e7e201bc/">cache</a>)</cite></p>
</blockquote>
<p>J’ai déjà beaucoup trop parlé du sujet et en même temps cela a été et pourrait encore être mon quotidien si je n’avais pas choisi une certaine forme d’ascétisme technologique (n’ayons pas peur des mots, <a href="http://aswemay.fr/co/040011.html">ataraxie numérique</a> (<a href="/david/cache/2021/1357452f72e8fab727df874cbc2582d4/">cache</a>) si on veut être vraiment pédant). Évaluer chaque outil pour son usage actuel et futur, sa maintenance, sa migration, ses <em>drama</em> (coucou <a href="https://hotwired.dev/">Hotwire</a>), son abandon pour la dernière mode. J’apprends hier qu’un produit est à l’arrêt pour X mois car il faut passer d’un <em>framework</em> JS à un autre. Tristesse d’un domaine où une telle pratique est courante. Bien éloignée d’un Web <a href="https://wimvanderbauwhede.github.io/articles/frugal-computing/">frugal</a> (<a href="/david/cache/2021/710f8cdebd7560223ebd378f9cbe7822/">cache</a>), il y a un excellent <a href="http://viznut.fi/texts-en/permacomputing_update_2021.html">résumé avec plein de liens ici</a> (<a href="/david/cache/2021/0f791a9509f762f1a1a36b6ca2333230/">cache</a>) si le sujet vous intéresse.</p>
<p>Je suis admiratif des personnes faisant de <a href="https://zserge.com/posts/awfice/">petits outils conviviaux</a> (<a href="/david/cache/2021/3ac474db4dc65c1d25e99cb30655ff12/">cache</a>) qui permettent d’apprendre et de jouer avec la conception de l’outil en lui-même. Si je devais refaire de l’<a href="/david/pro/enseignement/">enseignement technique</a>, j’emprunterais probablement cette voie. À l’opposé de la camionnette à outils qu’il faut savoir dorénavant maîtriser, en opposition à la direction qu’un marché nous pousse à emprunter.</p>
<p>Est-ce que l’on peut considérer l’accumulation de dette technique comme étant un <em>bullshit job</em>&#8239;?</p>

<blockquote>
<p>16. How does this technology empower me? At whose expense?</p>
<p><cite><em><a href="https://theconvivialsociety.substack.com/p/the-questions-concerning-technology">The Questions Concerning Technology</a></em> (<a href="/david/cache/2021/b404382125c07935b98295a801049097/">cache</a>)</cite></p>
</blockquote>
<figure>
    <a href="#bourdons"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2021/bourdons.jpg" alt="Deux bourdons qui butinent des chardons."
             loading="lazy" width="2048" height="1536" />
    </a>
    <a href="#_" class="lightbox" id="bourdons">
        <img src="/static/david/2021/bourdons.jpg" alt="Deux bourdons qui butinent des chardons."
             loading="lazy" width="2048" height="1536" />
    </a>
    <figcaption>Écrits pollinisateurs ?</figcaption>
</figure>

      </details>
    

    <h2><a href="/david/2021/08/28/" title="Lien permanent vers cet article">Copie(s)</a> (2021-08-28)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>As long as there is design, there will be copying.</p>
<p><cite><em><a href="https://matthewstrom.com/writing/copying/">Copying is the way design works</a></em> (<a href="/david/cache/2021/4072b1e628106ec95319062a87d21f47/">cache</a>)</cite></p>
</blockquote>
<p><em>Je trouve cela d’autant plus ironique de faire une copie locale de cet article.</em></p>
<p>Je parcoure de vieux onglets ces derniers jours, cela permet de mieux évaluer si ce que j’ai conservé plusieurs mois dans mon navigateur est encore pertinent. Je redécouvre des choses, je croise des aspirations passées comme apprendre le <a href="http://lvogel.free.fr/tokipona/">toki pona</a> (merci <a href="http://shl.huld.re/~f6k/">f6k</a>), des infographies du début de la pandémie, des <a href="http://www.coureursdeboises.com/img/carte.pdf">cartes de ski de fond</a> de lieux qu’il reste à explorer, pas mal d’articles autour de la <a href="https://www.pikselkraft.com/les-ressources-pour-l-ecoconception-et-la-sobriete-numerique/">sobriété</a> (<a href="/david/cache/2021/07f65527fb51a3d31cfd7173bde1d76c/">cache</a>), de la <a href="https://www.the-trouble.com/content/2021/2/11/ecosocialism-is-the-horizon-degrowth-is-the-way">décroissance</a> (<a href="/david/cache/2021/e554fd03f2342ab72115688dd258cba4/">cache</a>) et <a href="https://wiki.lescommuns.org/wiki/Low-tech_et_Communs">des communs</a> (<a href="/david/cache/2021/7a21fd7cca573df8b35b973d8ee080c8/">cache</a>), <a href="https://timdaub.github.io/2021/01/16/web-principles/">beaucoup</a> (<a href="/david/cache/2021/63317c91823b52571b851e7a27eb7b4f/">cache</a>) de <a href="https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs">technique</a> (<a href="/david/cache/2021/23d224bccb7af8db5017cebf813fec56/">cache</a>) <a href="https://bart.degoe.de/building-a-full-text-search-engine-150-lines-of-code/">bien sûr</a> (<a href="/david/cache/2021/b56bb56209a04e6144454283a22311ad/">cache</a>), des <a href="https://adamwilt.com/fieldmonitor/">outils</a> <a href="https://sites.google.com/site/starryskystacker/home">autour</a> de la photo/vidéo… et déjà pas mal de 404.</p>
<p>C’est presque de la pré-archéologie.</p>

      </details>
    

    <h2><a href="/david/2021/08/18/" title="Lien permanent vers cet article">Lettres</a> (2021-08-18)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>This is one small step towards something different: an ethic that prioritizes technologists’ agency, <mark>the need for self-reflection</mark>, and the importance of historical inquiry.</p>
<p><cite><em><a href="https://letterstoayoungtechnologist.com/">Letters to a Young Technologist</a></em> (<a href="/david/cache/2021/2c416b360e5ea82c6be38cada47d9001/">cache</a>)</cite></p>
</blockquote>
<p>La déception du jour ce sont ces lettres avec un contenu profond mais une forme désastreuse. Le courrier est sollicité mais alors l’enveloppe&#8239;! Impossible d’afficher le moindre contenu sans charger pas moins de 13&nbsp;fichiers JavaScript depuis <code>static.cargo.site</code>, pour… 6&nbsp;pages de HTML qui pourraient facilement peser 10&nbsp;fois moins lourd.</p>
<p>Pauvres jeunes, ils auront tellement à réparer…</p>

<blockquote lang="en">
<p>The second way that history can help us avoid mistakes is by showing us predictable ways things can go horribly wrong. In the light of history, we can take the long view on present-day crises and take care <mark>to not repeat the foibles of the past.</mark></p>
<p><cite><em><a href="https://letterstoayoungtechnologist.com/Study-the-Past-Create-the-Future">Study the Past, Create the Future</a></em> (<a href="/david/cache/2021/520ea4867de8d36f3cd2b1132e44b719/">cache</a>)</cite></p>
</blockquote>
<p>Well, ¯\<em>(ツ)</em>/¯.</p>
<figure>
    <a href="#merle-amerique"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2021/merle-amerique.jpg" alt="Un merle d’Amérique mangeant une baie."
             loading="lazy" width="2048" height="1366" />
    </a>
    <a href="#_" class="lightbox" id="merle-amerique">
        <img src="/static/david/2021/merle-amerique.jpg" alt="Un merle d’Amérique mangeant une baie."
             loading="lazy" width="2048" height="1366" />
    </a>
    <figcaption>Vous reprendriez bien un peu de JS ?</figcaption>
</figure>

      </details>
    

    <h2><a href="/david/2021/08/11/" title="Lien permanent vers cet article">Pré-requis</a> (2021-08-11)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>You can <em>choose</em> to make it really complicated. Convince yourself that “the modern web” is inherently complex and convoluted. But then look at what makes it complex and convoluted: toolchains, build tools, pipelines, frameworks, libraries, and abstractions. Please try to remember that none of those things are required to make a website.</p>
<p>This is for everyone. Not just for everyone to consume, <mark>but for everyone to make.</mark></p>
<p><cite><em><a href="https://adactio.com/journal/18337">Foundations</a></em> (<a href="/david/cache/2021/b2c393ba384ba80f2361dc7652d50de3/">cache</a>)</cite></p>
</blockquote>
<p>Suivi de&nbsp;:</p>

<blockquote lang="en">
<p>It feels like the web we’re making now is a web designed for commercial interests. The reason we get CSS grid or the JS APIs of ES6,7, and 8&nbsp;has more to do with how companies want to build and deliver software over the web than it does with <mark>how individuals want to connect and communicate</mark> with each other over the web.</p>
<p><cite><em><a href="https://blog.jim-nielsen.com/2021/browsers-and-representation/">Browsers and Representation</a></em> (<a href="/david/cache/2021/13e573e5b0ffc244ac700dba6c7b8bd1/">cache</a>)</cite></p>
</blockquote>
<p>À quoi ressemblerait un navigateur du peuple pour le peuple&#8239;? Qu’est-ce qui pourrait être ajouté/retiré&#8239;? Quelle en serait sa gouvernance&#8239;? Quelle serait l’échelle d’usage/développement qui nous semblerait acceptable avant d’essaimer&#8239;?</p>
<p>Qu’il est inconfortable de se poser toutes ces questions&nbsp;:-).</p>

<blockquote>
<p>C’était là une approche typiquement mentat&nbsp;: se concentrer uniquement sur les questions. Les mentats accumulaient les questions comme d’autres avaient tendance à accumuler les réponses. <mark>Les questions créaient leurs propres trames et leurs propres systèmes.</mark> C’était cela qui aboutissait aux <em>formes</em> reconnaissables. Chacun voyait son univers à travers des trames qui s’étaient créées d’elles-mêmes, composées d’images, de mots, de désignations (parfaitement temporaires), le tout mêlé en un faisceau d’impulsions sensorielles qui se réfléchissaient sur ces constructions intérieures de la même manière que la lumière était renvoyée sur une surface brillante.<br />
Le premier instructeur mentat de Duncan Idaho avait élaboré une configuration provisoire de mots pour décrire cette fragile construction&nbsp;: «&nbsp;Surveillez les moindres mouvements significatifs de vos écrans intérieurs.&nbsp;»</p>
<p>[…]</p>
<p>La véritable force d’un mentat résidait dans cette <em>construction</em> mentale que les instructeurs appelaient «&nbsp;la grande synthèse&nbsp;». Cela requérait une patience que les non-mentats n’auraient même pas pu imaginer. Dans les écoles de mentats, on désignait cela sous le nom de persévérance. Il fallait être un pisteur primitif, capable de déchiffrer les signes les plus infimes, les perturbations les plus minuscules de l’environnement, et de les remonter jusqu’à leur source. En même temps, il fallait demeurer ouvert aux grands mouvements de l’extérieur comme de l’intérieur. Tout cela concourait à produire un état de «&nbsp;réceptivité naïve&nbsp;» qui était l’attitude de base du Mentat, apparentée à celle du Diseur de Vérité, mais beaucoup plus vaste dans son champ d’action.<br />
«&nbsp;Vous êtes ouvert à tout ce que l’univers pourra décider de faire&nbsp;», disait son premier instructeur. «&nbsp;Votre cerveau n’est pas un ordinateur. C’est un outil de décision couplé à tout ce que vos sens peuvent lui apporter.&nbsp;»</p>
<p><cite><em><a href="/david/2020/12/21/#dune">Dune</a> VI. La maison des mères</em>, Frank Herbert</cite></p>
</blockquote>
<figure>
    <a href="#nenuphars"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2021/nenuphars.jpg" alt="Deux nénuphars et leurs reflets."
             loading="lazy" width="1600" height="1067" />
    </a>
    <a href="#_" class="lightbox" id="nenuphars">
        <img src="/static/david/2021/nenuphars.jpg" alt="Deux nénuphars et leurs reflets."
             loading="lazy" width="1600" height="1067" />
    </a>
    <figcaption>Que cette fleur soit synonyme de protections périodiques m’auto-frustre.</figcaption>
</figure>

      </details>
    

    <h2><a href="/david/2021/08/10/" title="Lien permanent vers cet article">HTTPSadness</a> (2021-08-10)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>At some point, you won’t be able to visit <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">the first web page ever published</a> without first clicking through a full-page warning injected by your web browser</p>
<p><cite><em><a href="https://adactio.com/links/18342">Chromium Blog: Increasing HTTPS adoption</a></em> (<a href="/david/cache/2021/b4ec4748a73b23b195366a74a17444f9/">cache</a>)</cite></p>
</blockquote>
<p>Cela me rend triste, alors qu’un effort particulier a toujours été fait pour <a href="https://github.com/styfle/breaking-changes-web">ne pas casser grand chose</a> sur le Web jusqu’à présent. Chrome est bien parti pour <a href="https://github.com/whatwg/html/issues/5407">nous les briser</a> pendant quelques années encore… #BeenThereSufferedThat</p>
<p>Il y a 30&nbsp;ans (merci Karl), Tim nous incitait <a href="https://groups.google.com/g/comp.archives/c/CfsHlSNYPUI/m/DTs60INnuzcJ">à essayer</a> (<a href="/david/cache/2021/e4f0d4ea8f6ec975b114ade59aa7fda2/">cache</a>) son nouveau jouet&nbsp;:</p>

<blockquote lang="en">
<p>It’s just a question of generating plain text or SGML (ugh! but standard) mark-up on the fly. The browsers then parse it on the fly.</p>
<p><cite><em><a href="https://www.w3.org/People/Berners-Lee/1991/08/art-6484.txt">Subject: Re: Qualifiers on Hypertext links...</a></em> (<a href="/david/cache/2021/e39a703ed0d93c479d9c7d3b2f8444a9/">cache</a>)</cite></p>
</blockquote>
<figure>
    <a href="#heron"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2021/heron.jpg" alt="Un héron à la recherche de son futur repas au milieu des nénuphars."
             loading="lazy" width="1600" height="1067" />
    </a>
    <a href="#_" class="lightbox" id="heron">
        <img src="/static/david/2021/heron.jpg" alt="Un héron à la recherche de son futur repas au milieu des nénuphars."
             loading="lazy" width="1600" height="1067" />
    </a>
    <figcaption>Vous avez évité une n-ième photo de toile d’araignée.</figcaption>
</figure>

      </details>
    

    <h2><a href="/david/2021/07/21/" title="Lien permanent vers cet article">Espoir</a> (2021-07-21)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>In a sense, every hyperlink on the World Wide Web is little act of hope. Even though I know that when I link to something, it probably won’t last, I still harbour that hope.</p>
<p>If hyperlinks are built on hope, and the web is made of hyperlinks, then in a way, <mark>the World Wide Web is quite literally made out of hope.</mark></p>
<p>I like that.</p>
<p><cite><em><a href="https://adactio.com/journal/18292">Hope</a></em> (<a href="/david/cache/2021/d650cd3cc8831f1b28b6cc2f7eb0f9f7/">cache</a>)</cite></p>
</blockquote>
<p>J’aime bien ce raisonnement <em>et</em> j’ai perdu espoir il y a un moment en essayant de mettre en cache local les publications que je lie. Je me demande parfois ce qui freine les autres personnes sensibles à ce vieillissement des liens à mettre en place leur <a href="/david/blog/2018/caching-links/">propre solution</a> pour le faire.</p>
<p>J’utilise <a href="https://git.larlet.fr/davidbgk/larlet-fr-david-cache/src/branch/master/cache.py">ce script</a> et je fais pas mal de travail manuellement ensuite pour que ça reste au moins lisible. Dans certains cas j’abandonne, notamment pour les images/graphiques qui ont besoin de JavaScript pour s’afficher… dans d’autres je prends le temps de faire des liens absolus ou des retouches sémantiques. Une forme de prise de soin de mes futur·es lecteur·ices (dont je fais partie&#8239;!) avec l’espoir que ça soit utile. Il faudra que je regarde le nombre de liens qui ne sont plus disponibles que <em>via</em> ma copie en fonction des années. C’est intéressant aussi pour pouvoir faire des recherches en <em>full-text</em> sur le dépôt dédié sans dépendre d’un historique de navigateur.</p>
<p>En <a href="/david/stream/2015/01/05/">6&nbsp;ans</a>, je n’ai supprimé qu’une seule ressource sur ma proposition à l’auteur·e qui souhaitait faire disparaître un contenu. Aucune violation de copyright ou autre n’a été remontée. Si cela arrivait, je m’assurerais auparavant que ce contenu n’est pas dans le cache de Google ou dans la <a href="https://archive.org/web/">Wayback machine</a> 🤷.</p>

<blockquote lang="en">
<p>As a young man, I wanted to help make a new medium that would be a step forward from Gutenberg’s invention hundreds of years before.</p>
<p>By building a Library of Everything in the digital age, I thought the opportunity was not just to make it available to everybody in the world, but to make it better–smarter than paper. By using computers, <mark>we could make the Library not just searchable, but organizable;</mark> make it so that you could navigate your way through millions, and maybe eventually billions of web pages.</p>
<p><cite><em><a href="https://blog.archive.org/2021/07/21/reflections-as-the-internet-archive-turns-25/">Reflections as the Internet Archive turns 25</a></em> (<a href="/david/cache/2021/e23db6deddbc0ea74b73c960df2b193f/">cache</a>)</cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/07/13/" title="Lien permanent vers cet article">ActivityStreams</a> (2021-07-13)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        
<p>On prend le temps avec <a href="https://buron.coffee/">La Bécasse</a> d’explorer ensemble l’idée d’avoir un générateur de Toots statique pour Mastodon. J’avais commencé en solo sans grand succès l’année dernière car je n’avais pas compris deux pré-requis&nbsp;:</p>
<ol>
<li>Ce protocole s’appuie sur du <em>push</em>, à chaque publication il faut faire un <code>POST</code> sur l’<em>inbox</em> de chacun de ses <em>followers</em>.</li>
<li>Il faut pouvoir répondre aux requêtes des personnes qui souhaitent suivre le compte pour que le lien soit fait (et stocker l’identifiant de ce <em>follower</em>, cf. 1.).</li>
</ol>
<p>Autant dire que pour du statique et donc plus ou moins asynchrone, ça n’est pas gagné&#8239;! J’étais pas loin d’abandonner lorsque La Bécasse m’indique qu’il est tout à fait possible de générer une Note sur laquelle interagir (repouet par exemple) en utilisant la recherche de mastodon.social pointée vers le fichier <code>json</code> qui va bien. Après de multiples essais/erreurs (grr cache), on finit même par trouver comment mettre un autre compte en copie pour participer aux échanges qu’il peut y avoir au sujet d’une publication via le <code>tag</code> de <code>&quot;type&quot;: &quot;Mention&quot;</code>.</p>
<p>J’hésite entre proposer une URL dédiée ou faire de la négociation de contenu sur la même URL ce qui pourrait faciliter le partage par d’autres personnes.</p>
<p>Note&nbsp;: les 3&nbsp;jours suivants, je tente des choses à ce sujet et il semble y avoir toujours un blocage difficile à investiguer, probablement lié à la négociation de contenu justement… ça serait pas mal d’avoir un log mais ça nécessiterait probablement d’installer un serveur Mastodon.</p>
<p>Masto 2 - 0&nbsp;David.</p>

<blockquote>
<p>Tel se présente l’univers impressionnant de la magie qu’il est constitué non pas d’atomes mais uniquement de mouvements et de vibrations. En son sein, il convient d’abandonner toute croyance aux barrières qui font obstacle à la compréhension. La notion de compréhension elle-même est à écarter, cet univers n’étant ni visible, ni audible, ni décelable par aucun moyen fixe de perception. C’est le vide ultime où aucun écran préalable n’existe sur lequel puissent être projetées des formes. Il ne connait qu’un seul mode de conscience et c’est l’écran de projection des images. L’imagination&#8239;! Ainsi, l’on apprend véritablement ce que signifie être humain, être un créateur d’ordre, de formes et de systèmes harmonieux, être, en somme, <mark>l’organisateur du chaos</mark>.</p>
<p><cite><em>Manuel des Atréides, Archives du Bene Gesserit</em>, <em><a href="/david/2020/12/21/#dune">Dune</a> V. Les Hérétiques de Dune</em>, Frank Herbert</cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/06/23/" title="Lien permanent vers cet article">FullStack</a> (2021-06-23)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>It’s almost like it’s a culture of masculinity stretching its legs wide across the seats of the tech industry.</p>
<p>If a skill is worth masculinity points, it’s claimed. If a skill is coded as feminine it’s remade with masculine tools. If a skill can’t be remade it’s dropped and ignored.</p>
<p>Which is why front end got turned into a programmatic hardcore engineering fest. It’s malleable to that (at huge cost to the users). <mark>It’s also why accessibility will never be considered full stack, as it can’t be automated.</mark> It requires empathy and communication.</p>
<p>To feed the ego of a masculine webtech industry we sacrificed accessibility and usability.</p>
<p><cite><em>Charlie Don’t Surf</em>, <a href="https://twitter.com/sonniesedge/status/1405099209913679872">sur Twitter</a></cite></p>
</blockquote>
<p>On touche un point sensible ici, celui de l’automatisation pour pallier ses propres faiblesses de communication. C’est ce que j’observe assez régulièrement avec ma boîte noire favorite&nbsp;:</p>
<p>Docker. <a href="https://blog.newsblur.com/2021/06/28/story-of-a-hacking/">Oups</a> (<a href="/david/cache/2021/5b96c01bfd8b66a26135b7ce8bdff79d/">cache</a>).</p>
<p>Derrière cette tentative de reproductibilité, on masque un processus d’installation et surtout une remise en cause des dépendances. On perd l’occasion d’avoir la friction (répétée) qui va générer cette discussion. On prolétarise les personnes non-érudites à coups de <code>docker-compose up</code> en cachant une technique qui serait la voie vers leur autonomie. On contraint les utilisateur·ices <a href="/david/2021/06/06/" title="Abonnement">à s’abonner</a> à nos se(r)vices.</p>
<p>Ce ne sont pas nos produits que l’on met en boîte mais nos pairs que l’on enferme dans cette façon de (dé)penser pour le confort de quelques uns. Ce domaine a besoin <a href="/david/2021/05/11/" title="Paradigme">de voiliers</a>, pas de cargos.</p>

<blockquote lang="en">
<p>💯 To claim full stack as a title is to declare that you are a replaceable unit in the cog of capitalism. The ultimate human resource to be exploited!</p>
<p><cite><em>Charlie Don’t Surf</em>, <a href="https://twitter.com/sonniesedge/status/1405123679801991175">sur Twitter</a></cite></p>
</blockquote>
<p><a href="/david/2021/03/28/" title="Smolstack">Yup.</a></p>

      </details>
    

    <h2><a href="/david/2021/06/03/" title="Lien permanent vers cet article">Flux lisibles</a> (2021-06-03)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>Use web feeds to <strong>subscribe</strong> to websites and get the <strong>latest content in one place</strong>.</p>
<p><strong>Feeds put you in control.</strong> It’s like subscribing to a podcast, or following a company on Facebook. You don’t need to pay or hand over your email address. You get the latest content without having to visit lots of sites, and without cluttering up your inbox. Had enough? Easy: unsubscribe from the feed.</p>
<p>You just need a special app called a <strong>newsreader</strong>.</p>
<p><cite><em><a href="https://aboutfeeds.com/">What is a feed? (a.k.a. RSS)</a></em> (<a href="/david/cache/2021/0086cb1d562c02cd96f9f2a38e5bcc42/">cache</a>)</cite></p>
</blockquote>
<p>Cela faisait un moment que je voulais expérimenter des choses à ce sujet. Et puis j’avais vu passer le rendu des flux de <a href="https://adactio.com/journal/rss">Jeremy Keith</a> ou <a href="https://interconnected.org/home/feed">Matt Webb</a> que je trouvais inspirants mais j’avais l’impression que c’était compliqué à mettre en place. Alors que le travail avait en fait été <a href="https://lepture.com/en/2019/rss-style-with-xsl">pas mal pré-mâché&#8239;!</a> (<a href="/david/cache/2021/40d98edeb7835abd7f9d4c1917e3ea5c/">cache</a>) Le rendu par défaut dans Firefox ressemblait à ça&nbsp;:</p>
<figure>
    <a href="#rendu_flux_defaut"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2021/rendu_flux_defaut.png" alt="Rendu par défaut d’un flux RSS dans Firefox"
             loading="lazy" width="1676" height="1444" />
    </a>
    <a href="#_" class="lightbox" id="rendu_flux_defaut">
        <img src="/static/david/2021/rendu_flux_defaut.png" alt="Rendu par défaut d’un flux RSS dans Firefox"
             loading="lazy" width="1676" height="1444" />
    </a>
    <figcaption>Non seulement c’est pas joli mais surtout c’est incompréhensible aux non-technicien·nes !</figcaption>
</figure>
<p>La feuille <abbr title="Extensible Stylesheet Language">XSL</abbr> de base est commentée et <a href="https://github.com/genmon/aboutfeeds/blob/main/tools/pretty-feed-v3.xsl">disponible ici</a>. L’exercice le plus difficile est d’adapter les valeurs pour que ça corresponde à votre flux, j’ai aussi enlevé la CSS par défaut pour mettre la mienne en ayant l’intuition que ça permettrait de maintenir une certaine cohérence avec la page d’où la personne vient. J’ai aussi fait en sorte d’utiliser la <a href="/david/2021/05/26/" title="Follow">notion de suivi</a> d’un flux/individu.</p>
<p>Mon code <a href="https://git.larlet.fr/davidbgk/larlet-fr-david/src/branch/master/david/log/feed.xsl">ressemble à ça</a> et permet d’obtenir le <a href="/david/log/">rendu suivant</a>&nbsp;:</p>
<figure>
    <a href="#rendu_flux_style"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2021/rendu_flux_style.png" alt="Rendu après transformation de mon flux RSS dans Firefox"
             loading="lazy" width="1668" height="1642" />
    </a>
    <a href="#_" class="lightbox" id="rendu_flux_style">
        <img src="/static/david/2021/rendu_flux_style.png" alt="Rendu après transformation de mon flux RSS dans Firefox"
             loading="lazy" width="1668" height="1642" />
    </a>
    <figcaption>Et voilà ! C’est quand même bien plus stylé 😎</figcaption>
</figure>
<p>J’ai une petite frustration que Firefox ne supporte pas la propriété <code>disable-output-escaping=&quot;yes&quot;</code> ce qui ne me permet pas d’avoir un rendu HTML satisfaisant lorsqu’on déplie les entrées (le plus frustrant étant que c’est implémenté chez Webkit…). J’imagine que je pourrais changer le format de mon flux pour ne pas avoir à faire cette conversion, par exemple avec du <code>CDATA</code>, à creuser.</p>
<p>Il s’agit bien évidemment d’une première version et je vous encourage à me faire part de vos incompréhensions ou propositions d’amélioration pour le texte d’introduction. Je suis déjà bien content d’avoir pu mettre ça en place, c’est une frustration que je me traîne depuis… plus de 15&nbsp;ans&#8239;!</p>

      </details>
    

    <h2><a href="/david/2021/05/13/" title="Lien permanent vers cet article">Obsolescence chiffrée</a> (2021-05-13)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>On September 30, there will be a change in how older browsers and devices trust Let’s Encrypt certificates, resulting in a <mark>minor decrease</mark> in compatibility. -- The Let’s Encrypt team</p>
<p><cite>Un courriel adressé à toutes les personnes ayant généré des certificats Let’s Encrypt (incluant indirectement cet espace)</cite></p>
</blockquote>
<p>C’est un bon rappel que <a href="https://letsencrypt.org/docs/dst-root-ca-x3-expiration-september-2021/">HTTPS crée de l’obsolescence</a> (<a href="/david/cache/2021/372cdbf3dc67c7796673bec4aaeb9f0f/">cache</a>) en ne supportant plus des périphériques plus anciens (au même titre qu’un système d’exploitation par exemple). La durée acceptable semble être de 10&nbsp;ans dans le cas du compromis qui a été fait. Les personnes détentrices (<a href="https://letsencrypt.org/docs/certificate-compatibility/">entre beaucoup d’autres</a>) d’un iPhone 4&nbsp;ne pourront plus accéder à cet espace — et des millions d’autres — d’ici la fin de l’année et ça me rend triste.</p>
<p>Voir les <a href="/david/stream/2018/01/06/">épisodes</a> <a href="/david/stream/2018/01/10/">précédents</a> au <a href="/david/stream/2018/01/24/">sujet de HTTPS</a>.</p>

      </details>
    

    <h2><a href="/david/2021/05/03/" title="Lien permanent vers cet article">Pop culture</a> (2021-05-03)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>In other words: web dev is a pop culture with no regard for history, dooming each successive generation <mark>to repeat the blunders</mark> of the old, in a cycle of garbage software, wrapped in ever-escalating useless animations, transitions, and framework rewrites.</p>
<p><cite><em><a href="https://www.baldurbjarnason.com/2021/100-things-every-web-developer-should-know/">136&nbsp;facts every web dev should know before they burn out and turn to landscape painting or nude modelling</a></em> (<a href="/david/cache/2021/31c79c53679be6cc384f8610ae821c90/">cache</a>)</cite></p>
</blockquote>
<p>Il s’agit de l’idée que j’ai retenue parmi les 136&nbsp;énoncées mais il y en aurait d’autres sur lesquelles rebondir. Je crois que j’aime ces listes, ça me fait penser aux <a href="https://kk.org/thetechnium/68-bits-of-unsolicited-advice/">68</a> (<a href="/david/cache/2021/9f44d4e11b281dd3c1dc88b946b0d257/">cache</a>) + <a href="https://kk.org/thetechnium/99-additional-bits-of-unsolicited-advice/">99</a> (<a href="/david/cache/2021/d8a0172d0dc1fee3e2133a2edd15616e/">cache</a>) de Kevin Kelly.</p>
<p>Peut-être qu’un jour je partagerai ma propre liste. Elle parlerait forcément de chocolat.</p>

<blockquote lang="en">
<p>Advice like these are not laws. They are like hats. If one doesn’t fit, try another.</p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/04/27/" title="Lien permanent vers cet article">Cheminement</a> (2021-04-27)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote>
<p>Quand nous concevons des systèmes informatiques exposant un objet numérique, comme ce carnet Web. Nous représentons une interprétation. Mais ce qui est important n’est pas vraiment ce que j’écris maintenant. Mon interprétation, ma catégorisation n’ont pas tant le besoin d’une expression. Non, <mark>ce qui est époustouflant, c’est le chemin des mots.</mark> Quelqu’un prend un morceau de texte, une idée, et créé une autre interprétation. Autant de chemins que de lecteurs. Autant d’aventures et de passion que de personnes qui écrivent en ayant rencontré ce chemin. L’impermanence est le bouillon des envies des autres de bifurquer le chemin.</p>
<p><cite><em><a href="https://www.la-grange.net/2021/04/17/pluie">regarder la pluie tomber sur les surfeurs</a></em> (<a href="/david/cache/2021/9a8f56d9efefd5fa0bda187c76666403/">cache</a>)</cite></p>
</blockquote>
<p>Je prends le temps de <em>biforker</em> à mon tour ce chemin de traverse.</p>
<p>C’est marrant car on discutait il y a quelques jours avec <a href="https://nota-bene.org/">Stéphane</a> au sujet de la <a href="https://nota-bene.org/Contribution-au-monde-et-outils">façon de se définir</a> (<a href="/david/cache/2021/1b0510b90c1d90366209c631b7adb0be/">cache</a>) et ça m’a rappelé un de mes <a href="/david/blog/2016/passion-definition/">vieux articles</a> qui était probablement lui-même un rebond. Le plus intrigant étant de devenir parfois son propre rebond. Encore plus méta, se rendre compte que l’on a déjà écrit à ce (méta-)sujet. Un tour de <a href="/david/stream/2018/04/07/">spirale</a> de plus.</p>

      </details>
    

    <h2><a href="/david/2021/04/15/" title="Lien permanent vers cet article">Dark mode</a> (2021-04-15)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote>
<p>Je suis le cas typique du client qui a besoin obligatoirement d’un <em>light mode</em>, sans quoi je n’utilise plus l’application et/ou <mark>je ne consulte plus le site</mark> (c’est déjà arrivé, j’ai désinstallé l’application et fermé l’onglet de mon navigateur). Dans mon cas, le <em>dark mode</em>, contrairement à ce que dit [le document dont parlaient mes collègues], augmente très fortement ma fatigue oculaire. Au bout de trois lignes j’ai la rétine imprimée, des lignes qui flottent devant les yeux, c’est très désagréable.</p>
<p><cite><em><a href="https://nota-bene.org/Dark-mode-et-accessibilite">Dark mode et accessibilité</a></em> (<a href="/david/cache/2021/544ecea9397616a9f4cfcc6fe27afc3d/">cache</a>)</cite></p>
</blockquote>
<p>C’est la raison pour laquelle — même après avoir <a href="/david/2020/06/25/#paillasse">cédé à la mode du foncé</a> — je laisse la personne qui consulte cet espace choisir. Utiliser les préférences du système (<code>prefers-color-scheme</code>) me semble être insuffisant. Certain·es préfèrent un thème sombre sans pour autant vouloir lire du clair sur foncé, d’autres ne savent pas comment changer le thème au niveau du système.</p>
<p>Pour les astigmates (au moins certain·es en tout cas), ça semble être problématique tout ce qui est clair sur trop sombre, surtout la nuit. Et je crois que c’est un pourcentage non négligeable des internautes…</p>
<hr />
<p>Quelques jours plus tard, je tombe sur&nbsp;:</p>

<blockquote lang="en">
<p>People with astigmatism (approximately <mark>50% of the population</mark>) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the “deformed” lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.</p>
<p><cite><em><a href="https://tatham.blog/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/">Why light text on dark background is a bad idea</a></em> (<a href="/david/cache/2021/9f3a8d345963dac24bef4df547fef72c/">cache</a>)</cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/04/09/" title="Lien permanent vers cet article">Maximiser</a> (2021-04-09)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>When we simplify a system of interactions to a certain minimalism, we often trade choices for reductionism. We maximize the simplicity to the point of dumbing everything down. But do we always help? Creativity, emergence of patterns often lie in the hackability of a system. When we reduce the options for someone to use the system in unexpected ways, <mark>we remove the possibility for people to own a craft, a skill</mark>. We make them serve the system, instead of the system serving them.</p>
<p>We should try to create simple interfaces that maximize the possibility for people to create (creative entropy), being empowered, being autonomous.</p>
<p><cite><em><a href="https://www.otsukare.info/2021/03/29/dumb-down-danger">Maximizing Possible Outcomes In Simple Interfaces</a></em> (<a href="/david/cache/2021/8bef65b7167873d697f665dab2fdbb8b/">cache</a>)</cite></p>
</blockquote>
<p>Je me pose beaucoup de questions <del>en ce moment</del> sur ce que l’on essaye de rendre plus efficace et pourquoi. Parfois pour qui. Souvent à quoi bon.</p>
<p>Par exemple&nbsp;: qu’est-ce qui permettrait à chacun·e de publier quelque chose sur le web tout en ayant une part de contrôle sur ce qui est partagé&#8239;? Lorsqu’on démêle cette pelote, elle s’avère être très longue. Les connaissances à acquérir — autant sur le fond que sur la forme — sont assez gigantesques et ne cessent de l’être un peu plus chaque année. Et à force de tirer sur ce fil, on (je m’inclus dans ce mouvement) ne se rend pas compte que l’on perd pas mal de personnes qui ont la motivation pour être autonomes mais se cassent de plus en plus les dents au point de vouloir abandonner.</p>
<p>Au point de ne <em>pouvoir</em> continuer.</p>
<p>En rendant le Web inaccessible, sauf pour quelques élu·es, on sera tous perdant·es à moyen terme. Car ça signifie un Web de spécialisation et d’expertise qui nécessite(ra) d’être rémunéré pour être encore en mesure de publier quelque chose.</p>
<p>Cela me rend profondément triste. <strong>Impuissant.</strong></p>

<blockquote>
<p>Je souhaite que rien ne marche, que rien ne fonctionne, que tout soit cassé, qu’il y ait plein de bugs. Je voudrais des designers capables de concevoir des outils compliqués, contre-intuitifs et mal fonctionnant.</p>
<p><mark>Le non fonctionnement est la condition de la pensée critique.</mark></p>
<p><cite><em><a href="http://blog.sens-public.org/marcellovitalirosati/cequipourrait/fonctionnement.html"> Ce qui pourrait être autrement&nbsp;: éloge du non fonctionnement</a></em> (<a href="/david/cache/2021/9de00d1e64540434735417d59f2570fe/">cache</a>)</cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/04/06/" title="Lien permanent vers cet article">Antilivre</a> (2021-04-06)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote>
<p>L’antilivre n’a pas de forme, son impermanence dispose de toutes les formes, il se transforme sans cesse, et son information brute ne connaît aucune fixité, aucune frontière, elle fragmente son essence, distribue le commun, déploie sa liberté au-devant de nos singularités cybernétiques. Son identité fuit l’identique, sa norme la normalité, son extravagance n’image de mouvement qu’au travers de la nécessité de son partage.</p>
<p><cite><em><a href="https://www.antilivre.org/#manifeste">Antilivre</a></em> (<a href="/david/cache/2021/3e96aa14ff8f4e5e4dd4c42eec6fa0df/">cache</a>)</cite></p>
</blockquote>
<p>Se définir en «&nbsp;anti&nbsp;» n’est-il pas déjà donner une légitimité à l’existant et une faiblesse à la création&#8239;?</p>
<p>Il y a (et il y a eu) de très nombreuses initiatives pour tenter de rendre numérique un livre — ou plutôt sa lecture. Or ce besoin de transposition est un non-sujet&nbsp;: le Web est autre chose, incomparable si ce n’est par l’attention — et donc le temps — que l’on peut lui accorder. Il n’y a guère que les maisons d’édition qui tentent de conserver cette dichotomie, le plus souvent pour des enjeux financiers. Libérons les textes. Et les têtes. Pour penser de nouvelles <a href="/david/2021/03/31/" title="Formes">formes</a>.</p>
<hr />
<p>À l’échelle mondiale, est-ce que davantage de personnes allouent du temps à lire des livres ou des pages web dans une journée&#8239;? Dans quelle proportion&#8239;?</p>

      </details>
    

    <h2><a href="/david/2021/03/31/" title="Lien permanent vers cet article">Formes</a> (2021-03-31)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>Or rather, as a knowledge base or wiki develops, it should - just like a real city - encourage its users to gravitate towards these different fundamental elements. A page that starts to function a little bit like a road should transform into a slick navigation element, available on all its linked pages. A page which is functioning like a landmark should start being visible from two hops away.</p>
<p>It would be interesting to investigate exactly <mark>what the minimal level of physical appearance is required</mark> to trigger the automatic behaviour of loading/resetting human memory and associations.</p>
<p>Like, following a hyperlink might not activate the neurological automation.</p>
<p><cite><em><a href="https://interconnected.org/home/2021/03/31/maps">Clues for software design in how we sketch maps of cities</a></em> (<a href="/david/cache/2021/4dd972c7ed4d1f01f0d63956763134d1/">cache</a>)</cite></p>
</blockquote>
<p>Donner une forme aux agencement du Web, matérialiser les relations, prendre conscience des changements d’espaces. Combien d’années, décennies, siècles, seront nécessaires pour que notre cerveau s’adapte à ces nouvelles représentations&#8239;?</p>
<p><em>Si ce site avait une forme, quelle serait-elle&#8239;?</em> Et quelle fonction aurait-il dans un village&#8239;? Suis-je en train de crier dans une ruelle que je rêverais d’être un pont&#8239;? #ContrePèterie</p>

      </details>
    

    <h2><a href="/david/2021/03/28/" title="Lien permanent vers cet article">Smolstack</a> (2021-03-28)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>The “smol” net is the “small” net. It’s small because it is build for friends and friends of friends. It doesn’t have to scale to millions of people because those millions should build their own local small nets.</p>
<p><cite><em><a href="https://communitywiki.org/wiki/SmolNet">CommunityWiki: Smol Net</a></em> (<a href="/david/cache/2021/cd910565715dbc18d4b31ad60546a4a3/">cache</a>)</cite></p>
</blockquote>
<p>On me demandait <a href="/david/2021/03/23/" title="Recrutement">récemment</a> si je me considérais comme étant un développeur <em>fullstack</em>. Avec le recul, cette question m’a permis d’affiner ce que j’entends par ce terme et pourquoi je ne veux pas l’être. Je me suis aussi <a href="/david/blog/2017/web-developer/">replongé</a> dans mes <a href="/david/blog/2016/inclusive-developer/">archives</a> car le sujet n’est pas nouveau mais j’ai besoin de le revisiter régulièrement.</p>
<p>Ce que l’on entend traditionnellement par le terme <em>fullstack</em> me semble aller de l’orchestration de containers (incluant sécurité, disponibilité, redondance, etc.) à l’interface utilisateur·ice et à son expérience que l’on espère la plus pertinente possible (incluant l’accessibilité, les performances, etc.) en passant par le <em>backend</em> et le <em>frontend</em> qui apportent leur lot de connaissances à maîtriser et maintenir à jour. Mais ce n’est pas tant le périmètre en lui-même que l’appétence que l’on peut avoir pour l’ensemble de ce spectre qui est une attente qui <em>m</em>’est irréaliste.</p>
<p>Je vais maintenant essayer de définir ce que j’entends par <em>smolstack</em>, c’est brouillon et je vais probablement avoir besoin de plusieurs itérations&nbsp;:</p>
<ul>
<li>vérifier la pertinence des fonctionnalités avec des tests utilisateur·ices&#8239;;</li>
<li>réduire les dépendances au maximum et être guidé par le besoin plus que par la tendance actuelle&#8239;;</li>
<li>prendre le temps de faire le ménage à tous les niveaux&nbsp;: nouvelles attentes, évolution de dépendance, retrait de fonctionnalités, etc.&#8239;;</li>
<li>faire en sorte que les données soient accessibles au plus grand nombre (je vais avoir besoin de préciser ce point)&#8239;;</li>
<li>privilégier le statique tant que c’est possible, il n’y a rien qui soit plus performant et polyvalent&#8239;;</li>
<li>arbitrer la <a href="/david/blog/2017/bugs-complexite/">complexité</a> vis-à-vis de l’impact que cela va avoir sur les utilisateur·ices mais aussi la maintenance, la fiabilité et la légèreté du produit&#8239;;</li>
<li>documenter les choix techniques ainsi que les joies/échecs associés (journal d’équipe&#8239;?)&#8239;;</li>
<li>envisager l’essaimage plutôt que le passage à l’échelle.</li>
</ul>
<p>Je vais m’arrêter là pour ce soir, je n’ai pas l’ambition d’en faire un manifeste, ni la prétention d’en faire un terme consacré. Je le vois plus comme une ébauche <a href="/david/2021/03/26/" title="Stimulant">inspirante et vivante</a>. C’est incomplet à dessein. Et ce sera obsolète dès demain.</p>
<p><em>Keep smoling!</em> 😀</p>

<blockquote lang="en">
<p>That last bit is a bit of a concern as ageism is already strong enough in web development for 30&nbsp;to be considered old. <mark>The last thing I want is to be labelled a conservative old fogey in an industry dominated by novelty-seeking.</mark> Mostly because it really isn’t accurate. I really <em>do</em> enjoy some of the new developments in the field. So much so that I constantly have to fight the urge to start building projects using the latest bit of shiny.</p>
<p><cite><em><a href="https://www.baldurbjarnason.com/2021/which-kind-of-web-developer-are-you/">Which type of novelty-seeking web developer are you?</a></em> (<a href="/david/cache/2021/809290eb60d9bda55b427919091533f0/">cache</a>)</cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/03/22/" title="Lien permanent vers cet article">JavaScript-less</a> (2021-03-22)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>With a few minor omissions and links, you can create a site that <strong>works great in modern browsers with ES6+</strong> <em>and</em> <strong>acceptably in browsers without JavaScript</strong>. This approach is more sustainable for teams without the resources for extensive QA, and more beneficial to users of nonstandard browsers. […]<br />
The best way to help your IE11&nbsp;users is <mark>to provide a great experience for your non-JS users</mark> and share that experience with them, instead of sending them an untested and buggy experience that also slows the experience of users with modern browsers.</p>
<p><cite><em><a href="https://blog.carlmjohnson.net/post/2020/time-to-kill-ie11/">Dropping Support For IE11&nbsp;Is Progressive Enhancement</a></em> (<a href="/david/cache/2021/a9e4daf32281eaee0adaa39e32d28890/">cache</a>)</cite></p>
</blockquote>
<p>Je trouve cette approche particulièrement pertinente, un peu difficile avec une <abbr title="Single Page App">SPA</abbr> sans serveur tout de même. Et encore, il y aurait des choses à expérimenter&nbsp;: on peut potentiellement aller très loin en CSS uniquement avec des <code>:checked</code> par exemple. À voir à quel point est-ce que ça endommage l’accessibilité par ailleurs… les défis techniques hypothétiques sont parfois de fausses bonnes idées pour des usages qui sont eux bien réels.</p>
<p>Les tests utilisateur·ices sont une source intarissable de découvertes impensables. <em>Qu’il faut pourtant panser.</em></p>

      </details>
    

    <h2><a href="/david/2021/03/16/" title="Lien permanent vers cet article">Confort</a> (2021-03-16)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>Developers, particularly in Silicon Valley firms, are definitionally wealthy and enfranchised by world-historical standards. Like upper classes of yore, comfort (&quot;DX&quot;) comes with courtiers happy to declare how important comfort must surely be. It’s bunk, or at least most of it is.</p>
<p>As frontenders, <mark>our task is to make services that work well for all, not just the wealthy</mark>. If improvements in our tools or our comfort <em>actually</em> deliver improvements in that direction, so much the better. But we must never forget that measurable improvement for <em>users</em> is the yardstick.</p>
<p><cite><em><a href="https://infrequently.org/2021/03/the-performance-inequality-gap/">The Mobile Performance Inequality Gap, 2021</a></em> (<a href="/david/cache/2021/d3a653c926aa97707653300947b65ab5/">cache</a>)</cite></p>
</blockquote>
<p>Pour résumer, le budget réactualisé de la décence serait de <q>~100KiB (gzipped) of HTML/CSS/fonts and 300-350KiB of JavaScript on the wire (compressed)</q>. Un demi méga-octet transféré et si on a bien fait son travail on espère que ça ne donne pas une expérience trop fastidieuse en-deçà du 75<sup>e</sup> centile.</p>
<p>Je viens de vérifier et on est à 469&#8239;Ko sur <a href="https://mesconseilscovid.sante.gouv.fr/">MesConseilsCovid</a>. On a dû faire des choix assez drastiques pour cela&nbsp;: pas de <em>framework</em>, des dépendances limitées, etc. Est-ce que c’est inconfortable pour autant&#8239;? Parfois, et dans ces moments je me rappelle que mon «&nbsp;inconfort&nbsp;» est au service de l’accessibilité du produit pour lequel je travaille.</p>
<p>Et j’y accorde davantage d’importance.</p>

<blockquote lang="en">
<p>Getting there involves no small amount of class traitorship; <mark>the frontend community will need to value the commons over personal comfort</mark> for a little while longer to ease our ecosystem back toward health. The past 6&nbsp;years of consulting with partner teams has felt like a dark remake of Groundhog Day, with a constant parade of sites failing from the get-go thanks to Framework + Bundler + SPA architectures that are mismatched to the tasks and markets at hand. Time (and chips) can heal these wounds if we only let it. We only need to hold the line on script bloat for a few years for devices and networks to overtake the extreme, unconscionable excesses of the 2010’s.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/01/17/" title="Lien permanent vers cet article">Finesse</a> (2021-01-17)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote>
<p>Une <strong>espace fine insécable</strong> est un caractère typographique dont l’espace est un peu plus fine que l’espace insécable (une espace que l’on intercale entre deux parties qui ne doivent pas être séparées par un éventuel retour à la ligne automatique). Le code typographique français recommande une espace fine insécable devant les signes de ponctuation doubles sauf deux-points (point-virgule, point d’interrogation, point d’exclamation), et à l’intérieur des guillemets français pour les séparer du texte mis en exergue. Pour les nombres de quatre chiffres, l’espace fine insécable est préférable. On ne sépare pas les chiffres en tranches de trois pour un ordinal ou un numéro.</p>
<p><cite><a href="https://fr.wikipedia.org/wiki/Espace_fine_ins%C3%A9cable">Espace fine insécable</a>, sur Wikipedia</cite></p>
</blockquote>
<p>Il y a depuis peu des espaces insécables <em>fine</em> sur cet espace (en plus des insécables classiques lorsque j’y pensais). C’est un détail mais j’arrive à faire la distinction entre les deux maintenant que j’ai pris conscience de cette différence.</p>
<p><strong>Un petit pas de plus dans ma compréhension de ce domaine.</strong> Limite <em>snob</em> mais j’assume. Le plus difficile étant de faire la part des choses entre les différentes ressources à ce sujet qui ont tendance à se contre-dire (et je ne parle même pas des différences au sein de la francophonie…). Des choix — futiles donc indispensables — à faire, des affirmations à défaire, des raisonnements à refaire. C’est peut-être la définition de mon activité&#8239;!</p>

<blockquote>
<p>L’hypothèse selon laquelle le fonctionnement d’un système peut être amélioré par une intervention brutale sur ses éléments conscients traduit une <mark>dangereuse ignorance</mark>. Cette attitude fut trop longtemps celle des esprits qui se qualifient des épithètes de «&nbsp;scientifique&nbsp;» et de «&nbsp;technologues&nbsp;».</p>
<p><cite><em>Le Jihad Butlérien</em>, par Harq al-Ada (<a href="/david/2020/12/21/#dune">Dune</a> III. Les enfants de Dune)</cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/01/04/" title="Lien permanent vers cet article">Webing-lists</a> (2021-01-04)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p><mark>Newsletters killed blogs</mark> because…</p>
<ol>
<li>They’re impossibly easy to publish.</li>
<li>Your inbox is a notification stream.</li>
<li>Writers can actually, ya know, get paid.</li>
</ol>
<p>Alternatively, websites today…</p>
<ol>
<li>Are difficult to make.</li>
<li>Can’t notify people of new work.</li>
<li>Aren’t able to pay writers easily.</li>
</ol>
<p><cite><em><a href="https://www.robinrendle.com/essays/newsletters">Newsletters</a></em> (<a href="/david/cache/2021/99c13c692ec7f2217311fdea482e8792/">cache</a>)</cite></p>
</blockquote>
<p>Il y a de petites graines dans ces réflexions. Ce qui est ironique c’est que les raisons évoquées sont d’ordre technique alors que techniquement elles ont été — plus ou moins bien — résolues. <strong>C’est l’usage qu’il manque.</strong> Et l’effet de mode (les deux étant liés de toute façon). Dans une liste de diffusion, il y a justement… la liste qui donne une métrique permettant à l’auteur·ice d’avoir un semblant de contrôle sur qui lit. Avec un <a href="/david/blog/2019/flux-rss/">flux RSS</a>, il est de plus en plus difficile de savoir qui lie<sup>*</sup> tellement tout cela se passe dans les boîtes noires que deviennent les réseaux sociaux.</p>
<p>* on a là une différence importante également, l’impossibilité de lier vers un contenu qui a été envoyé par courriel, les listes de diffusion ne disposant pas toutes d’archives web.</p>
<p>Aussi, mon navigateur est équipé d’extensions me permettant de bloquer l’enregistrement des mes actions relatives à une page. Ce n’est pas le cas de mon client email. C’est la <a href="/david/2020/02/07/#newsletters">raison pour laquelle</a> je me désabonne de beaucoup de listes de diffusion qui contiennent des liens destinés à me tracer. J’aimerais pouvoir dire à une personne que je l’ai lue et écoutée sans alimenter pour autant une usine à collecte de données personnelles. C’est peut-être là que réside l’innovation…</p>
<p>Karl en parle aussi, le lendemain (des bienfaits d’une publication décalée 🙂)&nbsp;:</p>

<blockquote>
<p>L’email est un système de push et cela change beaucoup de choses. <mark>Il y a une notion d’intimité qui est importante et qui définit un plus grand contrôle.</mark> La newsletter n’atteint pas potentiellement tout le monde, uniquement ceux qui ont voulu s’inscrire (et potentiellement payer). Créer un site Web intime, c’est à dire gérer le contrôle d’accès est plus difficile.</p>
<p><cite><em><a href="https://www.la-grange.net/2021/01/05/newsletter">cher vous</a></em> (<a href="/david/cache/2021/5f4b0220be54d83f711a78b356c73a68/">cache</a>)</cite></p>
</blockquote>

      </details>
    

</main>


<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>