2 months ago · a261bcb7e6
--- a/cache/2024/1fe484434058e9c44d21bfebb0ddba31/index.html
+++ b/cache/2024/1fe484434058e9c44d21bfebb0ddba31/index.html
@@ -0,0 +1,205 @@
 <!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>ce que nous laissons (archive) — David Larlet</title>
 <meta name="description" content="Publication mise en cache pour en conserver une trace.">
 <!-- That good ol' feed, subscribe :). -->
 <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
 <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
 <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
 <link rel="manifest" href="/static/david/icons2/site.webmanifest">
 <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
 <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
 <meta name="msapplication-TileColor" content="#f7f7f7">
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
 <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
 <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
 <meta name="robots" content="noai, noimageai">
 <!-- Documented, feel free to shoot an email. -->
 <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
 </script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.la-grange.net/2024/01/23/legacy">

 <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>ce que nous laissons</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://www.la-grange.net/2024/01/23/legacy" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-01-28
    </p>
  </nav>
  <hr>
  <figure>
  <img src="https://www.la-grange.net/2024/01/23/3152-ciel.jpg" alt="Ciel nuageux au dessus de maisons. On ne voit que le premier étage des maisons.">
  <figcaption>Sugamo, Japon, 23 janvier 2024</figcaption>
 </figure>
 <blockquote>
 <p>L'herbe est porteuse d'origine, elle semble garder la saveur des premiers temps du monde.<br>
 — La fraîcheur de l'herbe, Alain Corbin, urn:isbn:978-2-8185-0589-2</p>
 </blockquote>
 <p>Nous en avons souvent parlé avec <a href="https://nota-bene.org">Stéphane</a>, <a href="https://larlet.fr/david/">David</a>, etc. à propos de l'après. De la légation de nos blogs dans le futur, que faire de ces choses numériques pour qu'elles survivent après nous —le doivent-elles ?— donc je trouve (toujours chez <a href="https://tess.oconnor.cx/">Tess</a>, pack a punch comme ils disent) cet article sur <a href="https://cagrimmett.com/2023/11/04/domain-longevity/">How can we keep domains working long after our death?</a>. Dans ce cas, il s'agit de conserver le nom de domaine. <a href="https://www.w3.org/Provider/Style/URI">Cool URIs don't change</a>, mais cependant nous ne sommes pas propriétaires de nos noms de domaine. Nous louons notre présence sur le Web.</p>
 <p>La résilience de l'imprimé est intéressante à ce propos, plus de courant, toujours utilisable à la lumière du jour, mais pas uniquement, la forte propension de certains contenus à résister dans le domaine de l'écrit physique est</p>
 <ul>
 <li>la quantité à laquelle ils ont été reproduits,</li>
 <li>la distribution en de nombreux points distants,</li>
 <li>la préservation dans des lieux de mémoire (musée, bibliothèque, archive)</li>
 </ul>
 <p>Il y a une époque, Liliane imprimait toutes les pages de mon blog. J'ai souvent envisagé d'imprimer tout le contenu du blog par année dans un livre en impressions à la demande que je pourrais envoyer aux amis ou famille. Il y a un temps la <a href="https://bnf.fr/">Bibliothèque Nationale de France</a> archivait ce site, je ne sais pas s'ils le font toujours ou pas. Mais le dépot du site vers des insituts de mémoire comme <a href="https://web.archive.org/">archive.org</a>. Je ne sais pas ce qui est le plus important, préserver un nom de domaine n'est qu'une partie. Préserver le contenu derrière le nom de domaine est plus difficile. Il faut penser serveurs, mise à jour de sécurité, les technologies utilisées, etc.</p>
 <p>Le No JS pour les sites Web est rarement mentionné pour la longévité du contenu. Et pourtant c'est une pièce fondamentale.</p>
 <p>Peut-être il serait plus important de penser à ce que les autres voudront préserver plutôt que de penser à ce que nous voulons transmettre. De même que voulons nous préserver des générations antérieures pour nous aider à mieux penser notre propre disparition.</p>
 <hr>
 <p><a href="https://werd.io/2023/leaving-the-nazi-bar">Les gens biens aux idées puantes</a>, partagé par <a href="https://tess.oconnor.cx/2024/01/tumbleweeds">Tess</a>, m'est arrivé une fois quand le développement de <a href="http://normandieweb.org">Normandie Web</a> était actif. Une personne très active sur l'histoire de la Normandie a révélé petit à petit le nazi qu'il était. Il faut parfois être très vigilant.</p>
 <hr>
 <p><a href="https://localghost.dev/blog/sending-webmentions-from-a-static-site/">webmentions pour site statique</a></p>
 <hr>
 <p><a href="https://www.youtube.com/watch?v=GTMt4m96_hY">Teenagers from outer space</a> (1959). Tout un programme.</p>
 <hr>
 <p><a href="https://carnet.fabriquedunumerique.org/les-editions-cartoneras-innovation-editoriale-et-fabrication-artisanale-de-livres-dans-une-perspective-sociale-et-ecologique/">Les éditions « cartoneras » : innovation éditoriale et fabrication artisanale de livres dans une perspective sociale et écologique</a> via <a href="https://mastodon.cloud/@reneaudet@mamot.fr/111800175336291625">René Audet</a></p>
 <blockquote>
 <p>Présentée comme « l’une des pratiques éditoriales les plus révolutionnaires de ces dernières années 6», les Éditions Eloísa Cartonera fabriquent ainsi des livres ayant un « aspect rudimentaire » : les couvertures sont faites en carton recyclé et peintes à la main, les pages sont photocopiées ou imprimées à la maison, puis maintenues par des agrafes ou collées à la couverture7. À cela s’ajoute une production aux tirages limités qui dépend directement de la demande.</p>
 </blockquote>
 </article>


 <hr>

 <footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
 </footer>
 <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
 <script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
 </script>
 </body>
 </html>
--- a/cache/2024/1fe484434058e9c44d21bfebb0ddba31/index.md
+++ b/cache/2024/1fe484434058e9c44d21bfebb0ddba31/index.md
@@ -0,0 +1,34 @@
 title: ce que nous laissons
 url: https://www.la-grange.net/2024/01/23/legacy
 hash_url: 1fe484434058e9c44d21bfebb0ddba31
 archive_date: 2024-01-28

 <figure>
  <img src="https://www.la-grange.net/2024/01/23/3152-ciel.jpg" alt="Ciel nuageux au dessus de maisons. On ne voit que le premier étage des maisons.">
  <figcaption>Sugamo, Japon, 23 janvier 2024</figcaption>
 </figure>
 <blockquote>
 <p>L'herbe est porteuse d'origine, elle semble garder la saveur des premiers temps du monde.<br>
 — La fraîcheur de l'herbe, Alain Corbin, urn:isbn:978-2-8185-0589-2</p>
 </blockquote>
 <p>Nous en avons souvent parlé avec <a href="https://nota-bene.org">Stéphane</a>, <a href="https://larlet.fr/david/">David</a>, etc. à propos de l'après. De la légation de nos blogs dans le futur, que faire de ces choses numériques pour qu'elles survivent après nous —le doivent-elles ?— donc je trouve (toujours chez <a href="https://tess.oconnor.cx/">Tess</a>, pack a punch comme ils disent) cet article sur <a href="https://cagrimmett.com/2023/11/04/domain-longevity/">How can we keep domains working long after our death?</a>. Dans ce cas, il s'agit de conserver le nom de domaine. <a href="https://www.w3.org/Provider/Style/URI">Cool URIs don't change</a>, mais cependant nous ne sommes pas propriétaires de nos noms de domaine. Nous louons notre présence sur le Web.</p>
 <p>La résilience de l'imprimé est intéressante à ce propos, plus de courant, toujours utilisable à la lumière du jour, mais pas uniquement, la forte propension de certains contenus à résister dans le domaine de l'écrit physique est</p>
 <ul>
 <li>la quantité à laquelle ils ont été reproduits,</li>
 <li>la distribution en de nombreux points distants,</li>
 <li>la préservation dans des lieux de mémoire (musée, bibliothèque, archive)</li>
 </ul>
 <p>Il y a une époque, Liliane imprimait toutes les pages de mon blog. J'ai souvent envisagé d'imprimer tout le contenu du blog par année dans un livre en impressions à la demande que je pourrais envoyer aux amis ou famille. Il y a un temps la <a href="https://bnf.fr/">Bibliothèque Nationale de France</a> archivait ce site, je ne sais pas s'ils le font toujours ou pas. Mais le dépot du site vers des insituts de mémoire comme <a href="https://web.archive.org/">archive.org</a>. Je ne sais pas ce qui est le plus important, préserver un nom de domaine n'est qu'une partie. Préserver le contenu derrière le nom de domaine est plus difficile. Il faut penser serveurs, mise à jour de sécurité, les technologies utilisées, etc.</p>
 <p>Le No JS pour les sites Web est rarement mentionné pour la longévité du contenu. Et pourtant c'est une pièce fondamentale.</p>
 <p>Peut-être il serait plus important de penser à ce que les autres voudront préserver plutôt que de penser à ce que nous voulons transmettre. De même que voulons nous préserver des générations antérieures pour nous aider à mieux penser notre propre disparition.</p>
 <hr>
 <p><a href="https://werd.io/2023/leaving-the-nazi-bar">Les gens biens aux idées puantes</a>, partagé par <a href="https://tess.oconnor.cx/2024/01/tumbleweeds">Tess</a>, m'est arrivé une fois quand le développement de <a href="http://normandieweb.org">Normandie Web</a> était actif. Une personne très active sur l'histoire de la Normandie a révélé petit à petit le nazi qu'il était. Il faut parfois être très vigilant.</p>
 <hr>
 <p><a href="https://localghost.dev/blog/sending-webmentions-from-a-static-site/">webmentions pour site statique</a></p>
 <hr>
 <p><a href="https://www.youtube.com/watch?v=GTMt4m96_hY">Teenagers from outer space</a> (1959). Tout un programme.</p>
 <hr>
 <p><a href="https://carnet.fabriquedunumerique.org/les-editions-cartoneras-innovation-editoriale-et-fabrication-artisanale-de-livres-dans-une-perspective-sociale-et-ecologique/">Les éditions « cartoneras » : innovation éditoriale et fabrication artisanale de livres dans une perspective sociale et écologique</a> via <a href="https://mastodon.cloud/@reneaudet@mamot.fr/111800175336291625">René Audet</a></p>
 <blockquote>
 <p>Présentée comme « l’une des pratiques éditoriales les plus révolutionnaires de ces dernières années 6», les Éditions Eloísa Cartonera fabriquent ainsi des livres ayant un « aspect rudimentaire » : les couvertures sont faites en carton recyclé et peintes à la main, les pages sont photocopiées ou imprimées à la maison, puis maintenues par des agrafes ou collées à la couverture7. À cela s’ajoute une production aux tirages limités qui dépend directement de la demande.</p>
 </blockquote>
