2 years ago · e8979a0fc8
--- a/cache/2022/128ce7c2bc3cbf479318e36ae2faf6b8/index.html
+++ b/cache/2022/128ce7c2bc3cbf479318e36ae2faf6b8/index.html
@@ -0,0 +1,183 @@
 <!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>Lessy est terminé (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)">
 <!-- 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://marienfressinaud.fr/lessy-est-termine.html">

 <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>Lessy est terminé</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://marienfressinaud.fr/lessy-est-termine.html" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Lessy <del>est</del> était un gestionnaire de temps mettant à disposition une liste de tâches et un gestionnaire de projets.</p>
 <p>Il y a un an, <a href="des-nouvelles-de-lessy.html">j’écrivais</a> :</p>
 <blockquote>
 <p>En l’état, Lessy m’est en fait relativement peu utile. […] Ma manière de gérer mes tâches a évolué et j’arrive la plupart du temps à me contenter d’un bout de papier […].</p>
 <p>Lessy, dans sa version actuelle, correspond en fait pas mal à ce que je souhaitais avoir quand j’ai commencé son développement. […]</p>
 <p><strong>Tout bien pensé, je crois que Lessy est terminé.</strong></p>
 </blockquote>
 <p>Depuis, rien n’a vraiment changé. Je gère toujours mes tâches sur un bout de papier, aidé en plus par un mécanisme de routines qui ne nécessite que d’une feuille de tableur (je vous en reparle prochainement). Je continue également de penser que Lessy, dans sa forme actuelle, correspond à ce que j’imaginais initialement et qu’il n’a plus besoin de changer.</p>
 <p>Le problème, c’est que je ne savais pas trop quoi faire de lui. <strong>En octobre dernier, j’ai décidé de fermer les inscriptions sur <a href="https://lessy.io">lessy.io</a>.</strong> C’était déjà un petit soulagement.</p>
 <p>Mais que faire alors du code existant ? Initialement, je pensais <a href="terminer-ses-projets.html">terminer</a> Lessy proprement en n’ajoutant plus de fonctionnalités, mais en continuant de mettre à jour les dépendances logicielles afin d’éviter des failles de sécurité. Mais je dois vous avouer que je n’en suis plus capable. Les dépendances JavaScript sont une véritable plaie à maintenir avec des trucs qui pètent dans tous les sens à chaque mise à jour. C’est une charge que je n’ai pas envie de gérer.</p>
 <p>Finalement, j’ai décidé de clore et archiver <a href="https://github.com/lessy-community/lessy">le dépôt de code</a> un peu plus sauvagement. Le fichier README a été mis à jour pour expliquer que le projet n’est plus maintenu. <strong>Je continuerai de maintenir le service <a href="https://lessy.io">lessy.io</a> ouvert tant que des gens l’utiliseront</strong> (et il y en a !) ; les inscriptions, elles, resteront fermées.</p>
 <p>Je suis très heureux d’avoir bossé sur Lessy avec lequel j’aurai appris plein de choses. Mais je suis encore plus content de pouvoir annoncer qu’il est terminé et ainsi de ne plus avoir à m’en soucier 🙂</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/2022/128ce7c2bc3cbf479318e36ae2faf6b8/index.md
+++ b/cache/2022/128ce7c2bc3cbf479318e36ae2faf6b8/index.md
@@ -0,0 +1,16 @@
 title: Lessy est terminé
 url: https://marienfressinaud.fr/lessy-est-termine.html
 hash_url: 128ce7c2bc3cbf479318e36ae2faf6b8

 <p>Lessy <del>est</del> était un gestionnaire de temps mettant à disposition une liste de tâches et un gestionnaire de projets.</p>
 <p>Il y a un an, <a href="des-nouvelles-de-lessy.html">j’écrivais</a> :</p>
 <blockquote>
 <p>En l’état, Lessy m’est en fait relativement peu utile. […] Ma manière de gérer mes tâches a évolué et j’arrive la plupart du temps à me contenter d’un bout de papier […].</p>
 <p>Lessy, dans sa version actuelle, correspond en fait pas mal à ce que je souhaitais avoir quand j’ai commencé son développement. […]</p>
 <p><strong>Tout bien pensé, je crois que Lessy est terminé.</strong></p>
 </blockquote>
 <p>Depuis, rien n’a vraiment changé. Je gère toujours mes tâches sur un bout de papier, aidé en plus par un mécanisme de routines qui ne nécessite que d’une feuille de tableur (je vous en reparle prochainement). Je continue également de penser que Lessy, dans sa forme actuelle, correspond à ce que j’imaginais initialement et qu’il n’a plus besoin de changer.</p>
 <p>Le problème, c’est que je ne savais pas trop quoi faire de lui. <strong>En octobre dernier, j’ai décidé de fermer les inscriptions sur <a href="https://lessy.io">lessy.io</a>.</strong> C’était déjà un petit soulagement.</p>
 <p>Mais que faire alors du code existant ? Initialement, je pensais <a href="terminer-ses-projets.html">terminer</a> Lessy proprement en n’ajoutant plus de fonctionnalités, mais en continuant de mettre à jour les dépendances logicielles afin d’éviter des failles de sécurité. Mais je dois vous avouer que je n’en suis plus capable. Les dépendances JavaScript sont une véritable plaie à maintenir avec des trucs qui pètent dans tous les sens à chaque mise à jour. C’est une charge que je n’ai pas envie de gérer.</p>
 <p>Finalement, j’ai décidé de clore et archiver <a href="https://github.com/lessy-community/lessy">le dépôt de code</a> un peu plus sauvagement. Le fichier README a été mis à jour pour expliquer que le projet n’est plus maintenu. <strong>Je continuerai de maintenir le service <a href="https://lessy.io">lessy.io</a> ouvert tant que des gens l’utiliseront</strong> (et il y en a !) ; les inscriptions, elles, resteront fermées.</p>
 <p>Je suis très heureux d’avoir bossé sur Lessy avec lequel j’aurai appris plein de choses. Mais je suis encore plus content de pouvoir annoncer qu’il est terminé et ainsi de ne plus avoir à m’en soucier 🙂</p>
--- a/cache/2022/1ab2a594ae40deb0f4443807f1fa7596/index.html
+++ b/cache/2022/1ab2a594ae40deb0f4443807f1fa7596/index.html
@@ -0,0 +1,183 @@
 <!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>Performances trop bonnes (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)">
 <!-- 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://nota-bene.org/Performances-trop-bonnes">

 <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>Performances trop bonnes</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://nota-bene.org/Performances-trop-bonnes" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>On croit rêver&nbsp;:</p>
 <blockquote cite="https://larlet.fr/david/stream/2015/12/22/">
 <p>Notez qu’en attendant j’ai mis une courte animation à l’affichage des pages car on m’a plusieurs fois fait la remarque que &#171;&nbsp;les performances sont trop bonnes&nbsp;&#187; pour identifier le changement de page (la première fois j’ai pris ça pour une blague mais il faut bien constater qu’il s’agit d’une expérience aux antipodes des pratiques sur le web…)[…]</p>
 <footer><a href="https://larlet.fr/david/stream/2015/12/22/" class='spip_out' rel='external'>Refonte de Noël &mdash; David Larlet</a></footer></blockquote>
 <p>Être obligé de donner une illusion de ralentissement pour que les gens comprennent que la page est chargée, ça me donne un petit tic nerveux, je ne sais pas pourquoi.</p>
 <p>Au contraire, dès que je vois un site qui se charge presque instantanément, je suis ravi.</p>
 <p>J&#8217;aimerais bien connaître mieux les gens qui ont fait cette remarque.</p>
 <p><strong>Mise à jour du 1<sup>er</sup> janvier&nbsp;:</strong></p>
 <p>David donne <a href="https://larlet.fr/david/stream/2015/12/30/" class='spip_out' rel='external'>plus d&#8217;informations</a>, c&#8217;est éducatif&nbsp;:</p>
 <blockquote cite="https://larlet.fr/david/stream/2015/12/30/">
 <p>J’ai mis en place cette animation suite à deux emails et trois observations de personnes <em>non techniques</em>. C’est peu mais je n’ai malheureusement pas le luxe de pouvoir avoir plus de retours. L’avantage des observations est d’avoir pu voir la désorientation sans même que les personnes en aient vraiment eues conscience, un instant de réflexion et de balayage d’écran avant de comprendre que la page avait bien changée.</p>
 <footer><a href="https://larlet.fr/david/stream/2015/12/30/" class='spip_out' rel='external'>Performances et ressenti &mdash; David Larlet</a></footer></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/2022/1ab2a594ae40deb0f4443807f1fa7596/index.md
+++ b/cache/2022/1ab2a594ae40deb0f4443807f1fa7596/index.md
@@ -0,0 +1,16 @@
 title: Performances trop bonnes
 url: https://nota-bene.org/Performances-trop-bonnes
 hash_url: 1ab2a594ae40deb0f4443807f1fa7596

 <p>On croit rêver&nbsp;:</p>
 <blockquote cite="https://larlet.fr/david/stream/2015/12/22/">
 <p>Notez qu’en attendant j’ai mis une courte animation à l’affichage des pages car on m’a plusieurs fois fait la remarque que &#171;&nbsp;les performances sont trop bonnes&nbsp;&#187; pour identifier le changement de page (la première fois j’ai pris ça pour une blague mais il faut bien constater qu’il s’agit d’une expérience aux antipodes des pratiques sur le web…)[…]</p>
 <footer><a href="https://larlet.fr/david/stream/2015/12/22/" class='spip_out' rel='external'>Refonte de Noël &mdash; David Larlet</a></footer></blockquote>
 <p>Être obligé de donner une illusion de ralentissement pour que les gens comprennent que la page est chargée, ça me donne un petit tic nerveux, je ne sais pas pourquoi.</p>
 <p>Au contraire, dès que je vois un site qui se charge presque instantanément, je suis ravi.</p>
 <p>J&#8217;aimerais bien connaître mieux les gens qui ont fait cette remarque.</p>
 <p><strong>Mise à jour du 1<sup>er</sup> janvier&nbsp;:</strong></p>
 <p>David donne <a href="https://larlet.fr/david/stream/2015/12/30/" class='spip_out' rel='external'>plus d&#8217;informations</a>, c&#8217;est éducatif&nbsp;:</p>
 <blockquote cite="https://larlet.fr/david/stream/2015/12/30/">
 <p>J’ai mis en place cette animation suite à deux emails et trois observations de personnes <em>non techniques</em>. C’est peu mais je n’ai malheureusement pas le luxe de pouvoir avoir plus de retours. L’avantage des observations est d’avoir pu voir la désorientation sans même que les personnes en aient vraiment eues conscience, un instant de réflexion et de balayage d’écran avant de comprendre que la page avait bien changée.</p>
 <footer><a href="https://larlet.fr/david/stream/2015/12/30/" class='spip_out' rel='external'>Performances et ressenti &mdash; David Larlet</a></footer></blockquote>