--- a/cache/2024/790f724c45b26de460f9eeac04d48884/index.html
+++ b/cache/2024/790f724c45b26de460f9eeac04d48884/index.html
@@ -0,0 +1,241 @@
 <!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>carnet d'archéologue (archive) — David Larlet</title>
 <meta name="description" content="Publication mise en cache pour en conserver une trace.">
 <!-- That good ol' feed, subscribe :). -->
 <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
 <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
 <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
 <link rel="manifest" href="/static/david/icons2/site.webmanifest">
 <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
 <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
 <meta name="msapplication-TileColor" content="#f7f7f7">
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
 <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
 <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
 <meta name="robots" content="noai, noimageai">
 <!-- Documented, feel free to shoot an email. -->
 <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
 </script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.la-grange.net/2024/01/22/carnet">

 <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>carnet d'archéologue</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://www.la-grange.net/2024/01/22/carnet" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-01-28
    </p>
  </nav>
  <hr>
  <figure>
  <img src="https://www.la-grange.net/2024/01/20/3134-carnets.jpg" alt="Carnets de notes en archéologie écrit en japonais avec des dessins.">
  <figcaption>Shibuya, Japon, 22 janvier 2024</figcaption>
 </figure>
 <blockquote>
 <p>Je ne vais plus à la pêche, à la place j'écris un livre.<br>
 — La somme de nos folies, Shih-Li Kow, urn:isbn:9-791038-702059</p>
 </blockquote>
 <p>Une de mes fétichisations romantiques est le métier d'archéologue. Elle tient profondément aux carnets de notes de terrain, de la pratique du métier.</p>
 <p>Je crois que nombre d'enseignements dans les écoles dès la plus jeune enfance jusqu'à la fin du lycée ratent le coche de la pratique du métier, non pas le sujet mais comment est fabriqué le sujet, dans quels environnements, par quelles pratiques, outils, etc.</p>
 <p>Que ce soit de l'histoire, de la littérature, des mathématiques et même des sciences qui sont pourtant plus appliquées. Un de mes plaisirs quand j'étudiais l'astrophysique à l'université de Montréal était de tenir des carnets de notes de mes observations, réflexions, cours qui ressemblaient à un carnet de scientifiques du siècle passé, un carnet d'archéologue.</p>
 <hr>
 <p><a href="https://annesavelli.fr/semainier/article/en-tete">En tête</a> par Anne Savelli.</p>
 <blockquote>
 <p>Est-ce que je m’éparpille ? Je travaille des heures pour rien (rien qui ne possède, sur l’instant, une action concrète, que je puisse mesurer) puis je sors faire une course. Dans la rue, je jette un oeil, méthodiquement, à chaque boutique que je croise. Ce qui m’intéresse, ce ne sont pas les vitrines, mais ce qui se passe à l’intérieur de ces lieux étroits (optique, pressing, retouches, immobilier, vêtements "de marques", cigarettes électroniques). Qu’y voit-on ? Toujours la même chose : au fond de la pièce, assise, debout, une personne est penchée sur son téléphone.</p>
 </blockquote>
 <p>De la normalisation de nos postures. Enfants nous regardions le ciel puisqu'en haut, il y a les adultes. Et dans le même geste, nous apercevions les plafonds, l'architecture haute des bâtiments. Adultes, nous regardions loin devant nous pour interroger nos horizons, mais depuis quelques années, nous avons baisser nos têtes. Nos cous ne sont plus droits, inclinés à 30 degrées tendus vers le bas dans la direction de l'objet tenu dans la paume de nos mains. Nous ne relevons la tête que pour prendre un autoportrait ou se recoiffer dans ce miroir numérique. Nous partageons tous nos cous intensément tendus. Nous oublions même de regarder le sol, encore moins l'humanité qui nous entoure.</p>
 <hr>
 <p><a href="https://blog.webpagetest.org/posts/will-html-content-make-site-faster/">Will Serving Real HTML Content Make A Website Faster? Let's Experiment!</a> (<a href="https://www.standblog.org/blog/post/2024/01/21/En-vrac-de-janvier-2024">via Tristan</a>)</p>
 <blockquote>
 <p>And that situation tends to put us in a bind: it's one thing to suspect that a change will improve performance, and another thing to be able to see the impact for yourself. For many sites, the changes involved in generating HTML on the server instead of the client can be quite complicated, making them difficult to prototype, let alone change in production.</p>
 </blockquote>
 <p>Je veux croire à ce billet, mais il y a également une différence à prendre en compte, la plupart de ces tests de première navigation sur des sites conçus pour des visites récurrentes et fréquentes. J'aurais aimé une seconde batterie de tests une fois que les ressources sont mises en cache. Ceci il y a de nombreuses raisons de ne pas ajouter trop de dépendances à JS.</p>
 <hr>
 <p><a href="https://rhodesmill.org/skyfield/">skyfield</a> (python)</p>
 <blockquote>
 <p>Skyfield computes positions for the stars, planets, and satellites in orbit around the Earth. Its results should agree with the positions generated by the United States Naval Observatory and their Astronomical Almanac to within 0.0005 arcseconds (half a “mas” or milliarcsecond).</p>
 </blockquote>
 <hr>
 <p>Un de mes films préférés de l'année 2023 fût <a href="https://www.theguardian.com/film/2023/dec/22/greta-lee-on-past-lives-seeing-an-asian-woman-15ft-high-felt-so-radical-and-really-dangerous">Past Lives</a> avec l'actrice Greta Lee.</p>
 <hr>
 <p><a href="https://archive.is/OsFWx#selection-4377.0-4425.161">I Am Going to Miss Pitchfork, but That’s Only Half the Problem</a> (<a href="https://www.nytimes.com/2024/01/21/opinion/pitchfork-gq-internet-media.html">source originale</a>)</p>
 <blockquote>
 <p>Sports Illustrated just laid off most of its staff. BuzzFeed News is gone. HuffPost has shrunk. Jezebel was shut down (then partly resurrected). Vice is on life support. Popular Science is done. U.S. News &amp; World Report shuttered its magazine and is basically a college ranking service now. Old Gawker is gone and so too is New Gawker. FiveThirtyEight sold to ABC News and then had its staff and ambitions slashed. Grid News was bought out by The Messenger, which is now reportedly “out of money.” Fusion failed. Vox Media — my former home, where I co-founded Vox.com, and a place I love — is doing much better than most, but has seen huge layoffs over the past few years.</p>
 </blockquote>
 <p>Ceci dit tous ces titres ne sont pas forcément une perte.</p>
 <blockquote>
 <p>But a global market creates a Winner-Takes-More dynamic. Most people will subscribe to only one news outlet, if that. And they will pick the subscription that delivers the most value. The more subscribers that market leader gets, the more money and reach it has to attract the best staff and expand its offerings.</p>
 </blockquote>
 <p>C'est une question que je me pose souvent. Je n'ai pas de problèmes à aller dans un kiosque à journaux et acheter un journal papier. Mais payer un abonnement hebdomadaire ou mensuel est toujours bien trop compliqué et trop engageant. Quand on achète dans une pièce unique, la transaction commence et finit dans l'instant de l'achat. Il n'y a pas de traces. Il n'y a pas de traques. Il n'y a pas d'obligations. Cet acte là sur internet est toujours difficile.</p>
 <p><img src="https://www.la-grange.net/2024/01/22/nytimes.png" alt="Page des abonnements du site Web du NY Times."></p>
 <p>On ne me propose pas un micro-achat pour cette édition du jour ou pour cet article. Il est proposé un abonnement récurrent au coût de $0.50/semaine en fait $2 toutes les 4 semaines pour les 6 premiers mois. Et surtout bien lire les termes…</p>
 <blockquote>
 <p>Offer for a New York Times All Access subscription; current subscribers not eligible. Subscription excludes print edition. Some games may be available without a subscription. For a monthly subscription, your payment method will automatically be charged in advance the introductory rate every 4 weeks for 6 months, and after 6 months the standard rate every 4 weeks. For annual subscriptions, your payment method will automatically be charged in advance the introductory rate once for the first year, and the standard rate once yearly thereafter. Your subscription will continue until you cancel. Cancellation takes effect at the end of your current billing period. Taxes may apply. Offer terms are subject to change.</p>
 </blockquote>
 <p>Et <a href="https://help.nytimes.com/hc/en-us/articles/115014893968-Terms-of-sale#cancellation">toutes les conditions pour annuler</a>. Cela ne fonctionne pas.</p>

 <p>Aucun ne propose la possibilité d'un achat sans traques. Le monde physique de la transaction commerciale a encore des propriétés intéressantes que le monde numérique n'a pas encore su complètement saisir.</p>
 <hr>
 <p>En passant en parlant du Devoir, <a href="https://www.ledevoir.com/societe/805733/services-publics-faut-il-deneiger-moins-montreal?"> Faut-il déneiger moins à Montréal ? </a></p>
 <blockquote>
 <p>En 2023, la facture du déneigement s’est élevée à quelque 245 millions de dollars, indique la Ville. Mais cette somme n’inclut pas les frais indirects tels que les dommages causés au mobilier urbain, l’usure des infrastructures souterraines attribuable au sel de voirie et le traitement des eaux usées en lien avec la neige ramassée.</p>
 </blockquote>
 <p>[…]</p>
 <blockquote>
 <p>D’autres villes dans le monde reçoivent beaucoup de neige, mais bien peu en font autant que Montréal, note Olivier Legault, cofondateur du Laboratoire de l’hiver, à Montréal. Selon lui, la Ville pourrait envisager de charger des quantités moins importantes de neige dans certaines rues. Et elle pourrait demander davantage d’implication de la part des citoyens.</p>
 <p>Il cite le cas de la ville de Sapporo au Japon, qui compte 1,9 million d’habitants et qui reçoit plus de 400 cm de neige, mais également beaucoup de pluie. « <strong>Ils ont un système de déneigement qui mise beaucoup sur l’implication citoyenne</strong>. Les citoyens doivent dégager le trottoir devant leur résidence, comme c’est le cas à Calgary et à Boston. Ici, à Montréal, on est gâtés pourris. On va se le dire. »</p>
 </blockquote>
 <hr>
 <p>Mot d'enfant : Je lui dis si tu devais te définir en dehors de ton prénom et nom, que dirais-tu ? Qu'est-ce qui est toi ? Et comme d'habitude avec les enfants, la réponse m'a pris totalement à contrepied…</p>
 <p>« C'est difficile parce que je n'ai pas encore de travail. »</p>
 <p>Je ne sais pas encore très bien comment absorber cela. :) Je me pose de sérieuses questions sur l'image que nous renvoyons à notre enfant.</p>
 <hr>
 <p>Question du soir entre nous : <strong>Pourquoi dit-on un « trailer » en anglais pour les bandes-annonces de cinéma ?</strong> Un trailer c'est ce que l'on met à l'arrière d'une voiture (comme une remorque). Or les bandes annonces sont avant la diffusion du film temporellement et également physiquement au cinéma. La <a href="https://en.wikipedia.org/wiki/Trailer_(promotion">réponse</a>) est parce que cela n'a pas toujours été le cas justement au cinéma. Les trailers étaient diffusés après le film comme une invitation à aller voir autre chose maintenant que vous avez vu cela. L'habitude culturelle du film n'existait pas encore vraiment. D'ailleurs le premier trailer était une annonce pour un spectacle de Broadway.</p>
 <p>Du coup, je me demande la variété lexicale et sémantique des bande-annonces à travers les pays.</p>
 </article>


 <hr>

 <footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
 </footer>
 <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
 <script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
 </script>
 </body>
 </html>
--- a/cache/2024/790f724c45b26de460f9eeac04d48884/index.md
+++ b/cache/2024/790f724c45b26de460f9eeac04d48884/index.md
@@ -0,0 +1,70 @@
 title: carnet d'archéologue
 url: https://www.la-grange.net/2024/01/22/carnet
 hash_url: 790f724c45b26de460f9eeac04d48884
 archive_date: 2024-01-28
    
 <figure>
  <img src="https://www.la-grange.net/2024/01/20/3134-carnets.jpg" alt="Carnets de notes en archéologie écrit en japonais avec des dessins.">
  <figcaption>Shibuya, Japon, 22 janvier 2024</figcaption>
 </figure>
 <blockquote>
 <p>Je ne vais plus à la pêche, à la place j'écris un livre.<br>
 — La somme de nos folies, Shih-Li Kow, urn:isbn:9-791038-702059</p>
 </blockquote>
 <p>Une de mes fétichisations romantiques est le métier d'archéologue. Elle tient profondément aux carnets de notes de terrain, de la pratique du métier.</p>
 <p>Je crois que nombre d'enseignements dans les écoles dès la plus jeune enfance jusqu'à la fin du lycée ratent le coche de la pratique du métier, non pas le sujet mais comment est fabriqué le sujet, dans quels environnements, par quelles pratiques, outils, etc.</p>
 <p>Que ce soit de l'histoire, de la littérature, des mathématiques et même des sciences qui sont pourtant plus appliquées. Un de mes plaisirs quand j'étudiais l'astrophysique à l'université de Montréal était de tenir des carnets de notes de mes observations, réflexions, cours qui ressemblaient à un carnet de scientifiques du siècle passé, un carnet d'archéologue.</p>
 <hr>
 <p><a href="https://annesavelli.fr/semainier/article/en-tete">En tête</a> par Anne Savelli.</p>
 <blockquote>
 <p>Est-ce que je m’éparpille ? Je travaille des heures pour rien (rien qui ne possède, sur l’instant, une action concrète, que je puisse mesurer) puis je sors faire une course. Dans la rue, je jette un oeil, méthodiquement, à chaque boutique que je croise. Ce qui m’intéresse, ce ne sont pas les vitrines, mais ce qui se passe à l’intérieur de ces lieux étroits (optique, pressing, retouches, immobilier, vêtements "de marques", cigarettes électroniques). Qu’y voit-on ? Toujours la même chose : au fond de la pièce, assise, debout, une personne est penchée sur son téléphone.</p>
 </blockquote>
 <p>De la normalisation de nos postures. Enfants nous regardions le ciel puisqu'en haut, il y a les adultes. Et dans le même geste, nous apercevions les plafonds, l'architecture haute des bâtiments. Adultes, nous regardions loin devant nous pour interroger nos horizons, mais depuis quelques années, nous avons baisser nos têtes. Nos cous ne sont plus droits, inclinés à 30 degrées tendus vers le bas dans la direction de l'objet tenu dans la paume de nos mains. Nous ne relevons la tête que pour prendre un autoportrait ou se recoiffer dans ce miroir numérique. Nous partageons tous nos cous intensément tendus. Nous oublions même de regarder le sol, encore moins l'humanité qui nous entoure.</p>
 <hr>
 <p><a href="https://blog.webpagetest.org/posts/will-html-content-make-site-faster/">Will Serving Real HTML Content Make A Website Faster? Let's Experiment!</a> (<a href="https://www.standblog.org/blog/post/2024/01/21/En-vrac-de-janvier-2024">via Tristan</a>)</p>
 <blockquote>
 <p>And that situation tends to put us in a bind: it's one thing to suspect that a change will improve performance, and another thing to be able to see the impact for yourself. For many sites, the changes involved in generating HTML on the server instead of the client can be quite complicated, making them difficult to prototype, let alone change in production.</p>
 </blockquote>
 <p>Je veux croire à ce billet, mais il y a également une différence à prendre en compte, la plupart de ces tests de première navigation sur des sites conçus pour des visites récurrentes et fréquentes. J'aurais aimé une seconde batterie de tests une fois que les ressources sont mises en cache. Ceci il y a de nombreuses raisons de ne pas ajouter trop de dépendances à JS.</p>
 <hr>
 <p><a href="https://rhodesmill.org/skyfield/">skyfield</a> (python)</p>
 <blockquote>
 <p>Skyfield computes positions for the stars, planets, and satellites in orbit around the Earth. Its results should agree with the positions generated by the United States Naval Observatory and their Astronomical Almanac to within 0.0005 arcseconds (half a “mas” or milliarcsecond).</p>
 </blockquote>
 <hr>
 <p>Un de mes films préférés de l'année 2023 fût <a href="https://www.theguardian.com/film/2023/dec/22/greta-lee-on-past-lives-seeing-an-asian-woman-15ft-high-felt-so-radical-and-really-dangerous">Past Lives</a> avec l'actrice Greta Lee.</p>
 <hr>
 <p><a href="https://archive.is/OsFWx#selection-4377.0-4425.161">I Am Going to Miss Pitchfork, but That’s Only Half the Problem</a> (<a href="https://www.nytimes.com/2024/01/21/opinion/pitchfork-gq-internet-media.html">source originale</a>)</p>
 <blockquote>
 <p>Sports Illustrated just laid off most of its staff. BuzzFeed News is gone. HuffPost has shrunk. Jezebel was shut down (then partly resurrected). Vice is on life support. Popular Science is done. U.S. News &amp; World Report shuttered its magazine and is basically a college ranking service now. Old Gawker is gone and so too is New Gawker. FiveThirtyEight sold to ABC News and then had its staff and ambitions slashed. Grid News was bought out by The Messenger, which is now reportedly “out of money.” Fusion failed. Vox Media — my former home, where I co-founded Vox.com, and a place I love — is doing much better than most, but has seen huge layoffs over the past few years.</p>
 </blockquote>
 <p>Ceci dit tous ces titres ne sont pas forcément une perte.</p>
 <blockquote>
 <p>But a global market creates a Winner-Takes-More dynamic. Most people will subscribe to only one news outlet, if that. And they will pick the subscription that delivers the most value. The more subscribers that market leader gets, the more money and reach it has to attract the best staff and expand its offerings.</p>
 </blockquote>
 <p>C'est une question que je me pose souvent. Je n'ai pas de problèmes à aller dans un kiosque à journaux et acheter un journal papier. Mais payer un abonnement hebdomadaire ou mensuel est toujours bien trop compliqué et trop engageant. Quand on achète dans une pièce unique, la transaction commence et finit dans l'instant de l'achat. Il n'y a pas de traces. Il n'y a pas de traques. Il n'y a pas d'obligations. Cet acte là sur internet est toujours difficile.</p>
 <p><img src="https://www.la-grange.net/2024/01/22/nytimes.png" alt="Page des abonnements du site Web du NY Times."></p>
 <p>On ne me propose pas un micro-achat pour cette édition du jour ou pour cet article. Il est proposé un abonnement récurrent au coût de $0.50/semaine en fait $2 toutes les 4 semaines pour les 6 premiers mois. Et surtout bien lire les termes…</p>
 <blockquote>
 <p>Offer for a New York Times All Access subscription; current subscribers not eligible. Subscription excludes print edition. Some games may be available without a subscription. For a monthly subscription, your payment method will automatically be charged in advance the introductory rate every 4 weeks for 6 months, and after 6 months the standard rate every 4 weeks. For annual subscriptions, your payment method will automatically be charged in advance the introductory rate once for the first year, and the standard rate once yearly thereafter. Your subscription will continue until you cancel. Cancellation takes effect at the end of your current billing period. Taxes may apply. Offer terms are subject to change.</p>
 </blockquote>
 <p>Et <a href="https://help.nytimes.com/hc/en-us/articles/115014893968-Terms-of-sale#cancellation">toutes les conditions pour annuler</a>. Cela ne fonctionne pas.</p>

 <p>Aucun ne propose la possibilité d'un achat sans traques. Le monde physique de la transaction commerciale a encore des propriétés intéressantes que le monde numérique n'a pas encore su complètement saisir.</p>
 <hr>
 <p>En passant en parlant du Devoir, <a href="https://www.ledevoir.com/societe/805733/services-publics-faut-il-deneiger-moins-montreal?"> Faut-il déneiger moins à Montréal ? </a></p>
 <blockquote>
 <p>En 2023, la facture du déneigement s’est élevée à quelque 245 millions de dollars, indique la Ville. Mais cette somme n’inclut pas les frais indirects tels que les dommages causés au mobilier urbain, l’usure des infrastructures souterraines attribuable au sel de voirie et le traitement des eaux usées en lien avec la neige ramassée.</p>
 </blockquote>
 <p>[…]</p>
 <blockquote>
 <p>D’autres villes dans le monde reçoivent beaucoup de neige, mais bien peu en font autant que Montréal, note Olivier Legault, cofondateur du Laboratoire de l’hiver, à Montréal. Selon lui, la Ville pourrait envisager de charger des quantités moins importantes de neige dans certaines rues. Et elle pourrait demander davantage d’implication de la part des citoyens.</p>
 <p>Il cite le cas de la ville de Sapporo au Japon, qui compte 1,9 million d’habitants et qui reçoit plus de 400 cm de neige, mais également beaucoup de pluie. « <strong>Ils ont un système de déneigement qui mise beaucoup sur l’implication citoyenne</strong>. Les citoyens doivent dégager le trottoir devant leur résidence, comme c’est le cas à Calgary et à Boston. Ici, à Montréal, on est gâtés pourris. On va se le dire. »</p>
 </blockquote>
 <hr>
 <p>Mot d'enfant : Je lui dis si tu devais te définir en dehors de ton prénom et nom, que dirais-tu ? Qu'est-ce qui est toi ? Et comme d'habitude avec les enfants, la réponse m'a pris totalement à contrepied…</p>
 <p>« C'est difficile parce que je n'ai pas encore de travail. »</p>
 <p>Je ne sais pas encore très bien comment absorber cela. :) Je me pose de sérieuses questions sur l'image que nous renvoyons à notre enfant.</p>
 <hr>
 <p>Question du soir entre nous : <strong>Pourquoi dit-on un « trailer » en anglais pour les bandes-annonces de cinéma ?</strong> Un trailer c'est ce que l'on met à l'arrière d'une voiture (comme une remorque). Or les bandes annonces sont avant la diffusion du film temporellement et également physiquement au cinéma. La <a href="https://en.wikipedia.org/wiki/Trailer_(promotion">réponse</a>) est parce que cela n'a pas toujours été le cas justement au cinéma. Les trailers étaient diffusés après le film comme une invitation à aller voir autre chose maintenant que vous avez vu cela. L'habitude culturelle du film n'existait pas encore vraiment. D'ailleurs le premier trailer était une annonce pour un spectacle de Broadway.</p>
 <p>Du coup, je me demande la variété lexicale et sémantique des bande-annonces à travers les pays.</p>
--- a/cache/2024/956819385548bba6e768563b12edc2d6/index.html
+++ b/cache/2024/956819385548bba6e768563b12edc2d6/index.html
@@ -0,0 +1,202 @@
 <!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>herbe (archive) — David Larlet</title>
 <meta name="description" content="Publication mise en cache pour en conserver une trace.">
 <!-- That good ol' feed, subscribe :). -->
 <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
 <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
 <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
 <link rel="manifest" href="/static/david/icons2/site.webmanifest">
 <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
 <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
 <meta name="msapplication-TileColor" content="#f7f7f7">
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
 <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
 <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
 <meta name="robots" content="noai, noimageai">
 <!-- Documented, feel free to shoot an email. -->
 <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
 </script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.la-grange.net/2024/01/24/herbe">

 <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>herbe</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://www.la-grange.net/2024/01/24/herbe" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-01-28
    </p>
  </nav>
  <hr>
  <figure>
  <img src="https://www.la-grange.net/2024/01/24/3154-herbe.jpg" alt="Couverte du livre la fraîcheur de l'herbe avec une illustration de graminées.">
  <figcaption>Komagome, Japon, 24 janvier 2024</figcaption>
 </figure>
 <blockquote>
 <p>L'herbe regarde l'homme. Elle lui parle ; et sa parole est celle de la nature.<br>
 — La fraîcheur de l'herbe, Alain Corbin, urn:isbn:978-2-8185-0589-2</p>
 </blockquote>
 <p>Enfant, je n'aimais pas l'herbe verte. Enfin… non. J'aimais l'herbe. Mon corps lui ne l'aimait pas beaucoup. Plaques rouges sur la peau, démangeaisons, il me fallait un plaid pour m'allonger au milieu des herbes. Mes yeux ont toujours aimé l'herbe, surtout hautes dans les champs abandonnés. J'ai de nombreux souvenirs d'herbes. De longues graminées chahutent le ciel dans un long mouvement à Saint-Philbert-sur-Risle dans les champs de La Buissonnière. Papillons et chardons, corps nu et libre entre les tiges séchées. En Malaisie, assis sous l'arbre à Rambutan de la maison à Penang, les petites feuilles rondes caressant les doigts. Pas de hauteur, que de la douceur et des fourmis. L'herbe roulée sous le corps de mon adolescence quand on dévale la pente, l'herbe applatie par une longue sieste, l'herbe fauchée avec la grande lame avec de larges mouvements de bras, l'herbe coquine qui dépasse sous la neige trop fine et qui ralentit soudainement la glisse interrompue et l'urgence de retrouver l'équilibre, l'herbe ondulée de la Risle à Montfort-sur-Risle sous le pont piéton que l'on observe longuement, l'herbe inattendue qui trouve un petit brin de soleil pour pousser dans la forêt près de La Grange entre les feuilles mortes, là où l'on attend le moins, l'herbe enfoncée par les crampons de Rugby du stade des Brûlins à Saint-Aubin-les-Elbeuf et qui se colle parfois aux épais maillots de coton bleu et blanc de l'équipe du CORE, l'herbe qui se fait oasis entre le goudron, le béton de la ville dans une cavité suffisamment humide pour survivre les pas de l'humanité pressée de Tokyo.</p>
 <hr>
 <p><a href="https://millsfield.sfomuseum.org/blog/2023/11/29/3d/"> Experiments in Photogrammetry </a></p>
 <hr>
 <p><a href="https://www.youtube.com/watch?v=6YTcILOAEZY">Tobie Langel – Does open source need its own Priority of Constituencies?</a></p>
 <hr>
 <p><a href="https://richardhanna.dev/blog/2023/ecoconception-ne-suffit-pas.html">Écoconception des services numériques, et si ça ne suffisait pas ?</a></p>
 <blockquote>
 <p>De grâce, arrêtons de qualifier les sites web éco-conçus de sites écologiques, qui préservent ou sauvent la planète. C’est ridicule et cela discrédite la démarche. Aucun site web ne sera jamais écologique, même celui qui affiche que 2 mots.</p>
 </blockquote>
 <hr>
 <p>Comment le site est conçu ?</p>

 <p>Ce qui me fait penser que cela fait plusieurs fois que je veux demander comment <a href="https://larlet.fr/david/">David</a> déploie son site.</p>
 <hr>
 <p><a href="https://www.stefanjudis.com/today-i-learned/oklch-perceived-lightness/">oklch() retains perceived lightness for different hue angles</a></p>
 <hr>
 <p><a href="https://svg.bradwoods.io/lessons/viewbox">A creative coding lesson. How the SVG ViewBox works</a></p>
 </article>


 <hr>

 <footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
 </footer>
 <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
 <script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
 </script>
 </body>
 </html>
--- a/cache/2024/956819385548bba6e768563b12edc2d6/index.md
+++ b/cache/2024/956819385548bba6e768563b12edc2d6/index.md
@@ -0,0 +1,32 @@
 title: herbe
 url: https://www.la-grange.net/2024/01/24/herbe
 hash_url: 956819385548bba6e768563b12edc2d6
 archive_date: 2024-01-28
    
 <figure>
  <img src="https://www.la-grange.net/2024/01/24/3154-herbe.jpg" alt="Couverte du livre la fraîcheur de l'herbe avec une illustration de graminées.">
  <figcaption>Komagome, Japon, 24 janvier 2024</figcaption>
 </figure>
 <blockquote>
 <p>L'herbe regarde l'homme. Elle lui parle ; et sa parole est celle de la nature.<br>
 — La fraîcheur de l'herbe, Alain Corbin, urn:isbn:978-2-8185-0589-2</p>
 </blockquote>
 <p>Enfant, je n'aimais pas l'herbe verte. Enfin… non. J'aimais l'herbe. Mon corps lui ne l'aimait pas beaucoup. Plaques rouges sur la peau, démangeaisons, il me fallait un plaid pour m'allonger au milieu des herbes. Mes yeux ont toujours aimé l'herbe, surtout hautes dans les champs abandonnés. J'ai de nombreux souvenirs d'herbes. De longues graminées chahutent le ciel dans un long mouvement à Saint-Philbert-sur-Risle dans les champs de La Buissonnière. Papillons et chardons, corps nu et libre entre les tiges séchées. En Malaisie, assis sous l'arbre à Rambutan de la maison à Penang, les petites feuilles rondes caressant les doigts. Pas de hauteur, que de la douceur et des fourmis. L'herbe roulée sous le corps de mon adolescence quand on dévale la pente, l'herbe applatie par une longue sieste, l'herbe fauchée avec la grande lame avec de larges mouvements de bras, l'herbe coquine qui dépasse sous la neige trop fine et qui ralentit soudainement la glisse interrompue et l'urgence de retrouver l'équilibre, l'herbe ondulée de la Risle à Montfort-sur-Risle sous le pont piéton que l'on observe longuement, l'herbe inattendue qui trouve un petit brin de soleil pour pousser dans la forêt près de La Grange entre les feuilles mortes, là où l'on attend le moins, l'herbe enfoncée par les crampons de Rugby du stade des Brûlins à Saint-Aubin-les-Elbeuf et qui se colle parfois aux épais maillots de coton bleu et blanc de l'équipe du CORE, l'herbe qui se fait oasis entre le goudron, le béton de la ville dans une cavité suffisamment humide pour survivre les pas de l'humanité pressée de Tokyo.</p>
 <hr>
 <p><a href="https://millsfield.sfomuseum.org/blog/2023/11/29/3d/"> Experiments in Photogrammetry </a></p>
 <hr>
 <p><a href="https://www.youtube.com/watch?v=6YTcILOAEZY">Tobie Langel – Does open source need its own Priority of Constituencies?</a></p>
 <hr>
 <p><a href="https://richardhanna.dev/blog/2023/ecoconception-ne-suffit-pas.html">Écoconception des services numériques, et si ça ne suffisait pas ?</a></p>
 <blockquote>
 <p>De grâce, arrêtons de qualifier les sites web éco-conçus de sites écologiques, qui préservent ou sauvent la planète. C’est ridicule et cela discrédite la démarche. Aucun site web ne sera jamais écologique, même celui qui affiche que 2 mots.</p>
 </blockquote>
 <hr>
 <p>Comment le site est conçu ?</p>

 <p>Ce qui me fait penser que cela fait plusieurs fois que je veux demander comment <a href="https://larlet.fr/david/">David</a> déploie son site.</p>
 <hr>
 <p><a href="https://www.stefanjudis.com/today-i-learned/oklch-perceived-lightness/">oklch() retains perceived lightness for different hue angles</a></p>
 <hr>
 <p><a href="https://svg.bradwoods.io/lessons/viewbox">A creative coding lesson. How the SVG ViewBox works</a></p>