--- a/cache/2022/1f0b2ca39bffe2d3551c7ea20dc315a1/index.html
+++ b/cache/2022/1f0b2ca39bffe2d3551c7ea20dc315a1/index.html
@@ -0,0 +1,229 @@
 <!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>Lettre à Jean Grave, par Élisée Reclus (Voter c'est abdiquer) (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)">
 <!-- 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="http://www.homme-moderne.org/textes/classics/ereclus/jgrave.html">

 <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>Lettre à Jean Grave, par Élisée Reclus (Voter c'est abdiquer)</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="http://www.homme-moderne.org/textes/classics/ereclus/jgrave.html" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p align="center"><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">                                   Clarens, Vaud, 26 septembre 1885. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">                                  Compagnons, </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     Vous demandez à un homme de bonne volonté, qui
  n'est ni votant ni candidat, de vous exposer quelles sont ses
  idées sur l'exercice du droit de suffrage. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     Le délai que vous m'accordez est bien court, mais ayant, au
  sujet du vote électoral, des convictions bien nettes, ce que
  j'ai à vous dire peut se formuler en quelques mots. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     <strong>Voter, c'est abdiquer </strong>; nommer un ou plusieurs maîtres pour
  une période courte ou longue, c'est renoncer à sa
  propre souveraineté. Qu'il devienne monarque absolu, prince
  constitutionnel ou simplement mandataire muni d'une petite part de
  royauté, le candidat que vous portez au trône ou
  au fauteuil sera votre supérieur. Vous nommez des hommes qui
  sont au-dessus des lois, puisqu'ils se chargent de les
  rédiger et que leur mission est de vous faire
  obéir. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     Voter, c'est être dupe ; c'est croire que des hommes comme
  vous acquerront soudain, au tintement d'une sonnette, la vertu de tout
  savoir et de tout comprendre. Vos mandataires ayant à
  légiférer sur toutes choses, des allumettes aux
  vaisseaux de guerre, de l'échenillage des arbres
  à l'extermination des peuplades rouges ou noires, il vous
  semble que leur intelligence grandisse en raison même de
  l'immensité de la tâche. L'histoire vous enseigne
  que le contraire a lieu. Le pouvoir a toujours affolé, le
  parlotage a toujours abêti. Dans les assemblées
  souveraines, la médiocrité prévaut
  fatalement. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     Voter c'est évoquer la trahison. Sans doute, les votants
  croient à l'honnêteté de ceux auxquels
  ils accordent leurs suffrages  — et peut-être ont-il
  raison le premier jour, quand les candidats sont encore dans la ferveur
  du premier amour. Mais chaque jour a son lendemain. Dès que
  le milieu change, l'homme change avec lui. Aujourd'hui, le candidat
  s'incline devant vous, et peut-être trop bas ; demain, il se
  redressera et peut-être trop haut. Il mendiait les votes, il
  vous donnera des ordres. L'ouvrier, devenu contre-maître,
  peut-il rester ce qu'il était avant d'avoir obtenu la faveur
  du patron ? Le fougueux démocrate n'apprend-il pas
  à courber l'échine quand le banquier daigne
  l'inviter à son bureau, quand les valets des rois lui font
  l'honneur de l'entretenir dans les antichambres ?
  L'atmosphère de ces corps législatifs est malsain
  à respirer, vous envoyez vos mandataires dans un milieu de
  corruption ; ne vous étonnez pas s'ils en sortent corrompus. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     N'abdiquez donc pas, ne remettez donc pas vos destinées
  à des hommes forcément incapables et à
  des traîtres futurs. Ne votez pas ! Au lieu de confier vos
  intérêts à d'autres,
  défendez-les vous-mêmes ; au lieu de prendre des
  avocats pour proposer un mode d'action futur,  agissez ! Les
  occasions ne manquent pas aux hommes de bon vouloir. Rejeter sur les
  autres la responsabilité de sa conduite, c'est manquer de
  vaillance. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     Je vous salue de tout cœur, compagnons . </font></p>
 <p align="center"><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">Élisée Reclus.   </font><br>
   </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/2022/1f0b2ca39bffe2d3551c7ea20dc315a1/index.md
+++ b/cache/2022/1f0b2ca39bffe2d3551c7ea20dc315a1/index.md
@@ -0,0 +1,62 @@
 title: Lettre à Jean Grave, par Élisée Reclus (Voter c'est abdiquer)
 url: http://www.homme-moderne.org/textes/classics/ereclus/jgrave.html
 hash_url: 1f0b2ca39bffe2d3551c7ea20dc315a1

 <p align="center"><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">                                   Clarens, Vaud, 26 septembre 1885. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">                                  Compagnons, </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     Vous demandez à un homme de bonne volonté, qui
  n'est ni votant ni candidat, de vous exposer quelles sont ses
  idées sur l'exercice du droit de suffrage. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     Le délai que vous m'accordez est bien court, mais ayant, au
  sujet du vote électoral, des convictions bien nettes, ce que
  j'ai à vous dire peut se formuler en quelques mots. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     <strong>Voter, c'est abdiquer </strong>; nommer un ou plusieurs maîtres pour
  une période courte ou longue, c'est renoncer à sa
  propre souveraineté. Qu'il devienne monarque absolu, prince
  constitutionnel ou simplement mandataire muni d'une petite part de
  royauté, le candidat que vous portez au trône ou
  au fauteuil sera votre supérieur. Vous nommez des hommes qui
  sont au-dessus des lois, puisqu'ils se chargent de les
  rédiger et que leur mission est de vous faire
  obéir. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     Voter, c'est être dupe ; c'est croire que des hommes comme
  vous acquerront soudain, au tintement d'une sonnette, la vertu de tout
  savoir et de tout comprendre. Vos mandataires ayant à
  légiférer sur toutes choses, des allumettes aux
  vaisseaux de guerre, de l'échenillage des arbres
  à l'extermination des peuplades rouges ou noires, il vous
  semble que leur intelligence grandisse en raison même de
  l'immensité de la tâche. L'histoire vous enseigne
  que le contraire a lieu. Le pouvoir a toujours affolé, le
  parlotage a toujours abêti. Dans les assemblées
  souveraines, la médiocrité prévaut
  fatalement. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     Voter c'est évoquer la trahison. Sans doute, les votants
  croient à l'honnêteté de ceux auxquels
  ils accordent leurs suffrages  — et peut-être ont-il
  raison le premier jour, quand les candidats sont encore dans la ferveur
  du premier amour. Mais chaque jour a son lendemain. Dès que
  le milieu change, l'homme change avec lui. Aujourd'hui, le candidat
  s'incline devant vous, et peut-être trop bas ; demain, il se
  redressera et peut-être trop haut. Il mendiait les votes, il
  vous donnera des ordres. L'ouvrier, devenu contre-maître,
  peut-il rester ce qu'il était avant d'avoir obtenu la faveur
  du patron ? Le fougueux démocrate n'apprend-il pas
  à courber l'échine quand le banquier daigne
  l'inviter à son bureau, quand les valets des rois lui font
  l'honneur de l'entretenir dans les antichambres ?
  L'atmosphère de ces corps législatifs est malsain
  à respirer, vous envoyez vos mandataires dans un milieu de
  corruption ; ne vous étonnez pas s'ils en sortent corrompus. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     N'abdiquez donc pas, ne remettez donc pas vos destinées
  à des hommes forcément incapables et à
  des traîtres futurs. Ne votez pas ! Au lieu de confier vos
  intérêts à d'autres,
  défendez-les vous-mêmes ; au lieu de prendre des
  avocats pour proposer un mode d'action futur,  agissez ! Les
  occasions ne manquent pas aux hommes de bon vouloir. Rejeter sur les
  autres la responsabilité de sa conduite, c'est manquer de
  vaillance. </font></p>
 <p><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">     Je vous salue de tout cœur, compagnons . </font></p>
 <p align="center"><font size="4" face="AGaramond, Garamond, Times, Baskerville, Sabon, serif">Élisée Reclus.   </font><br>
   </p>
--- a/cache/2022/27ced7003612537f6ad81106f34607af/index.html
+++ b/cache/2022/27ced7003612537f6ad81106f34607af/index.html
@@ -0,0 +1,196 @@
 <!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>There’s More to Design Than Data and Rationality (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)">
 <!-- 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://blog.jim-nielsen.com/2022/more-to-design-than-data-and-rationality/">

 <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>There’s More to Design Than Data and Rationality</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://blog.jim-nielsen.com/2022/more-to-design-than-data-and-rationality/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Spurred by the article <a href="https://terrytao.wordpress.com/career-advice/theres-more-to-mathematics-than-rigour-and-proofs/">“There’s more to mathematics than rigour and proofs”</a>, I couldn’t help but riff on the idea but in terms of design.</p>
 <p>While the author suggests there’s more to math than “rigour and proofs”, I tangentially suggest there’s more to design than data and rationality. Design can be much richer when intuition and the intangible is factored into decision making. Too often, design is boiled down to what appears to be a material science: create something—anything really—put metrics in place to measure its success, then determine its ultimate value by purely numerical outcomes.</p>
 <p>Here’s the math parallel:</p>
 <blockquote>
 <p>It is of course vitally important that you know how to think rigorously, as this gives you the discipline to avoid many common errors and purge many misconceptions. Unfortunately, this has the unintended consequence that “fuzzier” or “intuitive” thinking (such as heuristic reasoning, judicious extrapolation from examples, or analogies with other contexts such as physics) gets deprecated as “non-rigorous”. All too often, one ends up discarding one’s initial intuition and is only able to process mathematics at a formal level, thus getting stalled at the second stage of one’s mathematical education.</p>
 </blockquote>
 <p>It’s very easy to reduce design to a process of material proof while “heuristic reasoning, judicious extrapolation from examples, or analogies with other contexts…gets deprecated as ‘non-rigorous’”. If you don’t have the data to backup your decision making, you have little merit. </p>
 <p>But the point of data and rationality is not to destroy intuition, but to be the yin to intuition’s yang.</p>
 <p>Again, the mathematical parallel:</p>
 <blockquote>
 <p>The point of rigour is <em>not</em> to destroy all intuition; instead, it should be used to destroy <em>bad</em> intuition while clarifying and elevating good intuition. It is only with a combination of both rigorous formalism and good intuition that one can tackle complex mathematical problems; one needs the former to correctly deal with the fine details, and the latter to correctly deal with the big picture.</p>
 </blockquote>
 <p>Let’s rephrase that, replacing “rigour” with “data”, and it feels like a good mental model thinking about the merger of intuition and data-informed decision making in design:</p>
 <blockquote>
 <p>The point of [data in design] is not to destroy all intuition; instead, it should be used to destroy bad intuition while clarifying and elevating good intuition. It is only with a combination of both [data] and good intuition that one can tackle complex…problems; one needs [data] to correctly deal with the fine details, and [intuition] to correctly deal with the big picture.</p>
 </blockquote>
 <p>I know for me, there’s been an evolution and growth working in design. Early on, I had my innate gut feeling but little experience to back it up. As I grew, I moved towards ignoring my intuition in favor of “objective” data or reasoning. However, as I grew more and gained more experience, I realized the value of my early intuition and began to pair it with my seasoned experience. I grew from an instinctual designer to a data-driven designer to data-informed designer and beyond.</p>
 <p>Continuing this thought, I riffed on the author’s commentary about the evolution of “mathematical education” but, in this case, changing it to “design education”:</p>
 <ol>
 <li>The “pre-rigorous” stage, in which design is taught in an informal, intuitive manner. What does your gut and instinct tell you for decision making? Go with it.</li>
 <li>The “rigorous” stage, in which one is now taught that in order to do design “properly”, one needs to work and think in a much more precise and formal manner. The emphasis is now primarily on data and metrics and “proving” outcomes. Don’t focus too much on feeling but more on rationality. </li>
 <li>The “post-rigorous” stage, in which one has grown comfortable with all the rigorous foundations of one’s chosen field, and is now ready to revisit and refine one’s pre-rigorous intuition on the subject, but this time with the intuition solidly buttressed by rigorous theory. The emphasis is now not design as it relates to individual things, but synthesizing the relationships between things and how they relate to the “big picture”. Feeling, intuition, data, and rationality are kept in balance with each other through iteration</li>
 </ol>
 <p>To be honest, I don’t know if any of this relates to what the author was trying to say as it relates to math, but it <em>feels</em> relatable to my path as a designer.</p>
 <p>It’s a good reminder that the answer is usually a mix: it’s not data over intuition, nor rationality over feeling. Argue the contraries and you’ll find wisdom in-between. </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/2022/27ced7003612537f6ad81106f34607af/index.md
+++ b/cache/2022/27ced7003612537f6ad81106f34607af/index.md
@@ -0,0 +1,29 @@
 title: There’s More to Design Than Data and Rationality
 url: https://blog.jim-nielsen.com/2022/more-to-design-than-data-and-rationality/
 hash_url: 27ced7003612537f6ad81106f34607af

 <p>Spurred by the article <a href="https://terrytao.wordpress.com/career-advice/theres-more-to-mathematics-than-rigour-and-proofs/">“There’s more to mathematics than rigour and proofs”</a>, I couldn’t help but riff on the idea but in terms of design.</p>
 <p>While the author suggests there’s more to math than “rigour and proofs”, I tangentially suggest there’s more to design than data and rationality. Design can be much richer when intuition and the intangible is factored into decision making. Too often, design is boiled down to what appears to be a material science: create something—anything really—put metrics in place to measure its success, then determine its ultimate value by purely numerical outcomes.</p>
 <p>Here’s the math parallel:</p>
 <blockquote>
 <p>It is of course vitally important that you know how to think rigorously, as this gives you the discipline to avoid many common errors and purge many misconceptions. Unfortunately, this has the unintended consequence that “fuzzier” or “intuitive” thinking (such as heuristic reasoning, judicious extrapolation from examples, or analogies with other contexts such as physics) gets deprecated as “non-rigorous”. All too often, one ends up discarding one’s initial intuition and is only able to process mathematics at a formal level, thus getting stalled at the second stage of one’s mathematical education.</p>
 </blockquote>
 <p>It’s very easy to reduce design to a process of material proof while “heuristic reasoning, judicious extrapolation from examples, or analogies with other contexts…gets deprecated as ‘non-rigorous’”. If you don’t have the data to backup your decision making, you have little merit. </p>
 <p>But the point of data and rationality is not to destroy intuition, but to be the yin to intuition’s yang.</p>
 <p>Again, the mathematical parallel:</p>
 <blockquote>
 <p>The point of rigour is <em>not</em> to destroy all intuition; instead, it should be used to destroy <em>bad</em> intuition while clarifying and elevating good intuition. It is only with a combination of both rigorous formalism and good intuition that one can tackle complex mathematical problems; one needs the former to correctly deal with the fine details, and the latter to correctly deal with the big picture.</p>
 </blockquote>
 <p>Let’s rephrase that, replacing “rigour” with “data”, and it feels like a good mental model thinking about the merger of intuition and data-informed decision making in design:</p>
 <blockquote>
 <p>The point of [data in design] is not to destroy all intuition; instead, it should be used to destroy bad intuition while clarifying and elevating good intuition. It is only with a combination of both [data] and good intuition that one can tackle complex…problems; one needs [data] to correctly deal with the fine details, and [intuition] to correctly deal with the big picture.</p>
 </blockquote>
 <p>I know for me, there’s been an evolution and growth working in design. Early on, I had my innate gut feeling but little experience to back it up. As I grew, I moved towards ignoring my intuition in favor of “objective” data or reasoning. However, as I grew more and gained more experience, I realized the value of my early intuition and began to pair it with my seasoned experience. I grew from an instinctual designer to a data-driven designer to data-informed designer and beyond.</p>
 <p>Continuing this thought, I riffed on the author’s commentary about the evolution of “mathematical education” but, in this case, changing it to “design education”:</p>
 <ol>
 <li>The “pre-rigorous” stage, in which design is taught in an informal, intuitive manner. What does your gut and instinct tell you for decision making? Go with it.</li>
 <li>The “rigorous” stage, in which one is now taught that in order to do design “properly”, one needs to work and think in a much more precise and formal manner. The emphasis is now primarily on data and metrics and “proving” outcomes. Don’t focus too much on feeling but more on rationality. </li>
 <li>The “post-rigorous” stage, in which one has grown comfortable with all the rigorous foundations of one’s chosen field, and is now ready to revisit and refine one’s pre-rigorous intuition on the subject, but this time with the intuition solidly buttressed by rigorous theory. The emphasis is now not design as it relates to individual things, but synthesizing the relationships between things and how they relate to the “big picture”. Feeling, intuition, data, and rationality are kept in balance with each other through iteration</li>
 </ol>
 <p>To be honest, I don’t know if any of this relates to what the author was trying to say as it relates to math, but it <em>feels</em> relatable to my path as a designer.</p>
 <p>It’s a good reminder that the answer is usually a mix: it’s not data over intuition, nor rationality over feeling. Argue the contraries and you’ll find wisdom in-between. </p>
--- a/cache/2022/4cea6f484d1e161074216e23d8826dea/index.html
+++ b/cache/2022/4cea6f484d1e161074216e23d8826dea/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>Innovating beyond libraries and frameworks (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)">
 <!-- 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://nilsnh.no/2022/04/09/innovating-beyond-libraries-and-frameworks/">

 <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>Innovating beyond libraries and frameworks</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://nilsnh.no/2022/04/09/innovating-beyond-libraries-and-frameworks/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>I believe we should look beyond libraries and frameworks and rediscover the value of patterns and principles, and I’d argue that it would lead us to have less breaking changes and add more longevity to the stuff we build.</p>
 <p>I have been a big fan of the <a href="https://www.brandons.me/blog/libraries-not-frameworks">write libraries, not frameworks</a> argument for a while now. Lately, I’ve come to ponder that there might be a fruitful expansion to this argument, that we should start to value principles over patterns, patterns over libraries, and libraries over frameworks.</p>
 <p>Let’s clarify some terminology:</p>
 <ul>
 <li>
 <p><strong>Framework:</strong> This is (usually) someone else’s code that calls your code. In order for this to work your code will need to conform to constraints set down by the framework. These constraints are often firm boundaries that’s hard to code around. On the flipside by coding within the framework’s conventions and constraints you tend to get a lot of useful functionality out of the box making coding quicker.</p>
 </li>
 <li>
 <p><strong>Library:</strong> This is (usually) someone else’s code that <em>you call</em> from your code. A library tends to be some code that imposes fewer constraints on your code as compared to frameworks. By using one or more libraries you’re able to reuse someone else’s code to solve your problems. Libraries are easier to combine and interchange, while putting frameworks on top of frameworks can lead to a bad time.</p>
 </li>
 <li>
 <p><strong>Pattern:</strong> This is a descriptive, reusable <em>approach</em> to writing your code (see: <a href="https://en.wikipedia.org/wiki/Software_design_pattern">software design pattern</a>). Patterns range in their vaguenes, applicability and prescriptiveness. Examples of programming patterns include <a href="https://www.itamarweiss.com/personal/2018/02/28/return-early-pattern.html">early-return pattern</a>, <a href="https://en.wikipedia.org/wiki/Builder_pattern">builder-pattern</a>, <a href="https://en.wikipedia.org/wiki/Actor_model">actor model</a>, <a href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">model-view-controller</a>, <a href="https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/">onion architecture</a>, <a href="https://en.wikipedia.org/wiki/Microservices">microservices</a>, <a href="https://m.signalvnoise.com/the-majestic-monolith/">majestic monolith</a>, <a href="https://en.wikipedia.org/wiki/Monorepo">monorepos</a>, and <a href="https://en.wikipedia.org/wiki/React_(JavaScript_library)#Unidirectional_data_flow">flux architecture</a>. These are just some patterns that I can think off from the top of my head, but there are many books that cover programming patterns.</p>
 </li>
 </ul>

 <p>Having listed all these helpful points, I must also add a caution here about not to overuse them and/or apply them in ill-fit contexts (<a href="https://en.wikipedia.org/wiki/Law_of_the_instrument">see: Law of the instrument</a>). Case in point, here’s an article titled <a href="https://sandimetz.com/blog/2016/1/20/the-wrong-abstraction">The Wrong Abstraction</a> where developer Sandi Metz gives an excellent critique of developers' tendency to apply the DRY principle at all costs.</p>
 <h2 id="who-maintains-the-maintainers">Who maintains the maintainers? <a href="#who-maintains-the-maintainers" aria-label="Link to section: Who maintains the maintainers?">#</a></h2>
 <p>So, I’m not here to argue that we should stop using frameworks and libraries, but we should recognize that using them is a tradeoff where we gain some functionality by incurring some costs. For instance there’s a cost in having to keep up with updates. Codebases that lag behind on updates can become vulnerable to security exploits. Conversely, if you uncritically install the latest updates you open the door to supply-chain attacks where malicious code is inserted into one or more packages.</p>
 <p>Beyond security-related costs there’s also the risk that the code you rely on becomes abandon-ware <a href="https://medium.com/@timrwood/moment-endof-term-522d8965689">because an author burns</a> out or <a href="https://blog.angular.io/stable-angularjs-and-long-term-support-7e077635ee9c">an in-house team changes focus</a>. Apparently, <a href="https://endoflife.date/">all sorts of stuff is discontinued</a> all the time. And to this you might retort, “it’s open-source we can always fork it.” That’s true, so will you maintain it? I think it’s useful to ask oneself when adding any given dependency what’s the chance of this being abandoned and if so what do I do then, maintain it or switch it out? Libraries tend at least to be more replaceable.</p>
 <p>How do we gauge whether some code project is in danger of being abandoned? We tend to look at the recent activity, just <a href="https://github.com/search?q=is+this+dead&amp;type=issues">try searching Github for “is this dead”</a>. Faced with an onslaught of such questions authors can either declare bancrupcy and archive the project, not respond to the issue and fade into oblivion, or put the pedal to the metal by pushing out new features and expanding the code’s scope to solve any problem ever encountered by any user of the code. Succumbing to such a feature-fever quickly leads to breaking changes, necessitating <a href="https://www.sitepoint.com/getting-started-with-codemods/">codemods</a>, documenting upgrade-paths and responding to issues by developers who are desperately trying to keep up with all the changes. Any technology that matures and stabilizes risk being declared “dead” and shunned by a hype-sensitive industry which is something I covered in <a href="https://nilsnh.no/2018/01/13/how-good-code-dies/">How good code dies</a>.</p>
 <p>Others' code can also impose a hidden change-cost that makes it painful to upgrade or move away from it. Frameworks and libraries often introduce concepts that are specific to them. In other words all the experience that you build up by using and debugging this tool risk being useless if you decide to move to another framework or library. Bat an eyelash and your framework releases a major version upgrade removing old framework-specific concepts and thereby by making all your hardwon experience irrelevant anyway. I think this cost is particularly insidious especially coupled with <a href="https://en.wikipedia.org/wiki/Sunk_cost">the sunk-cost fallacy</a>.</p>

 <h2 id="beyond-libraries-and-frameworks">Beyond libraries and frameworks <a href="#beyond-libraries-and-frameworks" aria-label="Link to section: Beyond libraries and frameworks">#</a></h2>
 <p>I believe that in our search for new and better ways to build technology we should not confine our thinking to only looking to  libraries and frameworks for answers.</p>
 <p>So, what lies beyond?</p>
 <p>To start to answer that I’d like to point to some interesting undercurrents I’ve stumbled upon on the web. First, there’s an interesting talk by Adrian Holovaty titled <a href="https://www.youtube.com/watch?v=VvOsegaN9Wk">A framework author’s case against frameworks</a> where he argues that it’s fully feasible to build rich web applications without a framework. Second, I was pleasantly surprised when I read the <a href="https://remix.run/docs/en/v1/pages/philosophy">Remix Run framework’s philosophy</a>:</p>
 <blockquote>
 <p>We abstract enough to optimize your app’s performance […], without hiding the underlying technology. Learn how to prefetch assets in Remix with links, and you’ve learned how to prefetch assets in any website.</p>
 </blockquote>
 <p>This quote reads like an antidote to the change-cost I covered above. It’s a plus if learning some technology means learning transferrable knowledge.</p>
 <p>Third, I learned about the concept of the <a href="https://tutorials.yax.com/articles/build-websites-the-yax-way/quicktakes/what-is-the-yax-way.html">Stackless Way</a> and read <a href="https://elisehe.in/2021/08/22/using-the-platform">a very interesting article by Elise Hein</a> who explored this nonorthodox idea of going stackless by not having a build-step and not using a framework.</p>
 <p>When I <a href="https://nilsnh.no/2022/03/26/building-and-hosting-a-workshop-on-web-components/">built my workshop on web components</a> I also opted to explore how far I could go with a stackless approach. What I found was that our modern browsers are very capable and that I was able to write rich functionality without pulling in external code. It felt quite exhilarating and freeing. Yes, there’s still some rough edges to this approach. However, what’s missing might not be mature frameworks or libraries but rather a cookbook of patterns and principles.</p>
 <p>Imagine that, an industry that’s a little less reliant on libraries and frameworks because we invest time into discovering and cultivating patterns and principles. I believe that’s a future with less maintainer burnout, less breaking changes and better, more long-lived programs.</p>
 <p>Moving forward you’ll still find me using frameworks and libraries, and maybe I’ll even author some new one’s. Nevertheless, this stackless approach and searching for useful patterns and principles all the while prioritizing  transferrable knowledge is something I aim to explore more.</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/2022/4cea6f484d1e161074216e23d8826dea/index.md
+++ b/cache/2022/4cea6f484d1e161074216e23d8826dea/index.md
@@ -0,0 +1,39 @@
 title: Innovating beyond libraries and frameworks
 url: https://nilsnh.no/2022/04/09/innovating-beyond-libraries-and-frameworks/
 hash_url: 4cea6f484d1e161074216e23d8826dea

 <p>I believe we should look beyond libraries and frameworks and rediscover the value of patterns and principles, and I’d argue that it would lead us to have less breaking changes and add more longevity to the stuff we build.</p>
 <p>I have been a big fan of the <a href="https://www.brandons.me/blog/libraries-not-frameworks">write libraries, not frameworks</a> argument for a while now. Lately, I’ve come to ponder that there might be a fruitful expansion to this argument, that we should start to value principles over patterns, patterns over libraries, and libraries over frameworks.</p>
 <p>Let’s clarify some terminology:</p>
 <ul>
 <li>
 <p><strong>Framework:</strong> This is (usually) someone else’s code that calls your code. In order for this to work your code will need to conform to constraints set down by the framework. These constraints are often firm boundaries that’s hard to code around. On the flipside by coding within the framework’s conventions and constraints you tend to get a lot of useful functionality out of the box making coding quicker.</p>
 </li>
 <li>
 <p><strong>Library:</strong> This is (usually) someone else’s code that <em>you call</em> from your code. A library tends to be some code that imposes fewer constraints on your code as compared to frameworks. By using one or more libraries you’re able to reuse someone else’s code to solve your problems. Libraries are easier to combine and interchange, while putting frameworks on top of frameworks can lead to a bad time.</p>
 </li>
 <li>
 <p><strong>Pattern:</strong> This is a descriptive, reusable <em>approach</em> to writing your code (see: <a href="https://en.wikipedia.org/wiki/Software_design_pattern">software design pattern</a>). Patterns range in their vaguenes, applicability and prescriptiveness. Examples of programming patterns include <a href="https://www.itamarweiss.com/personal/2018/02/28/return-early-pattern.html">early-return pattern</a>, <a href="https://en.wikipedia.org/wiki/Builder_pattern">builder-pattern</a>, <a href="https://en.wikipedia.org/wiki/Actor_model">actor model</a>, <a href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">model-view-controller</a>, <a href="https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/">onion architecture</a>, <a href="https://en.wikipedia.org/wiki/Microservices">microservices</a>, <a href="https://m.signalvnoise.com/the-majestic-monolith/">majestic monolith</a>, <a href="https://en.wikipedia.org/wiki/Monorepo">monorepos</a>, and <a href="https://en.wikipedia.org/wiki/React_(JavaScript_library)#Unidirectional_data_flow">flux architecture</a>. These are just some patterns that I can think off from the top of my head, but there are many books that cover programming patterns.</p>
 </li>
 </ul>


 <p>Having listed all these helpful points, I must also add a caution here about not to overuse them and/or apply them in ill-fit contexts (<a href="https://en.wikipedia.org/wiki/Law_of_the_instrument">see: Law of the instrument</a>). Case in point, here’s an article titled <a href="https://sandimetz.com/blog/2016/1/20/the-wrong-abstraction">The Wrong Abstraction</a> where developer Sandi Metz gives an excellent critique of developers' tendency to apply the DRY principle at all costs.</p>
 <h2 id="who-maintains-the-maintainers">Who maintains the maintainers? <a href="#who-maintains-the-maintainers" aria-label="Link to section: Who maintains the maintainers?">#</a></h2>
 <p>So, I’m not here to argue that we should stop using frameworks and libraries, but we should recognize that using them is a tradeoff where we gain some functionality by incurring some costs. For instance there’s a cost in having to keep up with updates. Codebases that lag behind on updates can become vulnerable to security exploits. Conversely, if you uncritically install the latest updates you open the door to supply-chain attacks where malicious code is inserted into one or more packages.</p>
 <p>Beyond security-related costs there’s also the risk that the code you rely on becomes abandon-ware <a href="https://medium.com/@timrwood/moment-endof-term-522d8965689">because an author burns</a> out or <a href="https://blog.angular.io/stable-angularjs-and-long-term-support-7e077635ee9c">an in-house team changes focus</a>. Apparently, <a href="https://endoflife.date/">all sorts of stuff is discontinued</a> all the time. And to this you might retort, “it’s open-source we can always fork it.” That’s true, so will you maintain it? I think it’s useful to ask oneself when adding any given dependency what’s the chance of this being abandoned and if so what do I do then, maintain it or switch it out? Libraries tend at least to be more replaceable.</p>
 <p>How do we gauge whether some code project is in danger of being abandoned? We tend to look at the recent activity, just <a href="https://github.com/search?q=is+this+dead&amp;type=issues">try searching Github for “is this dead”</a>. Faced with an onslaught of such questions authors can either declare bancrupcy and archive the project, not respond to the issue and fade into oblivion, or put the pedal to the metal by pushing out new features and expanding the code’s scope to solve any problem ever encountered by any user of the code. Succumbing to such a feature-fever quickly leads to breaking changes, necessitating <a href="https://www.sitepoint.com/getting-started-with-codemods/">codemods</a>, documenting upgrade-paths and responding to issues by developers who are desperately trying to keep up with all the changes. Any technology that matures and stabilizes risk being declared “dead” and shunned by a hype-sensitive industry which is something I covered in <a href="https://nilsnh.no/2018/01/13/how-good-code-dies/">How good code dies</a>.</p>
 <p>Others' code can also impose a hidden change-cost that makes it painful to upgrade or move away from it. Frameworks and libraries often introduce concepts that are specific to them. In other words all the experience that you build up by using and debugging this tool risk being useless if you decide to move to another framework or library. Bat an eyelash and your framework releases a major version upgrade removing old framework-specific concepts and thereby by making all your hardwon experience irrelevant anyway. I think this cost is particularly insidious especially coupled with <a href="https://en.wikipedia.org/wiki/Sunk_cost">the sunk-cost fallacy</a>.</p>

 <h2 id="beyond-libraries-and-frameworks">Beyond libraries and frameworks <a href="#beyond-libraries-and-frameworks" aria-label="Link to section: Beyond libraries and frameworks">#</a></h2>
 <p>I believe that in our search for new and better ways to build technology we should not confine our thinking to only looking to  libraries and frameworks for answers.</p>
 <p>So, what lies beyond?</p>
 <p>To start to answer that I’d like to point to some interesting undercurrents I’ve stumbled upon on the web. First, there’s an interesting talk by Adrian Holovaty titled <a href="https://www.youtube.com/watch?v=VvOsegaN9Wk">A framework author’s case against frameworks</a> where he argues that it’s fully feasible to build rich web applications without a framework. Second, I was pleasantly surprised when I read the <a href="https://remix.run/docs/en/v1/pages/philosophy">Remix Run framework’s philosophy</a>:</p>
 <blockquote>
 <p>We abstract enough to optimize your app’s performance […], without hiding the underlying technology. Learn how to prefetch assets in Remix with links, and you’ve learned how to prefetch assets in any website.</p>
 </blockquote>
 <p>This quote reads like an antidote to the change-cost I covered above. It’s a plus if learning some technology means learning transferrable knowledge.</p>
 <p>Third, I learned about the concept of the <a href="https://tutorials.yax.com/articles/build-websites-the-yax-way/quicktakes/what-is-the-yax-way.html">Stackless Way</a> and read <a href="https://elisehe.in/2021/08/22/using-the-platform">a very interesting article by Elise Hein</a> who explored this nonorthodox idea of going stackless by not having a build-step and not using a framework.</p>
 <p>When I <a href="https://nilsnh.no/2022/03/26/building-and-hosting-a-workshop-on-web-components/">built my workshop on web components</a> I also opted to explore how far I could go with a stackless approach. What I found was that our modern browsers are very capable and that I was able to write rich functionality without pulling in external code. It felt quite exhilarating and freeing. Yes, there’s still some rough edges to this approach. However, what’s missing might not be mature frameworks or libraries but rather a cookbook of patterns and principles.</p>
 <p>Imagine that, an industry that’s a little less reliant on libraries and frameworks because we invest time into discovering and cultivating patterns and principles. I believe that’s a future with less maintainer burnout, less breaking changes and better, more long-lived programs.</p>
 <p>Moving forward you’ll still find me using frameworks and libraries, and maybe I’ll even author some new one’s. Nevertheless, this stackless approach and searching for useful patterns and principles all the while prioritizing  transferrable knowledge is something I aim to explore more.</p>
--- a/cache/2022/56f14d85f38a7bb04e187aa3334bdb57/index.html
+++ b/cache/2022/56f14d85f38a7bb04e187aa3334bdb57/index.html
@@ -0,0 +1,194 @@
 <!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>désabler l'imagination (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)">
 <!-- 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/2022/03/20/imagination">

 <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>désabler l'imagination</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/2022/03/20/imagination" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <figure>
  <img src="https://www.la-grange.net/2022/03/20/3858-chateau.jpg" alt="château de sable.">
  <figcaption>Tsujido, Japon, 20 mars 2022</figcaption>
 </figure>
 <blockquote>
 <p>I had no idea where it had come from or where it was going, but it felt as if this thing that held my shape, this form before my eyes, would be stuck floating there forever.<br>
 — Breasts and eggs, Mieko Kawakami, urn:isbn:978-1529074413</p>
 </blockquote>
 <p>Sur la plage de Tsujido, nous avons construit un grand château de sable. Nous avons découvert un chat (?) que l'océan a délaissé sur la plage après la marée. Je pense à son <a href="/2002/12/18.html">ami de l'aître Saint-Maclou</a>. Celui-ci ne survivra pas les années de l'autre même dans sa forme décharnée. Combien de squelettes au fond des océans ?</p>

 <figure>
  <img src="https://www.la-grange.net/2022/03/20/3862-tete-chat.jpg" alt="crâne de chat.">
  <figcaption>Tsujido, Japon, 20 mars 2022</figcaption>
 </figure>
 <p>Il me pose de nombreuses questions. Il s'interroge probablement. Il tente de trouver une réponse, d'organiser le monde dans une forme palpable, abordable pour lui. Nous continuons le château. Et puis je le vois plus tard s'éloigner de nouveau et expliquer la découverte aux gens qui passent sur la plage. Il est maintenant le maître de l'histoire. Il n'est plus soumis à elle. Il la détermine en se libérant par les mots vers les autres.</p>

 <figure>
  <img src="https://www.la-grange.net/2022/03/20/3864-coquillages.jpg" alt="branche d'arbres avec coquillages sur le bout des brindilles.">
  <figcaption>Tsujido, Japon, 20 mars 2022</figcaption>
 </figure>
 <p>J'aime les constructions de sable sur la plage. Il n'y a pas d'attente de durabilité, ni de perfection. L'espace est totalement libre. L'œuvre disparaîtra irrémédiablement. Mais le temps de l'élaboration nous construit poétiquement, amicalement, socialement. Nous sommes, dans ce moment là, existence.</p>
 <hr>
 <p>Les <a href="https://www.theatlantic.com/ideas/archive/2022/03/writing-controversial-opinions-journalism/627014/">choses que nous avons peur d'écrire</a>. À cause de la meute sociale sur le Web, par respect pour une personne aimée, pour éviter les conflits avec des proches, pour des raisons professionnelles. Tous ces petits moments où on auto-censure sa propre réflexion, son processus de pensée candide afin d'explorer un sujet au risque que le sujet apporte plus de troubles que nécessaire.</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/2022/56f14d85f38a7bb04e187aa3334bdb57/index.md
+++ b/cache/2022/56f14d85f38a7bb04e187aa3334bdb57/index.md
@@ -0,0 +1,27 @@
 title: désabler l'imagination
 url: https://www.la-grange.net/2022/03/20/imagination
 hash_url: 56f14d85f38a7bb04e187aa3334bdb57
   
 <figure>
  <img src="https://www.la-grange.net/2022/03/20/3858-chateau.jpg" alt="château de sable.">
  <figcaption>Tsujido, Japon, 20 mars 2022</figcaption>
 </figure>
 <blockquote>
 <p>I had no idea where it had come from or where it was going, but it felt as if this thing that held my shape, this form before my eyes, would be stuck floating there forever.<br>
 — Breasts and eggs, Mieko Kawakami, urn:isbn:978-1529074413</p>
 </blockquote>
 <p>Sur la plage de Tsujido, nous avons construit un grand château de sable. Nous avons découvert un chat (?) que l'océan a délaissé sur la plage après la marée. Je pense à son <a href="/2002/12/18.html">ami de l'aître Saint-Maclou</a>. Celui-ci ne survivra pas les années de l'autre même dans sa forme décharnée. Combien de squelettes au fond des océans ?</p>

 <figure>
  <img src="https://www.la-grange.net/2022/03/20/3862-tete-chat.jpg" alt="crâne de chat.">
  <figcaption>Tsujido, Japon, 20 mars 2022</figcaption>
 </figure>
 <p>Il me pose de nombreuses questions. Il s'interroge probablement. Il tente de trouver une réponse, d'organiser le monde dans une forme palpable, abordable pour lui. Nous continuons le château. Et puis je le vois plus tard s'éloigner de nouveau et expliquer la découverte aux gens qui passent sur la plage. Il est maintenant le maître de l'histoire. Il n'est plus soumis à elle. Il la détermine en se libérant par les mots vers les autres.</p>

 <figure>
  <img src="https://www.la-grange.net/2022/03/20/3864-coquillages.jpg" alt="branche d'arbres avec coquillages sur le bout des brindilles.">
  <figcaption>Tsujido, Japon, 20 mars 2022</figcaption>
 </figure>
 <p>J'aime les constructions de sable sur la plage. Il n'y a pas d'attente de durabilité, ni de perfection. L'espace est totalement libre. L'œuvre disparaîtra irrémédiablement. Mais le temps de l'élaboration nous construit poétiquement, amicalement, socialement. Nous sommes, dans ce moment là, existence.</p>
 <hr>
 <p>Les <a href="https://www.theatlantic.com/ideas/archive/2022/03/writing-controversial-opinions-journalism/627014/">choses que nous avons peur d'écrire</a>. À cause de la meute sociale sur le Web, par respect pour une personne aimée, pour éviter les conflits avec des proches, pour des raisons professionnelles. Tous ces petits moments où on auto-censure sa propre réflexion, son processus de pensée candide afin d'explorer un sujet au risque que le sujet apporte plus de troubles que nécessaire.</p>
--- a/cache/2022/66d9d4be64db7fe8324a4fdcbf3ef705/index.html
+++ b/cache/2022/66d9d4be64db7fe8324a4fdcbf3ef705/index.html
@@ -0,0 +1,312 @@
 <!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>Hope for the Future (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)">
 <!-- 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://hackeducation.com/2022/03/08/hope">

 <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>Hope for the Future</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://hackeducation.com/2022/03/08/hope" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p><em>This is the transcript of the keynote I gave today at Digifest. (Well, I recorded it a couple of weeks ago, but it was broadcast today, and I popped in for some "live" Q&amp;A afterwards, where I was asked the obligatory "do you hate all ed-tech" question. And here I was, trying to be all sweetness and light...)</em></p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest1.jpg"></p>

 <p>Thank you very much for inviting me to speak to you today. I'm happy to be here — and when I say "here," I do mean in my apartment, in sunny California. Personally, I'm not ready to travel yet, not remotely interested in getting back on an airplane — because let's be honest, air travel was already terrible. And I am pleased that, if nothing else good comes out of the pandemic, I can now do keynote talks in my bare feet and yoga pants.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest2.jpg"></p>

 <p>Those of you who are familiar with my work are likely a bit taken aback to see that the title of my talk today contains the word "Hope." After all, I have been called "Ed-Tech's Cassandra," and like the Trojan priestess, I am known for my proclamations and predictions of doom. As such, I am not viewed as a messenger with good news. My talks, I'm often told, are "depressing" and make folks want to leave the field. (From time-to-time, when I do hear about some high-profile tech entrepreneur who has decided to turn away from "disrupting education" towards building "flying taxis" or whatever, I do like to think I played some small part in their frustrated disillusionment.)</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest3.jpg"></p>

 <p>The thing is, though, like Cassandra, I'm not wrong. I know that my work makes people feel uncomfortable, particularly when so much of the tech and ed-tech industry mantra rests on narratives promising a happy, shiny, better future. No one appreciates it when someone comes along and says "actually, if you wheel this giant horse — impressive as it looks — inside the gates, it'll destroy everything you love, everyone you care about. Don't do it."</p>

 <p>And like Cassandra, it's exhausting to keep repeating "don't do it," and to have folks go right on ahead and do it anyway. I've been writing about ed-tech for over a decade now, cautioning people about the repercussions of handing over data, infrastructure, ideology, investment to Silicon Valley types. And for what?</p>

 <p>And for what?</p>

 <p>Trust me, I've spent a lot of the last few years stewing on that question — particularly as I have watched the awfulness of pandemic education (and its digital components) unfold: what has my work done? What change, what difference have I made?</p>

 <p>For so many reasons, it's been hard not to sink into utter despair. I know many of us feel that way right now.</p>

 <p>I don't think I'm exaggerating or even doomsaying to state that things don't look good. The pandemic. Still. Global climate change. (I say I'm glad to be in sunny California but it's actually the rainy season, and it hasn't rained in over a month.) Poverty. War and impending war. Inflation. Rising economic inequality and precarity. Drug overdoses. Genocide. Nationalism. White supremacy. Neoliberalism. Violence. Mass incarceration. Fanaticism. Surveillance technologies. Disinvestment from the public sphere. Anti-science rhetoric. A rejection of education. A rejection of knowledge. "Things are," as Malcolm Harris wrote on a sign during the Occupy Wall Street protests in Zucotti Park back in 2011 (and as he titled his recent book) "fucked up and bullshit." We aren't in a good place right now — structurally or socially or individually or psychologically or physically. And it's hard to see how we're headed towards a good place either.</p>

 <p>Many of us are grieving; many of us are traumatized. Many of our students are grieving; many of our students are traumatized. Most, dare I say. All of us, even. Deeply and profoundly so. To ignore this, to minimize this, to pretend as though "back to normal" can or even should happen is injurious. To prescribe a piece of technology as some sort of solution or fix to any of this is insulting. To give a keynote full of sanitized sunshine is just gross.</p>

 <p>And yet, we cannot not respond to trauma. We cannot not address what we have been through with the pandemic specifically and with — sweeping hand gesture — everything else.</p>

 <p>Denial won't work. But the worst response, perhaps, is to forget (arguably a form of denial, but one that happens at a social not just on a psychological level).</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest4.jpg"></p>

 <p>And that's what many powerful forces want — it's what they always want. Because forgetting isn't just about sliding into complacency. Forgetting also leads to despair — and this is crucial to my argument today — and broadly speaking, this is why (I tell myself at least) my work matters. Contrary to those who dismiss my work as a critic as negative or destructive, criticism is generative; it can be one of many (small) acts of hope — criticism grounded in historical analysis is the antithesis of a numbing forgetfulness or an invented nostalgia.</p>

 <p>One of the things I have written about quite a bit is the idea of an "ed-tech amnesia" — that is, there is a certain inattention to and erasure of the history of the field of education technology. And I don’t just mean forgetting or erasing what happened in the 1950s or 1980s (although I wrote a book on that). I mean forgetting what happened five, ten years ago — it's been ten years, incidentally, since Occupy Wall Street, and I fear we've forgotten that great push to hold the rich and the banks and the venture capitalists accountable. I specifically mean forgetting what happened during the last few years, during the pandemic.</p>

 <p>Ed-tech amnesia.</p>

 <p>Some of this is a result of an influx of Silicon Valley types in recent years — people with no ties to education or education technology who think that their ignorance and lack of expertise is a strength. (I use that phrase "Silicon Valley" less as a geographic marker than an ideological one.) And it doesn't help, of course, that there is, in general, a repudiation of history within the Silicon Valley framework itself. The tech industry's historical amnesia — the inability to learn about, to recognize, to remember what has come before — is deeply intertwined with the idea of "disruption" and its firm belief that new technologies are necessarily innovative and are always "progress." I like to cite, as an example, a New Yorker article from a few years ago, an interview with an Uber engineer who'd pleaded guilty to stealing Google's self-driving car technology. "The only thing that matters is the future," he told the magazine. "I don't even know why we study history. It's entertaining, I guess — the dinosaurs and the Neanderthals and the Industrial Revolution, and stuff like that. But what already happened doesn't really matter. You don't need to know that history to build on what they made. In technology, all that matters is tomorrow." (I could tie this attitude to the Italian Futurists and to fascism, but that’s a presentation for another day.)</p>

 <p>There are other examples of this historical amnesia in ed-tech specifically, no doubt. Narratives about the “factory model of education." Stories that education hasn't changed in hundreds of years. Tall tales about the invention of the MOOC. </p>

 <p>I want us to be vigilant about this amnesia because it has political implications. In the coming months and years, many people will want us to forget their mistakes; they will try to rehabilitate not just their bad ideas but their very reputations. By "many people," of course, I mean Ivanka Trump. Maybe Prince Charles. But I also mean any number of people in education and education technology, who've not only screwed up the tools and practices of teaching and learning over the past year or so, but who have a rather long history of bad if not dangerous ideas and decisions. These are people who have done real, substantive damage to students, to teachers, to public education. Again and again. We cannot forget this.</p>

 <p>I worry we already have, of course.</p>

 <p>If we forget, we cannot hold the perpetrators accountable for this damage. If we forget, we cannot see the ways in which we have been strong, resilient, even defiant in the face of it all.</p>

 <p>"Memory produces hope in the same way that amnesia produces despair," the theologian Walter Brueggeman wrote. Rebecca Solnit cites him in her book Hope in the Dark, originally published in April 2004, at the start of the second term of President George W. Bush (speaking of people whose reputations have been rehabilitated), right as many of us despaired that his incompetence had led us to war, as well as to an expansion of governmental power and surveillance. </p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest5.jpg"></p>

 <p>"Memory produces hope in the same way that amnesia produces despair." "It’s an extraordinary statement," Solnit writes, "one that reminds us that though hope is about the future, grounds for hope lie in the records and recollections of the past. We can tell of a past that was nothing but defeats and cruelties and injustices, or of a past that was some lovely golden age now irretrievably lost, or we can tell a more complicated and accurate story, one that has room for the best and worst, for atrocities and liberations, for grief and jubilation. A memory commensurate to the complexity of the past and the whole cast of participants, a memory that includes our power, produces that forward-directed energy called hope."</p>

 <p>"Amnesia leads to despair in many ways," she continues. "The status quo would like you to believe it is immutable, inevitable, and invulnerable, and lack of memory of a dynamically changing world reinforces this view. In other words, when you don’t know how much things have changed, you don’t see that they are changing or that they can change."</p>

 <p>The future is not pre-ordained. Yes, these are terrible times. Yes, the path forward seems incredibly challenging for those of us who believe in education, particularly public education, and who believe that education can be re-oriented away from exploitation and domination and towards justice. </p>

 <p>Contrary to the popular story, there is no inevitability of a technological future of education. There's no inevitability to "online." There's not, despite how loudly ed-tech evangelists insist that "There's no going back now," so pleased that disaster capitalism has helped unlock the possibility they've longed for: one in which all teaching and learning is mediated through their digital platforms, in which labor unions are busted, in which public funding is eviscerated to make way for privatized profiteering. </p>

 <p>Of course, there is no "back." Time doesn't work that way. And no one wants to go "back." That's a red herring, akin to thinking "luddite" is an insult. The luddites didn't want to go back; they wanted the future to be better. From where we are, there is always only forward. But the future is unwritten. Forward is open and incumbent upon us to shape.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest6.jpg"></p>

 <p>"The best way to predict the future is to build it," computer scientist Alan Kay famously said. But computer scientists should not be alone in that building. (God forbid.) </p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest7.jpg"></p>

 <p>I've long argued that the best way to predict the future is to issue a press release. Or the best way to predict the future is to complain about something in your weekly op-ed in The New York Times. By this, I mean that it's not always so much the building as it is the storytelling that sways the direction the future flows.</p>

 <p>Again, that's why stories of the past matter as much as do stories of the future — even when (and especially when) predicting the future.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest8.jpg"></p>

 <p>One of my favorite science fiction authors, Octavia Butler, was once asked about this: </p>

 <blockquote>
 <p>'So do you really believe that in the future we’re going to have the kind of trouble you write about in your books?' a student asked me as I was signing books after a talk. The young man was referring to the troubles I’d described in Parable of the Sower and Parable of the Talents, novels that take place in a near future of increasing drug addiction and illiteracy, marked by the popularity of prisons and the unpopularity of public schools, the vast and growing gap between the rich and everyone else, and the whole nasty family of problems brought on by global warming.</p></blockquote>

 <blockquote><p>'I didn’t make up the problems,' I pointed out. 'All I did was look around at the problems we’re neglecting now and give them about 30 years to grow into full-fledged disasters.'</p></blockquote>

 <blockquote><p>'Okay,' the young man challenged. 'So what’s the answer?'</p></blockquote>

 <blockquote><p>'There isn’t one,' I told him.</p></blockquote>

 <blockquote><p>'No answer? You mean we’re just doomed?' He smiled as though he thought this might be a joke.</p></blockquote>

 <blockquote><p>'No,' I said. 'I mean there’s no single answer that will solve all of our future problems. There’s no magic bullet. Instead there are thousands of answers — at least. You can be one of them if you choose to be.'</p>
 </blockquote>

 <p>You can be one of the answers if you choose to be.</p>

 <p>"Writing novels about the future doesn’t give me any special ability to foretell the future," Butler said. "But it does encourage me to use our past and present behaviors as guides to the kind of world we seem to be creating. The past, for example, is filled with repeating cycles of strength and weakness, wisdom and stupidity, empire and ashes. To study history is to study humanity. And to try to foretell the future without studying history is like trying to learn to read without bothering to learn the alphabet."</p>

 <p>Too many people who try to predict the future of education and education technology have not bothered to learn the alphabet — the grammar of schooling, to borrow a phrase from education historian Larry Cuban. That grammar includes the beliefs and practices and memory of schooling — our collective memory, not just our own personal experiences of school. That collective memory — that's history.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest9.jpg"></p>

 <p>When I wrote my book Teaching Machines, I wanted to chronicle a longer history of ed-tech than the story that often gets told — a history that, strangely enough when you think about it, often begins and ends with the computer. Through this framework, computers — "the digital" — are teleological. And those who question technology are therefore aberrant because technology is all there ever was, is, or will be. </p>

 <p>I wanted to show in my book that many of the ideas that get bandied about today as innovative or (god forbid) revolutionary have a long history. Educational psychologists, for example, have been building technologies to "personalize education" for over a century. To recognize this is to see the legacy of their work in our objects and in our practices today; it is to understand that if these objects were constructed they can be challenged and dismantled. They are not natural. They are not inevitable. And it is to know too that there has always been resistance and refusal — successful resistance and refusal — to the vision of an automated education. </p>

 <p>There has always been change — and that change has come from the popular power of students and teachers, not just the financial and political power of businessmen, always so desperate to center themselves in our stories of "transformation." We have always been strong. We have had to be resilient.</p>

 <p>"Who controls the past controls the future. Who controls the present controls the past," as Rage Against the Machine sang in their 1999 song "Testify." OK, actually it's a quote from George Orwell's 1984, but hey. To control the past, we have to know our history. "The stories we tell about who we were and what we did shape what we can and will do," Rebecca Solnit argues.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest10.jpg"></p>

 <p>And we can change the future. We have before. Never forget that. As my other favorite science fiction author Ursula Le Guin said, "any human power can be resisted and changed by human beings." And we must resist and we much change. We must believe we can. We must have hope.</p>

 <p>A few years ago, I listened to a speaker who was quite critical — in passing, mind you — of hope. And she wasn't alone. There was so much energy channeled into that word when it became the slogan of a young Senator from Illinois and his starry-eyed Presidential campaign. After 8 years of Barack Obama in office and so many unfulfilled promises, so much disappointment (and of course the rise of a violent white nationalism in response) many people have lost hope. They've lost faith in hope. They're utterly disillusioned by it.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest11.jpg"></p>

 <p>That speaker said that "you cannot counter structural inequality with good will." And I immediately thought of Antonio Gramsci, as one does. One of the greatest Marxist thinkers of the 20th century, Gramsci is best known for writing some 3000 pages of history during his imprisonment by the Fascist Italian government from 1927 until his death ten years later at age 46. Gramsci famously said "I am a pessimist because of intelligence but an optimist because of will." Will, according to Gramsci, is part of a revolutionary praxis. It recognizes the social structure, and it helps us to move deliberately from thinking about to acting for radical change. Will is, for Gramsci, political and intellectual. Will is a strategy, or part of a strategy of struggle. Will is bound of in the politics of hope. Hope is bound up in the politics of will.</p>

 <p>You all came to this event because, I'd wager, of will. Good will. Willpower. A will to change your own pedagogical practices. A will to change your institutions. Will is necessary, politically. I hope that you will consider how to tie that will to action, to collective action. You are not alone. I believe that you came to education too because you believe in the future. You must to work in this field. Educators engage in the profound process and practice of engaging minds in change — intellectual transformation. Education straddles the past — "the curriculum" — and the future — individually and societally. Education is about what we learn today so we can be better tomorrow. Education is a practice of hope. You cannot be indifferent about the future and be an educator. </p>

 <p>Another passage from Gramsci (who I put alongside Paolo Freire, Franz Fanon, bell hooks as one of the most important thinkers in education who's rarely recognized as such), from a 1917 letter "Indifferenti":</p>

 <blockquote>
 <p>I hate the indifferent. I believe that life means taking sides. One who is really alive, can be nothing if not citizen and partisan. Indifference is lethargy: it is parasitism, not life. Therefore, I hate the indifferent.</p></blockquote>

 <blockquote><p>Indifference is the dead weight of history. Indifference plays an important role in history. It plays a passive role, but it does play a role. It is fatality; it is something that cannot be counted on; it is something that disrupts programmes, overturns the best made plans; it is that awful something that chokes intelligence. What happens, the evil that touches everyone, happens because the majority relinquish their will to it, allowing the enactment of laws that only a revolution can revoke, letting men rise to power who, later, only a mutiny can remove. </p></blockquote>

 <blockquote><p>... I am "partigiano", alive, and already I hear, in the consciences of those on my same side, the throbbing bustle of the city of the future that we are building. And in it, the social chain does not weigh on the shoulders of only a few .... There is no-one watching from the sidelines while others are sacrificed, bled dry. I am alive, partisan. And, therefore, I hate those who do not take sides; I hate the indifferent.</p>
 </blockquote>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest12.jpg"></p>

 <p>Memory counteracts indifference. Memory counteracts despair. Memory creates the space for hope. Memory reminds us: change is possible. It urges us: change is necessary. </p>

 <p>It will not be easy. It never is. Even having hope can be hard, let alone making change.</p>

 <p>"Hope is a discipline," prison abolitionist Mariame Kaba reminds us. It is not an emotion. It is not even as Gramsci put it simply "optimism" — a belief that things will get better. Hope is work. You have to put energy and time into it. You have to practice, repeatedly. You have to keep at it, keep moving, keep pushing. No one else will free you or fix you — except us, collectively through our power to imagine and build a better future. </p>

 <p>Hope is not in technology. Hope is in our humanity.</p>

 <p>A better future for all of us, for all living creatures on this planet does not look like an app or a platform or a gadget. It does not look like an institution founded hundreds of years ago, desperate to cling to old hierarchies. It does not look like an institution founded more recently, desperate to re-inscribe new hierarchies. Join me in refusing the old world, and in refusing the future envisioned by the techno-elite. Our refusals can be small. Our actions might seem insignificant. But do not despair. We aren't alone in this — resistance is part of our legacy. We can make it our future. We can hope.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest13.jpg"></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/2022/66d9d4be64db7fe8324a4fdcbf3ef705/index.md
+++ b/cache/2022/66d9d4be64db7fe8324a4fdcbf3ef705/index.md
@@ -0,0 +1,145 @@
 title: Hope for the Future
 url: https://hackeducation.com/2022/03/08/hope
 hash_url: 66d9d4be64db7fe8324a4fdcbf3ef705

 <p><em>This is the transcript of the keynote I gave today at Digifest. (Well, I recorded it a couple of weeks ago, but it was broadcast today, and I popped in for some "live" Q&amp;A afterwards, where I was asked the obligatory "do you hate all ed-tech" question. And here I was, trying to be all sweetness and light...)</em></p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest1.jpg"></p>

 <p>Thank you very much for inviting me to speak to you today. I'm happy to be here — and when I say "here," I do mean in my apartment, in sunny California. Personally, I'm not ready to travel yet, not remotely interested in getting back on an airplane — because let's be honest, air travel was already terrible. And I am pleased that, if nothing else good comes out of the pandemic, I can now do keynote talks in my bare feet and yoga pants.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest2.jpg"></p>

 <p>Those of you who are familiar with my work are likely a bit taken aback to see that the title of my talk today contains the word "Hope." After all, I have been called "Ed-Tech's Cassandra," and like the Trojan priestess, I am known for my proclamations and predictions of doom. As such, I am not viewed as a messenger with good news. My talks, I'm often told, are "depressing" and make folks want to leave the field. (From time-to-time, when I do hear about some high-profile tech entrepreneur who has decided to turn away from "disrupting education" towards building "flying taxis" or whatever, I do like to think I played some small part in their frustrated disillusionment.)</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest3.jpg"></p>

 <p>The thing is, though, like Cassandra, I'm not wrong. I know that my work makes people feel uncomfortable, particularly when so much of the tech and ed-tech industry mantra rests on narratives promising a happy, shiny, better future. No one appreciates it when someone comes along and says "actually, if you wheel this giant horse — impressive as it looks — inside the gates, it'll destroy everything you love, everyone you care about. Don't do it."</p>

 <p>And like Cassandra, it's exhausting to keep repeating "don't do it," and to have folks go right on ahead and do it anyway. I've been writing about ed-tech for over a decade now, cautioning people about the repercussions of handing over data, infrastructure, ideology, investment to Silicon Valley types. And for what?</p>

 <p>And for what?</p>

 <p>Trust me, I've spent a lot of the last few years stewing on that question — particularly as I have watched the awfulness of pandemic education (and its digital components) unfold: what has my work done? What change, what difference have I made?</p>

 <p>For so many reasons, it's been hard not to sink into utter despair. I know many of us feel that way right now.</p>

 <p>I don't think I'm exaggerating or even doomsaying to state that things don't look good. The pandemic. Still. Global climate change. (I say I'm glad to be in sunny California but it's actually the rainy season, and it hasn't rained in over a month.) Poverty. War and impending war. Inflation. Rising economic inequality and precarity. Drug overdoses. Genocide. Nationalism. White supremacy. Neoliberalism. Violence. Mass incarceration. Fanaticism. Surveillance technologies. Disinvestment from the public sphere. Anti-science rhetoric. A rejection of education. A rejection of knowledge. "Things are," as Malcolm Harris wrote on a sign during the Occupy Wall Street protests in Zucotti Park back in 2011 (and as he titled his recent book) "fucked up and bullshit." We aren't in a good place right now — structurally or socially or individually or psychologically or physically. And it's hard to see how we're headed towards a good place either.</p>

 <p>Many of us are grieving; many of us are traumatized. Many of our students are grieving; many of our students are traumatized. Most, dare I say. All of us, even. Deeply and profoundly so. To ignore this, to minimize this, to pretend as though "back to normal" can or even should happen is injurious. To prescribe a piece of technology as some sort of solution or fix to any of this is insulting. To give a keynote full of sanitized sunshine is just gross.</p>

 <p>And yet, we cannot not respond to trauma. We cannot not address what we have been through with the pandemic specifically and with — sweeping hand gesture — everything else.</p>

 <p>Denial won't work. But the worst response, perhaps, is to forget (arguably a form of denial, but one that happens at a social not just on a psychological level).</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest4.jpg"></p>

 <p>And that's what many powerful forces want — it's what they always want. Because forgetting isn't just about sliding into complacency. Forgetting also leads to despair — and this is crucial to my argument today — and broadly speaking, this is why (I tell myself at least) my work matters. Contrary to those who dismiss my work as a critic as negative or destructive, criticism is generative; it can be one of many (small) acts of hope — criticism grounded in historical analysis is the antithesis of a numbing forgetfulness or an invented nostalgia.</p>

 <p>One of the things I have written about quite a bit is the idea of an "ed-tech amnesia" — that is, there is a certain inattention to and erasure of the history of the field of education technology. And I don’t just mean forgetting or erasing what happened in the 1950s or 1980s (although I wrote a book on that). I mean forgetting what happened five, ten years ago — it's been ten years, incidentally, since Occupy Wall Street, and I fear we've forgotten that great push to hold the rich and the banks and the venture capitalists accountable. I specifically mean forgetting what happened during the last few years, during the pandemic.</p>

 <p>Ed-tech amnesia.</p>

 <p>Some of this is a result of an influx of Silicon Valley types in recent years — people with no ties to education or education technology who think that their ignorance and lack of expertise is a strength. (I use that phrase "Silicon Valley" less as a geographic marker than an ideological one.) And it doesn't help, of course, that there is, in general, a repudiation of history within the Silicon Valley framework itself. The tech industry's historical amnesia — the inability to learn about, to recognize, to remember what has come before — is deeply intertwined with the idea of "disruption" and its firm belief that new technologies are necessarily innovative and are always "progress." I like to cite, as an example, a New Yorker article from a few years ago, an interview with an Uber engineer who'd pleaded guilty to stealing Google's self-driving car technology. "The only thing that matters is the future," he told the magazine. "I don't even know why we study history. It's entertaining, I guess — the dinosaurs and the Neanderthals and the Industrial Revolution, and stuff like that. But what already happened doesn't really matter. You don't need to know that history to build on what they made. In technology, all that matters is tomorrow." (I could tie this attitude to the Italian Futurists and to fascism, but that’s a presentation for another day.)</p>

 <p>There are other examples of this historical amnesia in ed-tech specifically, no doubt. Narratives about the “factory model of education." Stories that education hasn't changed in hundreds of years. Tall tales about the invention of the MOOC. </p>

 <p>I want us to be vigilant about this amnesia because it has political implications. In the coming months and years, many people will want us to forget their mistakes; they will try to rehabilitate not just their bad ideas but their very reputations. By "many people," of course, I mean Ivanka Trump. Maybe Prince Charles. But I also mean any number of people in education and education technology, who've not only screwed up the tools and practices of teaching and learning over the past year or so, but who have a rather long history of bad if not dangerous ideas and decisions. These are people who have done real, substantive damage to students, to teachers, to public education. Again and again. We cannot forget this.</p>

 <p>I worry we already have, of course.</p>

 <p>If we forget, we cannot hold the perpetrators accountable for this damage. If we forget, we cannot see the ways in which we have been strong, resilient, even defiant in the face of it all.</p>

 <p>"Memory produces hope in the same way that amnesia produces despair," the theologian Walter Brueggeman wrote. Rebecca Solnit cites him in her book Hope in the Dark, originally published in April 2004, at the start of the second term of President George W. Bush (speaking of people whose reputations have been rehabilitated), right as many of us despaired that his incompetence had led us to war, as well as to an expansion of governmental power and surveillance. </p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest5.jpg"></p>

 <p>"Memory produces hope in the same way that amnesia produces despair." "It’s an extraordinary statement," Solnit writes, "one that reminds us that though hope is about the future, grounds for hope lie in the records and recollections of the past. We can tell of a past that was nothing but defeats and cruelties and injustices, or of a past that was some lovely golden age now irretrievably lost, or we can tell a more complicated and accurate story, one that has room for the best and worst, for atrocities and liberations, for grief and jubilation. A memory commensurate to the complexity of the past and the whole cast of participants, a memory that includes our power, produces that forward-directed energy called hope."</p>

 <p>"Amnesia leads to despair in many ways," she continues. "The status quo would like you to believe it is immutable, inevitable, and invulnerable, and lack of memory of a dynamically changing world reinforces this view. In other words, when you don’t know how much things have changed, you don’t see that they are changing or that they can change."</p>

 <p>The future is not pre-ordained. Yes, these are terrible times. Yes, the path forward seems incredibly challenging for those of us who believe in education, particularly public education, and who believe that education can be re-oriented away from exploitation and domination and towards justice. </p>

 <p>Contrary to the popular story, there is no inevitability of a technological future of education. There's no inevitability to "online." There's not, despite how loudly ed-tech evangelists insist that "There's no going back now," so pleased that disaster capitalism has helped unlock the possibility they've longed for: one in which all teaching and learning is mediated through their digital platforms, in which labor unions are busted, in which public funding is eviscerated to make way for privatized profiteering. </p>

 <p>Of course, there is no "back." Time doesn't work that way. And no one wants to go "back." That's a red herring, akin to thinking "luddite" is an insult. The luddites didn't want to go back; they wanted the future to be better. From where we are, there is always only forward. But the future is unwritten. Forward is open and incumbent upon us to shape.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest6.jpg"></p>

 <p>"The best way to predict the future is to build it," computer scientist Alan Kay famously said. But computer scientists should not be alone in that building. (God forbid.) </p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest7.jpg"></p>

 <p>I've long argued that the best way to predict the future is to issue a press release. Or the best way to predict the future is to complain about something in your weekly op-ed in The New York Times. By this, I mean that it's not always so much the building as it is the storytelling that sways the direction the future flows.</p>

 <p>Again, that's why stories of the past matter as much as do stories of the future — even when (and especially when) predicting the future.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest8.jpg"></p>

 <p>One of my favorite science fiction authors, Octavia Butler, was once asked about this: </p>

 <blockquote>
 <p>'So do you really believe that in the future we’re going to have the kind of trouble you write about in your books?' a student asked me as I was signing books after a talk. The young man was referring to the troubles I’d described in Parable of the Sower and Parable of the Talents, novels that take place in a near future of increasing drug addiction and illiteracy, marked by the popularity of prisons and the unpopularity of public schools, the vast and growing gap between the rich and everyone else, and the whole nasty family of problems brought on by global warming.</p></blockquote>

 <blockquote><p>'I didn’t make up the problems,' I pointed out. 'All I did was look around at the problems we’re neglecting now and give them about 30 years to grow into full-fledged disasters.'</p></blockquote>

 <blockquote><p>'Okay,' the young man challenged. 'So what’s the answer?'</p></blockquote>

 <blockquote><p>'There isn’t one,' I told him.</p></blockquote>

 <blockquote><p>'No answer? You mean we’re just doomed?' He smiled as though he thought this might be a joke.</p></blockquote>

 <blockquote><p>'No,' I said. 'I mean there’s no single answer that will solve all of our future problems. There’s no magic bullet. Instead there are thousands of answers — at least. You can be one of them if you choose to be.'</p>
 </blockquote>

 <p>You can be one of the answers if you choose to be.</p>

 <p>"Writing novels about the future doesn’t give me any special ability to foretell the future," Butler said. "But it does encourage me to use our past and present behaviors as guides to the kind of world we seem to be creating. The past, for example, is filled with repeating cycles of strength and weakness, wisdom and stupidity, empire and ashes. To study history is to study humanity. And to try to foretell the future without studying history is like trying to learn to read without bothering to learn the alphabet."</p>

 <p>Too many people who try to predict the future of education and education technology have not bothered to learn the alphabet — the grammar of schooling, to borrow a phrase from education historian Larry Cuban. That grammar includes the beliefs and practices and memory of schooling — our collective memory, not just our own personal experiences of school. That collective memory — that's history.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest9.jpg"></p>

 <p>When I wrote my book Teaching Machines, I wanted to chronicle a longer history of ed-tech than the story that often gets told — a history that, strangely enough when you think about it, often begins and ends with the computer. Through this framework, computers — "the digital" — are teleological. And those who question technology are therefore aberrant because technology is all there ever was, is, or will be. </p>

 <p>I wanted to show in my book that many of the ideas that get bandied about today as innovative or (god forbid) revolutionary have a long history. Educational psychologists, for example, have been building technologies to "personalize education" for over a century. To recognize this is to see the legacy of their work in our objects and in our practices today; it is to understand that if these objects were constructed they can be challenged and dismantled. They are not natural. They are not inevitable. And it is to know too that there has always been resistance and refusal — successful resistance and refusal — to the vision of an automated education. </p>

 <p>There has always been change — and that change has come from the popular power of students and teachers, not just the financial and political power of businessmen, always so desperate to center themselves in our stories of "transformation." We have always been strong. We have had to be resilient.</p>

 <p>"Who controls the past controls the future. Who controls the present controls the past," as Rage Against the Machine sang in their 1999 song "Testify." OK, actually it's a quote from George Orwell's 1984, but hey. To control the past, we have to know our history. "The stories we tell about who we were and what we did shape what we can and will do," Rebecca Solnit argues.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest10.jpg"></p>

 <p>And we can change the future. We have before. Never forget that. As my other favorite science fiction author Ursula Le Guin said, "any human power can be resisted and changed by human beings." And we must resist and we much change. We must believe we can. We must have hope.</p>

 <p>A few years ago, I listened to a speaker who was quite critical — in passing, mind you — of hope. And she wasn't alone. There was so much energy channeled into that word when it became the slogan of a young Senator from Illinois and his starry-eyed Presidential campaign. After 8 years of Barack Obama in office and so many unfulfilled promises, so much disappointment (and of course the rise of a violent white nationalism in response) many people have lost hope. They've lost faith in hope. They're utterly disillusioned by it.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest11.jpg"></p>

 <p>That speaker said that "you cannot counter structural inequality with good will." And I immediately thought of Antonio Gramsci, as one does. One of the greatest Marxist thinkers of the 20th century, Gramsci is best known for writing some 3000 pages of history during his imprisonment by the Fascist Italian government from 1927 until his death ten years later at age 46. Gramsci famously said "I am a pessimist because of intelligence but an optimist because of will." Will, according to Gramsci, is part of a revolutionary praxis. It recognizes the social structure, and it helps us to move deliberately from thinking about to acting for radical change. Will is, for Gramsci, political and intellectual. Will is a strategy, or part of a strategy of struggle. Will is bound of in the politics of hope. Hope is bound up in the politics of will.</p>

 <p>You all came to this event because, I'd wager, of will. Good will. Willpower. A will to change your own pedagogical practices. A will to change your institutions. Will is necessary, politically. I hope that you will consider how to tie that will to action, to collective action. You are not alone. I believe that you came to education too because you believe in the future. You must to work in this field. Educators engage in the profound process and practice of engaging minds in change — intellectual transformation. Education straddles the past — "the curriculum" — and the future — individually and societally. Education is about what we learn today so we can be better tomorrow. Education is a practice of hope. You cannot be indifferent about the future and be an educator. </p>

 <p>Another passage from Gramsci (who I put alongside Paolo Freire, Franz Fanon, bell hooks as one of the most important thinkers in education who's rarely recognized as such), from a 1917 letter "Indifferenti":</p>

 <blockquote>
 <p>I hate the indifferent. I believe that life means taking sides. One who is really alive, can be nothing if not citizen and partisan. Indifference is lethargy: it is parasitism, not life. Therefore, I hate the indifferent.</p></blockquote>

 <blockquote><p>Indifference is the dead weight of history. Indifference plays an important role in history. It plays a passive role, but it does play a role. It is fatality; it is something that cannot be counted on; it is something that disrupts programmes, overturns the best made plans; it is that awful something that chokes intelligence. What happens, the evil that touches everyone, happens because the majority relinquish their will to it, allowing the enactment of laws that only a revolution can revoke, letting men rise to power who, later, only a mutiny can remove. </p></blockquote>

 <blockquote><p>... I am "partigiano", alive, and already I hear, in the consciences of those on my same side, the throbbing bustle of the city of the future that we are building. And in it, the social chain does not weigh on the shoulders of only a few .... There is no-one watching from the sidelines while others are sacrificed, bled dry. I am alive, partisan. And, therefore, I hate those who do not take sides; I hate the indifferent.</p>
 </blockquote>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest12.jpg"></p>

 <p>Memory counteracts indifference. Memory counteracts despair. Memory creates the space for hope. Memory reminds us: change is possible. It urges us: change is necessary. </p>

 <p>It will not be easy. It never is. Even having hope can be hard, let alone making change.</p>

 <p>"Hope is a discipline," prison abolitionist Mariame Kaba reminds us. It is not an emotion. It is not even as Gramsci put it simply "optimism" — a belief that things will get better. Hope is work. You have to put energy and time into it. You have to practice, repeatedly. You have to keep at it, keep moving, keep pushing. No one else will free you or fix you — except us, collectively through our power to imagine and build a better future. </p>

 <p>Hope is not in technology. Hope is in our humanity.</p>

 <p>A better future for all of us, for all living creatures on this planet does not look like an app or a platform or a gadget. It does not look like an institution founded hundreds of years ago, desperate to cling to old hierarchies. It does not look like an institution founded more recently, desperate to re-inscribe new hierarchies. Join me in refusing the old world, and in refusing the future envisioned by the techno-elite. Our refusals can be small. Our actions might seem insignificant. But do not despair. We aren't alone in this — resistance is part of our legacy. We can make it our future. We can hope.</p>

 <p><img src="https://s3.amazonaws.com/hackedu/2022-03-08-digifest13.jpg"></p>
--- a/cache/2022/7d378db0707cc63aa2d466ada68fe690/index.html
+++ b/cache/2022/7d378db0707cc63aa2d466ada68fe690/index.html
@@ -0,0 +1,223 @@
 <!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>20 Things I’ve Learned in my 20 Years as a Software Engineer (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)">
 <!-- 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.simplethread.com/20-things-ive-learned-in-my-20-years-as-a-software-engineer/">

 <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>20 Things I’ve Learned in my 20 Years as a Software Engineer</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.simplethread.com/20-things-ive-learned-in-my-20-years-as-a-software-engineer/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <h2>Important, Read This First</h2>
 <p>You’re about to read a blog post with a <em>lot</em> of advice. Learning from those who came before us is instrumental to success, but we often forget an important caveat. Almost all advice is contextual, yet it is rarely delivered with any context.</p>
 <p>“You just need to charge more!” says the company who has been in business for 20 years and spent years charging “too little” to gain customers and become successful.</p>
 <p>“You need to build everything as microservices!” says the company who built a quick monolith, gained thousands of customers, and then pivoted into microservices as they started running into scaling issues.</p>
 <p>Without understanding the context, the advice is meaningless, or even worse, harmful. If those folks had followed their own advice early on, they themselves would likely have suffered from it. It is hard to escape this trap. We may be the culmination of our experiences, but we view them through the lens of the present.</p>
 <p>So to give you a little context on where my advice comes from, I spent the first half of my career as a software engineer working for various small businesses and startups, then I went into consulting and worked in a number of really large businesses. Then I started Simple Thread and we grew from a team of 2 to a team of 25. 10 years ago we worked with mostly small/medium businesses, and now we work with a mix of big and small businesses.</p>
 <p>My advice is from someone who…</p>
 <ol><li>has almost always been on small, lean teams where we have to do a lot with very little.</li><li>values working software over specific tools.</li><li>is starting new projects all the time, but also has to maintain a number of systems.</li><li>values engineer productivity over most other considerations</li></ol>
 <p>My experiences over the last 20 years have shaped how I view software, and have led me to some beliefs which I’ve tried to whittle down to a manageable list that I hope you find valuable.</p>
 <h2>On with the list</h2>
 <h3>1. I still don’t know very much</h3>
 <p>“How can you not know what BGP is?” “You’ve never heard of Rust?” Most of us have heard these kinds of statements, probably too often. The reason many of us love software is because we are lifelong learners, and in software no matter which direction you look, there are wide vistas of knowledge going off in every direction and expanding by the day. This means that you can spend decades in your career, and still have a huge knowledge gap compared to someone who has also spent decades in a seemingly similar role. The sooner you realize this, the sooner you can start to shed your imposter syndrome and instead delight in learning from and teaching others.</p>
 <h3>2. The hardest part of software is building the right thing</h3>
 <p>I know this is cliche at this point, but the reason most software engineers don’t believe it is because they think it devalues their work. Personally I think that is nonsense. Instead it highlights the complexity and irrationality of the environments in which we have to work, which compounds our challenges. You can design the most technically impressive thing in the world, and then have nobody want to use it. Happens all the time. Designing software is mostly a listening activity, and we often have to be part software engineer, part psychic, and part anthropologist. Investing in this design process, whether through dedicated UX team members or by simply educating yourself, will deliver enormous dividends. Because how do you really calculate the cost of building the wrong software? It amounts to a lot more than just lost engineering time.</p>
 <h3>3. The best software engineers think like designers</h3>
 <p>Great software engineers think deeply about the user experience of their code. They might not think about it in those terms, but whether it is an external API, programmatic API, user interface, protocol, or any other interface; great engineers consider who will be using it, why it will be used, how it will be used, and what is important to those users. Keeping the user’s needs in mind is really the heart of good user experience.</p>
 <h3>4. The best code is no code, or code you don’t have to maintain</h3>
 <p>All I have to say is “coders gonna code.” You ask someone in any profession how to solve a problem, and they are going to err on the side of what they are good at. It is just human nature. Most software engineers are always going to err on the side of writing code, especially when a non-technical solution isn’t obvious. The same goes for code you don’t have to maintain. Engineering teams are apt to want to reinvent the wheel, when lots of wheels already exist. This is a balancing act, there are lots of reasons to grow your own, but beware of toxic “Not Invented Here” syndrome.</p>
 <h3>5. Software is a means to an end</h3>
 <p>The primary job of any software engineer is delivering value. Very few software developers understand this, even fewer internalize it. Truly internalizing this leads to a different way of solving problems, and a different way of viewing your tools. If you really believe that software is subservient to the outcome, you’ll be ready to really find “the right tool for the job” which might not be software at all.</p>
 <h3>6. Sometimes you have to stop sharpening the saw, and just start cutting shit</h3>
 <p>Some people tend to jump into problems and just start writing code. Other people tend to want to research and research and get caught in analysis paralysis. In those cases, set a deadline for yourself and just start exploring solutions. You’ll quickly learn more as you start solving the problem, and that will lead you to iterate into a better solution.</p>
 <h3>7. If you don’t have a good grasp of the universe of what’s possible, you can’t design a good system</h3>
 <p>This is something I struggle with a lot as my responsibilities take me further and further from the day to day of software engineering. Keeping up with the developer ecosystem is a huge amount of work, but it is critical to understand what is possible. If you don’t understand what is possible and what is available in a given ecosystem then you’ll find it impossible to design a reasonable solution to all but the most simple of problems. To summarize, be wary of people designing systems who haven’t written any code in a long time.</p>
 <h3>8. Every system eventually sucks, get over it</h3>
 <p>Bjarne Stroustrup has a quote that goes “There are only two kinds of languages: the ones people complain about and the ones nobody uses”. This can be extended to large systems as well. There is no “right” architecture, you’ll never pay down all of your technical debt, you’ll never design the perfect interface, your tests will always be too slow. This isn’t an excuse to never make things better, but instead a way to give you perspective. Worry less about elegance and perfection; instead strive for continuous improvement and creating a livable system that your team enjoys working in and sustainably delivers value.</p>
 <h3>9. Nobody asks “why” enough</h3>
 <p>Take any opportunity to question assumptions and approaches that are “the way things have always been done”. Have a new team member coming on board? Pay attention to where they get confused and what questions they ask. Have a new feature request that doesn&#8217;t make sense? Make sure you understand the goal and what is driving the desire for this functionality. If you don’t get a clear answer, keep asking why until you understand.</p>
 <h3>10. We should be far more focused on avoiding 0.1x programmers than finding 10x programmers</h3>
 <p><a href="https://www.simplethread.com/the-10x-programmer-myth/">The 10x programmer is a silly myth.</a> The idea that someone can produce in 1 day what another competent, hard working, similarly experienced programmer can produce in 2 weeks is silly. I’ve seen programmers that sling 10x the amount of code, and then you have to fix it 10x the amount of times. The only way someone can be a 10x programmer is if you compare them to 0.1x programmers. Someone who wastes time, doesn&#8217;t ask for feedback, doesn&#8217;t test their code, doesn&#8217;t consider edge cases, etc… We should be far more concerned with keeping 0.1x programmers off our teams than finding the mythical 10x programmer.</p>
 <h3>11. One of the biggest differences between a senior engineer and a junior engineer is that they’ve formed opinions about the way things should be</h3>
 <p>Nothing worries me more than a senior engineer that has no opinion of their tools or how to approach building software. I’d rather someone give me opinions that I violently disagree with than for them to have no opinions at all. If you are using your tools, and you don’t love or hate them in a myriad of ways, you need to experience more. You need to explore other languages, libraries, and paradigms. There are few ways of leveling up your skills faster than actively seeking out how others accomplish tasks with different tools and techniques than you do.</p>
 <h3>12. People don’t really want innovation</h3>
 <p>People talk about innovation a whole lot, but what they are usually looking for is cheap wins and novelty. If you truly innovate, and change the way that people have to do things, expect mostly negative feedback. If you believe in what you’re doing, and know it will really improve things, then brace yourself for a long battle.</p>
 <h3>13. Your data is the most important part of your system</h3>
 <p>I’ve seen a lot of systems where hope was the primary mechanism of data integrity. In systems like this, anything that happens off the golden path creates partial or dirty data. Dealing with this data in the future can become a nightmare. Just remember, your data will likely long outlive your codebase. Spend energy keeping it orderly and clean, it’ll pay off well in the long run.</p>
 <h3>14. Look for technological sharks</h3>
 <p>Old technologies that have stuck around are <a href="https://www.simplethread.com/relational-databases-arent-dinosaurs-theyre-sharks/">sharks, not dinosaurs</a>. They solve problems so well that they have survived the rapid changes that occur constantly in the technology world. Don’t bet against these technologies, and replace them only if you have a very good reason. These tools won&#8217;t be flashy, and they won&#8217;t be exciting, but they will get the job done without a lot of sleepless nights.</p>
 <h3>15. Don’t mistake humility for ignorance</h3>
 <p>There are a lot of software engineers out there who won’t express opinions unless asked. Never assume that just because someone isn’t throwing their opinions in your face that they don’t have anything to add. Sometimes the noisiest people are the ones we want to listen to the least. Talk to the people around you, seek their feedback and advice. You’ll be glad you did.</p>
 <h3>16. Software engineers should write regularly</h3>
 <p>Software engineers should regularly blog, journal, write documentation and in general do anything that requires them to keep their written communication skills sharp. Writing helps you think about your problems, and helps you communicate those more effectively with your team and your future self. Good written communication is one of the most important skills for any software engineer to master.</p>
 <h3>17. Keep your processes as lean as possible</h3>
 <p>Everyone wants to be agile these days, but being “agile” is about building things in small chunks, learning, and then iterating. If someone is trying to shoehorn much more into it than that, then they’re <a href="https://www.simplethread.com/agile-at-20-the-failed-rebellion/">probably selling something</a>. It isn’t to say that people don’t need accountability or help to work this way, but how many times have you heard someone from your favorite tech company or large open source project brag about how great their Scrum process is? Stay lean on process until you know you need more. Trust your team and they will deliver.</p>
 <h3>18. Software engineers, like all humans, need to feel ownership</h3>
 <p>If you divorce someone from the output of their work, they will care less about their work. I see this almost as a tautology. This is the primary reason why cross-functional teams work so well, and why DevOps has become so popular. It isn’t all about handoffs and inefficiencies, it is about owning the whole process from start to finish, and being directly responsible for delivering value. Give a group of passionate people complete <a href="https://www.simplethread.com/doerrs-law-on-product-teams/">ownership over designing</a>, building, and delivering a piece of software (or anything really) and amazing things will happen.</p>
 <h3>19. Interviews are almost worthless for telling how good of a team member someone will be</h3>
 <p>Interviews are far better spent trying to understand who someone is, and how interested they are in a given field of expertise. Trying to suss out how good of a team member they will be is a fruitless endeavor. And believe me, how smart or knowledgable someone is is also not a good indicator that they will be a great team member. No one is going to tell you in an interview that they are going to be unreliable, abusive, pompous, or never show up to meetings on time. People might claim they have “signals” for these things… “if they ask about time off in the first interview then they are never going to be there!” But these are all bullshit. If you’re using signals like these you’re just guessing and turning away good candidates.</p>
 <h3>20. Always strive to build a smaller system</h3>
 <p>There are a lot of forces that will push you to build the bigger system up-front. Budget allocation, the inability to decide which features should be cut, the desire to deliver the “best version” of a system. All of these things push us very forcefully towards building too much. You should <a href="https://www.simplethread.com/where-does-complexity-go/">fight this</a>. You learn so much as you’re building a system that you will end up iterating into a much better system than you ever could have designed in the first place. This is surprisingly a hard sell to most people.</p>
 <h2>What is your story?</h2>
 <p>So there you have it, 20 years of software distilled down into 20 pithy pieces of wisdom. I’d love to hear it if something resonated with you. I’d also love to hear if you have a piece of wisdom that you’ve picked up over your career that you’d like to share. Feel free to leave it down in the comments.</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/2022/7d378db0707cc63aa2d466ada68fe690/index.md
+++ b/cache/2022/7d378db0707cc63aa2d466ada68fe690/index.md
@@ -0,0 +1,47 @@
 title: 20 Things I’ve Learned in my 20 Years as a Software Engineer
 url: https://www.simplethread.com/20-things-ive-learned-in-my-20-years-as-a-software-engineer/
 hash_url: 7d378db0707cc63aa2d466ada68fe690

 <h2>Important, Read This First</h2>
 <p>You’re about to read a blog post with a <em>lot</em> of advice. Learning from those who came before us is instrumental to success, but we often forget an important caveat. Almost all advice is contextual, yet it is rarely delivered with any context.</p><p>“You just need to charge more!” says the company who has been in business for 20 years and spent years charging “too little” to gain customers and become successful.</p><p>“You need to build everything as microservices!” says the company who built a quick monolith, gained thousands of customers, and then pivoted into microservices as they started running into scaling issues.</p><p>Without understanding the context, the advice is meaningless, or even worse, harmful. If those folks had followed their own advice early on, they themselves would likely have suffered from it. It is hard to escape this trap. We may be the culmination of our experiences, but we view them through the lens of the present.</p><p>So to give you a little context on where my advice comes from, I spent the first half of my career as a software engineer working for various small businesses and startups, then I went into consulting and worked in a number of really large businesses. Then I started Simple Thread and we grew from a team of 2 to a team of 25. 10 years ago we worked with mostly small/medium businesses, and now we work with a mix of big and small businesses.</p><p>My advice is from someone who…</p><ol><li>has almost always been on small, lean teams where we have to do a lot with very little.</li><li>values working software over specific tools.</li><li>is starting new projects all the time, but also has to maintain a number of systems.</li><li>values engineer productivity over most other considerations</li></ol><p>My experiences over the last 20 years have shaped how I view software, and have led me to some beliefs which I’ve tried to whittle down to a manageable list that I hope you find valuable.</p>
 <h2>On with the list</h2>
 <h3>1. I still don’t know very much</h3>
 <p>“How can you not know what BGP is?” “You’ve never heard of Rust?” Most of us have heard these kinds of statements, probably too often. The reason many of us love software is because we are lifelong learners, and in software no matter which direction you look, there are wide vistas of knowledge going off in every direction and expanding by the day. This means that you can spend decades in your career, and still have a huge knowledge gap compared to someone who has also spent decades in a seemingly similar role. The sooner you realize this, the sooner you can start to shed your imposter syndrome and instead delight in learning from and teaching others.</p>
 <h3>2. The hardest part of software is building the right thing</h3>
 <p>I know this is cliche at this point, but the reason most software engineers don’t believe it is because they think it devalues their work. Personally I think that is nonsense. Instead it highlights the complexity and irrationality of the environments in which we have to work, which compounds our challenges. You can design the most technically impressive thing in the world, and then have nobody want to use it. Happens all the time. Designing software is mostly a listening activity, and we often have to be part software engineer, part psychic, and part anthropologist. Investing in this design process, whether through dedicated UX team members or by simply educating yourself, will deliver enormous dividends. Because how do you really calculate the cost of building the wrong software? It amounts to a lot more than just lost engineering time.</p>
 <h3>3. The best software engineers think like designers</h3>
 <p>Great software engineers think deeply about the user experience of their code. They might not think about it in those terms, but whether it is an external API, programmatic API, user interface, protocol, or any other interface; great engineers consider who will be using it, why it will be used, how it will be used, and what is important to those users. Keeping the user’s needs in mind is really the heart of good user experience.</p>
 <h3>4. The best code is no code, or code you don’t have to maintain</h3>
 <p>All I have to say is “coders gonna code.” You ask someone in any profession how to solve a problem, and they are going to err on the side of what they are good at. It is just human nature. Most software engineers are always going to err on the side of writing code, especially when a non-technical solution isn’t obvious. The same goes for code you don’t have to maintain. Engineering teams are apt to want to reinvent the wheel, when lots of wheels already exist. This is a balancing act, there are lots of reasons to grow your own, but beware of toxic “Not Invented Here” syndrome.</p>
 <h3>5. Software is a means to an end</h3>
 <p>The primary job of any software engineer is delivering value. Very few software developers understand this, even fewer internalize it. Truly internalizing this leads to a different way of solving problems, and a different way of viewing your tools. If you really believe that software is subservient to the outcome, you’ll be ready to really find “the right tool for the job” which might not be software at all.</p>
 <h3>6. Sometimes you have to stop sharpening the saw, and just start cutting shit</h3>
 <p>Some people tend to jump into problems and just start writing code. Other people tend to want to research and research and get caught in analysis paralysis. In those cases, set a deadline for yourself and just start exploring solutions. You’ll quickly learn more as you start solving the problem, and that will lead you to iterate into a better solution.</p>
 <h3>7. If you don’t have a good grasp of the universe of what’s possible, you can’t design a good system</h3>
 <p>This is something I struggle with a lot as my responsibilities take me further and further from the day to day of software engineering. Keeping up with the developer ecosystem is a huge amount of work, but it is critical to understand what is possible. If you don’t understand what is possible and what is available in a given ecosystem then you’ll find it impossible to design a reasonable solution to all but the most simple of problems. To summarize, be wary of people designing systems who haven’t written any code in a long time.</p>
 <h3>8. Every system eventually sucks, get over it</h3>
 <p>Bjarne Stroustrup has a quote that goes “There are only two kinds of languages: the ones people complain about and the ones nobody uses”. This can be extended to large systems as well. There is no “right” architecture, you’ll never pay down all of your technical debt, you’ll never design the perfect interface, your tests will always be too slow. This isn’t an excuse to never make things better, but instead a way to give you perspective. Worry less about elegance and perfection; instead strive for continuous improvement and creating a livable system that your team enjoys working in and sustainably delivers value.</p>
 <h3>9. Nobody asks “why” enough</h3>
 <p>Take any opportunity to question assumptions and approaches that are “the way things have always been done”. Have a new team member coming on board? Pay attention to where they get confused and what questions they ask. Have a new feature request that doesn&#8217;t make sense? Make sure you understand the goal and what is driving the desire for this functionality. If you don’t get a clear answer, keep asking why until you understand.</p>
 <h3>10. We should be far more focused on avoiding 0.1x programmers than finding 10x programmers</h3>
 <p><a href="https://www.simplethread.com/the-10x-programmer-myth/">The 10x programmer is a silly myth.</a> The idea that someone can produce in 1 day what another competent, hard working, similarly experienced programmer can produce in 2 weeks is silly. I’ve seen programmers that sling 10x the amount of code, and then you have to fix it 10x the amount of times. The only way someone can be a 10x programmer is if you compare them to 0.1x programmers. Someone who wastes time, doesn&#8217;t ask for feedback, doesn&#8217;t test their code, doesn&#8217;t consider edge cases, etc… We should be far more concerned with keeping 0.1x programmers off our teams than finding the mythical 10x programmer.</p>
 <h3>11. One of the biggest differences between a senior engineer and a junior engineer is that they’ve formed opinions about the way things should be</h3>
 <p>Nothing worries me more than a senior engineer that has no opinion of their tools or how to approach building software. I’d rather someone give me opinions that I violently disagree with than for them to have no opinions at all. If you are using your tools, and you don’t love or hate them in a myriad of ways, you need to experience more. You need to explore other languages, libraries, and paradigms. There are few ways of leveling up your skills faster than actively seeking out how others accomplish tasks with different tools and techniques than you do.</p>
 <h3>12. People don’t really want innovation</h3>
 <p>People talk about innovation a whole lot, but what they are usually looking for is cheap wins and novelty. If you truly innovate, and change the way that people have to do things, expect mostly negative feedback. If you believe in what you’re doing, and know it will really improve things, then brace yourself for a long battle.</p>
 <h3>13. Your data is the most important part of your system</h3>
 <p>I’ve seen a lot of systems where hope was the primary mechanism of data integrity. In systems like this, anything that happens off the golden path creates partial or dirty data. Dealing with this data in the future can become a nightmare. Just remember, your data will likely long outlive your codebase. Spend energy keeping it orderly and clean, it’ll pay off well in the long run.</p>
 <h3>14. Look for technological sharks</h3>
 <p>Old technologies that have stuck around are <a href="https://www.simplethread.com/relational-databases-arent-dinosaurs-theyre-sharks/">sharks, not dinosaurs</a>. They solve problems so well that they have survived the rapid changes that occur constantly in the technology world. Don’t bet against these technologies, and replace them only if you have a very good reason. These tools won&#8217;t be flashy, and they won&#8217;t be exciting, but they will get the job done without a lot of sleepless nights.</p>
 <h3>15. Don’t mistake humility for ignorance</h3>
 <p>There are a lot of software engineers out there who won’t express opinions unless asked. Never assume that just because someone isn’t throwing their opinions in your face that they don’t have anything to add. Sometimes the noisiest people are the ones we want to listen to the least. Talk to the people around you, seek their feedback and advice. You’ll be glad you did.</p>
 <h3>16. Software engineers should write regularly</h3>
 <p>Software engineers should regularly blog, journal, write documentation and in general do anything that requires them to keep their written communication skills sharp. Writing helps you think about your problems, and helps you communicate those more effectively with your team and your future self. Good written communication is one of the most important skills for any software engineer to master.</p>
 <h3>17. Keep your processes as lean as possible</h3>
 <p>Everyone wants to be agile these days, but being “agile” is about building things in small chunks, learning, and then iterating. If someone is trying to shoehorn much more into it than that, then they’re <a href="https://www.simplethread.com/agile-at-20-the-failed-rebellion/">probably selling something</a>. It isn’t to say that people don’t need accountability or help to work this way, but how many times have you heard someone from your favorite tech company or large open source project brag about how great their Scrum process is? Stay lean on process until you know you need more. Trust your team and they will deliver.</p>
 <h3>18. Software engineers, like all humans, need to feel ownership</h3>
 <p>If you divorce someone from the output of their work, they will care less about their work. I see this almost as a tautology. This is the primary reason why cross-functional teams work so well, and why DevOps has become so popular. It isn’t all about handoffs and inefficiencies, it is about owning the whole process from start to finish, and being directly responsible for delivering value. Give a group of passionate people complete <a href="https://www.simplethread.com/doerrs-law-on-product-teams/">ownership over designing</a>, building, and delivering a piece of software (or anything really) and amazing things will happen.</p>
 <h3>19. Interviews are almost worthless for telling how good of a team member someone will be</h3>
 <p>Interviews are far better spent trying to understand who someone is, and how interested they are in a given field of expertise. Trying to suss out how good of a team member they will be is a fruitless endeavor. And believe me, how smart or knowledgable someone is is also not a good indicator that they will be a great team member. No one is going to tell you in an interview that they are going to be unreliable, abusive, pompous, or never show up to meetings on time. People might claim they have “signals” for these things… “if they ask about time off in the first interview then they are never going to be there!” But these are all bullshit. If you’re using signals like these you’re just guessing and turning away good candidates.</p>
 <h3>20. Always strive to build a smaller system</h3>
 <p>There are a lot of forces that will push you to build the bigger system up-front. Budget allocation, the inability to decide which features should be cut, the desire to deliver the “best version” of a system. All of these things push us very forcefully towards building too much. You should <a href="https://www.simplethread.com/where-does-complexity-go/">fight this</a>. You learn so much as you’re building a system that you will end up iterating into a much better system than you ever could have designed in the first place. This is surprisingly a hard sell to most people.</p><h2>What is your story?</h2><p>So there you have it, 20 years of software distilled down into 20 pithy pieces of wisdom. I’d love to hear it if something resonated with you. I’d also love to hear if you have a piece of wisdom that you’ve picked up over your career that you’d like to share. Feel free to leave it down in the comments.</p>
--- a/cache/2022/8299fd0b8bd7010b4c74f4c06719f81d/index.html
+++ b/cache/2022/8299fd0b8bd7010b4c74f4c06719f81d/index.html
@@ -0,0 +1,283 @@
 <!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>Colocation : contribuer au loyer en fonction de ses revenus (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)">
 <!-- 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://kemenaran.winosx.com/posts/colocation-contribuer-au-loyer-en-fonction-de-ses-revenus">

 <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>Colocation : contribuer au loyer en fonction de ses revenus</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://kemenaran.winosx.com/posts/colocation-contribuer-au-loyer-en-fonction-de-ses-revenus" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Dans notre colocation, on contribue aux loyer et aux dépenses en fonction de nos revenus. Plutôt que de payer chaque mois un loyer fixe, on met au pot en fonction de l’argent avec lequel on vit ce mois-ci.</p>

 <p>Pourquoi on a eu envie de mettre ça en place ? Comment on en est arrivé à ce fonctionnement ? De quelle manière ça se passe en pratique ? Cet article raconte tout ça.</p>

 <p><img src="/images/uploads/rue-de-paris.jpg" alt="Photographie d’une rue de Paris">
 <em>Mettre au pot en fonction de ses rentrées d’argent, une pratique commune à beaucoup d’habitats partagés ? Sans doute que oui.</em></p>

 <h2 id="envies">Envies</h2>

 <p>Au début, comme tout le monde, chaque personne dans la coloc payait le même loyer (ou presque, avec juste de légères variations en fonction de la taille de la chambre).</p>

 <p>Et puis tout ça est parti d’une impression persistante qu’<strong>un euro de loyer n’a pas la même valeur pour tout le monde</strong>. Sortir 500 € quand on vit avec 650 € par mois, ce n’est pas pareil que quand on a un salaire de 1500 € qui tombe tous les mois.</p>

 <p>Dans mon cas à moi, c’était aussi un moment où j’étais malheureux là où je travaillais ; mais j’hésitais à changer de boulot, et à devenir indépendant, un peu par peur d’une perte de revenus dans l’intervalle. Rien de très important – mais en regardant mieux, on s’est mis à voir autour de nous plein de situations comme ça, où des gens restent dans un travail qui les rend malheureux ou qui fait du mal au monde, pour une raison simple : la peur de ne plus pouvoir payer le loyer.</p>

 <p>On voyait aussi les gens qui avaient des revenus irréguliers : certains mois, ça passe, mais c’est parfois suivi de mois de creux, où sortir toute la thune du loyer devient compliqué.</p>

 <h2 id="discuter-ensemble">Discuter ensemble</h2>

 <p>On a fini, un soir de février, par s’asseoir tous autour de la table de la cuisine, et par en discuter ensemble. On s’est parlé de nos expériences, déjà : de ce que ça nous fait de payer un loyer, ce que ça peut freiner ou rendre difficile, et commencer à imaginer comment ça pourrait être autrement.</p>

 <p><strong>Est-ce que c’est une bonne idée d’avoir des loyers variables ?</strong> On pourrait faire ça en fonction de la situation matérielle des gens (boulot, chômage, travail précaire). Et si on se retrouvait chaque mois et qu’on discutait de combien on met chacun·e ? Ou alors est-ce qu’on ferait une formule fixe ? Mais est-ce que ça varierait chaque mois ou pas ?</p>

 <p>La discussion a fait émerger plein de sujets intéressants. Par exemple, que <strong>la question du logement est anxiogène pour pas mal de gens</strong>. Payer un loyer fixe, même élevé, c’est quelque part l’assurance d’avoir un toit – et passer à des loyers variables envoie un peu d’incertitude là dessus.</p>

 <p>On s’est aussi rendu compte en discutant que quelque part, <strong>en habitant tous ensemble, il est parfois plus facile de donner que de prendre</strong>. Les gens dont la situation actuelle fait qu’iels contribueraient moins ne se sentaient pas toujours à l’aise avec ça. On s’est demandé comment faire émerger un sentiment de justice là dessus, qui fasse que tout le monde ait l’impression de participer à un système juste, même aux moments de moindre contribution.</p>

 <p>Quelques discussions aussi autour de « qu’est-ce qu’un revenu ? » Si on module le loyer en fonction de ce avec quoi les gens vivent, comment est-ce qu’on le définit ? Est-ce que les allocations chômage rentrent dedans ? Les aides au transport ? Les étrennes de la grand-mère ?</p>

 <p>Et de l’autre côté, qu’est-ce qui rentre dans le loyer ? Le loyer général de l’appart, évidemment. Mais les charges, l’internet, les assurances s’il y en a : qu’est-ce que qu’on veut aussi faire rentrer dans un budget commun ?</p>

 <p>En commençant à explorer des modes de répartition, on s’est aussi rendu compte de <strong>notre inégalité face aux chiffres</strong>. Si certain·es d’entre nous voyaient immédiatement les enjeux et les impacts d’une formule simple pour calculer les revenus, c’était beaucoup moins immédiat pour beaucoup d’autres. Pourtant, pour que tout le monde ait le sentiment d’un système juste, il fallait que le mode de répartition soit vraiment compréhensible intuitivement par tout le monde.</p>

 <h2 id="explorer-les-effets">Explorer les effets</h2>

 <p>Assez vite, il est donc apparu que, plutôt que de décider chaque mois de combien on met au pot, <strong>on préférait une formule de répartition fixe</strong>. Ça donne un sentiment de stabilité et d’absence de surprise qui semblait convenir à tout le monde.</p>

 <p>Mais quelle formule, et selon quels critères ? Et surtout, comment rendre les différents enjeux de différentes formules vraiment accessibles à tout le monde ?</p>

 <p>On a commencé par dessiner des grands graphiques, et à disséquer des formules possibles – mais au final l’un d’entre nous a proposé de faire des <strong>simulateurs interactifs de répartition</strong>.</p>

 <p>Ça ressemblait par exemple à ça :</p>

 <p><a href="https://pmorinerie.gitlab.io/coloc-loyers-solidaires/"><img src="/images/uploads/simulateur-de-loyers.gif" alt="Une capture d'écran du simulateur interactif d'une des formules." title="En déplaçant les chiffres de la formule, le résultat est mis à jour immédiatement."></a>
 <em>Un des simulateurs qu’on a mis en place (<a href="https://pmorinerie.gitlab.io/coloc-loyers-solidaires/">voir la version interactive</a>).</em></p>

 <p>L’idée, c’est que si on peut changer les paramètres d’une formule, et voir le résultat en temps réel, hébin ça aide beaucoup à comprendre comment la formule fonctionne, et quel effet elle pourrait avoir sur soi. Et puis ça aide aussi à voir combien il faudrait que chacun·e mette pour équilibrer le budget ; ou encore à simuler rapidement ce qui se passe si quelqu’un·e n’a pas de revenus pendant quelques mois.</p>

 <p>Pour évaluer les différents moyens de répartir un loyer, on a créé plusieurs simulateurs de ce que ça donnerait. Par exemple, un des simulateurs explorait un loyer qui soit exactement un pourcentage des revenus. Un autre représentait la situation avec une part fixe de loyer, et une part variable. Et encore un autre l’idée d’un revenu de base assuré par la coloc (versé quand on n’a vraiment rien pour vivre ce mois-ci).</p>

 <h2 id="fonctionnement-actuel">Fonctionnement actuel</h2>

 <p>Au final, le fonctionnement actuel utilise un <strong>revenu de base</strong>. Concrètement, chaque début de mois :</p>

 <ul>
  <li>On reçoit 100 € de la coloc,</li>
  <li>On verse 35% de son revenu à la coloc.</li>
 </ul>

 <p>Ça veut dire que <strong>les gros revenus contribuent plus que les petits</strong> (ce qui est l’effet désiré). Mais surtout, si un mois vous êtes court·e pour le loyer, ou complètement à sec, non seulement vous ne payez pas (ou peu) de loyer, mais en plus <strong>la coloc vous verse de l’argent</strong>. Histoire d’assurer le minimum.</p>

 <p><em>(On a préféré ça à un système progressif par tranches, parce que ça permet que les mois se compensent entre eux. Par exemple si on attend des allocs qui ne viennent pas, et qu’un mois on est à zéro, mais qu’on reçoit le double le mois suivant, pas de souci : ça fait pile comme si on avait contribué les deux mois.)</em></p>

 <p>Avec ces sous, on paye le loyer de la partie de la coloc qu’on loue – mais aussi les charges (eau, électricité, internet), les assurances habitation, et les achats ponctuels de matériel pour la coloc. (En revanche, pour la lessive et le papier-toilette, chacun continue à se débrouiller.)</p>

 <p>Au final, ce moyen de répartition permet d’être prévisible. Même si le loyer est variable chaque mois, la formule de calcul est fixe : pas besoin de discuter de la répartition des contributions chaque mois. En revanche, quand la situation à long-terme des habitant·es change (par exemple une nouvelle personne dans la coloc’, un changement de revenus, ou une fin de droits au chômage), là on se pose à nouveau autour d’une table avec le simulateur pour ré-équilibrer le budget, en mettant à jour la formule.</p>

 <h2 id="en-pratique">En pratique</h2>

 <p>Concrètement, chaque mois on doit verser nos contributions. Pour cela, on a essayé de simplifier les choses au maximum.</p>

 <ol>
  <li><strong>On estime avec combien on vit ce mois-ci.</strong> Salaire, chômage, allocations, économies perso… On ne flique pas les gens, c’est autogéré.</li>
  <li><strong>On indique ses revenus dans un tableur partagé</strong>. La contribution à verser est automatiquement calculée en fonction de la formule en cours.</li>
  <li><strong>On fait un virement sur le compte de la coloc</strong> si on doit verser des sous – ou un virement du compte vers soi si on récupère des sous ce mois-ci.</li>
 </ol>

 <p>Le tableur du budget a deux intérêts :</p>

 <ul>
  <li>Il calcule automatiquement la contribution de chaque mois en fonction de la formule,</li>
  <li>Il permet de suivre l’état du budget.</li>
 </ul>

 <p><strong>Tout le monde peut voir l’état des finances</strong> à n’importe quel moment. Ça nous a semble important pour l’auto-gestion que la responsabilité d’équilibrer les finances soit partagée par tout le monde – et que l’info soit donc visible et compréhensible facilement.</p>

 <p><a href="/images/uploads/tableur-budget-coloc.png"><img src="/images/uploads/tableur-budget-coloc.png" alt="Une capture d'écran du tableur utilisé pour l'autogestion du budget" title="Les courbes sont mises à jour automatiquement chaque mois."></a>
 <em>Notre tableur partagé des finances. On l’utilise pour calculer nos contributions, et suivre l’état de la trésorerie. <a href="https://www.icloud.com/numbers/0k6LqmyCW_Qjq_HUOcgfzt6RA#Budget_coloc">Consulter ou copier le tableur d’exemple</a></em></p>

 <h2 id="où-ça-en-est-aujourdhui">Où ça en est aujourd’hui</h2>

 <p>Après quelques années d’utilisation de ce système, on a l’impression qu’il y a des choses qui fonctionnent particulièrement bien :</p>

 <ul>
  <li>Ça permet effectivement une plus grande justice dans la contribution au loyer 🙌</li>
  <li>Quand une nouvelle personne entre dans la coloc, les discussions pour mettre à jour la formule se passent bien et rapidement. Le simulateur aide beaucoup pour ça.</li>
  <li>Les gens sont à l’aise avec l’idée de contribuer plus que les autres ou moins que les autres (même si ne pas contribuer du tout reste parfois difficile).</li>
  <li>On a pu gérer les cas particuliers sans problème (colocs présent·es seulement une semaine sur deux, par exemple). Dans ce cas on s’est généralement mis d’accord pour ajuster les choses – par exemple pour que la personne déduise N € de ses revenus mensuels, ce qui ajuste automatiquement la contribution sans changer la formule générale.</li>
 </ul>

 <p>Et puis évidemment il y a parfois des points de friction :</p>

 <ul>
  <li>La colocation a eu un léger déficit chronique, qu’on a dû combler par de la trésorerie externe. Ça va mieux depuis qu’on prévoit une formule qui met <em>un peu plus</em> que juste ce qu’il faut chaque mois pour atteindre l’équilibre.</li>
  <li>Le loyer de certaines personnes dans la coloc est payé par d’autres gens (typiquement leurs parents). Dans ce cas, sur quels revenus on se base ?</li>
 </ul>

 <p>Mais tout ça se discute bien collectivement.</p>

 <p>En tout cas l’expérience est vraiment positive. Ca fait du bien de sentir qu’on tend vers plus de justice (même à toute petite échelle), les discussions pour mettre en place les règles se passent bien, les contributions arrivent en temps voulu. A priori on va continuer comme ça pendant un bon moment !</p>

 <p>Normalement ce fonctionnement et les outils qui vont avec sont assez réutilisable. Si vous envisagez de monter le même système dans une coloc’ ou un habitat partagé à vous, n’hésitez pas à vous en servir.</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/2022/8299fd0b8bd7010b4c74f4c06719f81d/index.md
+++ b/cache/2022/8299fd0b8bd7010b4c74f4c06719f81d/index.md
@@ -0,0 +1,116 @@
 title: Colocation : contribuer au loyer en fonction de ses revenus
 url: https://kemenaran.winosx.com/posts/colocation-contribuer-au-loyer-en-fonction-de-ses-revenus
 hash_url: 8299fd0b8bd7010b4c74f4c06719f81d

 <p>Dans notre colocation, on contribue aux loyer et aux dépenses en fonction de nos revenus. Plutôt que de payer chaque mois un loyer fixe, on met au pot en fonction de l’argent avec lequel on vit ce mois-ci.</p>

 <p>Pourquoi on a eu envie de mettre ça en place ? Comment on en est arrivé à ce fonctionnement ? De quelle manière ça se passe en pratique ? Cet article raconte tout ça.</p>

 <p><img src="/images/uploads/rue-de-paris.jpg" alt="Photographie d’une rue de Paris">
 <em>Mettre au pot en fonction de ses rentrées d’argent, une pratique commune à beaucoup d’habitats partagés ? Sans doute que oui.</em></p>

 <h2 id="envies">Envies</h2>

 <p>Au début, comme tout le monde, chaque personne dans la coloc payait le même loyer (ou presque, avec juste de légères variations en fonction de la taille de la chambre).</p>

 <p>Et puis tout ça est parti d’une impression persistante qu’<strong>un euro de loyer n’a pas la même valeur pour tout le monde</strong>. Sortir 500 € quand on vit avec 650 € par mois, ce n’est pas pareil que quand on a un salaire de 1500 € qui tombe tous les mois.</p>

 <p>Dans mon cas à moi, c’était aussi un moment où j’étais malheureux là où je travaillais ; mais j’hésitais à changer de boulot, et à devenir indépendant, un peu par peur d’une perte de revenus dans l’intervalle. Rien de très important – mais en regardant mieux, on s’est mis à voir autour de nous plein de situations comme ça, où des gens restent dans un travail qui les rend malheureux ou qui fait du mal au monde, pour une raison simple : la peur de ne plus pouvoir payer le loyer.</p>

 <p>On voyait aussi les gens qui avaient des revenus irréguliers : certains mois, ça passe, mais c’est parfois suivi de mois de creux, où sortir toute la thune du loyer devient compliqué.</p>

 <h2 id="discuter-ensemble">Discuter ensemble</h2>

 <p>On a fini, un soir de février, par s’asseoir tous autour de la table de la cuisine, et par en discuter ensemble. On s’est parlé de nos expériences, déjà : de ce que ça nous fait de payer un loyer, ce que ça peut freiner ou rendre difficile, et commencer à imaginer comment ça pourrait être autrement.</p>

 <p><strong>Est-ce que c’est une bonne idée d’avoir des loyers variables ?</strong> On pourrait faire ça en fonction de la situation matérielle des gens (boulot, chômage, travail précaire). Et si on se retrouvait chaque mois et qu’on discutait de combien on met chacun·e ? Ou alors est-ce qu’on ferait une formule fixe ? Mais est-ce que ça varierait chaque mois ou pas ?</p>

 <p>La discussion a fait émerger plein de sujets intéressants. Par exemple, que <strong>la question du logement est anxiogène pour pas mal de gens</strong>. Payer un loyer fixe, même élevé, c’est quelque part l’assurance d’avoir un toit – et passer à des loyers variables envoie un peu d’incertitude là dessus.</p>

 <p>On s’est aussi rendu compte en discutant que quelque part, <strong>en habitant tous ensemble, il est parfois plus facile de donner que de prendre</strong>. Les gens dont la situation actuelle fait qu’iels contribueraient moins ne se sentaient pas toujours à l’aise avec ça. On s’est demandé comment faire émerger un sentiment de justice là dessus, qui fasse que tout le monde ait l’impression de participer à un système juste, même aux moments de moindre contribution.</p>

 <p>Quelques discussions aussi autour de « qu’est-ce qu’un revenu ? » Si on module le loyer en fonction de ce avec quoi les gens vivent, comment est-ce qu’on le définit ? Est-ce que les allocations chômage rentrent dedans ? Les aides au transport ? Les étrennes de la grand-mère ?</p>

 <p>Et de l’autre côté, qu’est-ce qui rentre dans le loyer ? Le loyer général de l’appart, évidemment. Mais les charges, l’internet, les assurances s’il y en a : qu’est-ce que qu’on veut aussi faire rentrer dans un budget commun ?</p>

 <p>En commençant à explorer des modes de répartition, on s’est aussi rendu compte de <strong>notre inégalité face aux chiffres</strong>. Si certain·es d’entre nous voyaient immédiatement les enjeux et les impacts d’une formule simple pour calculer les revenus, c’était beaucoup moins immédiat pour beaucoup d’autres. Pourtant, pour que tout le monde ait le sentiment d’un système juste, il fallait que le mode de répartition soit vraiment compréhensible intuitivement par tout le monde.</p>

 <h2 id="explorer-les-effets">Explorer les effets</h2>

 <p>Assez vite, il est donc apparu que, plutôt que de décider chaque mois de combien on met au pot, <strong>on préférait une formule de répartition fixe</strong>. Ça donne un sentiment de stabilité et d’absence de surprise qui semblait convenir à tout le monde.</p>

 <p>Mais quelle formule, et selon quels critères ? Et surtout, comment rendre les différents enjeux de différentes formules vraiment accessibles à tout le monde ?</p>

 <p>On a commencé par dessiner des grands graphiques, et à disséquer des formules possibles – mais au final l’un d’entre nous a proposé de faire des <strong>simulateurs interactifs de répartition</strong>.</p>

 <p>Ça ressemblait par exemple à ça :</p>

 <p><a href="https://pmorinerie.gitlab.io/coloc-loyers-solidaires/"><img src="/images/uploads/simulateur-de-loyers.gif" alt="Une capture d'écran du simulateur interactif d'une des formules." title="En déplaçant les chiffres de la formule, le résultat est mis à jour immédiatement."></a>
 <em>Un des simulateurs qu’on a mis en place (<a href="https://pmorinerie.gitlab.io/coloc-loyers-solidaires/">voir la version interactive</a>).</em></p>

 <p>L’idée, c’est que si on peut changer les paramètres d’une formule, et voir le résultat en temps réel, hébin ça aide beaucoup à comprendre comment la formule fonctionne, et quel effet elle pourrait avoir sur soi. Et puis ça aide aussi à voir combien il faudrait que chacun·e mette pour équilibrer le budget ; ou encore à simuler rapidement ce qui se passe si quelqu’un·e n’a pas de revenus pendant quelques mois.</p>

 <p>Pour évaluer les différents moyens de répartir un loyer, on a créé plusieurs simulateurs de ce que ça donnerait. Par exemple, un des simulateurs explorait un loyer qui soit exactement un pourcentage des revenus. Un autre représentait la situation avec une part fixe de loyer, et une part variable. Et encore un autre l’idée d’un revenu de base assuré par la coloc (versé quand on n’a vraiment rien pour vivre ce mois-ci).</p>

 <h2 id="fonctionnement-actuel">Fonctionnement actuel</h2>

 <p>Au final, le fonctionnement actuel utilise un <strong>revenu de base</strong>. Concrètement, chaque début de mois :</p>

 <ul>
  <li>On reçoit 100 € de la coloc,</li>
  <li>On verse 35% de son revenu à la coloc.</li>
 </ul>

 <p>Ça veut dire que <strong>les gros revenus contribuent plus que les petits</strong> (ce qui est l’effet désiré). Mais surtout, si un mois vous êtes court·e pour le loyer, ou complètement à sec, non seulement vous ne payez pas (ou peu) de loyer, mais en plus <strong>la coloc vous verse de l’argent</strong>. Histoire d’assurer le minimum.</p>

 <p><em>(On a préféré ça à un système progressif par tranches, parce que ça permet que les mois se compensent entre eux. Par exemple si on attend des allocs qui ne viennent pas, et qu’un mois on est à zéro, mais qu’on reçoit le double le mois suivant, pas de souci : ça fait pile comme si on avait contribué les deux mois.)</em></p>

 <p>Avec ces sous, on paye le loyer de la partie de la coloc qu’on loue – mais aussi les charges (eau, électricité, internet), les assurances habitation, et les achats ponctuels de matériel pour la coloc. (En revanche, pour la lessive et le papier-toilette, chacun continue à se débrouiller.)</p>

 <p>Au final, ce moyen de répartition permet d’être prévisible. Même si le loyer est variable chaque mois, la formule de calcul est fixe : pas besoin de discuter de la répartition des contributions chaque mois. En revanche, quand la situation à long-terme des habitant·es change (par exemple une nouvelle personne dans la coloc’, un changement de revenus, ou une fin de droits au chômage), là on se pose à nouveau autour d’une table avec le simulateur pour ré-équilibrer le budget, en mettant à jour la formule.</p>

 <h2 id="en-pratique">En pratique</h2>

 <p>Concrètement, chaque mois on doit verser nos contributions. Pour cela, on a essayé de simplifier les choses au maximum.</p>

 <ol>
  <li><strong>On estime avec combien on vit ce mois-ci.</strong> Salaire, chômage, allocations, économies perso… On ne flique pas les gens, c’est autogéré.</li>
  <li><strong>On indique ses revenus dans un tableur partagé</strong>. La contribution à verser est automatiquement calculée en fonction de la formule en cours.</li>
  <li><strong>On fait un virement sur le compte de la coloc</strong> si on doit verser des sous – ou un virement du compte vers soi si on récupère des sous ce mois-ci.</li>
 </ol>

 <p>Le tableur du budget a deux intérêts :</p>

 <ul>
  <li>Il calcule automatiquement la contribution de chaque mois en fonction de la formule,</li>
  <li>Il permet de suivre l’état du budget.</li>
 </ul>

 <p><strong>Tout le monde peut voir l’état des finances</strong> à n’importe quel moment. Ça nous a semble important pour l’auto-gestion que la responsabilité d’équilibrer les finances soit partagée par tout le monde – et que l’info soit donc visible et compréhensible facilement.</p>

 <p><a href="/images/uploads/tableur-budget-coloc.png"><img src="/images/uploads/tableur-budget-coloc.png" alt="Une capture d'écran du tableur utilisé pour l'autogestion du budget" title="Les courbes sont mises à jour automatiquement chaque mois."></a>
 <em>Notre tableur partagé des finances. On l’utilise pour calculer nos contributions, et suivre l’état de la trésorerie. <a href="https://www.icloud.com/numbers/0k6LqmyCW_Qjq_HUOcgfzt6RA#Budget_coloc">Consulter ou copier le tableur d’exemple</a></em></p>

 <h2 id="où-ça-en-est-aujourdhui">Où ça en est aujourd’hui</h2>

 <p>Après quelques années d’utilisation de ce système, on a l’impression qu’il y a des choses qui fonctionnent particulièrement bien :</p>

 <ul>
  <li>Ça permet effectivement une plus grande justice dans la contribution au loyer 🙌</li>
  <li>Quand une nouvelle personne entre dans la coloc, les discussions pour mettre à jour la formule se passent bien et rapidement. Le simulateur aide beaucoup pour ça.</li>
  <li>Les gens sont à l’aise avec l’idée de contribuer plus que les autres ou moins que les autres (même si ne pas contribuer du tout reste parfois difficile).</li>
  <li>On a pu gérer les cas particuliers sans problème (colocs présent·es seulement une semaine sur deux, par exemple). Dans ce cas on s’est généralement mis d’accord pour ajuster les choses – par exemple pour que la personne déduise N € de ses revenus mensuels, ce qui ajuste automatiquement la contribution sans changer la formule générale.</li>
 </ul>

 <p>Et puis évidemment il y a parfois des points de friction :</p>

 <ul>
  <li>La colocation a eu un léger déficit chronique, qu’on a dû combler par de la trésorerie externe. Ça va mieux depuis qu’on prévoit une formule qui met <em>un peu plus</em> que juste ce qu’il faut chaque mois pour atteindre l’équilibre.</li>
  <li>Le loyer de certaines personnes dans la coloc est payé par d’autres gens (typiquement leurs parents). Dans ce cas, sur quels revenus on se base ?</li>
 </ul>

 <p>Mais tout ça se discute bien collectivement.</p>

 <p>En tout cas l’expérience est vraiment positive. Ca fait du bien de sentir qu’on tend vers plus de justice (même à toute petite échelle), les discussions pour mettre en place les règles se passent bien, les contributions arrivent en temps voulu. A priori on va continuer comme ça pendant un bon moment !</p>

 <p>Normalement ce fonctionnement et les outils qui vont avec sont assez réutilisable. Si vous envisagez de monter le même système dans une coloc’ ou un habitat partagé à vous, n’hésitez pas à vous en servir.</p>
--- a/cache/2022/c8c3f9a0a328a21db8c91c7a288a8b4f/index.html
+++ b/cache/2022/c8c3f9a0a328a21db8c91c7a288a8b4f/index.html
@@ -0,0 +1,179 @@
 <!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>Performances et ressenti - Carnet de notes (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)">
 <!-- 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://n.survol.fr/n/performances-et-ressenti">

 <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>Performances et ressenti - Carnet de notes</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://n.survol.fr/n/performances-et-ressenti" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <blockquote><p>Être obligé de donner une illusion de ralentissement pour que les gens comprennent que la page est chargée, ça me donne un petit tic nerveux, je ne sais pas pourquoi.</p>
 <p>Au contraire, dès que je vois un site qui se charge presque instantanément, je suis ravi.</p>
 <p>— <a href="http://nota-bene.org/Performances-trop-bonnes">Stéphane</a>, à partir d’un billet <a href="https://larlet.fr/david/stream/2015/12/30/">qui continue chez David</a></p></blockquote>
 <p>Peut-être que le terme de performance n’est pas le bon. Est-ce vraiment la vitesse qui pose problème ou l’absence de compréhension de ce qu’il se passe ?</p>
 <p>Je ne crois pas me rappeler avoir lu des études critiquant de trop bonnes performances. En fait c’est tout le contraire. Ce que j’ai lu milite systématiquement pour des changements inférieurs à 10ms, y compris sur le web.</p>
 <p>En revanche, il en existe un bon paquet qui critiquent l’absence de transition ou l’absence de feedback sur action. Parfois rien que proposer un état « enfoncé » sur un lien ou un bouton, pour les quelques millisecondes où le bouton de souris ou touchpad reste en bas de course, ça suffit à faire effet. Les applications mobiles natives, plutôt bonnes en performance, ajoutent elles-aussi beaucoup d’animations, simplement parce que c’est une façon de donner du feedback du type « regarde, je fais ce que tu m’as demande, j’ai bien pris en compte, voilà ce qu’il se passe ». C’est d’ailleurs un des principaux <em>trucs</em> qui font préférer les applications natives aux sites web, même si personne ne s’en rend compte.</p>
 <p>Je me dis, chez David, c’est peut être que les deux pages avant et après se ressemblent beaucoup. Avec un changement immédiat sans transition certains sont peut être un peu perdus, par exemple ne sachant pas s’ils sont remontés en haut ou sur une nouvelle page. La transition CSS joue peut être plus parce qu’elle amène le nouveau contenu et le présente bien comme du nouveau qui apparait de zéro, et pas forcément grâce à la lenteur retrouvée.</p>
 <p>Je réfléchis à haute voix, peut-être suis-je à côté de la plaque. Il faudrait tenter des tests A/B, différentes vitesses d’animation</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/2022/c8c3f9a0a328a21db8c91c7a288a8b4f/index.md
+++ b/cache/2022/c8c3f9a0a328a21db8c91c7a288a8b4f/index.md
@@ -0,0 +1,12 @@
 title: Performances et ressenti - Carnet de notes
 url: https://n.survol.fr/n/performances-et-ressenti
 hash_url: c8c3f9a0a328a21db8c91c7a288a8b4f

 <blockquote><p>Être obligé de donner une illusion de ralentissement pour que les gens comprennent que la page est chargée, ça me donne un petit tic nerveux, je ne sais pas pourquoi.</p>
 <p>Au contraire, dès que je vois un site qui se charge presque instantanément, je suis ravi.</p>
 <p>— <a href="http://nota-bene.org/Performances-trop-bonnes">Stéphane</a>, à partir d’un billet <a href="https://larlet.fr/david/stream/2015/12/30/">qui continue chez David</a></p></blockquote>
 <p>Peut-être que le terme de performance n’est pas le bon. Est-ce vraiment la vitesse qui pose problème ou l’absence de compréhension de ce qu’il se passe ?</p>
 <p>Je ne crois pas me rappeler avoir lu des études critiquant de trop bonnes performances. En fait c’est tout le contraire. Ce que j’ai lu milite systématiquement pour des changements inférieurs à 10ms, y compris sur le web.</p>
 <p>En revanche, il en existe un bon paquet qui critiquent l’absence de transition ou l’absence de feedback sur action. Parfois rien que proposer un état « enfoncé » sur un lien ou un bouton, pour les quelques millisecondes où le bouton de souris ou touchpad reste en bas de course, ça suffit à faire effet. Les applications mobiles natives, plutôt bonnes en performance, ajoutent elles-aussi beaucoup d’animations, simplement parce que c’est une façon de donner du feedback du type « regarde, je fais ce que tu m’as demande, j’ai bien pris en compte, voilà ce qu’il se passe ». C’est d’ailleurs un des principaux <em>trucs</em> qui font préférer les applications natives aux sites web, même si personne ne s’en rend compte.</p>
 <p>Je me dis, chez David, c’est peut être que les deux pages avant et après se ressemblent beaucoup. Avec un changement immédiat sans transition certains sont peut être un peu perdus, par exemple ne sachant pas s’ils sont remontés en haut ou sur une nouvelle page. La transition CSS joue peut être plus parce qu’elle amène le nouveau contenu et le présente bien comme du nouveau qui apparait de zéro, et pas forcément grâce à la lenteur retrouvée.</p>
 <p>Je réfléchis à haute voix, peut-être suis-je à côté de la plaque. Il faudrait tenter des tests A/B, différentes vitesses d’animation</p>
--- a/cache/2022/df33a2f3d5f174aadda2a8311eebcafa/index.html
+++ b/cache/2022/df33a2f3d5f174aadda2a8311eebcafa/index.html
@@ -0,0 +1,267 @@
 <!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>Dunbar’s number and how speaking is 2.8x better than picking fleas (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)">
 <!-- 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://interconnected.org/home/2022/04/05/dunbar">

 <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>Dunbar’s number and how speaking is 2.8x better than picking fleas</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://interconnected.org/home/2022/04/05/dunbar" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p class="measure-wide f6 f5-l lh-copy black-80">150, Dunbar’s number, is the natural size of human social groups. Robin Dunbar’s 1993 paper, where he put forward this hypothesis, is a great read – it’s got twists and turns, so much more in it than just the 150 number.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80"><em>(If you design software for people to socialise or collaborate, like Slack or Google Docs, then what Dunbar says is useful to know! Also true if you build communities in Discords or DAOs, I reckon, good knowledge to have when structuring the spaces and processes for interaction.)</em></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">I’ve added a reference to Dunbar’s paper, <em>Coevolution of neocortical size, group size and language in humans,</em> at the bottom of this post. It’s not online but you can <a href="https://pdodds.w3.uvm.edu/files/papers/others/1993/dunbar1993a.pdf">snag a pre-print PDF here</a>.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">The paper and the number are both super well-known.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">BUT - I insist! - still not well-known <em>enough</em> in our software and design circles. Especially given there is a revitalisation and renewed interest in building and innovating with the social internet.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">So I figured I would share my favourite bits.</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar lists a bunch of places this 150 group size appears. To pick out a convincing selection…</p>
 <ul class="list ph0 ph0-ns bulleted-list">
 <li class="measure-wide f6 f5-l lh-copy black-80">6500-5500 BC: <q>the size of Neolithic villages in Mesopotamia are of about the same magnitude.</q></li>
 <li class="measure-wide f6 f5-l lh-copy black-80">In South Dakota: <q>the Hutterites regard 150 individuals as the limiting size for their farming communities: once a community reaches this size, steps are taken to split it into two daughter communities.</q></li>
 <li class="measure-wide f6 f5-l lh-copy black-80">Academic communities: <q>research specialities in the sciences tend to consist of up to 200 individuals, but rarely more.</q></li>
 <li class="measure-wide f6 f5-l lh-copy black-80">Professional armies have a basic unit of about 150 men: <q>This was as true of the Roman Army (both before and after the reforms of 104 BC) as of modern armies since the sixteenth century.</q></li>
 <li class="measure-wide f6 f5-l lh-copy black-80">Work: <q>the likelihood of having friends within the workplace reaches an asymptote at a shop size of 90-150 individuals.</q></li>
 </ul>
 <p class="measure-wide f6 f5-l lh-copy black-80">It’s the number of people on your Christmas card list. When AOL Instant Messenger launched, it was the maximum allowable number of buddies.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80"><em>(And the number of Pokemon in generation one… 151. Huh.)</em></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Pretty compelling. Something to be explained.</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80"><strong>The clever bit:</strong></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">The catarrhine primates: Old World monkeys (baboons, macaques, mandrill, and ~130 other species) plus the apes… tailless simians including gibbons, gorillas, chimpanzees, and humans.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar’s insight was to look at the catarrhine primates and realise that <strong>these three factors are connected:</strong></p>
 <ul class="list ph0 ph0-ns bulleted-list">
 <li class="measure-wide f6 f5-l lh-copy black-80">Group size</li>
 <li class="measure-wide f6 f5-l lh-copy black-80">Time devoted to social grooming: a bonding mechanism (if you wanna have friends, you gotta spend time picking fleas)</li>
 <li class="measure-wide f6 f5-l lh-copy black-80">Neocortex size, being the amount of brain available for tracking the social group, i.e. a limit on <q>the number of relationships that an animal can keep track of in a complex, continuously changing social world</q></li>
 </ul>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar gives equations that relate these.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Then:</p>
 <blockquote class="bl bw2 pl2 b--orange ml0 italic i">
 <p class="measure-wide f6 f5-l lh-copy black-80">If we extrapolate from the nonhuman primate regression, what group size would we predict for anatomically modern humans, given our current neocortex size?</p>
 </blockquote>
 <p class="measure-wide f6 f5-l lh-copy black-80">Oh-ho, a prediction!</p>
 <p class="measure-wide f6 f5-l lh-copy black-80"><q>Equation (1) yields a predicted group size for humans of 147.8.</q></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">So there’s the observed number 150, right there in the size of the brain.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">BUT THEN, A TWIST:</p>
 <p class="measure-wide f6 f5-l lh-copy black-80"><q>The group size predicted for modern humans by equation (1) would require as much as 42% of the total time budget to be devoted to social grooming.</q></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">We <em>(humans)</em> clearly don’t spend all that time on social grooming. There’s not the time in the day. It’s incompatible with resting, foraging, and staying in the shade on hot days. Chimpanzees are the most comparable to humans, and they have a social time budget of about only 15%.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">So what gives?</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Humans, says Dunbar, must have <strong>a method of social grooming that is 2.8x more effective</strong> than the method used by the nonhuman primates. But what is it?</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80">What is our ultra efficient bonding mechanism, better than caring, grooming, and picking fleas? It is LANGUAGE.</p>
 <blockquote class="bl bw2 pl2 b--orange ml0 italic i">
 <p class="measure-wide f6 f5-l lh-copy black-80">The observed mean group size for chimpanzees (presumably the closest approximation to the ancestral condition for the hominid lineage) is 53.5 (Dunbar 1992a). Since the predicted size for human groups is 147.8, this implies that <u>language</u> (the human bonding mechanism) ought to be 147.8/53.5=2.76 times as efficient as social grooming (the nonhuman primate bonding mechanism).</p>
 </blockquote>
 <p class="measure-wide f6 f5-l lh-copy black-80">Speaking is way better than grooming, which requires 100% attention and is one-on-one. But we can talk to more than one person at once! See: <q>not only can speech be combined with almost every other activity (we can forage and talk at the same time), but it can also be used to address several different individuals simultaneously.</q></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar’s suggestion is that language evolved as a <q>‘cheap’ form of social grooming,</q> a way to increase group size. And there follows a cascade of consequences and speculations…</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80">The interesting bit, for me, is about the “natural” size of a conversation group.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar’s prediction, based on the estimated efficiency gain versus chimps: <q>human conversation group sizes should be limited to about 3.8 in size (one speaker plus 2.8 listeners).</q></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">And this holds up!</p>
 <ul class="list ph0 ph0-ns bulleted-list">
 <li class="measure-wide f6 f5-l lh-copy black-80">Looking at restaurant reservations: <q>the mean size of 3070 groups was 3.8.</q></li>
 <li class="measure-wide f6 f5-l lh-copy black-80">In a university refectory: <q>the average number of people directly involved in a conversation (as speaker or attentive listener) reached an asymptotic value of about 3.4 (one speaker plus 2.4 listeners) and that groups tended to partition into new conversational cliques at multiples of about four individuals.</q></li>
 </ul>
 <p class="measure-wide f6 f5-l lh-copy black-80">Which feels about right, right?</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">I mean, think of a sitting with friends round a dinner table. Two people, three people, four people, it’s one conversation. Five people, it’s still one conversation – just. At six it’s hard to maintain; the conversation often splits and oscillates between 4/2 and 3/3 modes.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">The cognitive limit corresponds to how our <em>ears and voices</em> work.</p>
 <blockquote class="bl bw2 pl2 b--orange ml0 italic i">
 <p class="measure-wide f6 f5-l lh-copy black-80">It turns out that there is, in fact, a psycho-physical limit on the size of conversation groups. Due to the rate at which speech attenuates with the distance between speaker and hearer under normal ambient noise levels, there is a physical limit on the number of individuals that can effectively take part in a conversation. Sommer (1961), for example, found that <u>a nose-to-nose distance of 1.7m was the upper limit for comfortable conversation in dyadic groups; this would yield a maximum conversation group size of five individuals</u> with a shoulder-to-shoulder spacing of 0.5m between adjacent individuals standing around the circumference of a circle.</p>
 </blockquote>
 <p class="measure-wide f6 f5-l lh-copy black-80">“Comfortable” conversation means <q>background noise levels typical of both offices and city streets</q> – our normal voice levels, our normal hearing, our normal comfortable personal social distance, our normal <em>width of shoulders</em> all combine to produce conversional groups of… 5 people.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Absolutely wonderful. It makes me laugh every time I read this bit.</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80"><strong>Evidence for Dunbar’s Number in the analysis of 6 billion phone calls:</strong></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar actually doesn’t say that we devote “grooming time” to the whole social group of 150. Rather he says that the 150 is made up from <q>welding together</q> much smaller “primary networks”: coalitions, friendship groups. Intensive grooming (language, for humans) is reserved for close friends. Our intimate group is very small, averaging just five.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar suggests other group sizes too, in papers that follow his 1993 original…</p>
 <blockquote cite="https://www.technologyreview.com/2016/04/29/160438/your-brain-limits-you-to-just-five-bffs/" class="quoteback bl bw2 pl2 b--orange ml0 italic i" data-author="MIT Technology Review" data-title="Your Brain Limits You to Just Five BFFs (2016)">
 <p class="measure-wide f6 f5-l lh-copy black-80">Individuals, he says, generally have up to five people in the closest layer. The next closest layer contains an additional 10, the one beyond that an extra 35, and the final group another 100. So cumulatively, the layers contain five, 15, 50, and 150 people.</p>

 </blockquote>
 <p class="measure-wide f6 f5-l lh-copy black-80">And this result is new to me:</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Looking at <q>some six billion calls made by 35 million people</q> they did some number crunching and…</p>
 <blockquote class="bl bw2 pl2 b--orange ml0 italic i">
 <p class="measure-wide f6 f5-l lh-copy black-80">the average cumulative layer turns out to hold 4.1, 11.0, 29.8, and 128.9 users.</p>
 </blockquote>
 <p class="measure-wide f6 f5-l lh-copy black-80">Ta-da! Dunbar’s number proved, close enough.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">You can get the PDF on arXiv: <a href="https://arxiv.org/abs/1604.02400">Calling Dunbar’s Numbers (2016)</a>. I’ve included the full reference below.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Kinda amazing to have evidence for something that feels so intuitive (the average number of best friends/family) and that lends confidence in the discovery in the data of Dunbar’s number itself too.</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80">BTW I found that second paper via <a href="https://twitter.com/emollick">Ethan Mollick (@emollick) on Twitter</a> who <em>daily</em> shares and summarises fascinating papers and is 100% a must-follow.</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80">Again, why this is relevant: if you’re designing systems for working in groups, whether that’s IRL workgroups and committees, or online chat groups, or software, the relevant numbers are 150 people who can be recognised over time, and approx 5 in a simultaneous conversation. That’s what it suggests to me anyway.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">The numbers are just averages, of course, and we’re each individuals and you shouldn’t put too much weight on evo psych or be deterministic about this stuff, but what we <em>can</em> do is use these as springboards to provoke new feature ideas. Such as…</p>
 <ul class="list ph0 ph0-ns bulleted-list">
 <li class="measure-wide f6 f5-l lh-copy black-80">could a Figma document suggest how to subdivide itself once more than five people are involved? Could my Twitter auto-segment into groups of 150?</li>
 <li class="measure-wide f6 f5-l lh-copy black-80">could we automatically adapt the interface of Zoom at the various Dunbar layers? Can we visually (and with interaction design) represent the structure of a 150 group <em>“welded together”</em> from smaller table-sized conversational groups, the two scales operating simultaneously?</li>
 <li class="measure-wide f6 f5-l lh-copy black-80">in pseudonymous groups where everyone is represented by avatars and obscure names, such as web3 communities on Discords, what is the right level of <em>detail</em> to help our ancient recognition systems to kick in, so we can get to Dunbar’s number and all the helpful formal and informal networks and subgroups that arise?</li>
 <li class="measure-wide f6 f5-l lh-copy black-80">when we’re building <a href="/home/2020/12/04/coops">software-enabled co-ops</a> or, in new language, creating governance and consensus systems for DAOs, could we optimise around Dunbar’s layers in order to avoid the inevitable bureaucratic requirements when we don’t –  bureaucracy which is now perhaps revealed to be a social technology, a kind of relationships prosthetic for when self-organisation caps out.</li>
 </ul>
 <p class="measure-wide f6 f5-l lh-copy black-80">(Those last two points relevant now the global public timelines of 2010s social media are evaporating into the unindexable Discords and WhatsApp groups of 2020s <a href="/home/2021/01/07/dunbar_spaces">virtual private neighbourhoods</a>.)</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">AND SO ON.</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80"><em>References</em></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar, R.I.M., 1993. Coevolution of neocortical size, group size and language in humans. Behavioral and Brain Sciences 16, 681–694. <a href="https://doi.org/10.1017/S0140525X00032325">https://doi.org/10.1017/S0140525X00032325</a></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">MacCarron, P., Kaski, K., Dunbar, R., 2016. Calling Dunbar’s Numbers. Social Networks 47, 151–155. <a href="https://doi.org/10.1016/j.socnet.2016.06.003">https://doi.org/10.1016/j.socnet.2016.06.003</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/2022/df33a2f3d5f174aadda2a8311eebcafa/index.md
+++ b/cache/2022/df33a2f3d5f174aadda2a8311eebcafa/index.md
@@ -0,0 +1,100 @@
 title: Dunbar’s number and how speaking is 2.8x better than picking fleas
 url: https://interconnected.org/home/2022/04/05/dunbar
 hash_url: df33a2f3d5f174aadda2a8311eebcafa

 <p class="measure-wide f6 f5-l lh-copy black-80">150, Dunbar’s number, is the natural size of human social groups. Robin Dunbar’s 1993 paper, where he put forward this hypothesis, is a great read – it’s got twists and turns, so much more in it than just the 150 number.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80"><em>(If you design software for people to socialise or collaborate, like Slack or Google Docs, then what Dunbar says is useful to know! Also true if you build communities in Discords or DAOs, I reckon, good knowledge to have when structuring the spaces and processes for interaction.)</em></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">I’ve added a reference to Dunbar’s paper, <em>Coevolution of neocortical size, group size and language in humans,</em> at the bottom of this post. It’s not online but you can <a href="https://pdodds.w3.uvm.edu/files/papers/others/1993/dunbar1993a.pdf">snag a pre-print PDF here</a>.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">The paper and the number are both super well-known.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">BUT - I insist! - still not well-known <em>enough</em> in our software and design circles. Especially given there is a revitalisation and renewed interest in building and innovating with the social internet.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">So I figured I would share my favourite bits.</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar lists a bunch of places this 150 group size appears. To pick out a convincing selection…</p>
 <ul class="list ph0 ph0-ns bulleted-list">
 <li class="measure-wide f6 f5-l lh-copy black-80">6500-5500 BC: <q>the size of Neolithic villages in Mesopotamia are of about the same magnitude.</q></li>
 <li class="measure-wide f6 f5-l lh-copy black-80">In South Dakota: <q>the Hutterites regard 150 individuals as the limiting size for their farming communities: once a community reaches this size, steps are taken to split it into two daughter communities.</q></li>
 <li class="measure-wide f6 f5-l lh-copy black-80">Academic communities: <q>research specialities in the sciences tend to consist of up to 200 individuals, but rarely more.</q></li>
 <li class="measure-wide f6 f5-l lh-copy black-80">Professional armies have a basic unit of about 150 men: <q>This was as true of the Roman Army (both before and after the reforms of 104 BC) as of modern armies since the sixteenth century.</q></li>
 <li class="measure-wide f6 f5-l lh-copy black-80">Work: <q>the likelihood of having friends within the workplace reaches an asymptote at a shop size of 90-150 individuals.</q></li>
 </ul>
 <p class="measure-wide f6 f5-l lh-copy black-80">It’s the number of people on your Christmas card list. When AOL Instant Messenger launched, it was the maximum allowable number of buddies.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80"><em>(And the number of Pokemon in generation one… 151. Huh.)</em></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Pretty compelling. Something to be explained.</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80"><strong>The clever bit:</strong></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">The catarrhine primates: Old World monkeys (baboons, macaques, mandrill, and ~130 other species) plus the apes… tailless simians including gibbons, gorillas, chimpanzees, and humans.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar’s insight was to look at the catarrhine primates and realise that <strong>these three factors are connected:</strong></p>
 <ul class="list ph0 ph0-ns bulleted-list">
 <li class="measure-wide f6 f5-l lh-copy black-80">Group size</li>
 <li class="measure-wide f6 f5-l lh-copy black-80">Time devoted to social grooming: a bonding mechanism (if you wanna have friends, you gotta spend time picking fleas)</li>
 <li class="measure-wide f6 f5-l lh-copy black-80">Neocortex size, being the amount of brain available for tracking the social group, i.e. a limit on <q>the number of relationships that an animal can keep track of in a complex, continuously changing social world</q></li>
 </ul>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar gives equations that relate these.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Then:</p>
 <blockquote class="bl bw2 pl2 b--orange ml0 italic i">
 <p class="measure-wide f6 f5-l lh-copy black-80">If we extrapolate from the nonhuman primate regression, what group size would we predict for anatomically modern humans, given our current neocortex size?</p>
 </blockquote>
 <p class="measure-wide f6 f5-l lh-copy black-80">Oh-ho, a prediction!</p>
 <p class="measure-wide f6 f5-l lh-copy black-80"><q>Equation (1) yields a predicted group size for humans of 147.8.</q></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">So there’s the observed number 150, right there in the size of the brain.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">BUT THEN, A TWIST:</p>
 <p class="measure-wide f6 f5-l lh-copy black-80"><q>The group size predicted for modern humans by equation (1) would require as much as 42% of the total time budget to be devoted to social grooming.</q></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">We <em>(humans)</em> clearly don’t spend all that time on social grooming. There’s not the time in the day. It’s incompatible with resting, foraging, and staying in the shade on hot days. Chimpanzees are the most comparable to humans, and they have a social time budget of about only 15%.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">So what gives?</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Humans, says Dunbar, must have <strong>a method of social grooming that is 2.8x more effective</strong> than the method used by the nonhuman primates. But what is it?</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80">What is our ultra efficient bonding mechanism, better than caring, grooming, and picking fleas? It is LANGUAGE.</p>
 <blockquote class="bl bw2 pl2 b--orange ml0 italic i">
 <p class="measure-wide f6 f5-l lh-copy black-80">The observed mean group size for chimpanzees (presumably the closest approximation to the ancestral condition for the hominid lineage) is 53.5 (Dunbar 1992a). Since the predicted size for human groups is 147.8, this implies that <u>language</u> (the human bonding mechanism) ought to be 147.8/53.5=2.76 times as efficient as social grooming (the nonhuman primate bonding mechanism).</p>
 </blockquote>
 <p class="measure-wide f6 f5-l lh-copy black-80">Speaking is way better than grooming, which requires 100% attention and is one-on-one. But we can talk to more than one person at once! See: <q>not only can speech be combined with almost every other activity (we can forage and talk at the same time), but it can also be used to address several different individuals simultaneously.</q></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar’s suggestion is that language evolved as a <q>‘cheap’ form of social grooming,</q> a way to increase group size. And there follows a cascade of consequences and speculations…</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80">The interesting bit, for me, is about the “natural” size of a conversation group.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar’s prediction, based on the estimated efficiency gain versus chimps: <q>human conversation group sizes should be limited to about 3.8 in size (one speaker plus 2.8 listeners).</q></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">And this holds up!</p>
 <ul class="list ph0 ph0-ns bulleted-list">
 <li class="measure-wide f6 f5-l lh-copy black-80">Looking at restaurant reservations: <q>the mean size of 3070 groups was 3.8.</q></li>
 <li class="measure-wide f6 f5-l lh-copy black-80">In a university refectory: <q>the average number of people directly involved in a conversation (as speaker or attentive listener) reached an asymptotic value of about 3.4 (one speaker plus 2.4 listeners) and that groups tended to partition into new conversational cliques at multiples of about four individuals.</q></li>
 </ul>
 <p class="measure-wide f6 f5-l lh-copy black-80">Which feels about right, right?</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">I mean, think of a sitting with friends round a dinner table. Two people, three people, four people, it’s one conversation. Five people, it’s still one conversation – just. At six it’s hard to maintain; the conversation often splits and oscillates between 4/2 and 3/3 modes.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">The cognitive limit corresponds to how our <em>ears and voices</em> work.</p>
 <blockquote class="bl bw2 pl2 b--orange ml0 italic i">
 <p class="measure-wide f6 f5-l lh-copy black-80">It turns out that there is, in fact, a psycho-physical limit on the size of conversation groups. Due to the rate at which speech attenuates with the distance between speaker and hearer under normal ambient noise levels, there is a physical limit on the number of individuals that can effectively take part in a conversation. Sommer (1961), for example, found that <u>a nose-to-nose distance of 1.7m was the upper limit for comfortable conversation in dyadic groups; this would yield a maximum conversation group size of five individuals</u> with a shoulder-to-shoulder spacing of 0.5m between adjacent individuals standing around the circumference of a circle.</p>
 </blockquote>
 <p class="measure-wide f6 f5-l lh-copy black-80">“Comfortable” conversation means <q>background noise levels typical of both offices and city streets</q> – our normal voice levels, our normal hearing, our normal comfortable personal social distance, our normal <em>width of shoulders</em> all combine to produce conversional groups of… 5 people.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Absolutely wonderful. It makes me laugh every time I read this bit.</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80"><strong>Evidence for Dunbar’s Number in the analysis of 6 billion phone calls:</strong></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar actually doesn’t say that we devote “grooming time” to the whole social group of 150. Rather he says that the 150 is made up from <q>welding together</q> much smaller “primary networks”: coalitions, friendship groups. Intensive grooming (language, for humans) is reserved for close friends. Our intimate group is very small, averaging just five.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar suggests other group sizes too, in papers that follow his 1993 original…</p>
 <blockquote cite="https://www.technologyreview.com/2016/04/29/160438/your-brain-limits-you-to-just-five-bffs/" class="quoteback bl bw2 pl2 b--orange ml0 italic i" data-author="MIT Technology Review" data-title="Your Brain Limits You to Just Five BFFs (2016)">
 <p class="measure-wide f6 f5-l lh-copy black-80">Individuals, he says, generally have up to five people in the closest layer. The next closest layer contains an additional 10, the one beyond that an extra 35, and the final group another 100. So cumulatively, the layers contain five, 15, 50, and 150 people.</p>

 </blockquote>
 <p class="measure-wide f6 f5-l lh-copy black-80">And this result is new to me:</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Looking at <q>some six billion calls made by 35 million people</q> they did some number crunching and…</p>
 <blockquote class="bl bw2 pl2 b--orange ml0 italic i">
 <p class="measure-wide f6 f5-l lh-copy black-80">the average cumulative layer turns out to hold 4.1, 11.0, 29.8, and 128.9 users.</p>
 </blockquote>
 <p class="measure-wide f6 f5-l lh-copy black-80">Ta-da! Dunbar’s number proved, close enough.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">You can get the PDF on arXiv: <a href="https://arxiv.org/abs/1604.02400">Calling Dunbar’s Numbers (2016)</a>. I’ve included the full reference below.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Kinda amazing to have evidence for something that feels so intuitive (the average number of best friends/family) and that lends confidence in the discovery in the data of Dunbar’s number itself too.</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80">BTW I found that second paper via <a href="https://twitter.com/emollick">Ethan Mollick (@emollick) on Twitter</a> who <em>daily</em> shares and summarises fascinating papers and is 100% a must-follow.</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80">Again, why this is relevant: if you’re designing systems for working in groups, whether that’s IRL workgroups and committees, or online chat groups, or software, the relevant numbers are 150 people who can be recognised over time, and approx 5 in a simultaneous conversation. That’s what it suggests to me anyway.</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">The numbers are just averages, of course, and we’re each individuals and you shouldn’t put too much weight on evo psych or be deterministic about this stuff, but what we <em>can</em> do is use these as springboards to provoke new feature ideas. Such as…</p>
 <ul class="list ph0 ph0-ns bulleted-list">
 <li class="measure-wide f6 f5-l lh-copy black-80">could a Figma document suggest how to subdivide itself once more than five people are involved? Could my Twitter auto-segment into groups of 150?</li>
 <li class="measure-wide f6 f5-l lh-copy black-80">could we automatically adapt the interface of Zoom at the various Dunbar layers? Can we visually (and with interaction design) represent the structure of a 150 group <em>“welded together”</em> from smaller table-sized conversational groups, the two scales operating simultaneously?</li>
 <li class="measure-wide f6 f5-l lh-copy black-80">in pseudonymous groups where everyone is represented by avatars and obscure names, such as web3 communities on Discords, what is the right level of <em>detail</em> to help our ancient recognition systems to kick in, so we can get to Dunbar’s number and all the helpful formal and informal networks and subgroups that arise?</li>
 <li class="measure-wide f6 f5-l lh-copy black-80">when we’re building <a href="/home/2020/12/04/coops">software-enabled co-ops</a> or, in new language, creating governance and consensus systems for DAOs, could we optimise around Dunbar’s layers in order to avoid the inevitable bureaucratic requirements when we don’t –  bureaucracy which is now perhaps revealed to be a social technology, a kind of relationships prosthetic for when self-organisation caps out.</li>
 </ul>
 <p class="measure-wide f6 f5-l lh-copy black-80">(Those last two points relevant now the global public timelines of 2010s social media are evaporating into the unindexable Discords and WhatsApp groups of 2020s <a href="/home/2021/01/07/dunbar_spaces">virtual private neighbourhoods</a>.)</p>
 <p class="measure-wide f6 f5-l lh-copy black-80">AND SO ON.</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
 <p class="measure-wide f6 f5-l lh-copy black-80"><em>References</em></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">Dunbar, R.I.M., 1993. Coevolution of neocortical size, group size and language in humans. Behavioral and Brain Sciences 16, 681–694. <a href="https://doi.org/10.1017/S0140525X00032325">https://doi.org/10.1017/S0140525X00032325</a></p>
 <p class="measure-wide f6 f5-l lh-copy black-80">MacCarron, P., Kaski, K., Dunbar, R., 2016. Calling Dunbar’s Numbers. Social Networks 47, 151–155. <a href="https://doi.org/10.1016/j.socnet.2016.06.003">https://doi.org/10.1016/j.socnet.2016.06.003</a></p>
--- a/cache/2022/fc0fd0dbeeb8a3f2b47e8ccab6d2cbc9/index.html
+++ b/cache/2022/fc0fd0dbeeb8a3f2b47e8ccab6d2cbc9/index.html
@@ -0,0 +1,351 @@
 <!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>Comfort of Bloated Web (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)">
 <!-- 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://susam.net/maze/wall/comfort-of-bloated-web.html">

 <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>Comfort of Bloated Web</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://susam.net/maze/wall/comfort-of-bloated-web.html" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>
  There is a tiny
  <a href="https://susam.net/form/comment/?post=hello">comment form</a>
  application on this website to accept comments from visitors and
  save them on the file system of the web server for me to review
  later and publish. This form is one of the only two things on this
  website that is dynamic in nature. The other dynamic part is
  the <a href="https://susam.net/form/subscribe/">subscription form</a>.
  Everything on this website other than these two things are static in
  nature.
 </p>
 <h2 id="mysterious-copies">Mysterious Copies<a href="#mysterious-copies"></a></h2>
 <p>
  Most of this website is made of handcrafted HTML. The blog posts and
  other content files are handcrafted HTML pages. A Common Lisp
  program adds common headers and footers to these pages and generates
  the HTML pages that are served as static files via Nginx running on
  a Debian system. The comment form, however, is a dynamic web
  application served via another Common Lisp program that makes use of
  the Hunchentoot web server to serve the form, accept the input
  submitted by the user, and then process it. This comment form is a
  very simple, minimal, and stateless application that fulfills the
  modest requirements of this modest website pretty well.
 </p>
 <p>
  However, often I see multiple copies of the same comment being saved
  on my web server. In the initial days of encountering this issue, I
  felt quite confused. I could rule out a bug in my program by
  carefully reviewing and testing it. Further, the web server logs
  clearly showed multiple POST requests being received by it from the
  same client usually with a few seconds of intervals between the
  consecutive requests. The comments seemed to have legitimate
  content. Since the duplicate copies would all have the same comment,
  I would arbitrarily pick one and publish it on my website. But I
  often wondered why on earth well meaning visitors would sometimes
  submit the same comment multiple times. For good measure? Perhaps!
  But still quite odd!
 </p>
 <h2 id="so-what-is-the-problem">So What's the Problem?<a href="#so-what-is-the-problem"></a></h2>
 <p>
  The mystery of duplicate comment submission remained a puzzle for
  several months. Then one day, one of the visitors to my website
  contacted me via Twitter messages to tell me that my comment form
  was broken and it was not working for him.
 </p>
 <p>
  The conversation began like this: "Hey! The comment form on your
  website seems to be broken. It says it has accepted my comment but I
  don't think it is doing that."
 </p>
 <p>
  I responded, "Hi! Thank you for contacting me about this issue. What
  do you mean it does not accept your comment? Do you see an error?"
 </p>
 <p>
  "There is no error. In fact, after submitting, I get a success
  message that says, 'Comment was submitted successfully. It may be
  published after review.'"
 </p>
 <p>
  "That sounds about right. So what's the problem?"
 </p>
 <p>
  In the meantime, I performed some testing at my end to find that the
  comment form appeared to be working fine with no apparent issues.
  Further, I found that there were multiple copies of his comment
  saved neatly on the server for me to review later and publish.
 </p>
 <p>
  Before I could share my findings, he continued, "Well! That success
  message appears almost instantly. It couldn't be storing my comment
  successfully that fast, could it?"
 </p>
 <p>
  That is when the mystery unfolded for me! The issue was that the
  comment form accepts the user's comment and returns a success
  message too soon for the user to believe that it could have possibly
  saved the comment. I have had a couple of other very similar
  conversations since then when a visitor contacted me via email or
  another means to double-check if my comment form was really working
  fine. In all of these cases, they were skeptical about the success
  message because it appeared much sooner than they expected.
 </p>
 <h2 id="bloated-expectations">Bloated Expectations<a href="#bloated-expectations"></a></h2>
 <p>
  Depending on where the visitor is located, the comment form on this
  website may take anywhere between 30 ms to 900 ms, and very rarely a
  little longer, to accept the user's comment, save it successfully,
  and then display a success message to the user. But apparently, a
  few hundred millseconds is too fast for many people to be able to
  trust that the comment application is actually doing its job. I
  presume that they have become so used to waiting for at least a
  second or more for dynamic pages to load that a web application that
  finishes its job in a few milliseconds appears to be fishy.
 </p>
 <p>
  I must clarify here that the duplicate comment submissions do not
  bother me at all. The duplicate comments I receive is a very small
  fraction of the total number of comments. I just find it interesting
  that users can mistrust a simple piece of software that does a
  simple thing in a reasonable amount of time. I had one visitor to my
  website even say, "I really was expecting a spinning wheel on the
  browser tab or some sort of progress indicator to be assured that it
  is saving my comment. The instant success message took me by
  surprise!" He felt nervous that his comment was not saved and
  resubmitted the comment again.
 </p>
 <p>
  As a result of these conversations, I have sometimes even wondered
  whether I should add some artificial delay in the comment
  application before responding with a success message to satisfy the
  expectations of people who are so used to the bloated web. Of
  course, I am not actually going to do that. I want to keep it
  simple. I do not like adding artificial restrictions to a simple
  piece of functionality. Further, I do not mind the duplicate comment
  submissions at all. However, I cannot help but remark that the users
  of the web today have become so comfortable with the bloated web
  that a simple web application without bells and whistles that is
  fast and responsive makes them nervous!
 </p>
 <h2 id="update">Update<a href="#update"></a></h2>
 <p>
  <strong>Update on 13 Mar 2022:</strong> Many commenters to this post
  have suggested that the issue here might not be the fast response of
  a successful comment application but instead the fact that the
  comment form elements remain intact even after the comment
  submission. In their opinion, merely displaying a success message
  may not be assuring enough. They further suggested that I should
  change the state of the form in some way on successful submission.
  Popular recommendations included disabling, clearing, or removing
  the form elements entirely on successful submission.
 </p>
 <p>
  These suggestions are valid of course. However, I also think that
  these suggestions reinforce the point of my blog post. Users of the
  web today are so used to these fancy features and restrictions that
  without them one feels unsure if the comment form application has
  really done what it is <em>literally</em> saying it has done.
 </p>
 <p>
  Do I really need to consider <em>artificially</em> clearing,
  disabling, or removing the form elements and thus removing the
  ability to edit a comment again and resubmit it (even if the user
  really so desires) with a single click of a button? What if someone
  wants to post another comment immediately after the first one? What
  if someone wants to edit their previous comment slightly and repost
  it? Do I need to force the user to hop through separate links and
  buttons to be able to do these simple things? "But every other
  website clears, disables, or removes the form elements," you might
  rightfully offer as a counterpoint. I know. I know. But why is it so
  that the "right" user experience nowadays involves artifically
  encumbering the user or hiding the user's own submitted text from
  themselves?
 </p>
 <p>
  In fact, in an earlier version of this website, the comment form
  application did disable the form elements on a successful comment
  submission. In an even older version of this website, a new page
  consisting only a success message appeared. However, visitors would
  still report their suspicion regarding the comment form doing its
  job to me. So I have observed the results of employing at least two
  of the measures suggested and they were still consistent with the
  reporters' claims that they find the instant success message from
  the application to be disconcerting.
 </p>
 <p>
  UX best practices notwithstanding, I do not want to hide the users'
  content from themselves after a successful form submission. Maybe
  they want to copy the message and keep it for themselves. Maybe they
  want to edit it again and repost it. I do not want to restrict any
  of these simple things. I also do not want the user to hop through
  another additional link or button to be able to do these things.
  Therefore, heeding some of the other advice I have received, I have
  now made two tiny changes to the comment form application that is
  consistent with its original spirit of simplicity, minimalism, and
  statelessness. I have moved the success message to the top of the
  response page. I have also added additional text in the success
  message that explains the submitted input has been left intact in
  case the submitter wants to copy it, or edit it and resubmit it.
 </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/2022/fc0fd0dbeeb8a3f2b47e8ccab6d2cbc9/index.md
+++ b/cache/2022/fc0fd0dbeeb8a3f2b47e8ccab6d2cbc9/index.md
@@ -0,0 +1,184 @@
 title: Comfort of Bloated Web
 url: https://susam.net/maze/wall/comfort-of-bloated-web.html
 hash_url: fc0fd0dbeeb8a3f2b47e8ccab6d2cbc9

 <p>
  There is a tiny
  <a href="https://susam.net/form/comment/?post=hello">comment form</a>
  application on this website to accept comments from visitors and
  save them on the file system of the web server for me to review
  later and publish. This form is one of the only two things on this
  website that is dynamic in nature. The other dynamic part is
  the <a href="https://susam.net/form/subscribe/">subscription form</a>.
  Everything on this website other than these two things are static in
  nature.
 </p>
 <h2 id="mysterious-copies">Mysterious Copies<a href="#mysterious-copies"></a></h2>
 <p>
  Most of this website is made of handcrafted HTML. The blog posts and
  other content files are handcrafted HTML pages. A Common Lisp
  program adds common headers and footers to these pages and generates
  the HTML pages that are served as static files via Nginx running on
  a Debian system. The comment form, however, is a dynamic web
  application served via another Common Lisp program that makes use of
  the Hunchentoot web server to serve the form, accept the input
  submitted by the user, and then process it. This comment form is a
  very simple, minimal, and stateless application that fulfills the
  modest requirements of this modest website pretty well.
 </p>
 <p>
  However, often I see multiple copies of the same comment being saved
  on my web server. In the initial days of encountering this issue, I
  felt quite confused. I could rule out a bug in my program by
  carefully reviewing and testing it. Further, the web server logs
  clearly showed multiple POST requests being received by it from the
  same client usually with a few seconds of intervals between the
  consecutive requests. The comments seemed to have legitimate
  content. Since the duplicate copies would all have the same comment,
  I would arbitrarily pick one and publish it on my website. But I
  often wondered why on earth well meaning visitors would sometimes
  submit the same comment multiple times. For good measure? Perhaps!
  But still quite odd!
 </p>
 <h2 id="so-what-is-the-problem">So What's the Problem?<a href="#so-what-is-the-problem"></a></h2>
 <p>
  The mystery of duplicate comment submission remained a puzzle for
  several months. Then one day, one of the visitors to my website
  contacted me via Twitter messages to tell me that my comment form
  was broken and it was not working for him.
 </p>
 <p>
  The conversation began like this: "Hey! The comment form on your
  website seems to be broken. It says it has accepted my comment but I
  don't think it is doing that."
 </p>
 <p>
  I responded, "Hi! Thank you for contacting me about this issue. What
  do you mean it does not accept your comment? Do you see an error?"
 </p>
 <p>
  "There is no error. In fact, after submitting, I get a success
  message that says, 'Comment was submitted successfully. It may be
  published after review.'"
 </p>
 <p>
  "That sounds about right. So what's the problem?"
 </p>
 <p>
  In the meantime, I performed some testing at my end to find that the
  comment form appeared to be working fine with no apparent issues.
  Further, I found that there were multiple copies of his comment
  saved neatly on the server for me to review later and publish.
 </p>
 <p>
  Before I could share my findings, he continued, "Well! That success
  message appears almost instantly. It couldn't be storing my comment
  successfully that fast, could it?"
 </p>
 <p>
  That is when the mystery unfolded for me! The issue was that the
  comment form accepts the user's comment and returns a success
  message too soon for the user to believe that it could have possibly
  saved the comment. I have had a couple of other very similar
  conversations since then when a visitor contacted me via email or
  another means to double-check if my comment form was really working
  fine. In all of these cases, they were skeptical about the success
  message because it appeared much sooner than they expected.
 </p>
 <h2 id="bloated-expectations">Bloated Expectations<a href="#bloated-expectations"></a></h2>
 <p>
  Depending on where the visitor is located, the comment form on this
  website may take anywhere between 30 ms to 900 ms, and very rarely a
  little longer, to accept the user's comment, save it successfully,
  and then display a success message to the user. But apparently, a
  few hundred millseconds is too fast for many people to be able to
  trust that the comment application is actually doing its job. I
  presume that they have become so used to waiting for at least a
  second or more for dynamic pages to load that a web application that
  finishes its job in a few milliseconds appears to be fishy.
 </p>
 <p>
  I must clarify here that the duplicate comment submissions do not
  bother me at all. The duplicate comments I receive is a very small
  fraction of the total number of comments. I just find it interesting
  that users can mistrust a simple piece of software that does a
  simple thing in a reasonable amount of time. I had one visitor to my
  website even say, "I really was expecting a spinning wheel on the
  browser tab or some sort of progress indicator to be assured that it
  is saving my comment. The instant success message took me by
  surprise!" He felt nervous that his comment was not saved and
  resubmitted the comment again.
 </p>
 <p>
  As a result of these conversations, I have sometimes even wondered
  whether I should add some artificial delay in the comment
  application before responding with a success message to satisfy the
  expectations of people who are so used to the bloated web. Of
  course, I am not actually going to do that. I want to keep it
  simple. I do not like adding artificial restrictions to a simple
  piece of functionality. Further, I do not mind the duplicate comment
  submissions at all. However, I cannot help but remark that the users
  of the web today have become so comfortable with the bloated web
  that a simple web application without bells and whistles that is
  fast and responsive makes them nervous!
 </p>
 <h2 id="update">Update<a href="#update"></a></h2>
 <p>
  <strong>Update on 13 Mar 2022:</strong> Many commenters to this post
  have suggested that the issue here might not be the fast response of
  a successful comment application but instead the fact that the
  comment form elements remain intact even after the comment
  submission. In their opinion, merely displaying a success message
  may not be assuring enough. They further suggested that I should
  change the state of the form in some way on successful submission.
  Popular recommendations included disabling, clearing, or removing
  the form elements entirely on successful submission.
 </p>
 <p>
  These suggestions are valid of course. However, I also think that
  these suggestions reinforce the point of my blog post. Users of the
  web today are so used to these fancy features and restrictions that
  without them one feels unsure if the comment form application has
  really done what it is <em>literally</em> saying it has done.
 </p>
 <p>
  Do I really need to consider <em>artificially</em> clearing,
  disabling, or removing the form elements and thus removing the
  ability to edit a comment again and resubmit it (even if the user
  really so desires) with a single click of a button? What if someone
  wants to post another comment immediately after the first one? What
  if someone wants to edit their previous comment slightly and repost
  it? Do I need to force the user to hop through separate links and
  buttons to be able to do these simple things? "But every other
  website clears, disables, or removes the form elements," you might
  rightfully offer as a counterpoint. I know. I know. But why is it so
  that the "right" user experience nowadays involves artifically
  encumbering the user or hiding the user's own submitted text from
  themselves?
 </p>
 <p>
  In fact, in an earlier version of this website, the comment form
  application did disable the form elements on a successful comment
  submission. In an even older version of this website, a new page
  consisting only a success message appeared. However, visitors would
  still report their suspicion regarding the comment form doing its
  job to me. So I have observed the results of employing at least two
  of the measures suggested and they were still consistent with the
  reporters' claims that they find the instant success message from
  the application to be disconcerting.
 </p>
 <p>
  UX best practices notwithstanding, I do not want to hide the users'
  content from themselves after a successful form submission. Maybe
  they want to copy the message and keep it for themselves. Maybe they
  want to edit it again and repost it. I do not want to restrict any
  of these simple things. I also do not want the user to hop through
  another additional link or button to be able to do these things.
  Therefore, heeding some of the other advice I have received, I have
  now made two tiny changes to the comment form application that is
  consistent with its original spirit of simplicity, minimalism, and
  statelessness. I have moved the success message to the top of the
  response page. I have also added additional text in the success
  message that explains the submitted input has been left intact in
  case the submitter wants to copy it, or edit it and resubmit it.
 </p>
--- a/cache/2022/index.html
+++ b/cache/2022/index.html
@@ -71,6 +71,8 @@
      
        <li><a href="/david/cache/2022/99a44a14a9d140bd39686955a78e5e9f/" title="Accès à l’article dans le cache local : What is the Web?">What is the Web?</a> (<a href="https://blog.jim-nielsen.com/2022/what-is-the-web/" title="Accès à l’article original distant : What is the Web?">original</a>)</li>
      
        <li><a href="/david/cache/2022/27ced7003612537f6ad81106f34607af/" title="Accès à l’article dans le cache local : There’s More to Design Than Data and Rationality">There’s More to Design Than Data and Rationality</a> (<a href="https://blog.jim-nielsen.com/2022/more-to-design-than-data-and-rationality/" title="Accès à l’article original distant : There’s More to Design Than Data and Rationality">original</a>)</li>
      
        <li><a href="/david/cache/2022/a863c20d0cb9722df74219009e8365a3/" title="Accès à l’article dans le cache local : Jakarta’s Transit Miracle">Jakarta’s Transit Miracle</a> (<a href="https://infiniteblock.substack.com/p/jakartas-transit-miracle" title="Accès à l’article original distant : Jakarta’s Transit Miracle">original</a>)</li>
      
        <li><a href="/david/cache/2022/389205e96cefd5e4633c70f22d029e1b/" title="Accès à l’article dans le cache local : Un hacker pirate le vol d'un avion depuis un siège passager">Un hacker pirate le vol d'un avion depuis un siège passager</a> (<a href="https://www.silicon.fr/hacker-modifie-vol-dun-avion-systeme-de-divertissement-116431.html" title="Accès à l’article original distant : Un hacker pirate le vol d'un avion depuis un siège passager">original</a>)</li>
@@ -83,6 +85,8 @@
      
        <li><a href="/david/cache/2022/91078de938da3b77cff57427da41dc11/" title="Accès à l’article dans le cache local : How Websites Die">How Websites Die</a> (<a href="https://notebook.wesleyac.com/how-websites-die/" title="Accès à l’article original distant : How Websites Die">original</a>)</li>
      
        <li><a href="/david/cache/2022/128ce7c2bc3cbf479318e36ae2faf6b8/" title="Accès à l’article dans le cache local : Lessy est terminé">Lessy est terminé</a> (<a href="https://marienfressinaud.fr/lessy-est-termine.html" title="Accès à l’article original distant : Lessy est terminé">original</a>)</li>
      
        <li><a href="/david/cache/2022/73c1cc8ed70f3b78bb9f8d2f108b7754/" title="Accès à l’article dans le cache local : ⭕️ Signals • Buttondown">⭕️ Signals • Buttondown</a> (<a href="https://buttondown.email/robinrendle/archive/signals/" title="Accès à l’article original distant : ⭕️ Signals • Buttondown">original</a>)</li>
      
        <li><a href="/david/cache/2022/539f9f951e0d3ba9024f3b837941372f/" title="Accès à l’article dans le cache local : Ce qui compte">Ce qui compte</a> (<a href="https://olivier.thereaux.net/2021/Ce-qui-compte/" title="Accès à l’article original distant : Ce qui compte">original</a>)</li>
@@ -95,6 +99,8 @@
      
        <li><a href="/david/cache/2022/65e0c481f692260299c53e9713339f53/" title="Accès à l’article dans le cache local : Ce dont nous avons (vraiment) besoin">Ce dont nous avons (vraiment) besoin</a> (<a href="https://www.monde-diplomatique.fr/2017/02/KEUCHEYAN/57134" title="Accès à l’article original distant : Ce dont nous avons (vraiment) besoin">original</a>)</li>
      
        <li><a href="/david/cache/2022/66d9d4be64db7fe8324a4fdcbf3ef705/" title="Accès à l’article dans le cache local : Hope for the Future">Hope for the Future</a> (<a href="https://hackeducation.com/2022/03/08/hope" title="Accès à l’article original distant : Hope for the Future">original</a>)</li>
      
        <li><a href="/david/cache/2022/b17f8ac80615c86cade89dd81c8aa50b/" title="Accès à l’article dans le cache local : Server-Sent Events: the alternative to WebSockets you should be using">Server-Sent Events: the alternative to WebSockets you should be using</a> (<a href="https://germano.dev/sse-websockets/#comments" title="Accès à l’article original distant : Server-Sent Events: the alternative to WebSockets you should be using">original</a>)</li>
      
        <li><a href="/david/cache/2022/6e38073a60400f3930923e61a67ddc56/" title="Accès à l’article dans le cache local : making space for my self through journalling">making space for my self through journalling</a> (<a href="https://winnielim.org/journal/making-space-for-my-self-through-journalling/" title="Accès à l’article original distant : making space for my self through journalling">original</a>)</li>
@@ -111,6 +117,8 @@
      
        <li><a href="/david/cache/2022/8a9c9c7aa6a17b8203e2ee289a5e2ffa/" title="Accès à l’article dans le cache local : Coremuneration - Movilab.org">Coremuneration - Movilab.org</a> (<a href="https://movilab.org/wiki/Coremuneration" title="Accès à l’article original distant : Coremuneration - Movilab.org">original</a>)</li>
      
        <li><a href="/david/cache/2022/c8c3f9a0a328a21db8c91c7a288a8b4f/" title="Accès à l’article dans le cache local : Performances et ressenti - Carnet de notes">Performances et ressenti - Carnet de notes</a> (<a href="https://n.survol.fr/n/performances-et-ressenti" title="Accès à l’article original distant : Performances et ressenti - Carnet de notes">original</a>)</li>
      
        <li><a href="/david/cache/2022/9ad9f5ea367dbd74e4aeeb8471747247/" title="Accès à l’article dans le cache local : Make it boring - jlwagner.net">Make it boring - jlwagner.net</a> (<a href="https://jlwagner.net/blog/make-it-boring/" title="Accès à l’article original distant : Make it boring - jlwagner.net">original</a>)</li>
      
        <li><a href="/david/cache/2022/c4af28e3e148b7fd23ccb06e3a3f0358/" title="Accès à l’article dans le cache local : Nos morts ne vous sont pas dues">Nos morts ne vous sont pas dues</a> (<a href="https://www.jefklak.org/nos-morts-ne-vous-sont-pas-dues/" title="Accès à l’article original distant : Nos morts ne vous sont pas dues">original</a>)</li>
@@ -159,8 +167,12 @@
      
        <li><a href="/david/cache/2022/3a929cba1a057771e1778ee9dc3e300a/" title="Accès à l’article dans le cache local : Wolf packs don’t actually have alpha males and alpha females, the idea is based on a misunderstanding">Wolf packs don’t actually have alpha males and alpha females, the idea is based on a misunderstanding</a> (<a href="https://phys.org/news/2021-04-wolf-dont-alpha-males-females.html" title="Accès à l’article original distant : Wolf packs don’t actually have alpha males and alpha females, the idea is based on a misunderstanding">original</a>)</li>
      
        <li><a href="/david/cache/2022/56f14d85f38a7bb04e187aa3334bdb57/" title="Accès à l’article dans le cache local : désabler l'imagination">désabler l'imagination</a> (<a href="https://www.la-grange.net/2022/03/20/imagination" title="Accès à l’article original distant : désabler l'imagination">original</a>)</li>
      
        <li><a href="/david/cache/2022/580f9e17e55d43379850d613f51cf3a2/" title="Accès à l’article dans le cache local : Apple et la convivialité">Apple et la convivialité</a> (<a href="https://louisderrac.com/2022/03/23/apple-et-la-convialite/" title="Accès à l’article original distant : Apple et la convivialité">original</a>)</li>
      
        <li><a href="/david/cache/2022/8299fd0b8bd7010b4c74f4c06719f81d/" title="Accès à l’article dans le cache local : Colocation : contribuer au loyer en fonction de ses revenus">Colocation : contribuer au loyer en fonction de ses revenus</a> (<a href="https://kemenaran.winosx.com/posts/colocation-contribuer-au-loyer-en-fonction-de-ses-revenus" title="Accès à l’article original distant : Colocation : contribuer au loyer en fonction de ses revenus">original</a>)</li>
      
        <li><a href="/david/cache/2022/2c67b87e1b880952bb277fc429cb8bf5/" title="Accès à l’article dans le cache local : How to update the URL of a page without causing a reload using vanilla JavaScript">How to update the URL of a page without causing a reload using vanilla JavaScript</a> (<a href="https://gomakethings.com/how-to-update-the-url-of-a-page-without-causing-a-reload-using-vanilla-javascript/" title="Accès à l’article original distant : How to update the URL of a page without causing a reload using vanilla JavaScript">original</a>)</li>
      
        <li><a href="/david/cache/2022/86a502931562f5a88120be5ae903b67a/" title="Accès à l’article dans le cache local : An African view of what’s happening in Europe">An African view of what’s happening in Europe</a> (<a href="https://www.opendemocracy.net/en/5050/an-african-view-of-whats-happening-in-europe/" title="Accès à l’article original distant : An African view of what’s happening in Europe">original</a>)</li>
@@ -187,6 +199,8 @@
      
        <li><a href="/david/cache/2022/46d0b4daf67dbeb6a068f921c50076af/" title="Accès à l’article dans le cache local : Du gras - Carnets de routes">Du gras - Carnets de routes</a> (<a href="https://www.carnetsderoutes.me/Du-gras.html" title="Accès à l’article original distant : Du gras - Carnets de routes">original</a>)</li>
      
        <li><a href="/david/cache/2022/df33a2f3d5f174aadda2a8311eebcafa/" title="Accès à l’article dans le cache local : Dunbar’s number and how speaking is 2.8x better than picking fleas">Dunbar’s number and how speaking is 2.8x better than picking fleas</a> (<a href="https://interconnected.org/home/2022/04/05/dunbar" title="Accès à l’article original distant : Dunbar’s number and how speaking is 2.8x better than picking fleas">original</a>)</li>
      
        <li><a href="/david/cache/2022/d9ff2d3ee678b7de12c1a4e6d521ca35/" title="Accès à l’article dans le cache local : That Wild Ask A Manager Story">That Wild Ask A Manager Story</a> (<a href="https://jacobian.org/2022/feb/14/that-wild-aam-story/" title="Accès à l’article original distant : That Wild Ask A Manager Story">original</a>)</li>
      
        <li><a href="/david/cache/2022/ed0eff49e75f35733437d71da03b0af3/" title="Accès à l’article dans le cache local : Sustaining Maintaining">Sustaining Maintaining</a> (<a href="https://daverupert.com/2021/12/sustaining-maintaining/" title="Accès à l’article original distant : Sustaining Maintaining">original</a>)</li>
@@ -211,6 +225,10 @@
      
        <li><a href="/david/cache/2022/a4f881156c5d4841f7362f94b51d10b7/" title="Accès à l’article dans le cache local : $7 Tent Heater Provides Comfort On A Budget">$7 Tent Heater Provides Comfort On A Budget</a> (<a href="https://hackaday.com/2022/01/06/7-tent-heater-provides-comfort-on-a-budget/" title="Accès à l’article original distant : $7 Tent Heater Provides Comfort On A Budget">original</a>)</li>
      
        <li><a href="/david/cache/2022/7d378db0707cc63aa2d466ada68fe690/" title="Accès à l’article dans le cache local : 20 Things I’ve Learned in my 20 Years as a Software Engineer">20 Things I’ve Learned in my 20 Years as a Software Engineer</a> (<a href="https://www.simplethread.com/20-things-ive-learned-in-my-20-years-as-a-software-engineer/" title="Accès à l’article original distant : 20 Things I’ve Learned in my 20 Years as a Software Engineer">original</a>)</li>
      
        <li><a href="/david/cache/2022/1ab2a594ae40deb0f4443807f1fa7596/" title="Accès à l’article dans le cache local : Performances trop bonnes">Performances trop bonnes</a> (<a href="https://nota-bene.org/Performances-trop-bonnes" title="Accès à l’article original distant : Performances trop bonnes">original</a>)</li>
      
        <li><a href="/david/cache/2022/48c2a5401b4445c412167f0ae1280ad8/" title="Accès à l’article dans le cache local : Cooklang - Managing Recipes in Git">Cooklang - Managing Recipes in Git</a> (<a href="https://briansunter.com/blog/cooklang/" title="Accès à l’article original distant : Cooklang - Managing Recipes in Git">original</a>)</li>
      
        <li><a href="/david/cache/2022/c7ebf32ee18c4f44c452f864729a21a8/" title="Accès à l’article dans le cache local : The drone operators who halted Russian convoy headed for Kyiv">The drone operators who halted Russian convoy headed for Kyiv</a> (<a href="https://www.theguardian.com/world/2022/mar/28/the-drone-operators-who-halted-the-russian-armoured-vehicles-heading-for-kyiv" title="Accès à l’article original distant : The drone operators who halted Russian convoy headed for Kyiv">original</a>)</li>
@@ -219,12 +237,16 @@
      
        <li><a href="/david/cache/2022/571d5d3f9d63d9ec4a8107e5abd15941/" title="Accès à l’article dans le cache local : Why not everything I do is “Open” or “Free”">Why not everything I do is “Open” or “Free”</a> (<a href="https://overengineer.dev/blog/2021/12/12/why-not-everything-i-do-is-open-or-free.html" title="Accès à l’article original distant : Why not everything I do is “Open” or “Free”">original</a>)</li>
      
        <li><a href="/david/cache/2022/1f0b2ca39bffe2d3551c7ea20dc315a1/" title="Accès à l’article dans le cache local : Lettre à Jean Grave, par Élisée Reclus (Voter c'est abdiquer)">Lettre à Jean Grave, par Élisée Reclus (Voter c'est abdiquer)</a> (<a href="http://www.homme-moderne.org/textes/classics/ereclus/jgrave.html" title="Accès à l’article original distant : Lettre à Jean Grave, par Élisée Reclus (Voter c'est abdiquer)">original</a>)</li>
      
        <li><a href="/david/cache/2022/87b3d4be1d7a1e72be8d411a0eb59249/" title="Accès à l’article dans le cache local : Les Jazzettes #20">Les Jazzettes #20</a> (<a href="https://jazzettes.substack.com/p/les-jazzettes-20" title="Accès à l’article original distant : Les Jazzettes #20">original</a>)</li>
      
        <li><a href="/david/cache/2022/c0e7ed5590b520f176aacfd76ae03188/" title="Accès à l’article dans le cache local : Mechanical Ragger: Print typesetting for the web">Mechanical Ragger: Print typesetting for the web</a> (<a href="https://oak.is/thinking/mechanical-ragger/" title="Accès à l’article original distant : Mechanical Ragger: Print typesetting for the web">original</a>)</li>
      
        <li><a href="/david/cache/2022/147b20ce875cacebd10f490f2690ce57/" title="Accès à l’article dans le cache local : The Weakness of the Despot">The Weakness of the Despot</a> (<a href="https://www.newyorker.com/news/q-and-a/stephen-kotkin-putin-russia-ukraine-stalin" title="Accès à l’article original distant : The Weakness of the Despot">original</a>)</li>
      
        <li><a href="/david/cache/2022/4cea6f484d1e161074216e23d8826dea/" title="Accès à l’article dans le cache local : Innovating beyond libraries and frameworks">Innovating beyond libraries and frameworks</a> (<a href="https://nilsnh.no/2022/04/09/innovating-beyond-libraries-and-frameworks/" title="Accès à l’article original distant : Innovating beyond libraries and frameworks">original</a>)</li>
      
        <li><a href="/david/cache/2022/eafb714078643eddfcc2d7de9982bd3b/" title="Accès à l’article dans le cache local : Understanding UUIDs, ULIDs and String Representations">Understanding UUIDs, ULIDs and String Representations</a> (<a href="https://sudhir.io/uuids-ulids" title="Accès à l’article original distant : Understanding UUIDs, ULIDs and String Representations">original</a>)</li>
      
        <li><a href="/david/cache/2022/ae3792ebced6f8b2b12b04723d982462/" title="Accès à l’article dans le cache local : ☕️ Journal : Pluriversité">☕️ Journal : Pluriversité</a> (<a href="https://thom4.net/2022/03/06/pluriversite/" title="Accès à l’article original distant : ☕️ Journal : Pluriversité">original</a>)</li>
@@ -233,6 +255,8 @@
      
        <li><a href="/david/cache/2022/63c624eb03143c963380f527b7b5ca0f/" title="Accès à l’article dans le cache local : Brasserie du Vieux Singe — Transformation en SCOP">Brasserie du Vieux Singe — Transformation en SCOP</a> (<a href="https://www.vieuxsinge.com/transformation-en-scop.html" title="Accès à l’article original distant : Brasserie du Vieux Singe — Transformation en SCOP">original</a>)</li>
      
        <li><a href="/david/cache/2022/fc0fd0dbeeb8a3f2b47e8ccab6d2cbc9/" title="Accès à l’article dans le cache local : Comfort of Bloated Web">Comfort of Bloated Web</a> (<a href="https://susam.net/maze/wall/comfort-of-bloated-web.html" title="Accès à l’article original distant : Comfort of Bloated Web">original</a>)</li>
      
        <li><a href="/david/cache/2022/e8d6bd5b11ae399009cf9258869be09c/" title="Accès à l’article dans le cache local : The Asymmetry of Open Source">The Asymmetry of Open Source</a> (<a href="https://matt.life/writing/the-asymmetry-of-open-source" title="Accès à l’article original distant : The Asymmetry of Open Source">original</a>)</li>
      
    </ul>