--- a/cache/2024/a3ccfb51f65cd59f375d5424d243e012/index.html
+++ b/cache/2024/a3ccfb51f65cd59f375d5424d243e012/index.html
@@ -0,0 +1,323 @@
 <!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>In Praise of Buttons (archive) — David Larlet</title>
 <meta name="description" content="Publication mise en cache pour en conserver une trace.">
 <!-- That good ol' feed, subscribe :). -->
 <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
 <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
 <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
 <link rel="manifest" href="/static/david/icons2/site.webmanifest">
 <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
 <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
 <meta name="msapplication-TileColor" content="#f7f7f7">
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
 <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
 <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
 <meta name="robots" content="noai, noimageai">
 <!-- Documented, feel free to shoot an email. -->
 <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
 </script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.nubero.ch/blog/009/">

 <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>In Praise of Buttons</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://www.nubero.ch/blog/009/" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-01-28
    </p>
  </nav>
  <hr>
  <p>Form is Function in Graphical User Interfaces</p>
 <p class="paragraph">
 In any design discipline there are always certain trends. One of these trends seems to be that buttons are now considered uncool. It doesn’t matter if they are buttons on physical objects or in graphical user interfaces.
 </p>

 <p class="paragraph">
 Buttons aren’t new. And for exactly that reason, they are uncool. Like hammers and paperclips, they have been around for a long time and they work. In fact, they have been around for a long time <em>because</em> they work.
 </p>

 <p class="paragraph">
 That is a problem if you’re a dishonest designer. After all, how do you tell your client that you’ve just reinvented the wheel? You can’t just use boring old buttons in your shiny new product. So what do you do? You redesign the look or the function of a button (or both) and sell it as “the newest development in design” – totally disregarding the needs of the user and compromising your integrity as a designer along the way.
 </p>

 <p class="baumedium">Buttons on Screens</p>

 <p class="paragraph">
 In graphical user interfaces, we have seen an increase in buttons recently that consist merely of text or icons, without a clear, visible button shape being present. This insipid, uninspired mediocrity, exemplified by Google’s “Material Design” or – even worse – IBM’s “Carbon Design System”, was popularised by Apple’s iOS 7 and its equally miserable “Flat Design” aesthetics. This lazy minimalism is often considered modern and streamlined, but we must ask: Is it also user-friendly?
 </p>

 <p class="paragraph">
 The answer is clearly: No, it is not!
 </p>

 <p class="paragraph">
 Consider the image below: In the first row we see a series of icons that are supposed to be buttons. The only way you could potentially recognise them as such, however, would be if they were implemented in a user interface. So it is in fact only the <em>context</em> that lets you recognise them as buttons, not their <em>appearance</em> by themselves.
 </p>

 <p class="essaynote">Two rows of buttons. Which appear more inviting to interact with?
 </p>

 <p class="paragraph">
 Compare the icons in the upper row with their counterparts in the lower row. Here, these same icons are embedded in button shapes. This does several things at the same time. First, the button shapes act as <em>signifiers</em>. That means that they let the user know that an action can occur there. The icons in the upper row do no such thing. They don’t communicate their ability to be pressed – to be <em>used</em> really – in any way.
 </p>

 <p class="paragraph">
 How important signifiers are becomes clear when you look at the physical objects around you. Take the Swiss Army Knife in the picture below for example. The small groove that you see in the main blade (and in almost every hinged tool of a Swiss Army Knife) is called the “nail nick”. Not only does this nail nick allow you to insert your fingernail and pull the tool out, it also <em>looks like it allows for precisely that.</em> Pay attention to its exact shape too. It mirrors the slight curvature of a fingernail. And it doesn’t stop there: The angles of the walls <em>inside</em> the groove are contoured in such a way that your fingernail is guided deeper into the nail nick, ensuring a secure hold for pulling.
 </p>

 <p class="essaynote">This is the nail nick in the main blade of a Swiss Army Knife. It gives the user a clue that an action can occur here and that this action probably involves a fingernail.
 </p>

 <p class="paragraph">
 This should make it clear why there is a reason that the virtual buttons in our graphical user interface should indeed look like buttons: They should communicate that they can be used. When they just look like icons, they don’t do that.
 </p>

 <p class="paragraph">
 Look at the image of the buttons once more, and this time, try to find groups that belong together. The icons for plus and minus and for left and right for instance form two groups while the magnifying glass stands separated. In the lower row, where the buttons have uniform shapes, it’s easier to notice the differences in spacing between them.
 </p>

 <p class="paragraph">
 There is another thing to consider. Take a look at the next picture.
 </p>

 <p class="essaynote">The buttons in the upper row not only <em>communicate</em> what they do badly, they <em>function</em> badly as well.
 </p>

 <p class="paragraph">
 The pink colour shows where a button can actually be clicked or touched, that is to say, it shows the region where the software will register an input. In the upper row, that is quite a small area if you think of it in terms of square-pixels. That being said, the clickable area in mouse-interfaces <em>might</em> sometimes be the same in the upper row as in the lower row. In touch interfaces however, that is often not the case. There, the actual outline of the graphic – let’s say the minus – is often the only thing that can be touched. So when you quickly tap your screen and don’t hit the target precisely, you might completely miss the button.
 </p>

 <p class="baumedium">Text in Buttons</p>

 <p class="paragraph">
 The importance of button shapes becomes even more apparent, when the buttons are actually just words, not icons. The example below shows the Terms and Conditions of an iOS update. You can see that the two words, “Agree” and “Disagree”, don’t stick out too much in an environment that already has a lot of text in it. Apple’s way of showing the user that the two words are actually buttons is done solely with colour. The default option of agreeing is also not differentiating itself enough from the disagree option. The only difference is a slightly bolder (but not really bold) typeface. And lastly, speaking of typefaces, the one that Apple chose – specially designed actually – is also not the best for user interfaces.
 </p>

 <p class="essaynote">Everything that can go wrong, will go wrong: The people who designed this blindly followed the notion, that removing everything they perceived as ornamental would result in simplicity.
 </p>

 <p class="paragraph">
 Now compare the example from Apple above with my redesign below. Look at the difference that the button shapes and a better choice of typeface make. The typeface in question is called “FF Unit” and has less ambiguous letter shapes than Apple’s “San Francisco”. Granted, this is less important in long text than it is in individual words, but since we want the same typeface for both our buttons and the legal text, choosing a typeface <em>like</em> FF Unit becomes rather obvious. Lastly, I used a slight shadow to set apart the scrollable text of the Terms and Conditions from the surrounding interface. This too makes for a better visual distinction between the different elements on screen.
 </p>

 <div class="essaypicture">
    <img src="pictures/tcb.png" srcset="pictures/tcb_2x.png 2x" alt="The Terms and Conditions redesigned"> 
 </div>
 <p class="essaynote">Just because a user interface uses 3D-buttons and some shading doesn’t mean that it has to look tacky. In fact, if you have to make the choice between tacky-but-usable and minimalistic-but-hard-to-use, tacky is the way to go. You don’t have to make that choice though: It’s perfectly possible to create something that is both good-looking <em>and</em> easy to use.
 </p>

 <p class="baumedium">Direct Manipulation</p>

 <p class="paragraph">
 The physical world that we evolved in is one where every action has an effect. When you push the coffee mug on your desk and it moves away from you, it will make a sound. You might also be able to see little waves forming in your coffee as the small vibrations from the mug sliding on the desk transmit to the liquid. All of this feedback is expected by our brain to come to us through our different senses.
 </p>

 <p class="paragraph">
 Think about what this means: You will get haptic feedback through your fingertip, giving you information about weight, temperature and texture. There will be acoustic feedback from the ceramic sliding on your desk. And you will get visual feedback from seeing your finger and the mug moving, and the little waves on the surface of the coffee. Since our brain builds a model of the world and then compares reality to it, these different feedbacks are both <em>expected</em> and <em>interconnected</em>. It would be extremely weird, for example, if the mug did not make any noise at all while it slides across the table or if the liquid wouldn’t move inside the mug.
 </p>

 <p class="paragraph">
 A button in a graphical user interface that has no button shape will likely give you no feedback either. While it might actually have an alternative state that gets activated when you touch it (a change of colour for instance), you are probably going to obstruct that with your finger. This is another advantage of buttons that look like buttons. Because they usually stick out from under a fingertip, you can see the press-down animation clearly. Direct feedback from direct manipulation. See the animation below:
 </p>

 <p class="nubero-video">
    <video autoplay muted loop playsinline preload="metadata" poster="pictures/buttons_a_2x.png">
        <source src="videos/hand.mp4" type="video/mp4">
    </source></video>
 </p>
 <p></p>
 <p class="essaynote">While the user cannot be sure that his tap on the upper arrow was registered by the device (and might therefore try multiple times), the “button depressed” state of the 3D-button signals to him that his action was successful.
 </p>

 <p class="paragraph">
 Why is this important? First of all, it should be self-evident that a feature of the world that our brains evolved around, namely feedback, should not be removed just to satisfy a fashionable trend. As mentioned above, we expect some sort of feedback from practically everything in the world. But there’s another thing to consider: The button you just pressed might make some webpage load or do something else which will take a second or more before its effect is apparent. While you wait for that to happen, a button that showed you that it got pressed – that gave you feedback – is going to give you reassurance that you actually tapped it correctly.
 </p>

 <p class="paragraph">
 Visual feedback is, of course, just one way to solve this. Acoustic or haptic feedback also works well. Even better is a combination of these. Remember the coffee mug, whose weight and vibration you can feel, while you also see it moving and hear it sliding across the table. This sort of multi-sensory feedback is what you should be going for – if the circumstances allow it.
 </p>

 <p class="nubero-video">
    <video autoplay muted loop playsinline preload="metadata" poster="pictures/iphone-album_2x.jpg">
        <source src="videos/iphone_album.mp4" type="video/mp4">
    </source></video>
 </p>
 <p></p>
 <p class="essaynote">One last example: In this video, you can see the Photos app as it appears in iOS 17, alternating with a redesign done by me. Apple is using lazy button shapes for “Select” and the ellipsis character (…) on the right. On the left however, the button for going to your albums is just the word “Albums” and a little arrow shape. Why those two different concepts on the same screen? In the redesign, everything that works like a button also looks like one. This, in my opinion, is how it should be done.
 </p>

 <p class="baumedium">Misguided Sentimentalism?</p>

 <p class="paragraph">
 Critics of my position may point to what they believe is some sort of sentimentalism for old user interfaces on my part. It’s true that the problems I point to in this piece are of the kind that I consider solved in many of the older user interfaces. That has nothing to do with being sentimental however. Products have to work properly. If a button is the right choice, use a button. If it’s not, don’t. But if you are going to implement a design element that <em>works</em> like a button, it should <em>look</em> like one too.
 </p>

 <p class="barbottom"></p>
 <ol>









 </ol>

 <p class="bartopbottom"></p>

 <p class="postscript">
 Does <em>every</em> virtual button – every button in a graphical user interface – have to look like a pressable, physical 3D button? Of course not. They also don’t need to look exactly like my redesigns either. On a case-to-case basis it might even be better to do something else entirely.
 </p>

 <p class="postscript">
 The whole idea is to reduce cognitive load. And since the brain works by recognising patterns and dividing the environment up into areas, this reduction is best done by making elements with different functions appear markedly distinct from one another. It is, in other words, a fallacy to believe, that the brain has an easier time if everything looks “simplified” in the way which happens with the flat design doctrine. The opposite is the case.
 </p>
 </article>


 <hr>

 <footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
 </footer>
 <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
 <script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
 </script>
 </body>
 </html>
--- a/cache/2024/a3ccfb51f65cd59f375d5424d243e012/index.md
+++ b/cache/2024/a3ccfb51f65cd59f375d5424d243e012/index.md
@@ -0,0 +1,181 @@
 title: In Praise of Buttons
 url: https://www.nubero.ch/blog/009/
 hash_url: a3ccfb51f65cd59f375d5424d243e012
 archive_date: 2024-01-28


 Form is Function in Graphical User Interfaces

 <p class="paragraph">
 In any design discipline there are always certain trends. One of these trends seems to be that buttons are now considered uncool. It doesn’t matter if they are buttons on physical objects or in graphical user interfaces.
 </p>

 <p class="paragraph">
 Buttons aren’t new. And for exactly that reason, they are uncool. Like hammers and paperclips, they have been around for a long time and they work. In fact, they have been around for a long time <em>because</em> they work.
 </p>

 <p class="paragraph">
 That is a problem if you’re a dishonest designer. After all, how do you tell your client that you’ve just reinvented the wheel? You can’t just use boring old buttons in your shiny new product. So what do you do? You redesign the look or the function of a button (or both) and sell it as “the newest development in design” – totally disregarding the needs of the user and compromising your integrity as a designer along the way.
 </p>




 <p class="baumedium">Buttons on Screens</p>

 <p class="paragraph">
 In graphical user interfaces, we have seen an increase in buttons recently that consist merely of text or icons, without a clear, visible button shape being present. This insipid, uninspired mediocrity, exemplified by Google’s “Material Design” or – even worse – IBM’s “Carbon Design System”, was popularised by Apple’s iOS 7 and its equally miserable “Flat Design” aesthetics. This lazy minimalism is often considered modern and streamlined, but we must ask: Is it also user-friendly?
 </p>

 <p class="paragraph">
 The answer is clearly: No, it is not!
 </p>

 <p class="paragraph">
 Consider the image below: In the first row we see a series of icons that are supposed to be buttons. The only way you could potentially recognise them as such, however, would be if they were implemented in a user interface. So it is in fact only the <em>context</em> that lets you recognise them as buttons, not their <em>appearance</em> by themselves.
 </p>


 <p class="essaynote">Two rows of buttons. Which appear more inviting to interact with?
 </p>

 <p class="paragraph">
 Compare the icons in the upper row with their counterparts in the lower row. Here, these same icons are embedded in button shapes. This does several things at the same time. First, the button shapes act as <em>signifiers</em>. That means that they let the user know that an action can occur there. The icons in the upper row do no such thing. They don’t communicate their ability to be pressed – to be <em>used</em> really – in any way.
 </p>

 <p class="paragraph">
 How important signifiers are becomes clear when you look at the physical objects around you. Take the Swiss Army Knife in the picture below for example. The small groove that you see in the main blade (and in almost every hinged tool of a Swiss Army Knife) is called the “nail nick”. Not only does this nail nick allow you to insert your fingernail and pull the tool out, it also <em>looks like it allows for precisely that.</em> Pay attention to its exact shape too. It mirrors the slight curvature of a fingernail. And it doesn’t stop there: The angles of the walls <em>inside</em> the groove are contoured in such a way that your fingernail is guided deeper into the nail nick, ensuring a secure hold for pulling.
 </p>


 <p class="essaynote">This is the nail nick in the main blade of a Swiss Army Knife. It gives the user a clue that an action can occur here and that this action probably involves a fingernail.
 </p>

 <p class="paragraph">
 This should make it clear why there is a reason that the virtual buttons in our graphical user interface should indeed look like buttons: They should communicate that they can be used. When they just look like icons, they don’t do that.
 </p>

 <p class="paragraph">
 Look at the image of the buttons once more, and this time, try to find groups that belong together. The icons for plus and minus and for left and right for instance form two groups while the magnifying glass stands separated. In the lower row, where the buttons have uniform shapes, it’s easier to notice the differences in spacing between them.
 </p>

 <p class="paragraph">
 There is another thing to consider. Take a look at the next picture.
 </p>


 <p class="essaynote">The buttons in the upper row not only <em>communicate</em> what they do badly, they <em>function</em> badly as well.
 </p>

 <p class="paragraph">
 The pink colour shows where a button can actually be clicked or touched, that is to say, it shows the region where the software will register an input. In the upper row, that is quite a small area if you think of it in terms of square-pixels. That being said, the clickable area in mouse-interfaces <em>might</em> sometimes be the same in the upper row as in the lower row. In touch interfaces however, that is often not the case. There, the actual outline of the graphic – let’s say the minus – is often the only thing that can be touched. So when you quickly tap your screen and don’t hit the target precisely, you might completely miss the button.
 </p>




 <p class="baumedium">Text in Buttons</p>

 <p class="paragraph">
 The importance of button shapes becomes even more apparent, when the buttons are actually just words, not icons. The example below shows the Terms and Conditions of an iOS update. You can see that the two words, “Agree” and “Disagree”, don’t stick out too much in an environment that already has a lot of text in it. Apple’s way of showing the user that the two words are actually buttons is done solely with colour. The default option of agreeing is also not differentiating itself enough from the disagree option. The only difference is a slightly bolder (but not really bold) typeface. And lastly, speaking of typefaces, the one that Apple chose – specially designed actually – is also not the best for user interfaces.
 </p>


 <p class="essaynote">Everything that can go wrong, will go wrong: The people who designed this blindly followed the notion, that removing everything they perceived as ornamental would result in simplicity.
 </p>


 <p class="paragraph">
 Now compare the example from Apple above with my redesign below. Look at the difference that the button shapes and a better choice of typeface make. The typeface in question is called “FF Unit” and has less ambiguous letter shapes than Apple’s “San Francisco”. Granted, this is less important in long text than it is in individual words, but since we want the same typeface for both our buttons and the legal text, choosing a typeface <em>like</em> FF Unit becomes rather obvious. Lastly, I used a slight shadow to set apart the scrollable text of the Terms and Conditions from the surrounding interface. This too makes for a better visual distinction between the different elements on screen.
 </p>

 <div class="essaypicture">
    <img src="pictures/tcb.png" srcset="pictures/tcb_2x.png 2x" alt="The Terms and Conditions redesigned"> 
 </div>
 <p class="essaynote">Just because a user interface uses 3D-buttons and some shading doesn’t mean that it has to look tacky. In fact, if you have to make the choice between tacky-but-usable and minimalistic-but-hard-to-use, tacky is the way to go. You don’t have to make that choice though: It’s perfectly possible to create something that is both good-looking <em>and</em> easy to use.
 </p>




 <p class="baumedium">Direct Manipulation</p>

 <p class="paragraph">
 The physical world that we evolved in is one where every action has an effect. When you push the coffee mug on your desk and it moves away from you, it will make a sound. You might also be able to see little waves forming in your coffee as the small vibrations from the mug sliding on the desk transmit to the liquid. All of this feedback is expected by our brain to come to us through our different senses.
 </p>

 <p class="paragraph">
 Think about what this means: You will get haptic feedback through your fingertip, giving you information about weight, temperature and texture. There will be acoustic feedback from the ceramic sliding on your desk. And you will get visual feedback from seeing your finger and the mug moving, and the little waves on the surface of the coffee. Since our brain builds a model of the world and then compares reality to it, these different feedbacks are both <em>expected</em> and <em>interconnected</em>. It would be extremely weird, for example, if the mug did not make any noise at all while it slides across the table or if the liquid wouldn’t move inside the mug.
 </p>

 <p class="paragraph">
 A button in a graphical user interface that has no button shape will likely give you no feedback either. While it might actually have an alternative state that gets activated when you touch it (a change of colour for instance), you are probably going to obstruct that with your finger. This is another advantage of buttons that look like buttons. Because they usually stick out from under a fingertip, you can see the press-down animation clearly. Direct feedback from direct manipulation. See the animation below:
 </p>

 <p class="nubero-video">
 	<video autoplay muted loop playsinline preload="metadata" poster="pictures/buttons_a_2x.png">
 		<source src="videos/hand.mp4" type="video/mp4">
 	</source></video>
 </p>
 <p></p>
 <p class="essaynote">While the user cannot be sure that his tap on the upper arrow was registered by the device (and might therefore try multiple times), the “button depressed” state of the 3D-button signals to him that his action was successful.
 </p>

 <p class="paragraph">
 Why is this important? First of all, it should be self-evident that a feature of the world that our brains evolved around, namely feedback, should not be removed just to satisfy a fashionable trend. As mentioned above, we expect some sort of feedback from practically everything in the world. But there’s another thing to consider: The button you just pressed might make some webpage load or do something else which will take a second or more before its effect is apparent. While you wait for that to happen, a button that showed you that it got pressed – that gave you feedback – is going to give you reassurance that you actually tapped it correctly.
 </p>

 <p class="paragraph">
 Visual feedback is, of course, just one way to solve this. Acoustic or haptic feedback also works well. Even better is a combination of these. Remember the coffee mug, whose weight and vibration you can feel, while you also see it moving and hear it sliding across the table. This sort of multi-sensory feedback is what you should be going for – if the circumstances allow it.
 </p>

 <p class="nubero-video">
 	<video autoplay muted loop playsinline preload="metadata" poster="pictures/iphone-album_2x.jpg">
 		<source src="videos/iphone_album.mp4" type="video/mp4">
 	</source></video>
 </p>
 <p></p>
 <p class="essaynote">One last example: In this video, you can see the Photos app as it appears in iOS 17, alternating with a redesign done by me. Apple is using lazy button shapes for “Select” and the ellipsis character (…) on the right. On the left however, the button for going to your albums is just the word “Albums” and a little arrow shape. Why those two different concepts on the same screen? In the redesign, everything that works like a button also looks like one. This, in my opinion, is how it should be done.
 </p>




 <p class="baumedium">Misguided Sentimentalism?</p>

 <p class="paragraph">
 Critics of my position may point to what they believe is some sort of sentimentalism for old user interfaces on my part. It’s true that the problems I point to in this piece are of the kind that I consider solved in many of the older user interfaces. That has nothing to do with being sentimental however. Products have to work properly. If a button is the right choice, use a button. If it’s not, don’t. But if you are going to implement a design element that <em>works</em> like a button, it should <em>look</em> like one too.
 </p>










 <p class="barbottom"></p>
 <ol>









 </ol>


 <p class="bartopbottom"></p>

 <p class="postscript">
 Does <em>every</em> virtual button – every button in a graphical user interface – have to look like a pressable, physical 3D button? Of course not. They also don’t need to look exactly like my redesigns either. On a case-to-case basis it might even be better to do something else entirely.
 </p>

 <p class="postscript">
 The whole idea is to reduce cognitive load. And since the brain works by recognising patterns and dividing the environment up into areas, this reduction is best done by making elements with different functions appear markedly distinct from one another. It is, in other words, a fallacy to believe, that the brain has an easier time if everything looks “simplified” in the way which happens with the flat design doctrine. The opposite is the case.
 </p>
--- a/cache/2024/b351cda8d2ccd73362ca1729845b7e79/index.html
+++ b/cache/2024/b351cda8d2ccd73362ca1729845b7e79/index.html
@@ -0,0 +1,290 @@
 <!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>New HTML Control Lands in Safari (archive) — David Larlet</title>
 <meta name="description" content="Publication mise en cache pour en conserver une trace.">
 <!-- That good ol' feed, subscribe :). -->
 <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
 <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
 <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
 <link rel="manifest" href="/static/david/icons2/site.webmanifest">
 <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
 <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
 <meta name="msapplication-TileColor" content="#f7f7f7">
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
 <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
 <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
 <meta name="robots" content="noai, noimageai">
 <!-- Documented, feel free to shoot an email. -->
 <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
 </script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari">

 <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>New HTML Control Lands in Safari</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-01-28
    </p>
  </nav>
  <hr>
  <p>Native toggle switches landed in one browser. Safari introduced this new HTML control as part of the <a href="https://webkit.org/blog/14885/release-notes-for-safari-technology-preview-185/">Safari Technology Preview 185 release</a> and then <a href="https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-186#New-Features">expanded it in the 186 release</a>.</p>

 <p>Creating a semi-native HTML toggle switch component is quite <em>hacky</em>. It involves using a checkbox, adding the "switch" ARIA role, removing its appearance with CSS, and adding styles to make it look like the classic switch or however we want —<a href="https://codepen.io/collection/aMPYMo">check this toggles collection</a>.</p>

 <p>And even doing all that, some things cannot be avoided. For example, developers can still set the indeterminate attribute into the base checkbox using JavaScript, which would make the toggle switch invalid.</p>

 <p>A native solution would prevent these problems and provide a better experience. Even when it's only an experiment on one browser and has some issues (as we'll describe soon), this attempt is welcomed, and I hope it gets traction.</p>

 <h2 id="how-does-it-work">
  How does it work?
 </h2>

 <p>Safari's implementation is as straightforward as it can be. Just add the <code>switch</code> attribute to a regular checkbox, and you'll be done!</p>

 <div class="highlight js-code-highlight">
 <pre class="highlight html"><code><span class="c">&lt;!-- this will render a checkbox --&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- this will render a toggle switch --&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">switch</span> <span class="nt">/&gt;</span>
 </code></pre>
 </div>

 <p>It's really that simple. There is no need for additional CSS, JS, or anything complicated, and the browser will take care of the rest, including out-of-the-box interactions and styles.</p>

 <figure>
  <p>
    <img src="https://alvaromontoro.com/images/blog/safari-toggle-1.webp" alt="Just add the switch attribute to a checkbox. There is some HTML code in a box: With arrows pointing to checkboxes (from the first line of code) and toggle switches (from the second line of code)" loading="lazy">
  </p>
  <figcaption>Just add the switch attribute to a checkbox!</figcaption>
 </figure>

 <p>The default visualization resembles the toggle switch of iOS, but as part of the feature, Safari includes two pseudo-elements <code>::track</code> and <code>::thumb</code> that make it easy to update the look and feel of the control. <a href="https://twitter.com/yisibl/status/1737739579418141116">@yisibl added a few examples of how they work</a> (you'll need Safari Technology Preview 185 or above to see them).</p>

 <h3 id="thoughts-on-this-syntax">
  Thoughts on this syntax
 </h3>

 <p>Having a <code>switch</code> attribute in the checkbox makes it easy, but it also may be misleading as it looks like it equates toggle switches to checkboxes. While this may seem logical to many, it is unfair to the switch control, which becomes a "sub-control" <em>tightly coupled</em> to the checkbox.</p>

 <p>They are not the same component: they have different values (checked/unchecked vs. on/off), one of them has an indeterminate state (checkbox, although it's not technically a state), and one is supposed to have an action associated on change (switch).</p>

 <p>So why couple them? Just because they look the same or behave in a "similar way"? That's wrong. Following that logic, we shouldn't have inputs of the type <code>number</code>, <code>date</code>, <code>password</code>, <code>email</code>, <code>search</code>... because we already have the text input to handle all of them.<br>
 </p>

 <div class="highlight js-code-highlight">
 <pre class="highlight html"><code><span class="c">&lt;!-- We don't do this --&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">number</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">date</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">password</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- So why do this? --&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">switch</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- Wouldn't this make more sense? --&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"switch"</span> <span class="nt">/&gt;</span>
 </code></pre>
 </div>

 <p>In my opinion, a toggle switch should be its own type of input. And not a "sub-type" or "sub-control" dependent on the checkbox.</p>

 <h2 id="pros-and-cons">
  Pros and cons
 </h2>

 <p>As with every technology —especially a new one—, Safari's toggle switch has good and bad things. Here are some pros and cons of this component.</p>

 <h3 id="pros">
  Pros
 </h3>

 <ul>
 <li>
 <strong>Provides native support for the control</strong>: no need for hacky or complex solutions that require too much code and may be error-prone.</li>
 <li>
 <strong>Straightforward interface</strong>: easy to implement (add an attribute!) and easy-to-follow new pseudo-elements (<code>::track</code> and <code>::thumb</code>).</li>
 <li>
 <strong>Easy styling in CSS</strong>: with the introduction of two pseudo-elements (<code>::track</code> and <code>::thumb</code>), changing the styles of the components would become simple.</li>
 <li>
 <strong>Accessibility out of the box</strong>: the control is announced correctly by the Voice Over screen reader without needing extra ARIA labels or roles. <a href="https://adrianroselli.com/2021/10/switch-role-support.html#Update02">Adrian Roselli ran tests and shared the results</a> over time.</li>
 </ul>

 <p>
  <img src="https://alvaromontoro.com/images/blog/safari-toggle-2.webp" alt="Summary of pros in image format" loading="lazy">
 </p>

 <h3 id="cons">
  Cons
 </h3>

 <ul>
 <li>
 <strong>Non-standard feature</strong>: this is a Safari proposal and hasn't been adopted by other browsers or taken into the standard.</li>
 <li>
 <strong>Safari-only feature</strong>: as it is a new suggestion by Safari, it will work only on Safari and only in the Technology Preview version of the browser (from version 185).</li>
 <li>
 <strong>Default styles are <em>sketchy</em></strong>: the toggle looks like the regular iOS toggle, but <a href="https://front-end.social/@alvaromontoro/111763578202895753">it presents some issues when scaling and applying zoom</a>.</li>
 </ul>

 <p>Considering those cons, it is safe to say that <strong>this is not a production-ready feature</strong>. At least not yet. It could be an excellent case for progressive enhancement approaches (maybe the reason why they made it an attribute instead of a full type: falling back into a checkbox if not supported), but waiting to see how the component moves forward is better. It is still too early.</p>

 <p>
  <img src="https://alvaromontoro.com/images/blog/safari-toggle-3.webp" alt="Summary of cons in image format" loading="lazy">
 </p>

 <h2 id="final-thoughts">
  Final thoughts
 </h2>

 <p>Toggle switches are a great addition to a browser, and the Safari team did nicely adding it to the Technology Preview version. Still, the implementation feels a bit rushed —maybe Safari is trying to earn brownie points with developers while shaking the "The New IE Browser" label?</p>

 <p>One of the things that is more counterintuitive is the used syntax. Having a <code>switch</code> attribute in the checkbox makes it easy, but it also unnecessarily associates both controls and doesn't follow the same notation that other form controls follow. I wouldn't be surprised if this is one thing that changes when —not if— this proposal moves forward. So beware of support and likely changes in the future.</p>

 <p>As I said, this is a great addition to the form controls. I hope it triggers a deeper conversation about its addition to the standard. I look forward to what it becomes and the possibility of using it on any browser.</p>
 </article>


 <hr>

 <footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
 </footer>
 <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
 <script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
 </script>
 </body>
 </html>
--- a/cache/2024/b351cda8d2ccd73362ca1729845b7e79/index.md
+++ b/cache/2024/b351cda8d2ccd73362ca1729845b7e79/index.md
@@ -0,0 +1,125 @@
 title: New HTML Control Lands in Safari
 url: https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari
 hash_url: b351cda8d2ccd73362ca1729845b7e79
 archive_date: 2024-01-28

 <p>Native toggle switches landed in one browser. Safari introduced this new HTML control as part of the <a href="https://webkit.org/blog/14885/release-notes-for-safari-technology-preview-185/">Safari Technology Preview 185 release</a> and then <a href="https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-186#New-Features">expanded it in the 186 release</a>.</p>

 <p>Creating a semi-native HTML toggle switch component is quite <em>hacky</em>. It involves using a checkbox, adding the "switch" ARIA role, removing its appearance with CSS, and adding styles to make it look like the classic switch or however we want —<a href="https://codepen.io/collection/aMPYMo">check this toggles collection</a>.</p>

 <p>And even doing all that, some things cannot be avoided. For example, developers can still set the indeterminate attribute into the base checkbox using JavaScript, which would make the toggle switch invalid.</p>

 <p>A native solution would prevent these problems and provide a better experience. Even when it's only an experiment on one browser and has some issues (as we'll describe soon), this attempt is welcomed, and I hope it gets traction.</p>

 <h2 id="how-does-it-work">
  How does it work?
 </h2>

 <p>Safari's implementation is as straightforward as it can be. Just add the <code>switch</code> attribute to a regular checkbox, and you'll be done!</p>

 <div class="highlight js-code-highlight">
 <pre class="highlight html"><code><span class="c">&lt;!-- this will render a checkbox --&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- this will render a toggle switch --&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">switch</span> <span class="nt">/&gt;</span>
 </code></pre>
 </div>



 <p>It's really that simple. There is no need for additional CSS, JS, or anything complicated, and the browser will take care of the rest, including out-of-the-box interactions and styles.</p>

 <figure>
  <p>
    <img src="https://alvaromontoro.com/images/blog/safari-toggle-1.webp" alt="Just add the switch attribute to a checkbox. There is some HTML code in a box: With arrows pointing to checkboxes (from the first line of code) and toggle switches (from the second line of code)" loading="lazy">
  </p>
  <figcaption>Just add the switch attribute to a checkbox!</figcaption>
 </figure>



 <p>The default visualization resembles the toggle switch of iOS, but as part of the feature, Safari includes two pseudo-elements <code>::track</code> and <code>::thumb</code> that make it easy to update the look and feel of the control. <a href="https://twitter.com/yisibl/status/1737739579418141116">@yisibl added a few examples of how they work</a> (you'll need Safari Technology Preview 185 or above to see them).</p>

 <h3 id="thoughts-on-this-syntax">
  Thoughts on this syntax
 </h3>

 <p>Having a <code>switch</code> attribute in the checkbox makes it easy, but it also may be misleading as it looks like it equates toggle switches to checkboxes. While this may seem logical to many, it is unfair to the switch control, which becomes a "sub-control" <em>tightly coupled</em> to the checkbox.</p>

 <p>They are not the same component: they have different values (checked/unchecked vs. on/off), one of them has an indeterminate state (checkbox, although it's not technically a state), and one is supposed to have an action associated on change (switch).</p>

 <p>So why couple them? Just because they look the same or behave in a "similar way"? That's wrong. Following that logic, we shouldn't have inputs of the type <code>number</code>, <code>date</code>, <code>password</code>, <code>email</code>, <code>search</code>... because we already have the text input to handle all of them.<br>
 </p>

 <div class="highlight js-code-highlight">
 <pre class="highlight html"><code><span class="c">&lt;!-- We don't do this --&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">number</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">date</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">password</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- So why do this? --&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">switch</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- Wouldn't this make more sense? --&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"switch"</span> <span class="nt">/&gt;</span>
 </code></pre>
 </div>



 <p>In my opinion, a toggle switch should be its own type of input. And not a "sub-type" or "sub-control" dependent on the checkbox.</p>

 <h2 id="pros-and-cons">
  Pros and cons
 </h2>

 <p>As with every technology —especially a new one—, Safari's toggle switch has good and bad things. Here are some pros and cons of this component.</p>

 <h3 id="pros">
  Pros
 </h3>

 <ul>
 <li>
 <strong>Provides native support for the control</strong>: no need for hacky or complex solutions that require too much code and may be error-prone.</li>
 <li>
 <strong>Straightforward interface</strong>: easy to implement (add an attribute!) and easy-to-follow new pseudo-elements (<code>::track</code> and <code>::thumb</code>).</li>
 <li>
 <strong>Easy styling in CSS</strong>: with the introduction of two pseudo-elements (<code>::track</code> and <code>::thumb</code>), changing the styles of the components would become simple.</li>
 <li>
 <strong>Accessibility out of the box</strong>: the control is announced correctly by the Voice Over screen reader without needing extra ARIA labels or roles. <a href="https://adrianroselli.com/2021/10/switch-role-support.html#Update02">Adrian Roselli ran tests and shared the results</a> over time.</li>
 </ul>

 <p>
  <img src="https://alvaromontoro.com/images/blog/safari-toggle-2.webp" alt="Summary of pros in image format" loading="lazy">
 </p>

 <h3 id="cons">
  Cons
 </h3>

 <ul>
 <li>
 <strong>Non-standard feature</strong>: this is a Safari proposal and hasn't been adopted by other browsers or taken into the standard.</li>
 <li>
 <strong>Safari-only feature</strong>: as it is a new suggestion by Safari, it will work only on Safari and only in the Technology Preview version of the browser (from version 185).</li>
 <li>
 <strong>Default styles are <em>sketchy</em></strong>: the toggle looks like the regular iOS toggle, but <a href="https://front-end.social/@alvaromontoro/111763578202895753">it presents some issues when scaling and applying zoom</a>.</li>
 </ul>

 <p>Considering those cons, it is safe to say that <strong>this is not a production-ready feature</strong>. At least not yet. It could be an excellent case for progressive enhancement approaches (maybe the reason why they made it an attribute instead of a full type: falling back into a checkbox if not supported), but waiting to see how the component moves forward is better. It is still too early.</p>

 <p>
  <img src="https://alvaromontoro.com/images/blog/safari-toggle-3.webp" alt="Summary of cons in image format" loading="lazy">
 </p>

 <h2 id="final-thoughts">
  Final thoughts
 </h2>

 <p>Toggle switches are a great addition to a browser, and the Safari team did nicely adding it to the Technology Preview version. Still, the implementation feels a bit rushed —maybe Safari is trying to earn brownie points with developers while shaking the "The New IE Browser" label?</p>

 <p>One of the things that is more counterintuitive is the used syntax. Having a <code>switch</code> attribute in the checkbox makes it easy, but it also unnecessarily associates both controls and doesn't follow the same notation that other form controls follow. I wouldn't be surprised if this is one thing that changes when —not if— this proposal moves forward. So beware of support and likely changes in the future.</p>

 <p>As I said, this is a great addition to the form controls. I hope it triggers a deeper conversation about its addition to the standard. I look forward to what it becomes and the possibility of using it on any browser.</p>
--- a/cache/2024/b692faaa55fd2775e957b20e833e9e5e/index.html
+++ b/cache/2024/b692faaa55fd2775e957b20e833e9e5e/index.html
@@ -0,0 +1,237 @@
 <!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>fraîchement (archive) — David Larlet</title>
 <meta name="description" content="Publication mise en cache pour en conserver une trace.">
 <!-- That good ol' feed, subscribe :). -->
 <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
 <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
 <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
 <link rel="manifest" href="/static/david/icons2/site.webmanifest">
 <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
 <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
 <meta name="msapplication-TileColor" content="#f7f7f7">
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
 <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
 <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
 <meta name="robots" content="noai, noimageai">
 <!-- Documented, feel free to shoot an email. -->
 <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
 </script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.la-grange.net/2024/01/26/fraichement">

 <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>fraîchement</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://www.la-grange.net/2024/01/26/fraichement" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-01-28
    </p>
  </nav>
  <hr>
  <figure>
  <img src="https://www.la-grange.net/2024/01/26/3159-chauffage.jpg" alt="Détail de la lampe à chauffer.">
  <figcaption>Komagome, Japon, 26 janvier 2024</figcaption>
 </figure>
 <blockquote>
 <p>Les herbes folles à la situation improbable transmettent des émotions particulières. Outre les hautes herbes poussées sur les talus, les fossés, le bas-côté des routes que nous avons évoquées, il en va ainsi de celles qui s'échappent dans les terrains vagues, entre les rails des chemins de fer ; sans oublier celles qui se dessinent au fond de l'eau.<br>
 — La fraîcheur de l'herbe, Alain Corbin, urn:isbn:978-2-8185-0589-2</p>
 </blockquote>
 <p>Au réveil, le bureau est à 10ºC. Enrobé de la chaleur du futon, je mets la lampe à chauffer près du bureau. C'est mon soleil électrique. Je comprends les oiseaux migrateurs. Ils n'ont pas de frontières, juste l'effort et le danger. Le long chemin pour une herbe plus tendre.</p>
 <hr>
 <p>Le 19 janvier 2024, le Japon est devenu le 5eme pays à alunir une sonde sur la surface de la Lune : <a href="https://fr.wikipedia.org/wiki/SLIM">SLIM (Smart Lander for Investigating Moon)</a>.</p>
 <p>L'objectif était de savoir s'il était possible qu'une sonde contrôle sa descente en mode autonome à une précision de 100m. Cette autonomie est essentielle pour pouvoir ajuster aux conditions de terrain qui sont peu documentés. Pouvoir éviter un rocher, trouver un sol plus régulier devient alors très important. L'objectif a été atteint. La sonde a pu se poser à 50 mètres de son objectif.</p>
 <p>Au moment de sa descente, la sonde a largué deux petits drones autonomes autour d'elle.</p>
 <p><img src="https://www.la-grange.net/2024/01/26/slim-modules.jpeg" alt="Illustration de la descente de SLIM libérant les deux modules."></p>
 <p>L'un est une antenne, l'autre, SORA-Q, est un petit module mobile sous la forme d'une sphère et qui s'ouvre afin de créer deux roues. <a href="https://takaratomymall.jp/shop/g/g4904810226338/">SORA-Q est aussi un jouet</a>. Il a été conçu par une compagnie de jouets japonaise très connue, Takara Tomy.</p>
 <p><img src="https://www.la-grange.net/2024/01/26/sora-q.jpeg" alt="SORA-Q entre les paumes de deux mains."></p>
 <p>Au centre de SORA-Q, il y a une petite caméra.</p>
 <p><img src="https://www.la-grange.net/2024/01/26/sora-q-ouvert.jpeg" alt="SORA-Q une fois ouvert sur la surface. On aperçoit la caméra au centre de la sphère."></p>
 <p>Une fois la descente terminée, SLIM devait se poser sur le côté. On peut voir les deux réacteurs sur cette image de synthèse.</p>
 <p><img src="https://www.la-grange.net/2024/01/26/slim-cote.jpeg" alt="Slim posé sur le côté sur la surface lunaire."></p>
 <p>Peu après le contact au sol, les ingénieurs de JAXA ont réalisé que les <a href="https://www.jaxa.jp/press/2024/01/20240125-4_j.html">panneaux solaires n'étaient pas correctement orientés</a> et ne pouvaient pas donc recharger les batteries.</p>
 <p>Mais que s'est il passé ? Et comment le savoir ? SORA-Q à la rescousse ! Ce petit robot de 8cm de diamètre a pris la photographie de la sonde plantée sur le nez !</p>
 <p><img src="https://www.la-grange.net/2024/01/26/20240125-4_01-slim.jpg" alt="Sonde spatiale sur la surface lunaire."></p>
 <p>Et l'autre petit module, une antenne,  a envoyé l'image vers la Terre.</p>
 <p>Pendant la descente la sonde a perdu un de réacteurs, ce qui a provoqué un déséquilibre pour l'approche finale. La sonde a trébuché. Il manque un troisième petit drone pour la renverser.</p>
 <hr>
 <p>Manton Reece :</p>
 <blockquote>
 <p>There are a <a href="https://www.manton.org/2024/01/23/there-are-a.html">lot of new blogging systems popping up</a>. This is a good thing. Micro.blog will be competitive with almost anything, but also there’s the bigger picture… If the open web is getting better, we’re better too. A rising tide lifts all boats.</p>
 </blockquote>
 <hr>
 <p>神坂雪佳 「巴の雪」 （1909）</p>
 <p><img src="https://www.la-grange.net/2024/01/26/snow.jpeg" alt="Une personne dans une tempête de neige."></p>
 <hr>
 <p>Quel beau titre de livre : effilage du sac de jute. Une coopération entre René Char et Zao Wou-Ki.</p>
 <hr>
 <p>Quand les bateaux usines à tourisme sont une horreur environnementale. <a href="https://www.bloomberg.com/news/articles/2024-01-22/royal-caribbean-s-icon-of-the-seas-highlights-climate-impact-of-cruises">The World’s Largest Cruise Ship Is a Climate Liability</a></p>
 <blockquote>
 <p>When Royal Caribbean’s Icon of the Seas embarks on its first official voyage on Jan. 27, the journey is sure to make waves. The world’s largest cruise ship, the Icon is over 1,000 feet long (360 meters) and weighs in around 250,000 gross registered tons. It boasts 20 different decks; 40 restaurants, bars and lounges; seven pools; six waterslides and a 55-foot waterfall. Royal Caribbean says its boat will usher in “a new era of vacations.”</p>
 </blockquote>
 <p>Quelle ironie surtout après la crise de COVID, il y a juste 4 ans qui s'est révélée justement sur un navire de croisière. Mais ce n'est pas tout.</p>
 <blockquote>
 <p>His analysis found that a person taking a US cruise for 1,200 miles (2,000 kilometers) on the most efficient cruise line would be responsible for roughly 1,100 pounds (500 kilograms) of CO2, compared with 518 pounds (235 kilograms) for a round-trip flight and a stay in a four-star hotel. In other words: Taking a cruise <strong>generates “about double the amount of total greenhouse gas emissions” as flying</strong>, Comer says.</p>
 </blockquote>
 <hr>
 <p><a href="https://evhaste.com/blog/deplatforming-myself">Deplatforming Myself: A Tech Manifesto</a></p>
 <blockquote>
 <p>It’s not to provide exposure to new ideas, or spread opportunity. Opportunity on The Platform is more concentrated than it’s ever been, echo chambers abound. That’s all a con. The algorithm exists because money. It creates asymmetry of information, and shifts the balance of power to the person who owns it. It’s three card monte but you play it with a blindfold.</p>
 </blockquote>
 <p>Il est à noter que le jeu de la censure et de ce qui est permis de dire sur la plateforme n'est pas nouveau.</p>
 <blockquote>
 <p>So they’ve developed Aesopian code phrases, algospeak, to get the message across contextually, substituting “lesbian” with “le dollar bean” or “legbutt” when they mean “LGBT” in order to avoid inciting the wrath of The all-seeing Algorithm. And this works for a while, until a brand gets pissed that their ad for holy water or whatever was displayed next to a video of a gay man living his best life, god forbid. And so the censors get updated, and the community invents new euphemisms and evades bans, and this bizarre game of 1337speak whack a mole continues in perpetuity.</p>
 </blockquote>
 <p>Les poètes et écrivains évitaient tous la colère des rois et des puissants par l'utilisation de métaphores. Mais c'est justement par cette analogie que cela devient intéressant.</p>
 <p>Les empires informatiques d'aujourd'hui comme exemples de l'absolutisme du pouvoir des siècles précédents posent la question plus qu'intéressantes sur la liberté d'expression. Quand tout l'espace de notre expression transite par un domaine privé et commercial, nous ne sommes plus dans l'espace public de notre expression mais bien dans cet espace contrôlé. Que devient le sens de notre communication si dès que nous sommes sur ces espaces, l'expression devient plus limitée que celle que l'espace public permet.</p>
 <hr>
 <p><a href="https://www.theguardian.com/science/2024/jan/25/nasa-mars-helicopter-ingenuity-last-flight">Nasa’s Mars helicopter Ingenuity finally sputters out, ‘exceeding expectations’</a></p>
 <blockquote>
 <p>Originally intended as a short-term tech demo, Ingenuity logged 72 flights over three years on Mars. It accumulated more than two hours of flight time, traveling 11 miles (18km).</p>
 <p>That’s more than 14 times farther than planned, according to Nasa. It soared as high as 79ft (24 metres) and hit speeds of up to 22.4mph (36km/h).</p>
 </blockquote>
 </article>


 <hr>

 <footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
 </footer>
 <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
 <script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
 </script>
 </body>
 </html>
--- a/cache/2024/b692faaa55fd2775e957b20e833e9e5e/index.md
+++ b/cache/2024/b692faaa55fd2775e957b20e833e9e5e/index.md
@@ -0,0 +1,66 @@
 title: fraîchement
 url: https://www.la-grange.net/2024/01/26/fraichement
 hash_url: b692faaa55fd2775e957b20e833e9e5e
 archive_date: 2024-01-28

 <figure>
  <img src="https://www.la-grange.net/2024/01/26/3159-chauffage.jpg" alt="Détail de la lampe à chauffer.">
  <figcaption>Komagome, Japon, 26 janvier 2024</figcaption>
 </figure>
 <blockquote>
 <p>Les herbes folles à la situation improbable transmettent des émotions particulières. Outre les hautes herbes poussées sur les talus, les fossés, le bas-côté des routes que nous avons évoquées, il en va ainsi de celles qui s'échappent dans les terrains vagues, entre les rails des chemins de fer ; sans oublier celles qui se dessinent au fond de l'eau.<br>
 — La fraîcheur de l'herbe, Alain Corbin, urn:isbn:978-2-8185-0589-2</p>
 </blockquote>
 <p>Au réveil, le bureau est à 10ºC. Enrobé de la chaleur du futon, je mets la lampe à chauffer près du bureau. C'est mon soleil électrique. Je comprends les oiseaux migrateurs. Ils n'ont pas de frontières, juste l'effort et le danger. Le long chemin pour une herbe plus tendre.</p>
 <hr>
 <p>Le 19 janvier 2024, le Japon est devenu le 5eme pays à alunir une sonde sur la surface de la Lune : <a href="https://fr.wikipedia.org/wiki/SLIM">SLIM (Smart Lander for Investigating Moon)</a>.</p>
 <p>L'objectif était de savoir s'il était possible qu'une sonde contrôle sa descente en mode autonome à une précision de 100m. Cette autonomie est essentielle pour pouvoir ajuster aux conditions de terrain qui sont peu documentés. Pouvoir éviter un rocher, trouver un sol plus régulier devient alors très important. L'objectif a été atteint. La sonde a pu se poser à 50 mètres de son objectif.</p>
 <p>Au moment de sa descente, la sonde a largué deux petits drones autonomes autour d'elle.</p>
 <p><img src="https://www.la-grange.net/2024/01/26/slim-modules.jpeg" alt="Illustration de la descente de SLIM libérant les deux modules."></p>
 <p>L'un est une antenne, l'autre, SORA-Q, est un petit module mobile sous la forme d'une sphère et qui s'ouvre afin de créer deux roues. <a href="https://takaratomymall.jp/shop/g/g4904810226338/">SORA-Q est aussi un jouet</a>. Il a été conçu par une compagnie de jouets japonaise très connue, Takara Tomy.</p>
 <p><img src="https://www.la-grange.net/2024/01/26/sora-q.jpeg" alt="SORA-Q entre les paumes de deux mains."></p>
 <p>Au centre de SORA-Q, il y a une petite caméra.</p>
 <p><img src="https://www.la-grange.net/2024/01/26/sora-q-ouvert.jpeg" alt="SORA-Q une fois ouvert sur la surface. On aperçoit la caméra au centre de la sphère."></p>
 <p>Une fois la descente terminée, SLIM devait se poser sur le côté. On peut voir les deux réacteurs sur cette image de synthèse.</p>
 <p><img src="https://www.la-grange.net/2024/01/26/slim-cote.jpeg" alt="Slim posé sur le côté sur la surface lunaire."></p>
 <p>Peu après le contact au sol, les ingénieurs de JAXA ont réalisé que les <a href="https://www.jaxa.jp/press/2024/01/20240125-4_j.html">panneaux solaires n'étaient pas correctement orientés</a> et ne pouvaient pas donc recharger les batteries.</p>
 <p>Mais que s'est il passé ? Et comment le savoir ? SORA-Q à la rescousse ! Ce petit robot de 8cm de diamètre a pris la photographie de la sonde plantée sur le nez !</p>
 <p><img src="https://www.la-grange.net/2024/01/26/20240125-4_01-slim.jpg" alt="Sonde spatiale sur la surface lunaire."></p>
 <p>Et l'autre petit module, une antenne,  a envoyé l'image vers la Terre.</p>
 <p>Pendant la descente la sonde a perdu un de réacteurs, ce qui a provoqué un déséquilibre pour l'approche finale. La sonde a trébuché. Il manque un troisième petit drone pour la renverser.</p>
 <hr>
 <p>Manton Reece :</p>
 <blockquote>
 <p>There are a <a href="https://www.manton.org/2024/01/23/there-are-a.html">lot of new blogging systems popping up</a>. This is a good thing. Micro.blog will be competitive with almost anything, but also there’s the bigger picture… If the open web is getting better, we’re better too. A rising tide lifts all boats.</p>
 </blockquote>
 <hr>
 <p>神坂雪佳 「巴の雪」 （1909）</p>
 <p><img src="https://www.la-grange.net/2024/01/26/snow.jpeg" alt="Une personne dans une tempête de neige."></p>
 <hr>
 <p>Quel beau titre de livre : effilage du sac de jute. Une coopération entre René Char et Zao Wou-Ki.</p>
 <hr>
 <p>Quand les bateaux usines à tourisme sont une horreur environnementale. <a href="https://www.bloomberg.com/news/articles/2024-01-22/royal-caribbean-s-icon-of-the-seas-highlights-climate-impact-of-cruises">The World’s Largest Cruise Ship Is a Climate Liability</a></p>
 <blockquote>
 <p>When Royal Caribbean’s Icon of the Seas embarks on its first official voyage on Jan. 27, the journey is sure to make waves. The world’s largest cruise ship, the Icon is over 1,000 feet long (360 meters) and weighs in around 250,000 gross registered tons. It boasts 20 different decks; 40 restaurants, bars and lounges; seven pools; six waterslides and a 55-foot waterfall. Royal Caribbean says its boat will usher in “a new era of vacations.”</p>
 </blockquote>
 <p>Quelle ironie surtout après la crise de COVID, il y a juste 4 ans qui s'est révélée justement sur un navire de croisière. Mais ce n'est pas tout.</p>
 <blockquote>
 <p>His analysis found that a person taking a US cruise for 1,200 miles (2,000 kilometers) on the most efficient cruise line would be responsible for roughly 1,100 pounds (500 kilograms) of CO2, compared with 518 pounds (235 kilograms) for a round-trip flight and a stay in a four-star hotel. In other words: Taking a cruise <strong>generates “about double the amount of total greenhouse gas emissions” as flying</strong>, Comer says.</p>
 </blockquote>
 <hr>
 <p><a href="https://evhaste.com/blog/deplatforming-myself">Deplatforming Myself: A Tech Manifesto</a></p>
 <blockquote>
 <p>It’s not to provide exposure to new ideas, or spread opportunity. Opportunity on The Platform is more concentrated than it’s ever been, echo chambers abound. That’s all a con. The algorithm exists because money. It creates asymmetry of information, and shifts the balance of power to the person who owns it. It’s three card monte but you play it with a blindfold.</p>
 </blockquote>
 <p>Il est à noter que le jeu de la censure et de ce qui est permis de dire sur la plateforme n'est pas nouveau.</p>
 <blockquote>
 <p>So they’ve developed Aesopian code phrases, algospeak, to get the message across contextually, substituting “lesbian” with “le dollar bean” or “legbutt” when they mean “LGBT” in order to avoid inciting the wrath of The all-seeing Algorithm. And this works for a while, until a brand gets pissed that their ad for holy water or whatever was displayed next to a video of a gay man living his best life, god forbid. And so the censors get updated, and the community invents new euphemisms and evades bans, and this bizarre game of 1337speak whack a mole continues in perpetuity.</p>
 </blockquote>
 <p>Les poètes et écrivains évitaient tous la colère des rois et des puissants par l'utilisation de métaphores. Mais c'est justement par cette analogie que cela devient intéressant.</p>
 <p>Les empires informatiques d'aujourd'hui comme exemples de l'absolutisme du pouvoir des siècles précédents posent la question plus qu'intéressantes sur la liberté d'expression. Quand tout l'espace de notre expression transite par un domaine privé et commercial, nous ne sommes plus dans l'espace public de notre expression mais bien dans cet espace contrôlé. Que devient le sens de notre communication si dès que nous sommes sur ces espaces, l'expression devient plus limitée que celle que l'espace public permet.</p>
 <hr>
 <p><a href="https://www.theguardian.com/science/2024/jan/25/nasa-mars-helicopter-ingenuity-last-flight">Nasa’s Mars helicopter Ingenuity finally sputters out, ‘exceeding expectations’</a></p>
 <blockquote>
 <p>Originally intended as a short-term tech demo, Ingenuity logged 72 flights over three years on Mars. It accumulated more than two hours of flight time, traveling 11 miles (18km).</p>
 <p>That’s more than 14 times farther than planned, according to Nasa. It soared as high as 79ft (24 metres) and hit speeds of up to 22.4mph (36km/h).</p>
 </blockquote>
--- a/cache/2024/ff566a58892db07815a327802fea66d3/index.html
+++ b/cache/2024/ff566a58892db07815a327802fea66d3/index.html
@@ -0,0 +1,270 @@
 <!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>In Loving Memory of Square Checkbox (archive) — David Larlet</title>
 <meta name="description" content="Publication mise en cache pour en conserver une trace.">
 <!-- That good ol' feed, subscribe :). -->
 <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
 <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
 <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
 <link rel="manifest" href="/static/david/icons2/site.webmanifest">
 <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
 <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
 <meta name="msapplication-TileColor" content="#f7f7f7">
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
 <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
 <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
 <meta name="robots" content="noai, noimageai">
 <!-- Documented, feel free to shoot an email. -->
 <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
 </script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://tonsky.me/blog/checkbox/">

 <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>In Loving Memory of Square Checkbox</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://tonsky.me/blog/checkbox/" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-01-28
    </p>
  </nav>
  <hr>
  <p>This is a checkbox:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox@2x.png?t=1706441704">        </figure>
 <p>It’s square, it has a checkmark inside, and its distinguishing feature is that you can select any number of them at the same time:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkboxes@2x.png?t=1706441704">        </figure>
 <p>Different operating systems rendered them differently during their evolution:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_macos_sonoma@2x.png?t=1706441704"><figcaption>macOS Sonoma (2023)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_os_x_maverics@2x.png?t=1706441704"><figcaption>OS X Mavericks (2013)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_os_x_leopard@2x.png?t=1706441704"><figcaption>OS X Leopard (2007)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_mac_os_9@2x.png?t=1706441704"><figcaption>Mac OS 9 (1999)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_mac_os_7.5@2x.png?t=1706441704"><figcaption>Mac OS 7.5 (1994)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_11@2x.png?t=1706441704"><figcaption>Windows 11 (2021)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_8@2x.png?t=1706441704"><figcaption>Windows 8 (2012)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_7@2x.png?t=1706441704"><figcaption>Windows 7 (2009)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_xp@2x.png?t=1706441704"><figcaption>Windows XP (2001)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_2000@2x.png?t=1706441704"><figcaption>Windows 2000 (2000)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_95@2x.png?t=1706441704"><figcaption>Windows 95 (1995)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_3.11@2x.png?t=1706441704"><figcaption>Windows for Workgroups 3.11 (1993)</figcaption>        </figure>
 <p>As you can see, even the checkmark wasn’t always there. But one thing remained constant: checkboxes were square.</p>
 <p>Why square? Because that’s how you can tell them from radio buttons:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radiobuttons@2x.png?t=1706441704">        </figure>
 <p>Their distinguishing feature is a single choice. If you select one, everything else is de-selected.</p>
 <p>I’m not sure when the distinction between square/round was introduced, but it seems to already exist in the 90-s:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/turbo_pascal@2x.png?t=1706441704"><figcaption>Turbo Pascal 7.0 (1992)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/norton_commander_5@2x.png?t=1706441704"><figcaption>Norton Commander 5 (1993)</figcaption>        </figure>
 <p>(Guess where <code>[x]</code> is used now? In Markdown! What a comeback, huh?)</p>
 <p>And since then, every major operating system followed this tradition. From Windows 3.11:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_windows_3.11@2x.png?t=1706441704"><figcaption>Windows for Workgroups 3.11 (1993)</figcaption>        </figure>
 <p>through Windows 95:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_windows_95@2x.png?t=1706441704">        </figure>
 <p>to Windows 11:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_windows_11@2x.png?t=1706441704"><figcaption>Windows 11 (2021)</figcaption>        </figure>
 <p>from Mac OS 4:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_mac_os_7.5@2x.png?t=1706441704"><figcaption>Mac OS 4 (1987)</figcaption>        </figure>
 <p>till macOS Sonoma:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_macos_sonoma@2x.png?t=1706441704"><figcaption>macOS Sonoma (2023)</figcaption>        </figure>
 <p>There was a brief confusion up until 1986 when Apple used rounded rectangles instead of circles:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_mac_os_3@2x.png?t=1706441704"><figcaption>Mac OS 3 (1986)</figcaption>        </figure>
 <p>but it was quickly resolved.</p>
 <p>The point is, every major OS vendor has been adhering to the convention that checkboxes are square and radio buttons are round.</p>
 <p>Then the Web came. And when I say Web, I mean CSS. And when I say CSS, I mean Flash and then JavaScript.</p>
 <p>You see, people on the Web think conventions are boring. That regular controls need to be reinvented and redesigned. They don’t believe there are any norms.</p>
 <p>That’s why it’s common to see radio buttons containing checkmarks:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/twitter@2x.png?t=1706441704"><figcaption>Twitter (2024)</figcaption>        </figure>
 <p>Or square radio buttons:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_yandex_maps@2x.png?t=1706441704"><figcaption>Yandex Maps (2024)</figcaption>        </figure>
 <p>Following the Web’s example, native apps introduced us to round checkboxes:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/telegram@2x.png?t=1706441704"><figcaption>Telegram for macOS (2024)</figcaption>        </figure>
 <p>Sometimes people just don’t make distinctions anymore. For example, here the first group is single-choice, while the second one is multiple-choice:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/yandex_maps@2x.png?t=1706441704"><figcaption>Yandex Maps (2024)</figcaption>        </figure>
 <p>Or here, one of those polls is single-answer, another is multiple-answer:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/telegram_polls@2x.png?t=1706441704"><figcaption>Telegram Web (2024)</figcaption>        </figure>
 <p>How are people supposed to know?</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/scooby@2x.jpg?t=1706441704">        </figure>
 <p>But despite all this chaos and temptation, operating system vendors knew better. To this day, they follow THE convention: checkboxes are square, radio buttons are round.</p>
 <p>Maybe it was part of their internal training. Maybe they had experienced art directors. Maybe it was just luck. I don’t know — it doesn’t really matter — but — somehow — they managed to stick to the convention.</p>
 <p>Until this day.</p>
 <p>Apple is the first major operating system vendor who had abandoned a four-decades-long tradition. Their new visionOS — for the first time in the history of Apple — will have round checkboxes.</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_vision@2x.png?t=1706441704"><figcaption><a href="https://developer.apple.com/design/resources/#visionos-apps" target="_blank">Apple Design Resouces — visionOS — Library</a></figcaption>        </figure>
 <p>How should we even call these? Radio checks? Check buttons?</p>
 <p>Anyway, with Apple’s betrayal, I think it’s fair to say there’s no hope for this tradition to continue.</p>
 <p>I therefore officially announce 2024 to be the year when the square checkbox has finally died.</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/rip@2x.jpg?t=1706441704">        </figure>
 <p>Kids these days will use a toggle anyway.</p>
 </article>


 <hr>

 <footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
 </footer>
 <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
 <script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
 </script>
 </body>
 </html>
--- a/cache/2024/ff566a58892db07815a327802fea66d3/index.md
+++ b/cache/2024/ff566a58892db07815a327802fea66d3/index.md
@@ -0,0 +1,99 @@
 title: In Loving Memory of Square Checkbox
 url: https://tonsky.me/blog/checkbox/
 hash_url: ff566a58892db07815a327802fea66d3
 archive_date: 2024-01-28

 <p>This is a checkbox:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox@2x.png?t=1706441704">        </figure>
 <p>It’s square, it has a checkmark inside, and its distinguishing feature is that you can select any number of them at the same time:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkboxes@2x.png?t=1706441704">        </figure>
 <p>Different operating systems rendered them differently during their evolution:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_macos_sonoma@2x.png?t=1706441704"><figcaption>macOS Sonoma (2023)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_os_x_maverics@2x.png?t=1706441704"><figcaption>OS X Mavericks (2013)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_os_x_leopard@2x.png?t=1706441704"><figcaption>OS X Leopard (2007)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_mac_os_9@2x.png?t=1706441704"><figcaption>Mac OS 9 (1999)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_mac_os_7.5@2x.png?t=1706441704"><figcaption>Mac OS 7.5 (1994)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_11@2x.png?t=1706441704"><figcaption>Windows 11 (2021)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_8@2x.png?t=1706441704"><figcaption>Windows 8 (2012)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_7@2x.png?t=1706441704"><figcaption>Windows 7 (2009)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_xp@2x.png?t=1706441704"><figcaption>Windows XP (2001)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_2000@2x.png?t=1706441704"><figcaption>Windows 2000 (2000)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_95@2x.png?t=1706441704"><figcaption>Windows 95 (1995)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_windows_3.11@2x.png?t=1706441704"><figcaption>Windows for Workgroups 3.11 (1993)</figcaption>        </figure>
 <p>As you can see, even the checkmark wasn’t always there. But one thing remained constant: checkboxes were square.</p>
 <p>Why square? Because that’s how you can tell them from radio buttons:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radiobuttons@2x.png?t=1706441704">        </figure>
 <p>Their distinguishing feature is a single choice. If you select one, everything else is de-selected.</p>
 <p>I’m not sure when the distinction between square/round was introduced, but it seems to already exist in the 90-s:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/turbo_pascal@2x.png?t=1706441704"><figcaption>Turbo Pascal 7.0 (1992)</figcaption>        </figure>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/norton_commander_5@2x.png?t=1706441704"><figcaption>Norton Commander 5 (1993)</figcaption>        </figure>
 <p>(Guess where <code>[x]</code> is used now? In Markdown! What a comeback, huh?)</p>
 <p>And since then, every major operating system followed this tradition. From Windows 3.11:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_windows_3.11@2x.png?t=1706441704"><figcaption>Windows for Workgroups 3.11 (1993)</figcaption>        </figure>
 <p>through Windows 95:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_windows_95@2x.png?t=1706441704">        </figure>
 <p>to Windows 11:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_windows_11@2x.png?t=1706441704"><figcaption>Windows 11 (2021)</figcaption>        </figure>
 <p>from Mac OS 4:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_mac_os_7.5@2x.png?t=1706441704"><figcaption>Mac OS 4 (1987)</figcaption>        </figure>
 <p>till macOS Sonoma:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_macos_sonoma@2x.png?t=1706441704"><figcaption>macOS Sonoma (2023)</figcaption>        </figure>
 <p>There was a brief confusion up until 1986 when Apple used rounded rectangles instead of circles:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_mac_os_3@2x.png?t=1706441704"><figcaption>Mac OS 3 (1986)</figcaption>        </figure>
 <p>but it was quickly resolved.</p>
 <p>The point is, every major OS vendor has been adhering to the convention that checkboxes are square and radio buttons are round.</p>
 <p>Then the Web came. And when I say Web, I mean CSS. And when I say CSS, I mean Flash and then JavaScript.</p>
 <p>You see, people on the Web think conventions are boring. That regular controls need to be reinvented and redesigned. They don’t believe there are any norms.</p>
 <p>That’s why it’s common to see radio buttons containing checkmarks:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/twitter@2x.png?t=1706441704"><figcaption>Twitter (2024)</figcaption>        </figure>
 <p>Or square radio buttons:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/radio_yandex_maps@2x.png?t=1706441704"><figcaption>Yandex Maps (2024)</figcaption>        </figure>
 <p>Following the Web’s example, native apps introduced us to round checkboxes:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/telegram@2x.png?t=1706441704"><figcaption>Telegram for macOS (2024)</figcaption>        </figure>
 <p>Sometimes people just don’t make distinctions anymore. For example, here the first group is single-choice, while the second one is multiple-choice:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/yandex_maps@2x.png?t=1706441704"><figcaption>Yandex Maps (2024)</figcaption>        </figure>
 <p>Or here, one of those polls is single-answer, another is multiple-answer:</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/telegram_polls@2x.png?t=1706441704"><figcaption>Telegram Web (2024)</figcaption>        </figure>
 <p>How are people supposed to know?</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/scooby@2x.jpg?t=1706441704">        </figure>
 <p>But despite all this chaos and temptation, operating system vendors knew better. To this day, they follow THE convention: checkboxes are square, radio buttons are round.</p>
 <p>Maybe it was part of their internal training. Maybe they had experienced art directors. Maybe it was just luck. I don’t know — it doesn’t really matter — but — somehow — they managed to stick to the convention.</p>
 <p>Until this day.</p>
 <p>Apple is the first major operating system vendor who had abandoned a four-decades-long tradition. Their new visionOS — for the first time in the history of Apple — will have round checkboxes.</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/checkbox_vision@2x.png?t=1706441704"><figcaption><a href="https://developer.apple.com/design/resources/#visionos-apps" target="_blank">Apple Design Resouces — visionOS — Library</a></figcaption>        </figure>
 <p>How should we even call these? Radio checks? Check buttons?</p>
 <p>Anyway, with Apple’s betrayal, I think it’s fair to say there’s no hope for this tradition to continue.</p>
 <p>I therefore officially announce 2024 to be the year when the square checkbox has finally died.</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/rip@2x.jpg?t=1706441704">        </figure>
 <p>Kids these days will use a toggle anyway.</p>
--- a/cache/2024/index.html
+++ b/cache/2024/index.html
@@ -76,10 +76,16 @@
      
        <li><a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Accès à l’article dans le cache local : Reconsider your partnership with Brave">Reconsider your partnership with Brave</a> (<a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6" title="Accès à l’article original distant : Reconsider your partnership with Brave">original</a>)</li>
      
        <li><a href="/david/cache/2024/790f724c45b26de460f9eeac04d48884/" title="Accès à l’article dans le cache local : carnet d'archéologue">carnet d'archéologue</a> (<a href="https://www.la-grange.net/2024/01/22/carnet" title="Accès à l’article original distant : carnet d'archéologue">original</a>)</li>
      
        <li><a href="/david/cache/2024/da7e5578fd96fe31d46bfb207d041880/" title="Accès à l’article dans le cache local : Redeployment Part One">Redeployment Part One</a> (<a href="https://brr.fyi/posts/redeployment-part-one" title="Accès à l’article original distant : Redeployment Part One">original</a>)</li>
      
        <li><a href="/david/cache/2024/1fe484434058e9c44d21bfebb0ddba31/" title="Accès à l’article dans le cache local : ce que nous laissons">ce que nous laissons</a> (<a href="https://www.la-grange.net/2024/01/23/legacy" title="Accès à l’article original distant : ce que nous laissons">original</a>)</li>
      
        <li><a href="/david/cache/2024/e5c1ca8e3beeb0d256a064832c3566aa/" title="Accès à l’article dans le cache local : The personality of a personal website">The personality of a personal website</a> (<a href="https://manuelmoreale.com/the-personality-of-a-personal-website" title="Accès à l’article original distant : The personality of a personal website">original</a>)</li>
      
        <li><a href="/david/cache/2024/a3ccfb51f65cd59f375d5424d243e012/" title="Accès à l’article dans le cache local : In Praise of Buttons">In Praise of Buttons</a> (<a href="https://www.nubero.ch/blog/009/" title="Accès à l’article original distant : In Praise of Buttons">original</a>)</li>
      
        <li><a href="/david/cache/2024/7ed7f4aefae1b5af33b3ec1f607a633f/" title="Accès à l’article dans le cache local : L’Observatoire des perspectives utopiques">L’Observatoire des perspectives utopiques</a> (<a href="https://lobsoco.com/perspectives-utopiques-vague-3/" title="Accès à l’article original distant : L’Observatoire des perspectives utopiques">original</a>)</li>
      
        <li><a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Accès à l’article dans le cache local : notes">notes</a> (<a href="https://www.la-grange.net/2023/07/10/notes-train" title="Accès à l’article original distant : notes">original</a>)</li>
@@ -94,6 +100,8 @@
      
        <li><a href="/david/cache/2024/5030196507bcf3e06162e9eaed40abbe/" title="Accès à l’article dans le cache local : Blogging and Composting">Blogging and Composting</a> (<a href="https://blog.jim-nielsen.com/2023/blogging-and-compositing/" title="Accès à l’article original distant : Blogging and Composting">original</a>)</li>
      
        <li><a href="/david/cache/2024/ff566a58892db07815a327802fea66d3/" title="Accès à l’article dans le cache local : In Loving Memory of Square Checkbox">In Loving Memory of Square Checkbox</a> (<a href="https://tonsky.me/blog/checkbox/" title="Accès à l’article original distant : In Loving Memory of Square Checkbox">original</a>)</li>
      
        <li><a href="/david/cache/2024/7d2d2bce96cbc020423299e7de03d2cf/" title="Accès à l’article dans le cache local : Disillusioned with Deno">Disillusioned with Deno</a> (<a href="https://www.baldurbjarnason.com/2024/disillusioned-with-deno/" title="Accès à l’article original distant : Disillusioned with Deno">original</a>)</li>
      
        <li><a href="/david/cache/2024/c4751e7c80b292e3533ee6b3e057b702/" title="Accès à l’article dans le cache local : Manuel de survie de la femme dans la tech">Manuel de survie de la femme dans la tech</a> (<a href="https://www.duchess-france.fr/dossier/women%20in%20tech/alli%C3%A9s/2023/01/15/manuel-survie-femme-tech.html" title="Accès à l’article original distant : Manuel de survie de la femme dans la tech">original</a>)</li>
@@ -106,10 +114,14 @@
      
        <li><a href="/david/cache/2024/34fec23081019abd741e0578b050c40e/" title="Accès à l’article dans le cache local : Tools shape practices shape tools…">Tools shape practices shape tools…</a> (<a href="https://www.quaternum.net/2024/01/08/tools-shape-practices-shape-tools/" title="Accès à l’article original distant : Tools shape practices shape tools…">original</a>)</li>
      
        <li><a href="/david/cache/2024/956819385548bba6e768563b12edc2d6/" title="Accès à l’article dans le cache local : herbe">herbe</a> (<a href="https://www.la-grange.net/2024/01/24/herbe" title="Accès à l’article original distant : herbe">original</a>)</li>
      
        <li><a href="/david/cache/2024/faa1d8cae94da6838ff9351e5df791ca/" title="Accès à l’article dans le cache local : Make the indie web easier">Make the indie web easier</a> (<a href="https://gilest.org/indie-easy.html" title="Accès à l’article original distant : Make the indie web easier">original</a>)</li>
      
        <li><a href="/david/cache/2024/3debc675a055d691b32c7d6904531eb4/" title="Accès à l’article dans le cache local : How Google perfected the web">How Google perfected the web</a> (<a href="https://www.theverge.com/c/23998379/google-search-seo-algorithm-webpage-optimization" title="Accès à l’article original distant : How Google perfected the web">original</a>)</li>
      
        <li><a href="/david/cache/2024/b351cda8d2ccd73362ca1729845b7e79/" title="Accès à l’article dans le cache local : New HTML Control Lands in Safari">New HTML Control Lands in Safari</a> (<a href="https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari" title="Accès à l’article original distant : New HTML Control Lands in Safari">original</a>)</li>
      
        <li><a href="/david/cache/2024/ffaf50bf5d5e4cf870a618b518ee5ba7/" title="Accès à l’article dans le cache local : Portable EPUBs">Portable EPUBs</a> (<a href="https://willcrichton.net/notes/portable-epubs/" title="Accès à l’article original distant : Portable EPUBs">original</a>)</li>
      
        <li><a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Accès à l’article dans le cache local : plaisir d'ébauche">plaisir d'ébauche</a> (<a href="https://www.la-grange.net/2024/01/06/ebauche" title="Accès à l’article original distant : plaisir d'ébauche">original</a>)</li>
@@ -152,6 +164,8 @@
      
        <li><a href="/david/cache/2024/7136e0810bfa42c4a9ca798a55cd2d53/" title="Accès à l’article dans le cache local : Where have all the flowers gone?">Where have all the flowers gone?</a> (<a href="https://daverupert.com/2024/01/where-have-all-the-websites-gone/" title="Accès à l’article original distant : Where have all the flowers gone?">original</a>)</li>
      
        <li><a href="/david/cache/2024/b692faaa55fd2775e957b20e833e9e5e/" title="Accès à l’article dans le cache local : fraîchement">fraîchement</a> (<a href="https://www.la-grange.net/2024/01/26/fraichement" title="Accès à l’article original distant : fraîchement">original</a>)</li>
      
        <li><a href="/david/cache/2024/c98206d38897264005bcd5b453d032b1/" title="Accès à l’article dans le cache local : Designing better target sizes">Designing better target sizes</a> (<a href="https://ishadeed.com/article/target-size" title="Accès à l’article original distant : Designing better target sizes">original</a>)</li>
      
        <li><a href="/david/cache/2024/09c0739036ea4a8b6c985e127fe7e3c8/" title="Accès à l’article dans le cache local : ☕️ Journal : Carnets">☕️ Journal : Carnets</a> (<a href="https://thom4.net/2023/02/01/carnets/" title="Accès à l’article original distant : ☕️ Journal : Carnets">original</a>)</li>