2 years ago · 383ff2f2fd
--- a/cache/2021/07f65527fb51a3d31cfd7173bde1d76c/index.html
+++ b/cache/2021/07f65527fb51a3d31cfd7173bde1d76c/index.html
@@ -0,0 +1,224 @@
 <!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>Les ressources pour l'écoconception et la sobriété numérique (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.pikselkraft.com/les-ressources-pour-l-ecoconception-et-la-sobriete-numerique/">

 <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>Les ressources pour l'écoconception et la sobriété numérique</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.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://www.pikselkraft.com/les-ressources-pour-l-ecoconception-et-la-sobriete-numerique/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Cette liste qui sera mise à jour régulièrement et regroupe des liens vers des rapports, ressources et outils qui permettent d'appréhender la sobriété numérique. L'objectif est d'inverser la tendance d'un numérique toujours plus présent, envahissant et lourd au profit d'un numérique plus humain qui peut être assimilé à un outil convivial (terme introduit par Ivan Illich dans La convivialité).</p>
 <p>Cette liste n'est pas exhaustive, elle se base sur nos recherches et découvertes, mais ils existent de nombreuses autres ressources disponibles sur le sujet. Si vous voulez partager des ressources avec nous, vous pouvez nous contacter par courriel : com[@]pikselkraft.com.</p>
 <h2>Le constat (Pourquoi ?)</h2>
 <ul>
 <li>Httparchive, <a href="https://httparchive.org/reports/state-of-the-web">State of the Web</a></li>
 <li>Keycdn, <a href="https://www.keycdn.com/support/the-growth-of-web-page-size">The Growth of Web Page Size</a></li>
 <li>The Shift Project, <a href="https://theshiftproject.org/article/climat-insoutenable-usage-video/">Climat : l’insoutenable usage de la vidéo en ligne</a></li>
 <li>The Shift Project, <a href="https://theshiftproject.org/article/deployer-la-sobriete-numerique-rapport-shift/">Déployer la sobriété numérique : le nouveau rapport du Shift sur l’impact environnemental du numérique</a></li>
 <li>Ademe, <a href="https://www.ademe.fr/sites/default/files/assets/documents/guide-pratique-face-cachee-numerique.pdf">La face cachée du numérique</a></li>
 <li>France Stratégie, <a href="https://www.strategie.gouv.fr/sites/strategie.gouv.fr/files/atoms/files/fs-2020-dt-consommation-metaux-du-numerique-juin.pdf">La consommation de métaux du numérique : un secteur loin d’être dématérialisé</a></li>
 <li>Guillaume Pitron, La guerre des metaux rares, éditeur : Les Liens Qui Libèrent</li>
 <li>Green IT, <a href="https://www.greenit.fr/etude-empreinte-environnementale-du-numerique-mondial/">Empreinte environnementale du numérique mondial</a></li>
 <li>Bertrand Keller, <a href="https://bertrandkeller.info/2020/07/15/effet-rebond-num%C3%A9rique-responsable/">C’est quoi l’effet rebond pour Internet ?</a></li>
 <li>Bret Victor, <a href="http://worrydream.com/#!/ClimateChange">What can a technologist do about climate change?</a></li>
 </ul>
 <h2>Les principes de la sobriété numérique et des low-tech</h2>
 <ul>
 <li>Frédéric Bordage, Écoconception web : les 115 bonnes pratiques – 3ème édition, éditeur : Eyrolles | <a href="https://collectif.greenit.fr/ecoconception-web/115-bonnes-pratiques-eco-conception_web.html">Version en ligne</a></li>
 <li>Philippe Bihouix, L'Âge des low tech. Vers une civilisation techniquement soutenable, éditeur : Seuil</li>
 <li>Passerelle n°21, <a href="https://www.ritimo.org/Low-tech-face-au-tout-numerique-se-reapproprier-les-technologies-8264">Low tech : face au tout-numérique, se réapproprier les technologies</a></li>
 <li>Small technology, <a href="https://small-tech.org/about/#small-technology">Small Tech is…</a></li>
 <li>Lowtechmagazine, <a href="https://solar.lowtechmagazine.com/fr/2018/09/how-to-build-a-lowtech-website.html">Comment créer un site web basse technologie</a></li>
 <li>Chez LauDev, <a href="https://ldevernay.github.io/green/2020/05/19/methodo.html">Audits d'écoconception</a></li>
 <li><a href="https://www.academie-nr.org/#mooc-nr">MOOC Numérique Responsable</a></li>
 <li>Gauthier Roussilhe, <a href="https://situer-le-numerique.netlify.app/">Situer le numérique</a></li>
 <li>Gauthier Roussilhe, <a href="https://gauthierroussilhe.com/post/ecoconception-critique.html">Eco-conception, le brouillard à venir</a></li>
 <li>Designer Éthique, <a href="https://eco-conception.designersethiques.org/guide/">Le guide d’éco-conception de services numériques</a></li>
 <li>L'Institut Paris Region, <a href="https://www.institutparisregion.fr/economie/commerce-et-consommation/la-vie-low-tech-en-2040/">La vie low-tech en 2040</a> </li>
 <li>Hundred Rabbits, <a href="https://100r.co/site/about_us.html">resilience and self-reliance through low-tech solutions</a></li>
 </ul>
 <h2>Recherche en design (déterminer les besoins)</h2>

 <h2>Développement</h2>
 <p>Il faut choisir les outils en fonction du besoin des utilisateurs et de leur impact. L'important est d'avoir une bonne maîtrise des bases du web (HTML, CSS) et en fonction des besoins de certains langages de programmation. On s'intéresse plus aux ressources qui permettent de suivre les standards d'Internet et non pas des outils précis. Attention aux tendances qui mettent en avant des langages et méthodes sans prendre en compte les besoins réels.</p>

 <h2>Accessibilité et vie privée</h2>
 <p>Ces domaines s'accordent parfaitement avec la sobriété numérique et sont bien souvent les conséquences d'un service écoconçu.</p>

 <h2>Outils de mesure</h2>

 <h2>Critique radical, histoire des technologie et technocritiques</h2>
 <ul>
 <li>Ivan Illich,  La Convivialité, éditeur : seuil (version original : Tools for Conviviality)</li>
 <li>Nicolas Alep, Julia Lainae, Contre l'alternumérisme: Pourquoi nous ne proposerons pas d'"écogestes numériques" ni de solutions pour une "démocratie numérique", éditeur : La Lenteur éditions </li>
 <li>David Edgerton, Quoi de neuf ? Du rôle des techniques dans l'histoire globale, éditeur : seuil (version original : The Shock Of The Old: Technology and Global History)</li>
 <li>Irénée Régnauld, <a href="https://maisouvaleweb.fr/pour-en-finir-avec-le-colonialisme-technologique/">Pour en finir avec le « colonialisme technologique »</a>, Mais où va le Web</li>
 <li>La Boite Noire, <a href="https://www.youtube.com/watch?v=1YuKnT_pjUE&amp;ab_channel=LaBoiteNoire">Histoire de la Techno-Utopie</a> (Youtube)</li>
 <li>John Naughton, The Guardian, <a href="https://www.theguardian.com/commentisfree/2021/may/29/data-oil-metaphor-tech-companies-surveillance-capitalism">Data isn’t oil, whatever tech commentators tell you: it’s people’s lives</a></li>
 </ul>
 <h2>Dépasser le numérique, écologie et imaginaire numérique</h2>

 <h2>Conférences à voir</h2>
 <p>N'hésitez pas à utiliser <a href="https://github.com/SimonBrazell/privacy-redirect">Privacy Redirect</a> pour utiliser une alternative à Youtube qui évite le tracking par Google.</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.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.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.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.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.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.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/2021/07f65527fb51a3d31cfd7173bde1d76c/index.md
+++ b/cache/2021/07f65527fb51a3d31cfd7173bde1d76c/index.md
@@ -0,0 +1,57 @@
 title: Les ressources pour l'écoconception et la sobriété numérique
 url: https://www.pikselkraft.com/les-ressources-pour-l-ecoconception-et-la-sobriete-numerique/
 hash_url: 07f65527fb51a3d31cfd7173bde1d76c

 <p>Cette liste qui sera mise à jour régulièrement et regroupe des liens vers des rapports, ressources et outils qui permettent d'appréhender la sobriété numérique. L'objectif est d'inverser la tendance d'un numérique toujours plus présent, envahissant et lourd au profit d'un numérique plus humain qui peut être assimilé à un outil convivial (terme introduit par Ivan Illich dans La convivialité).</p>
 <p>Cette liste n'est pas exhaustive, elle se base sur nos recherches et découvertes, mais ils existent de nombreuses autres ressources disponibles sur le sujet. Si vous voulez partager des ressources avec nous, vous pouvez nous contacter par courriel : com[@]pikselkraft.com.</p>
 <h2>Le constat (Pourquoi ?)</h2>
 <ul>
 <li>Httparchive, <a href="https://httparchive.org/reports/state-of-the-web">State of the Web</a></li>
 <li>Keycdn, <a href="https://www.keycdn.com/support/the-growth-of-web-page-size">The Growth of Web Page Size</a></li>
 <li>The Shift Project, <a href="https://theshiftproject.org/article/climat-insoutenable-usage-video/">Climat : l’insoutenable usage de la vidéo en ligne</a></li>
 <li>The Shift Project, <a href="https://theshiftproject.org/article/deployer-la-sobriete-numerique-rapport-shift/">Déployer la sobriété numérique : le nouveau rapport du Shift sur l’impact environnemental du numérique</a></li>
 <li>Ademe, <a href="https://www.ademe.fr/sites/default/files/assets/documents/guide-pratique-face-cachee-numerique.pdf">La face cachée du numérique</a></li>
 <li>France Stratégie, <a href="https://www.strategie.gouv.fr/sites/strategie.gouv.fr/files/atoms/files/fs-2020-dt-consommation-metaux-du-numerique-juin.pdf">La consommation de métaux du numérique : un secteur loin d’être dématérialisé</a></li>
 <li>Guillaume Pitron, La guerre des metaux rares, éditeur : Les Liens Qui Libèrent</li>
 <li>Green IT, <a href="https://www.greenit.fr/etude-empreinte-environnementale-du-numerique-mondial/">Empreinte environnementale du numérique mondial</a></li>
 <li>Bertrand Keller, <a href="https://bertrandkeller.info/2020/07/15/effet-rebond-num%C3%A9rique-responsable/">C’est quoi l’effet rebond pour Internet ?</a></li>
 <li>Bret Victor, <a href="http://worrydream.com/#!/ClimateChange">What can a technologist do about climate change?</a></li>
 </ul>
 <h2>Les principes de la sobriété numérique et des low-tech</h2>
 <ul>
 <li>Frédéric Bordage, Écoconception web : les 115 bonnes pratiques – 3ème édition, éditeur : Eyrolles | <a href="https://collectif.greenit.fr/ecoconception-web/115-bonnes-pratiques-eco-conception_web.html">Version en ligne</a></li>
 <li>Philippe Bihouix, L'Âge des low tech. Vers une civilisation techniquement soutenable, éditeur : Seuil</li>
 <li>Passerelle n°21, <a href="https://www.ritimo.org/Low-tech-face-au-tout-numerique-se-reapproprier-les-technologies-8264">Low tech : face au tout-numérique, se réapproprier les technologies</a></li>
 <li>Small technology, <a href="https://small-tech.org/about/#small-technology">Small Tech is…</a></li>
 <li>Lowtechmagazine, <a href="https://solar.lowtechmagazine.com/fr/2018/09/how-to-build-a-lowtech-website.html">Comment créer un site web basse technologie</a></li>
 <li>Chez LauDev, <a href="https://ldevernay.github.io/green/2020/05/19/methodo.html">Audits d'écoconception</a></li>
 <li><a href="https://www.academie-nr.org/#mooc-nr">MOOC Numérique Responsable</a></li>
 <li>Gauthier Roussilhe, <a href="https://situer-le-numerique.netlify.app/">Situer le numérique</a></li>
 <li>Gauthier Roussilhe, <a href="https://gauthierroussilhe.com/post/ecoconception-critique.html">Eco-conception, le brouillard à venir</a></li>
 <li>Designer Éthique, <a href="https://eco-conception.designersethiques.org/guide/">Le guide d’éco-conception de services numériques</a></li>
 <li>L'Institut Paris Region, <a href="https://www.institutparisregion.fr/economie/commerce-et-consommation/la-vie-low-tech-en-2040/">La vie low-tech en 2040</a> </li>
 <li>Hundred Rabbits, <a href="https://100r.co/site/about_us.html">resilience and self-reliance through low-tech solutions</a></li>
 </ul>
 <h2>Recherche en design (déterminer les besoins)</h2>

 <h2>Développement</h2>
 <p>Il faut choisir les outils en fonction du besoin des utilisateurs et de leur impact. L'important est d'avoir une bonne maîtrise des bases du web (HTML, CSS) et en fonction des besoins de certains langages de programmation. On s'intéresse plus aux ressources qui permettent de suivre les standards d'Internet et non pas des outils précis. Attention aux tendances qui mettent en avant des langages et méthodes sans prendre en compte les besoins réels.</p>

 <h2>Accessibilité et vie privée</h2>
 <p>Ces domaines s'accordent parfaitement avec la sobriété numérique et sont bien souvent les conséquences d'un service écoconçu.</p>

 <h2>Outils de mesure</h2>

 <h2>Critique radical, histoire des technologie et technocritiques</h2>
 <ul>
 <li>Ivan Illich,  La Convivialité, éditeur : seuil (version original : Tools for Conviviality)</li>
 <li>Nicolas Alep, Julia Lainae, Contre l'alternumérisme: Pourquoi nous ne proposerons pas d'"écogestes numériques" ni de solutions pour une "démocratie numérique", éditeur : La Lenteur éditions </li>
 <li>David Edgerton, Quoi de neuf ? Du rôle des techniques dans l'histoire globale, éditeur : seuil (version original : The Shock Of The Old: Technology and Global History)</li>
 <li>Irénée Régnauld, <a href="https://maisouvaleweb.fr/pour-en-finir-avec-le-colonialisme-technologique/">Pour en finir avec le « colonialisme technologique »</a>, Mais où va le Web</li>
 <li>La Boite Noire, <a href="https://www.youtube.com/watch?v=1YuKnT_pjUE&amp;ab_channel=LaBoiteNoire">Histoire de la Techno-Utopie</a> (Youtube)</li>
 <li>John Naughton, The Guardian, <a href="https://www.theguardian.com/commentisfree/2021/may/29/data-oil-metaphor-tech-companies-surveillance-capitalism">Data isn’t oil, whatever tech commentators tell you: it’s people’s lives</a></li>
 </ul>
 <h2>Dépasser le numérique, écologie et imaginaire numérique</h2>

 <h2>Conférences à voir</h2>
 <p>N'hésitez pas à utiliser <a href="https://github.com/SimonBrazell/privacy-redirect">Privacy Redirect</a> pour utiliser une alternative à Youtube qui évite le tracking par Google.</p>
--- a/cache/2021/1357452f72e8fab727df874cbc2582d4/index.html
+++ b/cache/2021/1357452f72e8fab727df874cbc2582d4/index.html
--- a/cache/2021/1357452f72e8fab727df874cbc2582d4/index.md
+++ b/cache/2021/1357452f72e8fab727df874cbc2582d4/index.md
--- a/cache/2021/23d224bccb7af8db5017cebf813fec56/index.html
+++ b/cache/2021/23d224bccb7af8db5017cebf813fec56/index.html
@@ -0,0 +1,526 @@
 <!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>How to Favicon in 2021: Six files that fit most needs (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://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs">

 <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>How to Favicon in 2021: Six files that fit most needs</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.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <article class="post__intro">
  <p>It is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen. Read on to see how to take a smarter approach and adopt a minimal set of icons that fits most modern needs.</p>
 </article>

 <p>The favicons proved to be a more exhaustive topic that anyone could wish for, so I also summarized a whole article in just two code snippets for those who suffered enough and know exactly what to do. Still, I recommend geeking out to the rest of it!</p>

 <h2 id="extremely-short-version">Extremely short version</h2>

 <p>Instead of serving dozens of icons, all you need is just <strong>five</strong> icons and one JSON file.</p>

 <p>In your HTML, for the browser:</p>

 <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">href=</span><span class="s">"/favicon.ico"</span> <span class="na">sizes=</span><span class="s">"any"</span><span class="nt">&gt;</span><span class="c">&lt;!-- 32×32 --&gt;</span>
 <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">href=</span><span class="s">"/icon.svg"</span> <span class="na">type=</span><span class="s">"image/svg+xml"</span><span class="nt">&gt;</span>
 <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"apple-touch-icon"</span> <span class="na">href=</span><span class="s">"/apple-touch-icon.png"</span><span class="nt">&gt;</span><span class="c">&lt;!-- 180×180 --&gt;</span>
 <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"manifest"</span> <span class="na">href=</span><span class="s">"/manifest.webmanifest"</span><span class="nt">&gt;</span>
 </code></pre></div></div>

 <p>And in your web app manifest:</p>

 <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="err">//</span><span class="w"> </span><span class="err">manifest.webmanifest</span><span class="w">
 </span><span class="p">{</span><span class="w">
  </span><span class="nl">"icons"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-192.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"192x192"</span><span class="w"> </span><span class="p">},</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-512.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"512x512"</span><span class="w"> </span><span class="p">}</span><span class="w">
  </span><span class="p">]</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre></div></div>

 <p>That is it. If you want to know how I arrived at this, which compromises I had to take, and how to build a set like this from scratch in a step-by-step fashion, tune in for the rest of the article.</p>

 <h2 id="long-version-where-everything-is-explained">Long version, where everything is explained</h2>

 <div class="post__note">
  <p>“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”</p>

  <p>—Antoine de Saint-Exupéry, Airman’s Odyssey</p>
 </div>

 <p>A concept of a favicon, short for “favorite icon”, have been around since the early 2000s. We all see those cute little images in your browser’s tab bar that help tell open websites apart every day. Users <em>expect</em> your website to have a favicon. It’s one of those little things that make other people take you seriously.</p>

 <p>Even Apple, which always had some aesthetic beef with icons that don’t come from Cupertino and downplayed favicons in Safari for years, had finally given up and now displays them properly across all of its devices.</p>

 <blockquote>
  <p>If you have a public-facing website, it has to have a favicon. Sadly, what users perceive as one icon—is actually <em>a lot</em> of them.</p>
 </blockquote>

 <p>So it is common to offload the grueling task of generating necessary files for the ever-growing list of screens and devices to favicon generator tools. No human in their right mind would want to spend hours creating them by hand. We are here to build websites, after all, not make browser vendors happy.</p>

 <figure class="post-media post-media--centered">
  <p><img class="post-media__object" alt="A set of favicons generated by a popular online generator" src="https://cdn.evilmartians.com/front/posts/how-to-favicon-in-2021-six-files-that-fit-most-needs/generated-e1f0bbd.png"></p>
  <figcaption class="post-media__caption">
    <p>A set of favicons generated by a popular online generator</p>
  </figcaption>
 </figure>

 <p>As a creator of <a href="https://github.com/ai/nanoid/">NanoID</a> and a proponent of minimalistic open source, I tend to think in a slightly different direction. What is the most efficient set of website icons? Which formats are outdated? Which icon types can be replaced with small compromises?</p>

 <p>So, I set out to create a minimal list of favicons that will work in all cases and in all browsers, barring some edge cases where it will still work, just not 100% perfectly.</p>

 <h2 id="the-ultimate-favicon-setup">The Ultimate Favicon Setup</h2>

 <p>Instead of creating many images with different sizes, I decided to rely on SVG and browser downscaling. If you are concerned about performance, I am here to set the record straight:</p>

 <ul>
  <li>browsers download favicons in the background, so a bigger favicon image does not affect website performance;</li>
  <li>SVG is a great way to reduce image size for images that are not supposed to be bitmaps in the first place; for many <em>logos</em>, the resulting file will be much smaller than a PNG;</li>
  <li>With just three PNG images in this minimum set, you can use advanced tools to optimize their size. It solves a problem for Internet users that don’t have unlimited data plans.</li>
 </ul>

 <p>Here comes the minimal set of icons that I came up with in my research and practice. It should work with all popular browsers and devices, old and new.</p>

 <h4 id="i-faviconico-for-legacy-browsers">I. favicon.ico for legacy browsers</h4>

 <p>ICO files actually have a <a href="https://en.wikipedia.org/wiki/ICO_(file_format)#Icon_resource_structure">directory structure</a> and can pack files with different resolutions. I recommend sticking to a single 32×32 image, unless the one you have doesn’t downscale well to 16×16 (becomes blurry, for instance). In that case, you can ask your designer to come up with a special version of the logo that is tailored to fit small pixel grids.</p>

 <p>Don’t get smart with folder static asset folder structure and cache busters. <code>https://example.com</code> website should have a favicon on <code>https://example.com/favicon.ico</code>. Some tools, like RSS readers, just request <code>/favicon.ico</code> from the server and don’t bother looking elsewhere.</p>

 <p>We need <code>size="any"</code> for <code>&lt;link&gt;</code> to <code>.ico</code> file to fix <a href="https://twitter.com/subzey/status/1417099064949235712">Chrome bug</a> of choosing ICO file over SVG.</p>

 <h4 id="ii-a-single-svg-icon-with-lightdark-version-for-modern-browsers">II. A single SVG icon with light/dark version for modern browsers</h4>

 <p>SVG is a vector format that describes curves instead of pixels. On large sizes, it is more efficient than raster images. <a href="https://caniuse.com/link-icon-svg">72% of all browsers</a> support SVG icons as of this writing.</p>

 <p>Your HTML page should have a <code>&lt;link&gt;</code> tag in its <code>&lt;head&gt;</code> with <code>rel="icon"</code>, <code>type="image/svg+xml"</code> and <code>href</code> with a link to SVG file as attributes.</p>

 <p>SVG is an XML format and can contain a <code>&lt;style&gt;</code> tag that describes CSS. As any CSS, it can contain media queries like <code>@media (prefers-color-scheme: dark)</code>. This will allow you to toggle the same icon between <a href="https://blog.tomayac.com/2019/09/21/prefers-color-scheme-in-svg-favicons-for-dark-mode-icons/">light and dark system themes</a>.</p>

 <h4 id="iii-180180-png-image-for-apple-devices">III. 180×180 PNG image for Apple devices</h4>

 <p>Apple touch icon is an image that Apple devices will use if you add the webpage as a shortcut to your home screen on an iPhone or iPad. Your HTML page should have <code>&lt;link rel="apple-touch-icon" href="apple-touch-icon.png"&gt;</code> tag in a <code>&lt;head&gt;</code>.</p>

 <p>iPads since iOS 8+ require a 180×180 resolution. Other devices will downscale the image, but if we provide the source with a good-enough quality, the downscaling won’t hurt the end-user (I’ll come back to it later).</p>

 <p>Small note: an Apple touch icon will look better if you add a <code>20px</code> padding around the icon and put some background color. You can use any image editor for that.</p>

 <h4 id="iv-web-app-manifest-with-192192-and-512512-png-icons-for-android-devices">IV. Web app manifest with 192×192 and 512×512 PNG icons for Android devices.</h4>

 <ul>
  <li>Web app manifest is a JSON file with all details for a browser to install your website as a system application. The format came from Google for its <a href="https://en.wikipedia.org/wiki/Progressive_web_application">PWA</a> initiative.</li>
  <li>Your HTML page should have a <code>&lt;link rel="manifest" href="path.webmanifest"&gt;</code> tag with a link to manifest file.</li>
  <li>Manifest should have an <code>icon</code> field that links to two icons: 192×192 displayed on a home screen and 512×512 that will be used as a splash screen as PWA is loading.</li>
 </ul>

 <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
  </span><span class="nl">"icons"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-192.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"192x192"</span><span class="w"> </span><span class="p">},</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-512.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"512x512"</span><span class="w"> </span><span class="p">}</span><span class="w">
  </span><span class="p">]</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre></div></div>

 <h2 id="did-we-forget-anyone">Did we forget anyone?</h2>

 <p>There are, of course, more favicon flavors out there, some of them quite obscure, so let’s see how our setup fares with them. Maybe, it’s time to say farewell to some less successful formats out there.</p>

 <h4 id="windows-tile-icon">Windows Tile Icon</h4>

 <p>Microsoft Edge used to <a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/hh772707(v=vs.85)">support</a> a special icon format to pin websites to Start Menu. For recent versions of Windows, this is no longer required.</p>

 <h4 id="safari-pinned-icon">Safari Pinned Icon</h4>

 <p>Safari used to have a separate requirement to display an icon in <a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html">pinned tabs</a>. However, since Safari 12, we can use a regular favicon for pinned tabs. Even <a href="https://www.apple.com/">apple.com</a> doesn’t use the <code>mask-icon</code> anymore.</p>

 <h4 id="relshortcut">rel=”shortcut”</h4>

 <p>A lot of (now outdated) tutorials will include a <code>favicon.ico</code> into HTML like this:</p>

 <pre><code>&lt;link rel="shortcut icon" href="/favicon.ico" sizes="any"&gt;
 </code></pre>

 <p>Be warned that <code>shortcut</code> is not, and never was a valid link relation. Read this <a href="https://mathiasbynens.be/notes/rel-shortcut-icon">amazing article</a> by Mathias Bynens from ten years ago that explains why we never needed shortcuts and <code>rel="icon"</code> is just fine.</p>

 <h4 id="yandex-tableau">Yandex Tableau</h4>

 <p><a href="https://browser.yandex.com/">Yandex Browser</a> is a Chromium-based browser from the biggest Russian search engine. In Russia, it has a 20% market share. It has <a href="https://yandex.com/support/browser-beta/personalization/tableau.html">a nice feature</a> that allows website to display live data in widgets on a home screen through a special JSON manifest provided by the <code>yandex-tableau-widget</code> link. However, the feature proved not to be very popular, and now Yandex has removed the technical documentation for it from its website. Regular icon manifests will work just as well.</p>

 <h4 id="opera-coast">Opera Coast</h4>

 <p>Opera Coast, an experimental browser for iOS, used to require a special 228×228 icon. The browser left the App Store in 2017, and I doubt it has survived multiple iOS updates since then.</p>

 <p>Now, as we waved good-bye to fallen comrades, let’s see how to produce an ultimate favicon set for those who are still standing.</p>

 <h2 id="how-to-build-our-ultimate-favicon-set">How to build our Ultimate Favicon Set</h2>

 <p>Here’s how to build our ultimate, minimalistic favicon set in six quick steps. All you need to start is an SVG file for the logo that you want to use.</p>

 <h4 id="step-1-prepare-the-svg">Step 1: Prepare the SVG</h4>

 <p>Be sure that the SVG image is <em>square</em>. Open the source file in your system viewer and check the image’s width and height. It is easy to adjust the SVG size in any SVG editor. In <a href="https://inkscape.org/">Inkscape</a>, you can change document size in File → Document Properties and center the logo using Object → Align and Distribute.</p>

 <p>Save your file as <code>icon.svg</code>. Now let’s fiddle with our SVG, so it plays well with modern system <em>themes</em>. Ask your designer how the colors should be inverted in a dark theme (for B&amp;W logos, you just change black to white).</p>

 <p>Now, open your SVG file in a <em>text</em> editor. Find a <code>&lt;path&gt;</code> with dark or missing <code>fill</code>. Add a CSS media query that triggers on theme changes and change <code>fill</code> to the colors you want:</p>

 <div class="language-diff highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"&gt;
 <span class="gi">+   &lt;style&gt;
 +     @media (prefers-color-scheme: dark) {
 +     .a { fill: #f0f0f0 }
 +     }
 +   &lt;/style&gt;
 </span><span class="gd">-   &lt;path fill="#0f0f0f" d="…" /&gt;
 </span><span class="gi">+   &lt;path class="a" fill="#0f0f0f" d="…" /&gt;
 </span>  &lt;/svg&gt;
 </code></pre></div></div>

 <h4 id="step-2-create-an-ico-file">Step 2: Create an ICO file</h4>

 <p>Open your <code>icon.svg</code> file in a raster graphics editor. I recommend <a href="https://www.gimp.org/">GIMP</a>; it’s free and multi-platform.</p>

 <p>Accept rendering SVG to raster. Set width and height to 32 pixels. Export file to <code>favicon.ico</code> using <em>32 bpp, 8-bit alpha, no palette</em> settings.</p>

 <p>If you do not have GIMP you can install <a href="https://inkscape.org/">Inkscape</a> and <a href="https://www.imagemagick.org/script/download.php">ImageMagick</a> and convert SVG to ico in terminal:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>inkscape ./icon.svg <span class="nt">--export-width</span><span class="o">=</span>32 <span class="nt">--export-filename</span><span class="o">=</span><span class="s2">"./tmp.png"</span>
 <span class="c"># In Windows call `magick convert ./tmp.png ./favicon.ico`</span>
 convert ./tmp.png ./favicon.ico
 <span class="nb">rm</span> ./tmp.png
 </code></pre></div></div>

 <p>Scale the image down to 16×16 and check icon visibility. If it became too blurry, it would be better to ask your designer for a custom tiny version of the logo.</p>

 <p>To include a separate 16×16 version of an icon:</p>

 <ol>
  <li>Open <code>favicon.ico</code> with 32×32 icon.</li>
  <li>Create a new layer with 16×16 size.</li>
  <li>Put a 16×16 version of an icon into this layer.</li>
  <li>Export the file. GIMP will save each layout as a separate version of an icon.</li>
 </ol>

 <p>Or you can do the same in ImageMagick by:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>convert ./icon-32.png ./icon-16.png ./favicon.ico
 </code></pre></div></div>

 <h4 id="step-3-create-png-images">Step 3: Create PNG images</h4>

 <p>Open your source SVG file in a raster graphics editor again and create a 512×512 image. Export it as <code>icon-512.png</code>.<br>
 Scale the image to 192×192 and export it to <code>icon-192.png</code>. Now scale the image itself to 140×140 and set the canvas to 180×180, and export as <code>apple-touch-icon.png</code>.</p>

 <p>Or you can do the same in Inkscape by:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>inkscape ./icon.svg <span class="nt">--export-width</span><span class="o">=</span>512 <span class="nt">--export-filename</span><span class="o">=</span><span class="s2">"./icon-512.png"</span>
 inkscape ./icon.svg <span class="nt">--export-width</span><span class="o">=</span>192 <span class="nt">--export-filename</span><span class="o">=</span><span class="s2">"./icon-192.png"</span>
 </code></pre></div></div>

 <h4 id="step-4-optimize-png-and-svg-files">Step 4: Optimize PNG and SVG files</h4>

 <p>The best tool to optimize SVGs is <a href="https://github.com/svg/svgo">SVGO</a>. Run:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npx svgo <span class="nt">--multipass</span> icon.svg
 </code></pre></div></div>

 <p><a href="https://squoosh.app/">Squoosh</a> is a great web app to optimize raster images.</p>

 <ol>
  <li>Open your <code>icon-512.png</code> in Squoosh.</li>
  <li>Change Compress setting to <code>OxiPNG</code>.</li>
  <li>Enable “Reduce palette”.</li>
  <li>Set 64 colors.</li>
  <li>Compare before/after by moving a slider. If you see a difference, increase the number of colors.</li>
  <li>Save the file.</li>
 </ol>

 <p>Repeat these steps for <code>icon-192.png</code> and <code>apple-touch-icon.png</code>.</p>

 <h4 id="step-5-add-icons-to-html">Step 5: Add icons to HTML</h4>

 <p>You need to add links to <code>favicon.ico</code> and to <code>apple-touch-icon.png</code> into your HTML.</p>

 <p>For static HTML:</p>

 <div class="language-diff highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  &lt;title&gt;My website&lt;/title&gt;
 <span class="gi">+ &lt;link rel="icon" href="/favicon.ico" sizes="any"&gt;
 + &lt;link rel="icon" href="/icon.svg" type="image/svg+xml"&gt;
 + &lt;link rel="apple-touch-icon" href="/apple-touch-icon.png"&gt;
 </span></code></pre></div></div>

 <p>However, we recommend using a bundler to generate cache busters (include file’s hash in a name as a fingerprint). If you are using Webpack with [<code>html-webpack-plugin</code>]:</p>

 <ol>
  <li>
    <p>Create <code>index.html</code> template.</p>
  </li>
  <li>
    <p>Add template to plugin options:</p>

    <div class="language-js highlighter-rouge">
 <div class="highlight"><pre class="highlight"><code><span class="k">new</span> <span class="nx">HtmlWebpackPlugin</span><span class="p">({</span> <span class="na">template</span><span class="p">:</span> <span class="dl">"</span><span class="s2">./view/index.html</span><span class="dl">"</span> <span class="p">});</span>
 </code></pre></div>    </div>
  </li>
  <li>
    <p>Define HTML template with links (examples use ERB used to include files, but can be your templating language of choice):</p>

    <div class="language-html highlighter-rouge">
 <div class="highlight"><pre class="highlight"><code><span class="cp">&lt;!DOCTYPE html&gt;</span>
 <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;title&gt;</span>My website<span class="nt">&lt;/title&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width,initial-scale=1"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">href=</span><span class="s">"/favicon.ico"</span> <span class="na">sizes=</span><span class="s">"any"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">type=</span><span class="s">"image/svg+xml"</span> <span class="na">href=</span><span class="s">"&lt;%=
      require('./icon.svg').default
    %&gt;"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"apple-touch-icon"</span> <span class="na">href=</span><span class="s">"&lt;%=
      require('./apple-touch-icon.png').default
    %&gt;"</span>
   <span class="nt">&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;&lt;/body&gt;</span>
 <span class="nt">&lt;/html&gt;</span>
 </code></pre></div>    </div>
  </li>
  <li>
    <p>Use <a href="https://www.npmjs.com/package/copy-webpack-plugin"><code>copy-webpack-plugin</code></a> to copy <code>favicon.ico</code> <em>without</em> adding a hash to file name.</p>
  </li>
 </ol>

 <h4 id="free-tip-separate-icon-for-staging">Free Tip: Separate icon for staging</h4>

 <p>Favicons are a nice way to distinguish your production environment from a staging one. I find using an alternative icon for staging super effective in avoiding expensive confusions.</p>

 <p>Create a <code>favicon-dev.ico</code> with the same logo, but invert the colors (or do something else that makes sense for you). Same for SVG, create <code>icon-dev.svg</code>.</p>

 <p>Now, replace icons in your HTML template depending on <code>process.env.NODE_ENV === 'production'</code> condition:</p>

 <div class="language-diff highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;My website&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
 <span class="gd">-     &lt;link rel="icon" href="/favicon.ico" sizes="any"&gt;
 </span><span class="gi">+     &lt;link rel="icon" sizes="any" href="&lt;%=
 +       process.env.NODE_ENV === 'production'
 +         ? '/favicon.ico'
 +         : require('./favicon-dev.ico').default
 +     %&gt;"&gt;
 </span>      &lt;link rel="icon" type="image/svg+xml" href="&lt;%=
 <span class="gd">-       require('./icon.svg').default
 </span><span class="gi">+       process.env.NODE_ENV === 'production'
 +         ? require('./icon.svg').default
 +         : require('./icon-dev.svg').default
 </span>      %&gt;"&gt;
      &lt;link rel="apple-touch-icon" href="&lt;%=
        require('./apple-touch-icon.png').default
      %&gt;"&gt;
    &lt;/head&gt;
    &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;

 </code></pre></div></div>

 <h4 id="step-6-create-a-web-app-manifest">Step 6: Create a web app manifest</h4>

 <p>For static HTML, create a JSON file named <code>manifest.webmanifest</code>:</p>

 <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
  </span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"My website"</span><span class="p">,</span><span class="w">
  </span><span class="nl">"icons"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-192.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"192x192"</span><span class="w"> </span><span class="p">},</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-512.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"512x512"</span><span class="w"> </span><span class="p">}</span><span class="w">
  </span><span class="p">]</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre></div></div>

 <p>Link it in your HTML:</p>

 <div class="language-diff highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  &lt;title&gt;My website&lt;/title&gt;
 <span class="gi">+ &lt;link rel="manifest" href="/manifest.webmanifest"&gt;
 </span>  &lt;link rel="icon" href="/favicon.ico" sizes="any"&gt;
  &lt;link rel="icon" href="/icon.svg" type="image/svg+xml"&gt;
  &lt;link rel="apple-touch-icon" href="/apple-touch-icon.png"&gt;
 </code></pre></div></div>

 <p>With Webpack, you can use <a href="https://www.npmjs.com/package/webpack-pwa-manifest">webpack-pwa-manifest</a> plugin:</p>

 <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  <span class="nx">plugins</span><span class="p">:</span> <span class="p">[</span>
    <span class="err">…</span><span class="p">,</span>
    <span class="k">new</span> <span class="nx">WebpackPwaManifest</span><span class="p">({</span>
      <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">My website</span><span class="dl">'</span><span class="p">,</span>
      <span class="na">icons</span><span class="p">:</span> <span class="p">[</span>
        <span class="p">{</span> <span class="na">src</span><span class="p">:</span> <span class="nx">resolve</span><span class="p">(</span><span class="dl">'</span><span class="s1">./icon-192.png</span><span class="dl">'</span><span class="p">),</span> <span class="na">sizes</span><span class="p">:</span> <span class="dl">'</span><span class="s1">192x192</span><span class="dl">'</span> <span class="p">},</span>
        <span class="p">{</span> <span class="na">src</span><span class="p">:</span> <span class="nx">resolve</span><span class="p">(</span><span class="dl">'</span><span class="s1">./icon-512.png</span><span class="dl">'</span><span class="p">),</span> <span class="na">sizes</span><span class="p">:</span> <span class="dl">'</span><span class="s1">512x512 }
      ]
    })
  ]
 </span></code></pre></div></div>

 <hr>

 <p>Thank you for reading! As you can see, with modern web standards, the task of creating an ultimate favicon set becomes quite straightforward. And even though following the steps manually shouldn’t take much of your time, having an automated tool to do the same will be even more amazing! Feel free to ping me on <a href="https://twitter.com/sitnikcode">Twitter</a> if you’re willing to build one; I will be more than happy to help!</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.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.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.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.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.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.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/2021/23d224bccb7af8db5017cebf813fec56/index.md
+++ b/cache/2021/23d224bccb7af8db5017cebf813fec56/index.md
@@ -0,0 +1,359 @@
 title: How to Favicon in 2021: Six files that fit most needs
 url: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
 hash_url: 23d224bccb7af8db5017cebf813fec56

 <article class="post__intro">
  <p>It is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen. Read on to see how to take a smarter approach and adopt a minimal set of icons that fits most modern needs.</p>
 </article>

 <p>The favicons proved to be a more exhaustive topic that anyone could wish for, so I also summarized a whole article in just two code snippets for those who suffered enough and know exactly what to do. Still, I recommend geeking out to the rest of it!</p>

 <h2 id="extremely-short-version">Extremely short version</h2>

 <p>Instead of serving dozens of icons, all you need is just <strong>five</strong> icons and one JSON file.</p>

 <p>In your HTML, for the browser:</p>

 <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">href=</span><span class="s">"/favicon.ico"</span> <span class="na">sizes=</span><span class="s">"any"</span><span class="nt">&gt;</span><span class="c">&lt;!-- 32×32 --&gt;</span>
 <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">href=</span><span class="s">"/icon.svg"</span> <span class="na">type=</span><span class="s">"image/svg+xml"</span><span class="nt">&gt;</span>
 <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"apple-touch-icon"</span> <span class="na">href=</span><span class="s">"/apple-touch-icon.png"</span><span class="nt">&gt;</span><span class="c">&lt;!-- 180×180 --&gt;</span>
 <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"manifest"</span> <span class="na">href=</span><span class="s">"/manifest.webmanifest"</span><span class="nt">&gt;</span>
 </code></pre></div></div>

 <p>And in your web app manifest:</p>

 <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="err">//</span><span class="w"> </span><span class="err">manifest.webmanifest</span><span class="w">
 </span><span class="p">{</span><span class="w">
  </span><span class="nl">"icons"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-192.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"192x192"</span><span class="w"> </span><span class="p">},</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-512.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"512x512"</span><span class="w"> </span><span class="p">}</span><span class="w">
  </span><span class="p">]</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre></div></div>

 <p>That is it. If you want to know how I arrived at this, which compromises I had to take, and how to build a set like this from scratch in a step-by-step fashion, tune in for the rest of the article.</p>

 <h2 id="long-version-where-everything-is-explained">Long version, where everything is explained</h2>

 <div class="post__note">
  <p>“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”</p>

  <p>—Antoine de Saint-Exupéry, Airman’s Odyssey</p>
 </div>

 <p>A concept of a favicon, short for “favorite icon”, have been around since the early 2000s. We all see those cute little images in your browser’s tab bar that help tell open websites apart every day. Users <em>expect</em> your website to have a favicon. It’s one of those little things that make other people take you seriously.</p>

 <p>Even Apple, which always had some aesthetic beef with icons that don’t come from Cupertino and downplayed favicons in Safari for years, had finally given up and now displays them properly across all of its devices.</p>

 <blockquote>
  <p>If you have a public-facing website, it has to have a favicon. Sadly, what users perceive as one icon—is actually <em>a lot</em> of them.</p>
 </blockquote>

 <p>So it is common to offload the grueling task of generating necessary files for the ever-growing list of screens and devices to favicon generator tools. No human in their right mind would want to spend hours creating them by hand. We are here to build websites, after all, not make browser vendors happy.</p>

 <figure class="post-media post-media--centered">
  <p><img class="post-media__object" alt="A set of favicons generated by a popular online generator" src="https://cdn.evilmartians.com/front/posts/how-to-favicon-in-2021-six-files-that-fit-most-needs/generated-e1f0bbd.png"></p>
  <figcaption class="post-media__caption">
    <p>A set of favicons generated by a popular online generator</p>
  </figcaption>
 </figure>

 <p>As a creator of <a href="https://github.com/ai/nanoid/">NanoID</a> and a proponent of minimalistic open source, I tend to think in a slightly different direction. What is the most efficient set of website icons? Which formats are outdated? Which icon types can be replaced with small compromises?</p>

 <p>So, I set out to create a minimal list of favicons that will work in all cases and in all browsers, barring some edge cases where it will still work, just not 100% perfectly.</p>

 <h2 id="the-ultimate-favicon-setup">The Ultimate Favicon Setup</h2>

 <p>Instead of creating many images with different sizes, I decided to rely on SVG and browser downscaling. If you are concerned about performance, I am here to set the record straight:</p>

 <ul>
  <li>browsers download favicons in the background, so a bigger favicon image does not affect website performance;</li>
  <li>SVG is a great way to reduce image size for images that are not supposed to be bitmaps in the first place; for many <em>logos</em>, the resulting file will be much smaller than a PNG;</li>
  <li>With just three PNG images in this minimum set, you can use advanced tools to optimize their size. It solves a problem for Internet users that don’t have unlimited data plans.</li>
 </ul>

 <p>Here comes the minimal set of icons that I came up with in my research and practice. It should work with all popular browsers and devices, old and new.</p>

 <h4 id="i-faviconico-for-legacy-browsers">I. favicon.ico for legacy browsers</h4>

 <p>ICO files actually have a <a href="https://en.wikipedia.org/wiki/ICO_(file_format)#Icon_resource_structure">directory structure</a> and can pack files with different resolutions. I recommend sticking to a single 32×32 image, unless the one you have doesn’t downscale well to 16×16 (becomes blurry, for instance). In that case, you can ask your designer to come up with a special version of the logo that is tailored to fit small pixel grids.</p>

 <p>Don’t get smart with folder static asset folder structure and cache busters. <code>https://example.com</code> website should have a favicon on <code>https://example.com/favicon.ico</code>. Some tools, like RSS readers, just request <code>/favicon.ico</code> from the server and don’t bother looking elsewhere.</p>

 <p>We need <code>size="any"</code> for <code>&lt;link&gt;</code> to <code>.ico</code> file to fix <a href="https://twitter.com/subzey/status/1417099064949235712">Chrome bug</a> of choosing ICO file over SVG.</p>

 <h4 id="ii-a-single-svg-icon-with-lightdark-version-for-modern-browsers">II. A single SVG icon with light/dark version for modern browsers</h4>

 <p>SVG is a vector format that describes curves instead of pixels. On large sizes, it is more efficient than raster images. <a href="https://caniuse.com/link-icon-svg">72% of all browsers</a> support SVG icons as of this writing.</p>

 <p>Your HTML page should have a <code>&lt;link&gt;</code> tag in its <code>&lt;head&gt;</code> with <code>rel="icon"</code>, <code>type="image/svg+xml"</code> and <code>href</code> with a link to SVG file as attributes.</p>

 <p>SVG is an XML format and can contain a <code>&lt;style&gt;</code> tag that describes CSS. As any CSS, it can contain media queries like <code>@media (prefers-color-scheme: dark)</code>. This will allow you to toggle the same icon between <a href="https://blog.tomayac.com/2019/09/21/prefers-color-scheme-in-svg-favicons-for-dark-mode-icons/">light and dark system themes</a>.</p>

 <h4 id="iii-180180-png-image-for-apple-devices">III. 180×180 PNG image for Apple devices</h4>

 <p>Apple touch icon is an image that Apple devices will use if you add the webpage as a shortcut to your home screen on an iPhone or iPad. Your HTML page should have <code>&lt;link rel="apple-touch-icon" href="apple-touch-icon.png"&gt;</code> tag in a <code>&lt;head&gt;</code>.</p>

 <p>iPads since iOS 8+ require a 180×180 resolution. Other devices will downscale the image, but if we provide the source with a good-enough quality, the downscaling won’t hurt the end-user (I’ll come back to it later).</p>

 <p>Small note: an Apple touch icon will look better if you add a <code>20px</code> padding around the icon and put some background color. You can use any image editor for that.</p>

 <h4 id="iv-web-app-manifest-with-192192-and-512512-png-icons-for-android-devices">IV. Web app manifest with 192×192 and 512×512 PNG icons for Android devices.</h4>

 <ul>
  <li>Web app manifest is a JSON file with all details for a browser to install your website as a system application. The format came from Google for its <a href="https://en.wikipedia.org/wiki/Progressive_web_application">PWA</a> initiative.</li>
  <li>Your HTML page should have a <code>&lt;link rel="manifest" href="path.webmanifest"&gt;</code> tag with a link to manifest file.</li>
  <li>Manifest should have an <code>icon</code> field that links to two icons: 192×192 displayed on a home screen and 512×512 that will be used as a splash screen as PWA is loading.</li>
 </ul>

 <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
  </span><span class="nl">"icons"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-192.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"192x192"</span><span class="w"> </span><span class="p">},</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-512.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"512x512"</span><span class="w"> </span><span class="p">}</span><span class="w">
  </span><span class="p">]</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre></div></div>

 <h2 id="did-we-forget-anyone">Did we forget anyone?</h2>

 <p>There are, of course, more favicon flavors out there, some of them quite obscure, so let’s see how our setup fares with them. Maybe, it’s time to say farewell to some less successful formats out there.</p>

 <h4 id="windows-tile-icon">Windows Tile Icon</h4>

 <p>Microsoft Edge used to <a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/hh772707(v=vs.85)">support</a> a special icon format to pin websites to Start Menu. For recent versions of Windows, this is no longer required.</p>

 <h4 id="safari-pinned-icon">Safari Pinned Icon</h4>

 <p>Safari used to have a separate requirement to display an icon in <a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html">pinned tabs</a>. However, since Safari 12, we can use a regular favicon for pinned tabs. Even <a href="https://www.apple.com/">apple.com</a> doesn’t use the <code>mask-icon</code> anymore.</p>

 <h4 id="relshortcut">rel=”shortcut”</h4>

 <p>A lot of (now outdated) tutorials will include a <code>favicon.ico</code> into HTML like this:</p>

 <pre><code>&lt;link rel="shortcut icon" href="/favicon.ico" sizes="any"&gt;
 </code></pre>

 <p>Be warned that <code>shortcut</code> is not, and never was a valid link relation. Read this <a href="https://mathiasbynens.be/notes/rel-shortcut-icon">amazing article</a> by Mathias Bynens from ten years ago that explains why we never needed shortcuts and <code>rel="icon"</code> is just fine.</p>

 <h4 id="yandex-tableau">Yandex Tableau</h4>

 <p><a href="https://browser.yandex.com/">Yandex Browser</a> is a Chromium-based browser from the biggest Russian search engine. In Russia, it has a 20% market share. It has <a href="https://yandex.com/support/browser-beta/personalization/tableau.html">a nice feature</a> that allows website to display live data in widgets on a home screen through a special JSON manifest provided by the <code>yandex-tableau-widget</code> link. However, the feature proved not to be very popular, and now Yandex has removed the technical documentation for it from its website. Regular icon manifests will work just as well.</p>

 <h4 id="opera-coast">Opera Coast</h4>

 <p>Opera Coast, an experimental browser for iOS, used to require a special 228×228 icon. The browser left the App Store in 2017, and I doubt it has survived multiple iOS updates since then.</p>

 <p>Now, as we waved good-bye to fallen comrades, let’s see how to produce an ultimate favicon set for those who are still standing.</p>

 <h2 id="how-to-build-our-ultimate-favicon-set">How to build our Ultimate Favicon Set</h2>

 <p>Here’s how to build our ultimate, minimalistic favicon set in six quick steps. All you need to start is an SVG file for the logo that you want to use.</p>

 <h4 id="step-1-prepare-the-svg">Step 1: Prepare the SVG</h4>

 <p>Be sure that the SVG image is <em>square</em>. Open the source file in your system viewer and check the image’s width and height. It is easy to adjust the SVG size in any SVG editor. In <a href="https://inkscape.org/">Inkscape</a>, you can change document size in File → Document Properties and center the logo using Object → Align and Distribute.</p>

 <p>Save your file as <code>icon.svg</code>. Now let’s fiddle with our SVG, so it plays well with modern system <em>themes</em>. Ask your designer how the colors should be inverted in a dark theme (for B&amp;W logos, you just change black to white).</p>

 <p>Now, open your SVG file in a <em>text</em> editor. Find a <code>&lt;path&gt;</code> with dark or missing <code>fill</code>. Add a CSS media query that triggers on theme changes and change <code>fill</code> to the colors you want:</p>

 <div class="language-diff highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"&gt;
 <span class="gi">+   &lt;style&gt;
 +     @media (prefers-color-scheme: dark) {
 +     .a { fill: #f0f0f0 }
 +     }
 +   &lt;/style&gt;
 </span><span class="gd">-   &lt;path fill="#0f0f0f" d="…" /&gt;
 </span><span class="gi">+   &lt;path class="a" fill="#0f0f0f" d="…" /&gt;
 </span>  &lt;/svg&gt;
 </code></pre></div></div>

 <h4 id="step-2-create-an-ico-file">Step 2: Create an ICO file</h4>

 <p>Open your <code>icon.svg</code> file in a raster graphics editor. I recommend <a href="https://www.gimp.org/">GIMP</a>; it’s free and multi-platform.</p>

 <p>Accept rendering SVG to raster. Set width and height to 32 pixels. Export file to <code>favicon.ico</code> using <em>32 bpp, 8-bit alpha, no palette</em> settings.</p>

 <p>If you do not have GIMP you can install <a href="https://inkscape.org/">Inkscape</a> and <a href="https://www.imagemagick.org/script/download.php">ImageMagick</a> and convert SVG to ico in terminal:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>inkscape ./icon.svg <span class="nt">--export-width</span><span class="o">=</span>32 <span class="nt">--export-filename</span><span class="o">=</span><span class="s2">"./tmp.png"</span>
 <span class="c"># In Windows call `magick convert ./tmp.png ./favicon.ico`</span>
 convert ./tmp.png ./favicon.ico
 <span class="nb">rm</span> ./tmp.png
 </code></pre></div></div>

 <p>Scale the image down to 16×16 and check icon visibility. If it became too blurry, it would be better to ask your designer for a custom tiny version of the logo.</p>

 <p>To include a separate 16×16 version of an icon:</p>

 <ol>
  <li>Open <code>favicon.ico</code> with 32×32 icon.</li>
  <li>Create a new layer with 16×16 size.</li>
  <li>Put a 16×16 version of an icon into this layer.</li>
  <li>Export the file. GIMP will save each layout as a separate version of an icon.</li>
 </ol>

 <p>Or you can do the same in ImageMagick by:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>convert ./icon-32.png ./icon-16.png ./favicon.ico
 </code></pre></div></div>

 <h4 id="step-3-create-png-images">Step 3: Create PNG images</h4>

 <p>Open your source SVG file in a raster graphics editor again and create a 512×512 image. Export it as <code>icon-512.png</code>.<br>
 Scale the image to 192×192 and export it to <code>icon-192.png</code>. Now scale the image itself to 140×140 and set the canvas to 180×180, and export as <code>apple-touch-icon.png</code>.</p>

 <p>Or you can do the same in Inkscape by:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>inkscape ./icon.svg <span class="nt">--export-width</span><span class="o">=</span>512 <span class="nt">--export-filename</span><span class="o">=</span><span class="s2">"./icon-512.png"</span>
 inkscape ./icon.svg <span class="nt">--export-width</span><span class="o">=</span>192 <span class="nt">--export-filename</span><span class="o">=</span><span class="s2">"./icon-192.png"</span>
 </code></pre></div></div>

 <h4 id="step-4-optimize-png-and-svg-files">Step 4: Optimize PNG and SVG files</h4>

 <p>The best tool to optimize SVGs is <a href="https://github.com/svg/svgo">SVGO</a>. Run:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npx svgo <span class="nt">--multipass</span> icon.svg
 </code></pre></div></div>

 <p><a href="https://squoosh.app/">Squoosh</a> is a great web app to optimize raster images.</p>

 <ol>
  <li>Open your <code>icon-512.png</code> in Squoosh.</li>
  <li>Change Compress setting to <code>OxiPNG</code>.</li>
  <li>Enable “Reduce palette”.</li>
  <li>Set 64 colors.</li>
  <li>Compare before/after by moving a slider. If you see a difference, increase the number of colors.</li>
  <li>Save the file.</li>
 </ol>

 <p>Repeat these steps for <code>icon-192.png</code> and <code>apple-touch-icon.png</code>.</p>

 <h4 id="step-5-add-icons-to-html">Step 5: Add icons to HTML</h4>

 <p>You need to add links to <code>favicon.ico</code> and to <code>apple-touch-icon.png</code> into your HTML.</p>

 <p>For static HTML:</p>

 <div class="language-diff highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  &lt;title&gt;My website&lt;/title&gt;
 <span class="gi">+ &lt;link rel="icon" href="/favicon.ico" sizes="any"&gt;
 + &lt;link rel="icon" href="/icon.svg" type="image/svg+xml"&gt;
 + &lt;link rel="apple-touch-icon" href="/apple-touch-icon.png"&gt;
 </span></code></pre></div></div>

 <p>However, we recommend using a bundler to generate cache busters (include file’s hash in a name as a fingerprint). If you are using Webpack with [<code>html-webpack-plugin</code>]:</p>

 <ol>
  <li>
    <p>Create <code>index.html</code> template.</p>
  </li>
  <li>
    <p>Add template to plugin options:</p>

    <div class="language-js highlighter-rouge">
 <div class="highlight"><pre class="highlight"><code><span class="k">new</span> <span class="nx">HtmlWebpackPlugin</span><span class="p">({</span> <span class="na">template</span><span class="p">:</span> <span class="dl">"</span><span class="s2">./view/index.html</span><span class="dl">"</span> <span class="p">});</span>
 </code></pre></div>    </div>
  </li>
  <li>
    <p>Define HTML template with links (examples use ERB used to include files, but can be your templating language of choice):</p>

    <div class="language-html highlighter-rouge">
 <div class="highlight"><pre class="highlight"><code><span class="cp">&lt;!DOCTYPE html&gt;</span>
 <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;title&gt;</span>My website<span class="nt">&lt;/title&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width,initial-scale=1"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">href=</span><span class="s">"/favicon.ico"</span> <span class="na">sizes=</span><span class="s">"any"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">type=</span><span class="s">"image/svg+xml"</span> <span class="na">href=</span><span class="s">"&lt;%=
      require('./icon.svg').default
    %&gt;"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"apple-touch-icon"</span> <span class="na">href=</span><span class="s">"&lt;%=
      require('./apple-touch-icon.png').default
    %&gt;"</span>
   <span class="nt">&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;&lt;/body&gt;</span>
 <span class="nt">&lt;/html&gt;</span>
 </code></pre></div>    </div>
  </li>
  <li>
    <p>Use <a href="https://www.npmjs.com/package/copy-webpack-plugin"><code>copy-webpack-plugin</code></a> to copy <code>favicon.ico</code> <em>without</em> adding a hash to file name.</p>
  </li>
 </ol>

 <h4 id="free-tip-separate-icon-for-staging">Free Tip: Separate icon for staging</h4>

 <p>Favicons are a nice way to distinguish your production environment from a staging one. I find using an alternative icon for staging super effective in avoiding expensive confusions.</p>

 <p>Create a <code>favicon-dev.ico</code> with the same logo, but invert the colors (or do something else that makes sense for you). Same for SVG, create <code>icon-dev.svg</code>.</p>

 <p>Now, replace icons in your HTML template depending on <code>process.env.NODE_ENV === 'production'</code> condition:</p>

 <div class="language-diff highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;My website&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
 <span class="gd">-     &lt;link rel="icon" href="/favicon.ico" sizes="any"&gt;
 </span><span class="gi">+     &lt;link rel="icon" sizes="any" href="&lt;%=
 +       process.env.NODE_ENV === 'production'
 +         ? '/favicon.ico'
 +         : require('./favicon-dev.ico').default
 +     %&gt;"&gt;
 </span>      &lt;link rel="icon" type="image/svg+xml" href="&lt;%=
 <span class="gd">-       require('./icon.svg').default
 </span><span class="gi">+       process.env.NODE_ENV === 'production'
 +         ? require('./icon.svg').default
 +         : require('./icon-dev.svg').default
 </span>      %&gt;"&gt;
      &lt;link rel="apple-touch-icon" href="&lt;%=
        require('./apple-touch-icon.png').default
      %&gt;"&gt;
    &lt;/head&gt;
    &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;

 </code></pre></div></div>

 <h4 id="step-6-create-a-web-app-manifest">Step 6: Create a web app manifest</h4>

 <p>For static HTML, create a JSON file named <code>manifest.webmanifest</code>:</p>

 <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
  </span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"My website"</span><span class="p">,</span><span class="w">
  </span><span class="nl">"icons"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-192.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"192x192"</span><span class="w"> </span><span class="p">},</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-512.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"512x512"</span><span class="w"> </span><span class="p">}</span><span class="w">
  </span><span class="p">]</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre></div></div>

 <p>Link it in your HTML:</p>

 <div class="language-diff highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  &lt;title&gt;My website&lt;/title&gt;
 <span class="gi">+ &lt;link rel="manifest" href="/manifest.webmanifest"&gt;
 </span>  &lt;link rel="icon" href="/favicon.ico" sizes="any"&gt;
  &lt;link rel="icon" href="/icon.svg" type="image/svg+xml"&gt;
  &lt;link rel="apple-touch-icon" href="/apple-touch-icon.png"&gt;
 </code></pre></div></div>

 <p>With Webpack, you can use <a href="https://www.npmjs.com/package/webpack-pwa-manifest">webpack-pwa-manifest</a> plugin:</p>

 <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  <span class="nx">plugins</span><span class="p">:</span> <span class="p">[</span>
    <span class="err">…</span><span class="p">,</span>
    <span class="k">new</span> <span class="nx">WebpackPwaManifest</span><span class="p">({</span>
      <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">My website</span><span class="dl">'</span><span class="p">,</span>
      <span class="na">icons</span><span class="p">:</span> <span class="p">[</span>
        <span class="p">{</span> <span class="na">src</span><span class="p">:</span> <span class="nx">resolve</span><span class="p">(</span><span class="dl">'</span><span class="s1">./icon-192.png</span><span class="dl">'</span><span class="p">),</span> <span class="na">sizes</span><span class="p">:</span> <span class="dl">'</span><span class="s1">192x192</span><span class="dl">'</span> <span class="p">},</span>
        <span class="p">{</span> <span class="na">src</span><span class="p">:</span> <span class="nx">resolve</span><span class="p">(</span><span class="dl">'</span><span class="s1">./icon-512.png</span><span class="dl">'</span><span class="p">),</span> <span class="na">sizes</span><span class="p">:</span> <span class="dl">'</span><span class="s1">512x512 }
      ]
    })
  ]
 </span></code></pre></div></div>

 <hr>

 <p>Thank you for reading! As you can see, with modern web standards, the task of creating an ultimate favicon set becomes quite straightforward. And even though following the steps manually shouldn’t take much of your time, having an automated tool to do the same will be even more amazing! Feel free to ping me on <a href="https://twitter.com/sitnikcode">Twitter</a> if you’re willing to build one; I will be more than happy to help!</p>
--- a/cache/2021/3ac474db4dc65c1d25e99cb30655ff12/index.html
+++ b/cache/2021/3ac474db4dc65c1d25e99cb30655ff12/index.html
--- a/cache/2021/3ac474db4dc65c1d25e99cb30655ff12/index.md
+++ b/cache/2021/3ac474db4dc65c1d25e99cb30655ff12/index.md
--- a/cache/2021/4072b1e628106ec95319062a87d21f47/index.html
+++ b/cache/2021/4072b1e628106ec95319062a87d21f47/index.html
@@ -0,0 +1,966 @@
 <!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>Copying is the way design works (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://matthewstrom.com/writing/copying/">

 <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>Copying is the way design works</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.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://matthewstrom.com/writing/copying/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <div class="l--grid copying">
    <div class="l--grid-narrow l--mar-top-s post">
        <div class="c--gray"><p>
            This is a very short book about copying. Its contents, unless
            otherwise noted, are licensed under
            </p><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">CC-BY SA 4.0</a><p>
            (more on that in a bit). You can download, copy, remix, excerpt,
            change, and repost it however you see fit.
        </p></div>
        <p class="copying--chapter">I</p>
        <p>
            <strong class="t--transform-uppercase">Charles Eames</strong> said
            it best: “We don’t do ‘art’ — we solve problems.”
        </p>

        <p>
            To buy furniture in 1950, you had to choose between affordable and
            enduring, between rugged and fashionable. Charles and Ray designed a
            chair that was all the above and sold it for $20.95.
            They called it the LCW.
        </p>

        <p>
            The LCW embodies the Eames’ obsession with simplicity in material
            and method. “We want to make the best for the most for the least,”
            they said.
            The design was revolutionary: in 1999, <em>Time</em> magazine called
            the LCW “the best design of the century.”
            Today, you can buy a brand new LCW from Herman Miller (the
            officially licensed manufacturer of Eames products) for $1,195.
        </p>
        <p>
            Or, you can buy a chair called the “Fathom” from a company called
            Modway for $145.
        </p>
        <p>Functionally and aesthetically, the chairs are identical.</p>
    </div>
    <div class="l--grid-wide">
        <figure class="l--flex">
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/0b07ec2420d962333516565bbf3c484cc8b2ca4f/e52a1/images/copying-1.jpg" alt="Eames Molded Plywood Lounge Chair">
                <figcaption>
                    Eames Molded Plywood Lounge Chair<br>© Herman Miller
                </figcaption>
            </div>
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/e244c88f486534fd5ef1b92be27de149fb5d95a4/6a616/images/copying-2.jpg" alt="Modway Fathom">
                <figcaption>Modway Fathom<br>© Modway</figcaption>
            </div>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>
            There’s an LCW from 1946 in MOMA’s collection. It’s one of the very
            first ever made. Most people would call it the original LCW.
        </p>
        <p>
            Charles and Ray Eames sold the manufacturing rights for their
            furniture to Herman Miller in 1947. Collectors call the LCWs made in
            the ’40s and ’50s “originals.” But in some sense, these — and the
            more recently manufactured Herman Miller versions — are copies of
            that LCW in the MOMA collection.
        </p>
        <p>
            And then there’s the Modway Fathom. It’s clearly a copy, an
            unlicensed one at that. But at $145 (the equivalent of $12.78 in
            1947) it’s more affordable than the LCW was when it was first
            manufactured and sold. In spirit, it’s more of an original than any
            LCW: the best, for the most, for the least.
        </p>
        <hr class="copying--divider">
        <p>
            I’m sharing this story because it demonstrates a surprising fact:
            what makes something “original” (the first, the best, the most
            famous, the most true) or a “copy” (an identical copy, an
            unauthorized replica, an interpretation or a remix) isn’t always
            obvious — or important.
        </p>
        <p>
            I’m a designer. As a designer, I feel the need to be original. If
            you’re a designer, or even if you’re just interested in design, you
            probably feel the need to be original, too. We tend to worship
            inventors and originators, designers who were trailblazing and
            innovative. And we copy them.
        </p>
        <p>
            This oxymoron of a craft can drive a person crazy. There’s lots of
            space between originality and industry, authorship and
            acknowledgement, riffing and ripping. I wrote this very short book
            to explore that space.
        </p>
        <p>
            Some people have been frustrated by copying, refused to accept it,
            and struggled with every ounce of their strength against it. Other
            people have used copying to their advantage, whether to improve
            themselves, build a community, or subvert authority.
        </p>
        <p>I’ve only been able to have a career in design because I copied.</p>
        <p>
            I hope that by the time you’ve finished reading, you’ll see how
            important copying is. Right or wrong, virtue or vice, copying is the
            way design works.
        </p>
        <p class="copying--chapter">II</p>
        <p>
            <strong class="t--transform-uppercase">Steve Jobs copied.</strong>
            “Great artists steal,” he said, quoting Pablo Picasso (or was it
            Stravinsky? T. S. Eliot?). Jobs and Apple copied many designs in their early days, most
            notably from a Xerox research laboratory in Palo Alto. The story
            goes like this:
        </p>
        <p>
            In the early 20th century, Xerox was a pioneer of office technology.
            By the middle of the century, computers were getting smaller and
            more affordable, and Xerox knew they’d have to work hard to keep
            their market dominance. In 1970, The Xerox Palo Alto Research Center
            — Xerox PARC — was founded to explore the future of the “paperless
            office.”
        </p>
        <p>
            Within two years, Xerox PARC had designed a groundbreaking computer
            called the Alto. One of its innovations was a graphical user
            interface: programs and files were displayed in virtual windows
            which users navigated using a mouse. It was an eerily accurate
            picture of what personal computers would look like 30 years later.
        </p>
        <p>
            Jef Raskin, leader of the Macintosh project at Apple, had seen
            Xerox’s work. He wanted Steve Jobs to see it for himself, and set up
            a meeting.
        </p>
        <p>
            “I thought it was the best thing I’d ever seen in my life,” Jobs
            said of the Alto’s user interface. “Within ten minutes it was
            obvious to me that all computers would work like this some day.”
        </p>
        <p>
            When the Macintosh was released in 1984, it featured a graphical
            user interface. Programs and files were displayed in virtual windows
            which users navigated using a mouse.
        </p>
        <p>It was just like the Alto.</p>
    </div>
    <div class="l--grid-push-right">
        <figure class="l--flex">
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/08f14f2c6bb50c5a76d1d2f55afdf8225ea016da/d6ad1/images/copying-3.jpg" alt="Xerox Alto Operating System">
                <figcaption>
                    Xerox Star Operating System<br>© Xerox
                </figcaption>
            </div>
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/4a9ba3ffa923511892c05b85e016dad99982b3b7/fe2ca/images/copying-4.jpg" alt="Apple Macintosh Operating System">
                <figcaption>
                    Apple Macintosh Operating System<br>© Apple
                </figcaption>
            </div>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>Steve Jobs didn’t like to be copied.</p>
        <p>
            In 1985, a year after the Macintosh was launched, Apple sued a
            company called Digital Research Interactive for copying the
            Macintosh’s user interface. Digital Research settled out of court,
            and changed the appearance of its icons, windows, and mouse
            pointers.
        </p>
        <p>
            In 1990, Apple sued both Microsoft and Hewlett-Packard. The case was
            a repeat: Microsoft’s Windows and HP’s NewWave featured designs that
            Apple claimed were copies of the Macintosh’s operating system. But
            early licensing agreements between Apple and Microsoft made it
            unclear if any infringement took place; the case was thrown out.
        </p>
        <p>
            In the middle of Apple’s case against Microsoft, Xerox sued Apple,
            hoping to establish its rights as the inventor of the desktop
            interface. The court threw out this case, too, and questioned why
            Xerox took so long to raise the issue.
            Bill Gates later reflected on these cases: “we both had this rich
            neighbor named Xerox ... I broke into his house to steal the TV set
            and found out that [Jobs] had already stolen it.”
        </p>
        <p>
            The rampant copying fueling the explosive growth of consumer
            computers meant that by 1990, the desktop user interface was
            ubiquitous; it was impossible to determine who originated any part
            of it, or who copied who. The quest to stake their claim nearly
            consumed Apple. But when they emerged, they had learned a thing or
            two. Today, Apple holds more than 2,300 design patents.
        </p>
    </div>
    <div class="l--grid-wide">
        <figure>
            <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/c6e3a601fe1273b3e15343f0d9bf3e0505307772/032f8/images/copying-5.jpg" alt="Apple's design patent for a device with rounded corners">
            <figcaption class="t--align-center">
                Apple's design patent for a device with rounded corners
            </figcaption>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>
            This story ends in 2011, with Apple suing Samsung for copying the
            design of its software and hardware products. One of the most
            remarkable claims: Samsung broke the law when it sold “a rectangular
            product with four evenly rounded corners.”
        </p>
        <p>
            The court rejected Apple’s claim to own rounded rectangles. But it
            upheld the other claims, fining Samsung a blistering $539 million
            for patent violations.
        </p>
        <p>
            Designers copy. We steal like great artists. But when we see a copy
            of our work, we’re livid. Jobs, on Google’s Android: “I will spend
            my last dying breath if I need to, and I will spend every penny of
            Apple’s $40 billion in the bank, to right this wrong. I’m going to
            destroy Android, because it’s a stolen product.”
        </p>
        <p>
            Steve Jobs was unmatched in his visionary dedication to innovation.
            But he never came to terms with the inevitability of copying.
        </p>
        <p class="copying--chapter">III</p>
        <p>
            <strong class="t--transform-uppercase">John Carmack had </strong>a
            different relationship with copying. For him, copying was a way to
            learn, a challenge to overcome, and a source of new ideas.
        </p>
        <p>
            Carmack was — still is — a brilliant coder. He’s best known for
            programming the ultraviolent and action-packed first-person shooters
            <em>Doom</em> and <em>Quake</em>. Those games pushed the limits of
            consumer computers and defined a genre. But his first real
            breakthrough game was simpler, cuter, more whimsical. It was called
            <em>Commander Keen</em>.
        </p>
        <p>
            Growing up in the early ’90s, I loved <em>Commander Keen</em>. It’s
            a goofy adventure game; you guide an eight-year-old boy wearing a
            football helmet and red Converses through alien planets, collecting
            candy bars and zapping monsters with a ray gun.
        </p>
        <p>
            <em>Keen</em> began life as a copy of another of my favorite games:
            <em>Super Mario Bros. 3</em>.
        </p>
        <p>
            Before <em>Keen</em>, Carmack was working for a subscription
            software company called Softdisk. Carmack and the other programmers
            at Softdisk churned out these games at a prodigious rate: today,
            blockbuster games can take more than five years to create;
            Softdisk produced a brand-new full-length game every single month.
        </p>
        <p>
            In September 1990, Carmack decided that for his next game, he’d try
            to tackle a new and daunting challenge: scrolling. At the time, only
            consoles like the Nintendo had enough computing power to smoothly
            scroll scenery, characters, and enemies. The PCs were stuck to
            simple one-screen-at-a-time games. But if Carmack was going to sell
            millions of games like Nintendo had with <em>Super Mario Bros.</em>,
            he needed to figure out how to recreate the effect.
        </p>
        <p>
            So, on September 19, 1990, Carmack and another developer named Tom
            Hall decided to reverse-engineer the first level of
            <em> Super Mario Bros. 3</em>. Working through the night, Carmack
            coaxed his PC into scrolling and animating the world of
            <em>Super Mario</em>; Hall jumped back and forth between a TV screen
            and his computer, playing the Nintendo version, pausing to copy the
            images pixel-for-pixel.
        </p>
    </div>
    <div class="l--grid-push-right">
        <figure class="l--flex">
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/c96ef863000c95ef229c6623f607f443a0188b7e/5e461/images/copying-6.jpg" alt="Super Mario Bros. 3">
                <figcaption>Super Mario Bros. 3<br>© Nintendo</figcaption>
            </div>
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/863a8ab20376613b64817d0347bb5aa2d62dfcf6/53f49/images/copying-7.jpg" alt="John Carmack's unlicensed PC port of Super Mario Bros. 3">
                <figcaption>
                    John Carmack's unlicensed PC port of Super Mario Bros. 3<br>
                </figcaption>
            </div>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>
            The next day, their coworkers were floored. Nobody had ever seen a
            PC game work like this. John Romero, Carmack’s closest colleague and
            future collaborator on <em>Doom</em> and <em>Quake</em>, called it
            “the fucking coolest thing on the planet.”
            He insisted that they keep copying until they had finished an exact
            replica of the full game. They were going to send it to Nintendo.
        </p>
        <hr class="copying--divider">
        <p>
            Unfortunately for Carmack and his team, Nintendo wasn’t interested
            in a PC version of <em>Super Mario</em> (their console version was
            doing just fine, thank you very much).
        </p>
        <p>
            Disappointed, but not defeated, they resolved to build a better
            version of Mario. Starting with Carmack’s code for scrolling and
            animating the screen, the coders — calling themselves Ideas from the
            Deep, keeping the game a secret from their day jobs at Softdisk —
            put their <em>Super Mario</em> copy through a complete
            metamorphosis. In place of Mario, it starred eight-year-old Billy
            Blaze. Instead of turtles and mushrooms, the enemies were aliens
            called Yorps. Instead of eating a mushroom to jump higher, Billy
            Blaze hopped on a pogo stick.
        </p>
        <figure>
            <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/3915b2dcbfbf91aa3eeb376a535ae09db487d215/e87d5/images/copying-8.jpg" alt="Commander Keen in Invasion of the Vorticons">
            <figcaption>
                <em>Commander Keen in Invasion of the Vorticons</em><br>©3D
                Realms
            </figcaption>
        </figure>
        <p>
            The debut <em>Commander Keen</em> game,
            <em>Commander Keen in Invasion of the Vorticons</em>, was a huge
            success. More than 50,000 copies were sold, making <em>Keen</em> one
            of the best-selling PC games of its time.
        </p>
        <p>
            Unlike Steve Jobs, John Carmack never changed his mind about
            copying. When his boss at Softdisk suggested that they patent
            Carmack’s PC scrolling technique, Carmack reeled. “If you ever ask
            me to patent anything,” he said, “I’ll quit.”
        </p>
        <hr class="copying--divider">
        <p>
            In a 2005 forum post, John Carmack explained his thoughts on
            patents. While patents are framed as protecting inventors, he wrote,
            that’s seldom how they’re used. Smart programmers working on hard
            problems tend to come up with the same solutions. If any one of
            those programmers patents their solution, the rest are screwed.
        </p>
        <p>
            He concluded: “I’ll have no part of it. Its [sic] basically mugging
            someone.”
        </p>
        <p>
            In his games after <em>Keen</em>, Carmack would go beyond simply
            refusing to patent his inventions. He would release the source code
            to the biggest games of the ’90s, <em>Wolfenstein 3D</em>,
            <em>Doom</em>, and <em>Quake</em>. Everyone is free to download,
            modify, or copy them.
        </p>
        <p class="copying--chapter">IV</p>
        <p>
            <strong class="t--transform-uppercase">It’s one thing to copy.</strong>
            It’s another to encourage others to copy from you. Richard Stallman
            went even further — he made copying a right.
        </p>
        <p>
            In 1983, Richard Stallman wanted to build a new operating system. At
            the time, Unix was the most popular and influential operating
            system, but it was expensive to license. Commercial licenses cost
            $20,000 — that’s $52,028 in 2020 money.
            And Unix was closed-source.
        </p>
        <p>
            So on September 27, 1983, he wrote this message on the Unix Wizards
            message board:
        </p>
        <blockquote class="t--family-mono">
            Free Unix!<br><br>
            Starting this Thanksgiving I am going to write a complete
            Unix-compatible software system called GNU (for Gnu's Not Unix), and
            give it away free to everyone who can use it. Contributions of time,
            money, programs and equipment are greatly needed.
        </blockquote>
        <p>
            That Stallman would write software and give it to others to use, for
            free, was a radical notion. To drive the point home, Stallman wrote
            a manifesto, defining the idea of
            <strong>free software</strong> (“Free software is software that
            users have the freedom to distribute and change.”) The manifesto kicked off the free software movement.
        </p>
        <p>
            The enduring innovation of Stallman’s movement was how he and his
            co-conspirators used software licenses. They flipped traditional
            licensing on its head: instead of prohibiting the copying or
            distribution of the software, a free software license guarantees the
            right of people to use, modify, distribute, and learn from its code.
        </p>
    </div>
    <p class="l--grid-push-left">
        <figure class="copying--quote">
            Instead of prohibiting the copying or distribution of the software,
            a free software license guarantees the right of people to use,
            modify, distribute, and learn from its code.
        </figure>
    </p>
    <div class="l--grid-narrow post">
        <p>
            New kinds of software licenses weren’t the only product of the free
            software movement. Ideological offshoots quickly spun out into new
            groups, like the <strong>open-source software</strong> movement.
            While Stallman’s free software faction was centered around a small
            group of hard-line progressive coders, the open-source movement was
            broad and inclusive, abandoning some of Stallman’s more political
            language to spread farther and find new audiences.
        </p>
        <p>
            Permissive licensing and distributed source control form the engine
            of modern software development. They create a feedback loop, or a
            symbiotic pair, or a living organism, or maybe even a virus: the
            tools that software developers use are themselves products of the
            open-source philosophy. Free and open-source code replicates itself,
            mutates, and spreads instantly across the world.
        </p>
        <hr class="copying--divider">
        <p>
            The free and open-source software movements (sometimes combined into
            a single acronym, FOSS) were echoed by another revolution in how
            creative works are licensed. In 2001, Lawrence Lessig, Hal Abelson,
            and Eric Eldred started Creative Commons, a non-profit and
            international network dedicated to enabling the sharing and reuse of
            “creativity and knowledge through the provision of free legal
            tools.”
        </p>
        <p>
            Nearly 20 years later, nearly half of a million images on Flickr
            have Creative Commons (or CC) licenses. Wikipedia uses CC licenses
            on all its photos and art. MIT provides more than 2,400 courses
            online for free under Creative Commons licenses. Countless millions
            of creative works have benefited from the open-source approach to
            licenses and permissions.
        </p>
    </div>
    <div class="l--grid-narrow">
        <figure>
            <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/a19baf08ad09c7e052d4064ed8cbead32c5a1a70/89826/images/copying-9.jpg" alt="An image of a feedback loop from Flickr's Creative Commons archive">
            <figcaption>
                An image of a feedback loop from Flickr's Creative Commons
                archive
            </figcaption>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>
            A decade ago, the open-source movement came to design. Michael Cho
            created
            <a href="https://unsplash.com/" target="_blank" rel="noopener">Unsplash</a>
            in 2013 to share a few photographs he thought might be useful to
            designers at startups; as of September 2020, Unsplash hosts
            2,147,579 photos, and all-time photo downloads are well over 2
            billion.
            Pablo Stanley recently released
            <a href="https://www.humaaans.com/" target="_blank" rel="noopener">Humaaans</a>, a collection of Creative Commons-licensed designs that can be
            re-assembled into editorial graphics.
            <a href="https://feathericons.com/" target="_blank" rel="noopener">Feather icons</a>,
            <a href="https://heroicons.dev/" target="_blank" rel="noopener">Heroicons</a>, and
            <a href="https://icons.getbootstrap.com/" target="_blank" rel="noopener">Bootstrap Icons</a>
            are all open-source and free-to-use collections of UI icons, used by
            designers to build websites and applications.
        </p>
        <p>
            Meanwhile, the explosion of open-source design resources has been
            bolstered by a new class of tools for sharing and collaborating on
            design.
            <a href="https://www.abstract.com/" target="_blank" rel="noopener">Abstract</a>
            is a version-control system for design that promises “collaboration
            without the chaos.” With Abstract, many designers can contribute to
            a single file, without worrying about overwriting each other's
            changes or always needing to download the latest versions. Figma,
            too, has just launched
            <a href="https://www.figma.com/community" target="_blank" rel="noopener">its community feature</a>
            , allowing designers to publish files and download each other’s
            projects. It’s not hard to imagine how this will evolve into a
            designer’s version of
            <a href="https://github.com" target="_blank" rel="noopener">GitHub</a>
            in the near future. Other design tools have followed suit: both
            Sketch and Framer have launched community content hubs, laying the
            groundwork for distributed source control.
        </p>
        <p>
            Copying is fundamental to design, just as it is to software. The
            rise of permissive licenses and version control tools makes it seem
            like copying is a new idea, an innovative approach in an industry
            that thrives on novelty. But the truth is, copying has informed art
            and industry for thousands of years.
        </p>
        <p class="copying--chapter">V</p>
        <p>
            In China, there are many concepts of a copy, each with distinct
            subtext. Fangzhipin (仿製品) are copies that are obviously different
            from the original — like small souvenir models of a statue. Fuzhipin
            (複製品) are exact, life-size reproductions of the original.
            Fuzhipin are just as valuable as originals, and have no negative
            stigma.
        </p>
        <p>
            In 1974, local farmers in the Xi’an region of China unearthed
            life-sized sculptures of soldiers made of terra cotta clay. When
            Chinese archeologists came to investigate the site, they uncovered
            figure after figure, including horses and chariots, all exquisitely
            detailed. All told, there were more than 8,000 terra cotta soldiers.
            They were dated to 210 BCE.
        </p>
        <figure>
            <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/67da4e33e9db15e360d0cd212926b8aa5e09d757/b06c3/images/copying-10.jpg" alt="Terracotta warriors, Xi'an city">
            <figcaption>Terracotta warriors, Xi'an city</figcaption>
        </figure>
        <p>
            The terracotta warriors instantly became cultural treasures. A
            museum was built on the site of the excavation, but many of the
            statues were also exhibited in traveling shows. Hundreds of
            thousands of museumgoers all over the world lined up in galleries to
            see the soldiers.
        </p>
        <p>
            Then, in 2007, a revelation rocked the Museum für Völkerkunde in
            Hamburg, Germany: some of the terracotta warriors it had on display
            were not the originals that had been discovered in the field in
            Xi’an. They were copies.
        </p>
        <p>
            The Museum für Völkerkunde’s director became a pariah: “We have come
            to the conclusion that there is no other option than to close the
            exhibition completely, in order to maintain the museum’s good
            reputation.” The museum issued refunds to visitors. The event kicked
            off a rash of geopolitical finger-pointing: German officials cried
            foul, saying they were duped; Chinese officials washed their hands,
            since they never claimed the statues were originals to begin with.
        </p>
        <p>
            The statues in the Hamburg museum were fuzhipin, exact copies. They
            were equivalent to the originals. After all, the originals were
            themselves products of mass manufacturing, made with modules and
            components cast from molds. Almost as soon as the terracotta
            warriors were discovered, Chinese artisans began producing replicas,
            continuing the work that had started more than 2,000 years
            before.
        </p>
        <hr class="copying--divider">
        <p>
            It’s easy to attribute this approach to copying as a cultural
            curiosity, an aberration particular to China. But copying was just
            as vital to Western artists.
        </p>
        <p>
            Japanese art was one of the main sources of inspiration for Vincent
            van Gogh, himself one of the most influential European painters of
            the 19th century, if not of all time. Van Gogh was fascinated by the
            woodblock prints of artists like Hiroshige: stylized and vivid, they
            captured dramatic moments within compelling stories.
        </p>
        <p>
            Van Gogh’s interest went beyond inspiration. To study the techniques
            mastered by Japanese artists, he copied prints by Keisei Eisen and
            Utagawa Hiroshige. He tried to replicate their bold lines, their
            energetic compositions, and their strong colors. For his copy of
            Eisen’s A courtesan, van Gogh started by tracing the outline of the
            courtesan’s figure directly from the May 1886 edition of Paris
            Illustré. For Flowering Plum Tree and The Bridge in the Rain, both
            copies of Hiroshige prints, he added borders of Japanese calligraphy
            he had seen on other prints.
        </p>
    </div>
    <div class="l--grid-push-right">
        <figure class="l--flex">
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/6a6a1d3bacb2409aee732c112317ab78697b83ff/ba1c6/images/copying-11.jpg" alt="Sudden Shower over Shin-Ōhashi bridge and Atake (1857) by Hiroshige">
                <figcaption>
                    <em>Sudden Shower over Shin-Ōhashi bridge and Atake</em>
                    (1857) by Hiroshige
                </figcaption>
            </div>
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/abe088ff554219cdb7d1562a5a54a91c586e2bba/be71d/images/copying-12.jpg" alt="The Bridge in the Rain (after Hiroshige) (1887) by Vincent Van Gogh">
                <figcaption>
                    <em>The Bridge in the Rain (after Hiroshige)</em> (1887) by
                    Vincent Van Gogh
                </figcaption>
            </div>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>
            His practice with Japanese styles provided a crucial breakthrough.
            Van Gogh began to flatten landscapes. He outlined his subjects in
            bold black strokes. He painted with eye-watering colors. His
            interpretations of reality lit the art world on fire, influencing
            artists and designers to this day.
        </p>
        <p>
            By copying directly from Japanese artists, van Gogh’s works became
            what we know today.
        </p>
        <p>
            He was clear about this influence. In a letter to his brother Theo,
            he wrote: “All my work is based to some extent on Japanese art.”
        </p>
        <hr class="copying--divider">
        <p>
            There’s another word in Chinese for a copy: shanzhai (山寨). It’s
            translated to English as “fake,” but as with most Chinese words, the
            translation is lacking. Shanzhai literally means “mountain
            stronghold;” the word is a neologism, a recent invention, inspired
            by a famous novel in which the protagonists hide in a mountain
            stronghold to fight against a corrupt regime. Shanzhai products are
            playful, drawing attention to the fact that they aren’t original,
            putting their makers’ creativity on display.
        </p>
        <p>
            Take the popular shanzhai novel
            <em>Harry Potter and the Porcelain Doll</em>; in it, Harry goes to
            China to stop Voldemort and Voldemort’s Chinese counterpart. It
            doesn’t pretend to be an original. It plays on its fake-ness: Harry
            speaks Chinese fluently, but he has trouble eating with chopsticks.
        </p>
        <p>
            It’s easy to think of shanzhai as a Chinese quirk, but there are
            parallels in Western culture. One in particular, is a staple of the
            design community: the unsolicited redesign.
        </p>
        <p>
            An unsolicited redesign demonstrates a designer’s ideas for how a
            well-known website or app could be improved. They range from
            single-screen aesthetic tweaks (like
            <a href="https://dribbble.com/shots/13154163-Instafresh" target="_blank" rel="noopener">this take on Instagram</a>) to in-depth case studies in UX, IA, and content design (like
            <a href="https://blog.prototypr.io/gmail-an-unsolicited-redesign-1-2b244886eef8" target="_blank" rel="noopener">this redesign of Gmail’s mobile app</a>).
        </p>
        <p>
            Unsolicited redesigns copy the visual elements of the original as a
            starting point, then transform those elements to produce something
            new. Like van Gogh tracing Eisen, designers can pick up new
            techniques and approaches just by copying. But when a designer riffs
            on the original, they can create something new and inspiring.
        </p>
        <p>
            The design community has a complicated relationship with unsolicited
            redesigns. On the one hand, they’re the mainstay of talented young
            designers looking to demonstrate their ability to think critically
            about design and apply their skills. Companies have used the
            unsolicited redesign to position themselves as leaders: in 2003,
            37signals (creator of the popular project management tool Basecamp)
            created redesigns of PayPal, Google, and FedEx to critical acclaim:
            their redesign of an online car dashboard “could do for cars what
            TiVo did for television,” Jason Kottke proclaimed.
        </p>
        <p>
            In rare cases, unsolicited redesigns turn into solicited ones. In
            2018, Adam Fisher-Cox published a redesign of the digital signage of
            the AirTrain system at John F. Kennedy International Airport. The
            agency overseeing AirTrain saw the redesign and hired Fisher-Cox to
            implement it.
        </p>
    </div>
    <div class="l--grid-wide">
        <figure>
            <div class="l--flex">
                <div class="l--flex-half">
                    <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/6d01670fb1837936a4144c089965129891fe8d72/24ae4/images/copying-13.jpg" alt="The old signage for JFK's AirTrain">
                    <figcaption>The old signage for JFK's AirTrain</figcaption>
                </div>
                <div class="l--flex-half">
                    <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/aea3c4615e8e7da46ad389562cfc0c3151a70e74/9f2fd/images/copying-14.jpg" alt="The beginning of Adam's redesign, copying directly from the existing signage">
                    <figcaption>
                        The beginning of the redesign, copying directly from the
                        existing signage
                    </figcaption>
                </div>
            </div>
            <div class="l--flex">
                <div>
                    <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/4b78ae72718afd062c56551468d4cc3ab3e61f3a/8d4e6/images/copying-15.jpg" alt="The final redesign comissioned by the agency in charge of AirTrain">
                    <figcaption>
                        The final redesign comissioned by the agency in charge
                        of AirTrain. All images courtesy
                        <a href="https://adamfishercox.com/portfolio/airtrain-arrival-signs/">Adam Fisher-Cox.</a>
                    </figcaption>
                </div>
            </div>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>
            On the other hand, unsolicited redesigns are often looked down on.
            In a 2013 essay titled “Keep Your Unsolicited Redesign to
            Yourself,”
            Eric Karjaluoto argued that without acknowledging the constraints
            and incentives that guided an original design, the redesign is
            “utter fluff.” Those working on unsolicited redesigns “should know
            better than to waste their time.” There are countless other
            invectives against unsolicited redesign across the internet of
            design blogs.
        </p>
        <p>
            In 2011,
            <a href="https://web.archive.org/web/20111208041110/https://andyrutledge.com/news-redux.php" target="_blank" rel="noopener">Andy Rutledge’s unsolicited redesign of <em>The New York Times</em></a>
            drew the attention of design pundits in countless blog posts and
            tweets.
            But if they disagreed with Rutledge’s conclusions, many defended his
            approach. “Sometimes we need to go crazy and mock up stuff that
            can’t absolutely work in its pure form,” wrote Stijn Debrouwere,
            because “a full-on rethink might be what we need to move
            forward.”
            Even Khoi Vinh, previous design director for the Times, supported
            the practice: “Unsolicited redesigns are terrific and fun and
            useful, and I hope designers never stop doing them.”
        </p>
        <p>
            The shanzhai approach of copying — to learn, to invent, to comment,
            to make a statement — is just at home in the West as it is in China.
        </p>
        <p class="copying--chapter">VI</p>
        <p>
            Copying can be instructive, challenging, devious, or revolutionary.
            To me, copying is fun.
        </p>
        <p>
            When I was young, I liked to trace. My mom would buy me tracing
            paper, and I’d copy comic book characters line for line. Pulling the
            paper back from the original was a rush. I drew this! With my hand!
            Sure, it was a copy, but once I signed my name in the corner, it was
            my copy.
        </p>
        <p>
            These days, there’s automatic copy protection on just about
            everything. You can’t easily pirate Netflix streams, copy Kindle
            books, or torrent Adobe Creative Cloud. But designs are different.
            To copy a design, all you need is tracing paper.
        </p>
        <p>
            In fact, you don’t even have to draw. Pull out your phone, take a
            picture, and save it to your Pinterest board. You can use a color
            picker to extract the exact shade from the design, use a physical or
            digital measuring tool to get the pixel-perfect dimensions, and use
            <a href="https://www.myfonts.com/WhatTheFont/" target="_blank" rel="noopener">WhatTheFont</a>
            to learn the typefaces in the design.
        </p>
        <p>
            If you’re looking at a website, you can just click “view source” and
            see all the design decisions laid out in granular detail. That’s
            exactly how I went from tracing comic books to being a designer: I
            copied designs from websites I liked and pasted them onto my Xanga
            blog.
        </p>
        <p>I copied because I could.</p>
        <p>
            In my first design job, I copied relentlessly. I had created a music
            magazine with friends and tried to recreate the layouts I saw in my
            favorite mags. Wired was a constant source of inspiration: I
            obsessed over their typography. When I figured out that they were
            using Joshua Darden’s Freight Micro, I switched our magazine to use
            it, too.
        </p>
        <p>
            Copying helped me develop as a designer without needing to go to
            design school. For lots of people too young for college-level design
            programs, or without the means to attend these schools or bootcamps,
            copying serves the same function.
        </p>
        <p>
            And then, when folks like me wind up in a career in design, we find
            that copying is still useful. I eyedropper colors from Apple’s
            marketing websites. I start my color palettes from Google’s Material
            Design examples. I screenshot and recreate components from
            Facebook’s new redesign.
        </p>
        <p>
            I don’t fancy myself to be the van Gogh of design, to be anywhere on
            the level of Stallman or Carmack in my approach to copying,
            possessing even one-one-hundredth of Steve Jobs’ ability to steal
            artfully, or to be in any way comparable to Charles or Ray Eames.
            But I can certainly copy all of their work. I can copy their
            mindset, their process, and their designs.
        </p>
        <p>
            I can make cheap, small-scale facsimiles, fangzhipin, to demonstrate
            some quality of the original. I can make exact replicas,
            pixel-perfect fuzhipin, to learn how the originals and their
            creators work. Or I can create shanzhai, unsolicited redesigns,
            commenting and riffing on the work of others. All these copies have
            an important role to play in the process of design.
        </p>
        <p>
            Whether you believe that it’s worthwhile or worthless to copy,
            whether you think that copies are a valuable part of the design
            community or a scourge, you are using software, hardware, websites
            and apps that all owe their existence to copying.
        </p>
        <p>As long as there is design, there will be copying.</p>
        <hr>
    </div>


 </div>
 </article>


 <hr>

 <footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.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.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.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.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.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.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/2021/4072b1e628106ec95319062a87d21f47/index.md
+++ b/cache/2021/4072b1e628106ec95319062a87d21f47/index.md
@@ -0,0 +1,799 @@
 title: Copying is the way design works
 url: https://matthewstrom.com/writing/copying/
 hash_url: 4072b1e628106ec95319062a87d21f47

 <div class="l--grid copying">
    <div class="l--grid-narrow l--mar-top-s post">
        <div class="c--gray"><p>
            This is a very short book about copying. Its contents, unless
            otherwise noted, are licensed under
            </p><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">CC-BY SA 4.0</a><p>
            (more on that in a bit). You can download, copy, remix, excerpt,
            change, and repost it however you see fit.
        </p></div>
        <p class="copying--chapter">I</p>
        <p>
            <strong class="t--transform-uppercase">Charles Eames</strong> said
            it best: “We don’t do ‘art’ — we solve problems.”
        </p>

        <p>
            To buy furniture in 1950, you had to choose between affordable and
            enduring, between rugged and fashionable. Charles and Ray designed a
            chair that was all the above and sold it for $20.95.
            They called it the LCW.
        </p>

        <p>
            The LCW embodies the Eames’ obsession with simplicity in material
            and method. “We want to make the best for the most for the least,”
            they said.
            The design was revolutionary: in 1999, <em>Time</em> magazine called
            the LCW “the best design of the century.”
            Today, you can buy a brand new LCW from Herman Miller (the
            officially licensed manufacturer of Eames products) for $1,195.
        </p>
        <p>
            Or, you can buy a chair called the “Fathom” from a company called
            Modway for $145.
        </p>
        <p>Functionally and aesthetically, the chairs are identical.</p>
    </div>
    <div class="l--grid-wide">
        <figure class="l--flex">
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/0b07ec2420d962333516565bbf3c484cc8b2ca4f/e52a1/images/copying-1.jpg" alt="Eames Molded Plywood Lounge Chair">
                <figcaption>
                    Eames Molded Plywood Lounge Chair<br>© Herman Miller
                </figcaption>
            </div>
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/e244c88f486534fd5ef1b92be27de149fb5d95a4/6a616/images/copying-2.jpg" alt="Modway Fathom">
                <figcaption>Modway Fathom<br>© Modway</figcaption>
            </div>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>
            There’s an LCW from 1946 in MOMA’s collection. It’s one of the very
            first ever made. Most people would call it the original LCW.
        </p>
        <p>
            Charles and Ray Eames sold the manufacturing rights for their
            furniture to Herman Miller in 1947. Collectors call the LCWs made in
            the ’40s and ’50s “originals.” But in some sense, these — and the
            more recently manufactured Herman Miller versions — are copies of
            that LCW in the MOMA collection.
        </p>
        <p>
            And then there’s the Modway Fathom. It’s clearly a copy, an
            unlicensed one at that. But at $145 (the equivalent of $12.78 in
            1947) it’s more affordable than the LCW was when it was first
            manufactured and sold. In spirit, it’s more of an original than any
            LCW: the best, for the most, for the least.
        </p>
        <hr class="copying--divider">
        <p>
            I’m sharing this story because it demonstrates a surprising fact:
            what makes something “original” (the first, the best, the most
            famous, the most true) or a “copy” (an identical copy, an
            unauthorized replica, an interpretation or a remix) isn’t always
            obvious — or important.
        </p>
        <p>
            I’m a designer. As a designer, I feel the need to be original. If
            you’re a designer, or even if you’re just interested in design, you
            probably feel the need to be original, too. We tend to worship
            inventors and originators, designers who were trailblazing and
            innovative. And we copy them.
        </p>
        <p>
            This oxymoron of a craft can drive a person crazy. There’s lots of
            space between originality and industry, authorship and
            acknowledgement, riffing and ripping. I wrote this very short book
            to explore that space.
        </p>
        <p>
            Some people have been frustrated by copying, refused to accept it,
            and struggled with every ounce of their strength against it. Other
            people have used copying to their advantage, whether to improve
            themselves, build a community, or subvert authority.
        </p>
        <p>I’ve only been able to have a career in design because I copied.</p>
        <p>
            I hope that by the time you’ve finished reading, you’ll see how
            important copying is. Right or wrong, virtue or vice, copying is the
            way design works.
        </p>
        <p class="copying--chapter">II</p>
        <p>
            <strong class="t--transform-uppercase">Steve Jobs copied.</strong>
            “Great artists steal,” he said, quoting Pablo Picasso (or was it
            Stravinsky? T. S. Eliot?). Jobs and Apple copied many designs in their early days, most
            notably from a Xerox research laboratory in Palo Alto. The story
            goes like this:
        </p>
        <p>
            In the early 20th century, Xerox was a pioneer of office technology.
            By the middle of the century, computers were getting smaller and
            more affordable, and Xerox knew they’d have to work hard to keep
            their market dominance. In 1970, The Xerox Palo Alto Research Center
            — Xerox PARC — was founded to explore the future of the “paperless
            office.”
        </p>
        <p>
            Within two years, Xerox PARC had designed a groundbreaking computer
            called the Alto. One of its innovations was a graphical user
            interface: programs and files were displayed in virtual windows
            which users navigated using a mouse. It was an eerily accurate
            picture of what personal computers would look like 30 years later.
        </p>
        <p>
            Jef Raskin, leader of the Macintosh project at Apple, had seen
            Xerox’s work. He wanted Steve Jobs to see it for himself, and set up
            a meeting.
        </p>
        <p>
            “I thought it was the best thing I’d ever seen in my life,” Jobs
            said of the Alto’s user interface. “Within ten minutes it was
            obvious to me that all computers would work like this some day.”
        </p>
        <p>
            When the Macintosh was released in 1984, it featured a graphical
            user interface. Programs and files were displayed in virtual windows
            which users navigated using a mouse.
        </p>
        <p>It was just like the Alto.</p>
    </div>
    <div class="l--grid-push-right">
        <figure class="l--flex">
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/08f14f2c6bb50c5a76d1d2f55afdf8225ea016da/d6ad1/images/copying-3.jpg" alt="Xerox Alto Operating System">
                <figcaption>
                    Xerox Star Operating System<br>© Xerox
                </figcaption>
            </div>
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/4a9ba3ffa923511892c05b85e016dad99982b3b7/fe2ca/images/copying-4.jpg" alt="Apple Macintosh Operating System">
                <figcaption>
                    Apple Macintosh Operating System<br>© Apple
                </figcaption>
            </div>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>Steve Jobs didn’t like to be copied.</p>
        <p>
            In 1985, a year after the Macintosh was launched, Apple sued a
            company called Digital Research Interactive for copying the
            Macintosh’s user interface. Digital Research settled out of court,
            and changed the appearance of its icons, windows, and mouse
            pointers.
        </p>
        <p>
            In 1990, Apple sued both Microsoft and Hewlett-Packard. The case was
            a repeat: Microsoft’s Windows and HP’s NewWave featured designs that
            Apple claimed were copies of the Macintosh’s operating system. But
            early licensing agreements between Apple and Microsoft made it
            unclear if any infringement took place; the case was thrown out.
        </p>
        <p>
            In the middle of Apple’s case against Microsoft, Xerox sued Apple,
            hoping to establish its rights as the inventor of the desktop
            interface. The court threw out this case, too, and questioned why
            Xerox took so long to raise the issue.
            Bill Gates later reflected on these cases: “we both had this rich
            neighbor named Xerox ... I broke into his house to steal the TV set
            and found out that [Jobs] had already stolen it.”
        </p>
        <p>
            The rampant copying fueling the explosive growth of consumer
            computers meant that by 1990, the desktop user interface was
            ubiquitous; it was impossible to determine who originated any part
            of it, or who copied who. The quest to stake their claim nearly
            consumed Apple. But when they emerged, they had learned a thing or
            two. Today, Apple holds more than 2,300 design patents.
        </p>
    </div>
    <div class="l--grid-wide">
        <figure>
            <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/c6e3a601fe1273b3e15343f0d9bf3e0505307772/032f8/images/copying-5.jpg" alt="Apple's design patent for a device with rounded corners">
            <figcaption class="t--align-center">
                Apple's design patent for a device with rounded corners
            </figcaption>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>
            This story ends in 2011, with Apple suing Samsung for copying the
            design of its software and hardware products. One of the most
            remarkable claims: Samsung broke the law when it sold “a rectangular
            product with four evenly rounded corners.”
        </p>
        <p>
            The court rejected Apple’s claim to own rounded rectangles. But it
            upheld the other claims, fining Samsung a blistering $539 million
            for patent violations.
        </p>
        <p>
            Designers copy. We steal like great artists. But when we see a copy
            of our work, we’re livid. Jobs, on Google’s Android: “I will spend
            my last dying breath if I need to, and I will spend every penny of
            Apple’s $40 billion in the bank, to right this wrong. I’m going to
            destroy Android, because it’s a stolen product.”
        </p>
        <p>
            Steve Jobs was unmatched in his visionary dedication to innovation.
            But he never came to terms with the inevitability of copying.
        </p>
        <p class="copying--chapter">III</p>
        <p>
            <strong class="t--transform-uppercase">John Carmack had </strong>a
            different relationship with copying. For him, copying was a way to
            learn, a challenge to overcome, and a source of new ideas.
        </p>
        <p>
            Carmack was — still is — a brilliant coder. He’s best known for
            programming the ultraviolent and action-packed first-person shooters
            <em>Doom</em> and <em>Quake</em>. Those games pushed the limits of
            consumer computers and defined a genre. But his first real
            breakthrough game was simpler, cuter, more whimsical. It was called
            <em>Commander Keen</em>.
        </p>
        <p>
            Growing up in the early ’90s, I loved <em>Commander Keen</em>. It’s
            a goofy adventure game; you guide an eight-year-old boy wearing a
            football helmet and red Converses through alien planets, collecting
            candy bars and zapping monsters with a ray gun.
        </p>
        <p>
            <em>Keen</em> began life as a copy of another of my favorite games:
            <em>Super Mario Bros. 3</em>.
        </p>
        <p>
            Before <em>Keen</em>, Carmack was working for a subscription
            software company called Softdisk. Carmack and the other programmers
            at Softdisk churned out these games at a prodigious rate: today,
            blockbuster games can take more than five years to create;
            Softdisk produced a brand-new full-length game every single month.
        </p>
        <p>
            In September 1990, Carmack decided that for his next game, he’d try
            to tackle a new and daunting challenge: scrolling. At the time, only
            consoles like the Nintendo had enough computing power to smoothly
            scroll scenery, characters, and enemies. The PCs were stuck to
            simple one-screen-at-a-time games. But if Carmack was going to sell
            millions of games like Nintendo had with <em>Super Mario Bros.</em>,
            he needed to figure out how to recreate the effect.
        </p>
        <p>
            So, on September 19, 1990, Carmack and another developer named Tom
            Hall decided to reverse-engineer the first level of
            <em> Super Mario Bros. 3</em>. Working through the night, Carmack
            coaxed his PC into scrolling and animating the world of
            <em>Super Mario</em>; Hall jumped back and forth between a TV screen
            and his computer, playing the Nintendo version, pausing to copy the
            images pixel-for-pixel.
        </p>
    </div>
    <div class="l--grid-push-right">
        <figure class="l--flex">
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/c96ef863000c95ef229c6623f607f443a0188b7e/5e461/images/copying-6.jpg" alt="Super Mario Bros. 3">
                <figcaption>Super Mario Bros. 3<br>© Nintendo</figcaption>
            </div>
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/863a8ab20376613b64817d0347bb5aa2d62dfcf6/53f49/images/copying-7.jpg" alt="John Carmack's unlicensed PC port of Super Mario Bros. 3">
                <figcaption>
                    John Carmack's unlicensed PC port of Super Mario Bros. 3<br>
                </figcaption>
            </div>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>
            The next day, their coworkers were floored. Nobody had ever seen a
            PC game work like this. John Romero, Carmack’s closest colleague and
            future collaborator on <em>Doom</em> and <em>Quake</em>, called it
            “the fucking coolest thing on the planet.”
            He insisted that they keep copying until they had finished an exact
            replica of the full game. They were going to send it to Nintendo.
        </p>
        <hr class="copying--divider">
        <p>
            Unfortunately for Carmack and his team, Nintendo wasn’t interested
            in a PC version of <em>Super Mario</em> (their console version was
            doing just fine, thank you very much).
        </p>
        <p>
            Disappointed, but not defeated, they resolved to build a better
            version of Mario. Starting with Carmack’s code for scrolling and
            animating the screen, the coders — calling themselves Ideas from the
            Deep, keeping the game a secret from their day jobs at Softdisk —
            put their <em>Super Mario</em> copy through a complete
            metamorphosis. In place of Mario, it starred eight-year-old Billy
            Blaze. Instead of turtles and mushrooms, the enemies were aliens
            called Yorps. Instead of eating a mushroom to jump higher, Billy
            Blaze hopped on a pogo stick.
        </p>
        <figure>
            <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/3915b2dcbfbf91aa3eeb376a535ae09db487d215/e87d5/images/copying-8.jpg" alt="Commander Keen in Invasion of the Vorticons">
            <figcaption>
                <em>Commander Keen in Invasion of the Vorticons</em><br>©3D
                Realms
            </figcaption>
        </figure>
        <p>
            The debut <em>Commander Keen</em> game,
            <em>Commander Keen in Invasion of the Vorticons</em>, was a huge
            success. More than 50,000 copies were sold, making <em>Keen</em> one
            of the best-selling PC games of its time.
        </p>
        <p>
            Unlike Steve Jobs, John Carmack never changed his mind about
            copying. When his boss at Softdisk suggested that they patent
            Carmack’s PC scrolling technique, Carmack reeled. “If you ever ask
            me to patent anything,” he said, “I’ll quit.”
        </p>
        <hr class="copying--divider">
        <p>
            In a 2005 forum post, John Carmack explained his thoughts on
            patents. While patents are framed as protecting inventors, he wrote,
            that’s seldom how they’re used. Smart programmers working on hard
            problems tend to come up with the same solutions. If any one of
            those programmers patents their solution, the rest are screwed.
        </p>
        <p>
            He concluded: “I’ll have no part of it. Its [sic] basically mugging
            someone.”
        </p>
        <p>
            In his games after <em>Keen</em>, Carmack would go beyond simply
            refusing to patent his inventions. He would release the source code
            to the biggest games of the ’90s, <em>Wolfenstein 3D</em>,
            <em>Doom</em>, and <em>Quake</em>. Everyone is free to download,
            modify, or copy them.
        </p>
        <p class="copying--chapter">IV</p>
        <p>
            <strong class="t--transform-uppercase">It’s one thing to copy.</strong>
            It’s another to encourage others to copy from you. Richard Stallman
            went even further — he made copying a right.
        </p>
        <p>
            In 1983, Richard Stallman wanted to build a new operating system. At
            the time, Unix was the most popular and influential operating
            system, but it was expensive to license. Commercial licenses cost
            $20,000 — that’s $52,028 in 2020 money.
            And Unix was closed-source.
        </p>
        <p>
            So on September 27, 1983, he wrote this message on the Unix Wizards
            message board:
        </p>
        <blockquote class="t--family-mono">
            Free Unix!<br><br>
            Starting this Thanksgiving I am going to write a complete
            Unix-compatible software system called GNU (for Gnu's Not Unix), and
            give it away free to everyone who can use it. Contributions of time,
            money, programs and equipment are greatly needed.
        </blockquote>
        <p>
            That Stallman would write software and give it to others to use, for
            free, was a radical notion. To drive the point home, Stallman wrote
            a manifesto, defining the idea of
            <strong>free software</strong> (“Free software is software that
            users have the freedom to distribute and change.”) The manifesto kicked off the free software movement.
        </p>
        <p>
            The enduring innovation of Stallman’s movement was how he and his
            co-conspirators used software licenses. They flipped traditional
            licensing on its head: instead of prohibiting the copying or
            distribution of the software, a free software license guarantees the
            right of people to use, modify, distribute, and learn from its code.
        </p>
    </div>
    <p class="l--grid-push-left">
        <figure class="copying--quote">
            Instead of prohibiting the copying or distribution of the software,
            a free software license guarantees the right of people to use,
            modify, distribute, and learn from its code.
        </figure>
    </p>
    <div class="l--grid-narrow post">
        <p>
            New kinds of software licenses weren’t the only product of the free
            software movement. Ideological offshoots quickly spun out into new
            groups, like the <strong>open-source software</strong> movement.
            While Stallman’s free software faction was centered around a small
            group of hard-line progressive coders, the open-source movement was
            broad and inclusive, abandoning some of Stallman’s more political
            language to spread farther and find new audiences.
        </p>
        <p>
            Permissive licensing and distributed source control form the engine
            of modern software development. They create a feedback loop, or a
            symbiotic pair, or a living organism, or maybe even a virus: the
            tools that software developers use are themselves products of the
            open-source philosophy. Free and open-source code replicates itself,
            mutates, and spreads instantly across the world.
        </p>
        <hr class="copying--divider">
        <p>
            The free and open-source software movements (sometimes combined into
            a single acronym, FOSS) were echoed by another revolution in how
            creative works are licensed. In 2001, Lawrence Lessig, Hal Abelson,
            and Eric Eldred started Creative Commons, a non-profit and
            international network dedicated to enabling the sharing and reuse of
            “creativity and knowledge through the provision of free legal
            tools.”
        </p>
        <p>
            Nearly 20 years later, nearly half of a million images on Flickr
            have Creative Commons (or CC) licenses. Wikipedia uses CC licenses
            on all its photos and art. MIT provides more than 2,400 courses
            online for free under Creative Commons licenses. Countless millions
            of creative works have benefited from the open-source approach to
            licenses and permissions.
        </p>
    </div>
    <div class="l--grid-narrow">
        <figure>
            <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/a19baf08ad09c7e052d4064ed8cbead32c5a1a70/89826/images/copying-9.jpg" alt="An image of a feedback loop from Flickr's Creative Commons archive">
            <figcaption>
                An image of a feedback loop from Flickr's Creative Commons
                archive
            </figcaption>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>
            A decade ago, the open-source movement came to design. Michael Cho
            created
            <a href="https://unsplash.com/" target="_blank" rel="noopener">Unsplash</a>
            in 2013 to share a few photographs he thought might be useful to
            designers at startups; as of September 2020, Unsplash hosts
            2,147,579 photos, and all-time photo downloads are well over 2
            billion.
            Pablo Stanley recently released
            <a href="https://www.humaaans.com/" target="_blank" rel="noopener">Humaaans</a>, a collection of Creative Commons-licensed designs that can be
            re-assembled into editorial graphics.
            <a href="https://feathericons.com/" target="_blank" rel="noopener">Feather icons</a>,
            <a href="https://heroicons.dev/" target="_blank" rel="noopener">Heroicons</a>, and
            <a href="https://icons.getbootstrap.com/" target="_blank" rel="noopener">Bootstrap Icons</a>
            are all open-source and free-to-use collections of UI icons, used by
            designers to build websites and applications.
        </p>
        <p>
            Meanwhile, the explosion of open-source design resources has been
            bolstered by a new class of tools for sharing and collaborating on
            design.
            <a href="https://www.abstract.com/" target="_blank" rel="noopener">Abstract</a>
            is a version-control system for design that promises “collaboration
            without the chaos.” With Abstract, many designers can contribute to
            a single file, without worrying about overwriting each other's
            changes or always needing to download the latest versions. Figma,
            too, has just launched
            <a href="https://www.figma.com/community" target="_blank" rel="noopener">its community feature</a>
            , allowing designers to publish files and download each other’s
            projects. It’s not hard to imagine how this will evolve into a
            designer’s version of
            <a href="https://github.com" target="_blank" rel="noopener">GitHub</a>
            in the near future. Other design tools have followed suit: both
            Sketch and Framer have launched community content hubs, laying the
            groundwork for distributed source control.
        </p>
        <p>
            Copying is fundamental to design, just as it is to software. The
            rise of permissive licenses and version control tools makes it seem
            like copying is a new idea, an innovative approach in an industry
            that thrives on novelty. But the truth is, copying has informed art
            and industry for thousands of years.
        </p>
        <p class="copying--chapter">V</p>
        <p>
            In China, there are many concepts of a copy, each with distinct
            subtext. Fangzhipin (仿製品) are copies that are obviously different
            from the original — like small souvenir models of a statue. Fuzhipin
            (複製品) are exact, life-size reproductions of the original.
            Fuzhipin are just as valuable as originals, and have no negative
            stigma.
        </p>
        <p>
            In 1974, local farmers in the Xi’an region of China unearthed
            life-sized sculptures of soldiers made of terra cotta clay. When
            Chinese archeologists came to investigate the site, they uncovered
            figure after figure, including horses and chariots, all exquisitely
            detailed. All told, there were more than 8,000 terra cotta soldiers.
            They were dated to 210 BCE.
        </p>
        <figure>
            <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/67da4e33e9db15e360d0cd212926b8aa5e09d757/b06c3/images/copying-10.jpg" alt="Terracotta warriors, Xi'an city">
            <figcaption>Terracotta warriors, Xi'an city</figcaption>
        </figure>
        <p>
            The terracotta warriors instantly became cultural treasures. A
            museum was built on the site of the excavation, but many of the
            statues were also exhibited in traveling shows. Hundreds of
            thousands of museumgoers all over the world lined up in galleries to
            see the soldiers.
        </p>
        <p>
            Then, in 2007, a revelation rocked the Museum für Völkerkunde in
            Hamburg, Germany: some of the terracotta warriors it had on display
            were not the originals that had been discovered in the field in
            Xi’an. They were copies.
        </p>
        <p>
            The Museum für Völkerkunde’s director became a pariah: “We have come
            to the conclusion that there is no other option than to close the
            exhibition completely, in order to maintain the museum’s good
            reputation.” The museum issued refunds to visitors. The event kicked
            off a rash of geopolitical finger-pointing: German officials cried
            foul, saying they were duped; Chinese officials washed their hands,
            since they never claimed the statues were originals to begin with.
        </p>
        <p>
            The statues in the Hamburg museum were fuzhipin, exact copies. They
            were equivalent to the originals. After all, the originals were
            themselves products of mass manufacturing, made with modules and
            components cast from molds. Almost as soon as the terracotta
            warriors were discovered, Chinese artisans began producing replicas,
            continuing the work that had started more than 2,000 years
            before.
        </p>
        <hr class="copying--divider">
        <p>
            It’s easy to attribute this approach to copying as a cultural
            curiosity, an aberration particular to China. But copying was just
            as vital to Western artists.
        </p>
        <p>
            Japanese art was one of the main sources of inspiration for Vincent
            van Gogh, himself one of the most influential European painters of
            the 19th century, if not of all time. Van Gogh was fascinated by the
            woodblock prints of artists like Hiroshige: stylized and vivid, they
            captured dramatic moments within compelling stories.
        </p>
        <p>
            Van Gogh’s interest went beyond inspiration. To study the techniques
            mastered by Japanese artists, he copied prints by Keisei Eisen and
            Utagawa Hiroshige. He tried to replicate their bold lines, their
            energetic compositions, and their strong colors. For his copy of
            Eisen’s A courtesan, van Gogh started by tracing the outline of the
            courtesan’s figure directly from the May 1886 edition of Paris
            Illustré. For Flowering Plum Tree and The Bridge in the Rain, both
            copies of Hiroshige prints, he added borders of Japanese calligraphy
            he had seen on other prints.
        </p>
    </div>
    <div class="l--grid-push-right">
        <figure class="l--flex">
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/6a6a1d3bacb2409aee732c112317ab78697b83ff/ba1c6/images/copying-11.jpg" alt="Sudden Shower over Shin-Ōhashi bridge and Atake (1857) by Hiroshige">
                <figcaption>
                    <em>Sudden Shower over Shin-Ōhashi bridge and Atake</em>
                    (1857) by Hiroshige
                </figcaption>
            </div>
            <div class="l--flex-half">
                <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/abe088ff554219cdb7d1562a5a54a91c586e2bba/be71d/images/copying-12.jpg" alt="The Bridge in the Rain (after Hiroshige) (1887) by Vincent Van Gogh">
                <figcaption>
                    <em>The Bridge in the Rain (after Hiroshige)</em> (1887) by
                    Vincent Van Gogh
                </figcaption>
            </div>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>
            His practice with Japanese styles provided a crucial breakthrough.
            Van Gogh began to flatten landscapes. He outlined his subjects in
            bold black strokes. He painted with eye-watering colors. His
            interpretations of reality lit the art world on fire, influencing
            artists and designers to this day.
        </p>
        <p>
            By copying directly from Japanese artists, van Gogh’s works became
            what we know today.
        </p>
        <p>
            He was clear about this influence. In a letter to his brother Theo,
            he wrote: “All my work is based to some extent on Japanese art.”
        </p>
        <hr class="copying--divider">
        <p>
            There’s another word in Chinese for a copy: shanzhai (山寨). It’s
            translated to English as “fake,” but as with most Chinese words, the
            translation is lacking. Shanzhai literally means “mountain
            stronghold;” the word is a neologism, a recent invention, inspired
            by a famous novel in which the protagonists hide in a mountain
            stronghold to fight against a corrupt regime. Shanzhai products are
            playful, drawing attention to the fact that they aren’t original,
            putting their makers’ creativity on display.
        </p>
        <p>
            Take the popular shanzhai novel
            <em>Harry Potter and the Porcelain Doll</em>; in it, Harry goes to
            China to stop Voldemort and Voldemort’s Chinese counterpart. It
            doesn’t pretend to be an original. It plays on its fake-ness: Harry
            speaks Chinese fluently, but he has trouble eating with chopsticks.
        </p>
        <p>
            It’s easy to think of shanzhai as a Chinese quirk, but there are
            parallels in Western culture. One in particular, is a staple of the
            design community: the unsolicited redesign.
        </p>
        <p>
            An unsolicited redesign demonstrates a designer’s ideas for how a
            well-known website or app could be improved. They range from
            single-screen aesthetic tweaks (like
            <a href="https://dribbble.com/shots/13154163-Instafresh" target="_blank" rel="noopener">this take on Instagram</a>) to in-depth case studies in UX, IA, and content design (like
            <a href="https://blog.prototypr.io/gmail-an-unsolicited-redesign-1-2b244886eef8" target="_blank" rel="noopener">this redesign of Gmail’s mobile app</a>).
        </p>
        <p>
            Unsolicited redesigns copy the visual elements of the original as a
            starting point, then transform those elements to produce something
            new. Like van Gogh tracing Eisen, designers can pick up new
            techniques and approaches just by copying. But when a designer riffs
            on the original, they can create something new and inspiring.
        </p>
        <p>
            The design community has a complicated relationship with unsolicited
            redesigns. On the one hand, they’re the mainstay of talented young
            designers looking to demonstrate their ability to think critically
            about design and apply their skills. Companies have used the
            unsolicited redesign to position themselves as leaders: in 2003,
            37signals (creator of the popular project management tool Basecamp)
            created redesigns of PayPal, Google, and FedEx to critical acclaim:
            their redesign of an online car dashboard “could do for cars what
            TiVo did for television,” Jason Kottke proclaimed.
        </p>
        <p>
            In rare cases, unsolicited redesigns turn into solicited ones. In
            2018, Adam Fisher-Cox published a redesign of the digital signage of
            the AirTrain system at John F. Kennedy International Airport. The
            agency overseeing AirTrain saw the redesign and hired Fisher-Cox to
            implement it.
        </p>
    </div>
    <div class="l--grid-wide">
        <figure>
            <div class="l--flex">
                <div class="l--flex-half">
                    <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/6d01670fb1837936a4144c089965129891fe8d72/24ae4/images/copying-13.jpg" alt="The old signage for JFK's AirTrain">
                    <figcaption>The old signage for JFK's AirTrain</figcaption>
                </div>
                <div class="l--flex-half">
                    <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/aea3c4615e8e7da46ad389562cfc0c3151a70e74/9f2fd/images/copying-14.jpg" alt="The beginning of Adam's redesign, copying directly from the existing signage">
                    <figcaption>
                        The beginning of the redesign, copying directly from the
                        existing signage
                    </figcaption>
                </div>
            </div>
            <div class="l--flex">
                <div>
                    <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/4b78ae72718afd062c56551468d4cc3ab3e61f3a/8d4e6/images/copying-15.jpg" alt="The final redesign comissioned by the agency in charge of AirTrain">
                    <figcaption>
                        The final redesign comissioned by the agency in charge
                        of AirTrain. All images courtesy
                        <a href="https://adamfishercox.com/portfolio/airtrain-arrival-signs/">Adam Fisher-Cox.</a>
                    </figcaption>
                </div>
            </div>
        </figure>
    </div>
    <div class="l--grid-narrow post">
        <p>
            On the other hand, unsolicited redesigns are often looked down on.
            In a 2013 essay titled “Keep Your Unsolicited Redesign to
            Yourself,”
            Eric Karjaluoto argued that without acknowledging the constraints
            and incentives that guided an original design, the redesign is
            “utter fluff.” Those working on unsolicited redesigns “should know
            better than to waste their time.” There are countless other
            invectives against unsolicited redesign across the internet of
            design blogs.
        </p>
        <p>
            In 2011,
            <a href="https://web.archive.org/web/20111208041110/https://andyrutledge.com/news-redux.php" target="_blank" rel="noopener">Andy Rutledge’s unsolicited redesign of <em>The New York Times</em></a>
            drew the attention of design pundits in countless blog posts and
            tweets.
            But if they disagreed with Rutledge’s conclusions, many defended his
            approach. “Sometimes we need to go crazy and mock up stuff that
            can’t absolutely work in its pure form,” wrote Stijn Debrouwere,
            because “a full-on rethink might be what we need to move
            forward.”
            Even Khoi Vinh, previous design director for the Times, supported
            the practice: “Unsolicited redesigns are terrific and fun and
            useful, and I hope designers never stop doing them.”
        </p>
        <p>
            The shanzhai approach of copying — to learn, to invent, to comment,
            to make a statement — is just at home in the West as it is in China.
        </p>
        <p class="copying--chapter">VI</p>
        <p>
            Copying can be instructive, challenging, devious, or revolutionary.
            To me, copying is fun.
        </p>
        <p>
            When I was young, I liked to trace. My mom would buy me tracing
            paper, and I’d copy comic book characters line for line. Pulling the
            paper back from the original was a rush. I drew this! With my hand!
            Sure, it was a copy, but once I signed my name in the corner, it was
            my copy.
        </p>
        <p>
            These days, there’s automatic copy protection on just about
            everything. You can’t easily pirate Netflix streams, copy Kindle
            books, or torrent Adobe Creative Cloud. But designs are different.
            To copy a design, all you need is tracing paper.
        </p>
        <p>
            In fact, you don’t even have to draw. Pull out your phone, take a
            picture, and save it to your Pinterest board. You can use a color
            picker to extract the exact shade from the design, use a physical or
            digital measuring tool to get the pixel-perfect dimensions, and use
            <a href="https://www.myfonts.com/WhatTheFont/" target="_blank" rel="noopener">WhatTheFont</a>
            to learn the typefaces in the design.
        </p>
        <p>
            If you’re looking at a website, you can just click “view source” and
            see all the design decisions laid out in granular detail. That’s
            exactly how I went from tracing comic books to being a designer: I
            copied designs from websites I liked and pasted them onto my Xanga
            blog.
        </p>
        <p>I copied because I could.</p>
        <p>
            In my first design job, I copied relentlessly. I had created a music
            magazine with friends and tried to recreate the layouts I saw in my
            favorite mags. Wired was a constant source of inspiration: I
            obsessed over their typography. When I figured out that they were
            using Joshua Darden’s Freight Micro, I switched our magazine to use
            it, too.
        </p>
        <p>
            Copying helped me develop as a designer without needing to go to
            design school. For lots of people too young for college-level design
            programs, or without the means to attend these schools or bootcamps,
            copying serves the same function.
        </p>
        <p>
            And then, when folks like me wind up in a career in design, we find
            that copying is still useful. I eyedropper colors from Apple’s
            marketing websites. I start my color palettes from Google’s Material
            Design examples. I screenshot and recreate components from
            Facebook’s new redesign.
        </p>
        <p>
            I don’t fancy myself to be the van Gogh of design, to be anywhere on
            the level of Stallman or Carmack in my approach to copying,
            possessing even one-one-hundredth of Steve Jobs’ ability to steal
            artfully, or to be in any way comparable to Charles or Ray Eames.
            But I can certainly copy all of their work. I can copy their
            mindset, their process, and their designs.
        </p>
        <p>
            I can make cheap, small-scale facsimiles, fangzhipin, to demonstrate
            some quality of the original. I can make exact replicas,
            pixel-perfect fuzhipin, to learn how the originals and their
            creators work. Or I can create shanzhai, unsolicited redesigns,
            commenting and riffing on the work of others. All these copies have
            an important role to play in the process of design.
        </p>
        <p>
            Whether you believe that it’s worthwhile or worthless to copy,
            whether you think that copies are a valuable part of the design
            community or a scourge, you are using software, hardware, websites
            and apps that all owe their existence to copying.
        </p>
        <p>As long as there is design, there will be copying.</p>
        <hr>
    </div>
    
    
 </div>
--- a/cache/2021/63317c91823b52571b851e7a27eb7b4f/index.html
+++ b/cache/2021/63317c91823b52571b851e7a27eb7b4f/index.html
@@ -0,0 +1,198 @@
 <!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>How I Build JavaScript Apps In 2021 (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://timdaub.github.io/2021/01/16/web-principles/">

 <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>How I Build JavaScript Apps In 2021</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.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://timdaub.github.io/2021/01/16/web-principles/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>It's now roughly seven or eight years that I'm building dynamic front ends for the web. From <a target="_blank" rel="noopener" href="https://www.ascribe.io/">digital art wallets</a> to games (<a target="_blank" rel="noopener" href="https://ipfs.leapdao.org/blog/Planet-A-ccc-ethberlin-recap/">1</a>, <a href="https://timdaub.github.io/videogame">2</a>) and <a href="https://timdaub.github.io/wasm-synth">synthesizers</a>, I've seen it all. And since my process of creation has dramatically changed over the years, today, I'd like to share how I'm developing web apps in 2021.</p>
 <h2 id="i-avoid-build-processes.">I avoid build processes.</h2>
 <p>I still remember the debates with colleagues about using <a target="_blank" rel="noopener" href="https://babeljs.io/">babel</a> a few years ago. Within the front end development world, transpiling had just become a thing, so we ended up babelifying our builds to use ES6. Our argument back then was that one day, we would be able to push our application's directory structure on a web server and since all browsers would then support the augmented ES6 features, our app would just work! Without a build process. WOW! That must have been around 2015. When I look at the source code of these old applications now, our technical visions didn't end up becoming reality.</p>
 <p>Now, I try to keep my build process to a minimum. When I need to write a demo app, I particularly like using <a target="_blank" rel="noopener" href="https://babeljs.io/docs/en/babel-standalone#script-tags"><code>&lt;script type="text/babel"&gt;</code></a>. I love <a target="_blank" rel="noopener" href="https://preactjs.com/guide/v10/getting-started/#no-build-tools-route">preact's "no build tools route."</a> too. When I have to set up an actual app, I avoid <a target="_blank" rel="noopener" href="https://webpack.js.org/">webpack</a> and <a target="_blank" rel="noopener" href="https://rollupjs.org/">rollup</a>. I mainly get frustrated about the myriad ways of configuring them. Some minor thing always ends up being broken, which leads to hours of debugging foreign code. And that's frustrating. Using preact's no build route, finally something like the above is possible:</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"module"</span>&gt;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">import</span> { h, Component, render } <span class="keyword">from</span> <span class="string">'https://unpkg.com/preact?module'</span>;</span><br><span class="line">  <span class="keyword">const</span> app = h(<span class="string">'h1'</span>, <span class="literal">null</span>, <span class="string">'Hello World!'</span>);</span><br><span class="line">  render(app, <span class="built_in">document</span>.body);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
 <p>When having to use a build tool, I gravitate towards <a target="_blank" rel="noopener" href="https://parceljs.org/">parcel</a> or <a target="_blank" rel="noopener" href="https://github.com/developit/microbundle">microbundle</a> as they come preconfigured. And in particular, parcel is excellent, as it's merely using an HTML file as its entry point. To me, that's promising as it assumes a proper directory structure and properly connected files such that maybe one day I can push my app to the web without that build step.</p>
 <h2 id="i-avoid-transpiling.">I avoid transpiling.</h2>
 <p>For the same reasons as pointed out above, I also try to avoid transpiling. It's not because I don't like ESNext features, but more because I want to minimize the risk of getting stuck with the transpiler. Hence, I try to avoid using babel. <a href="https://timdaub.github.io/2020/09/01/typescript/">I also don't use Typescript</a>. To me, JavaScript is productive enough. Additionally, for <a target="_blank" rel="noopener" href="https://reactjs.org/">react</a>-style projects, no transpilers mean I stopped using <a target="_blank" rel="noopener" href="https://reactjs.org/docs/introducing-jsx.html">JSX</a>. Instead, I found an excellent library called <a target="_blank" rel="noopener" href="https://github.com/developit/htm">htm</a> that uses JavaScript's template strings. It has a similar syntax to JSX, but it's not breaking ECMAScript standards and hence needs no transpliation.</p>
 <h2 id="i-avoid-the-new-and-shiny.">I avoid the <em>new</em> and <em>shiny</em>.</h2>
 <p>I even avoid changing the way I work if I don't feel comfortable or inclined. For example, I never switched to <a target="_blank" rel="noopener" href="https://reactjs.org/docs/hooks-intro.html">react hooks</a>. The <a target="_blank" rel="noopener" href="https://reactjs.org/docs/state-and-lifecycle.html">lifecycle methods</a> that I initially know from iOS Objective-C programming are - in my opinion - a beautiful metaphor for writing front end components. And neither did I have any issues with my sites' performance. I would make the switch if I started to have problems. But I don't. The same goes for up and coming frameworks. Angular V2? <a target="_blank" rel="noopener" href="https://svelte.dev/">Svelte</a>? Cool, but why relearn a framework when I'm already productive with the one I use?</p>
 <h2 id="i-test-everything.">I test EvErYtHiNg.</h2>
 <p>When I started front-end development, testing was complicated. Only a few front end developer colleagues tested their apps properly. I ended up doing a lot of testing by hand. It was frustrating and unproductive. But testing front ends has improved dramatically over the years. Not only have the tools been significantly enhanced.</p>
 <p>We, as front-end developers, have now also figured out how to correctly write front end tests. Finally, we're able to distinguish between functional code and presentational code. For functional code, we now write unit tests. For presentational code, we use snapshot-based testing and integration tests. I'm pleased about tools like <a target="_blank" rel="noopener" href="https://www.cypress.io/">cypress</a> that is great for integration tests. I also like <a target="_blank" rel="noopener" href="https://github.com/avajs/ava/">ava</a> for unit tests.</p>
 <h2 id="i-optimize-for-performance-and-quality.">I optimize for performance and quality.</h2>
 <p>I used to be eager about building extensively functional software: the more features, the better. I'm not anymore. Instead, I try to develop software that works well for my users. I strive for quality. So I try to measure my build's size. I take proper care about delivering my application, meaning I turn on compression and <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching">caching</a>. I care about optimizing my static assets like pictures. And I like to check my apps by using tools like <a target="_blank" rel="noopener" href="https://developers.google.com/speed/pagespeed/insights/?hl=de">PageSpeed Insights</a> or <a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/lighthouse">lighthouse</a>.</p>
 <h2 id="i-use-my-own-work">I use my own work</h2>
 <p>From experience, I learned that I hardly ever get stuck on a algorithmic problem. On the contrary, I get motivated to learn something new and excel in the process. However, I caught my self often spending many hours on debugging other people's code. Mainly when it's third-party libraries that I included via npm. Once, I thought that using npm packages was a JavaScript developer's superpower. Now, I know that it can also be their curse.</p>
 <p>Instead of collecting heaps of third-party code, I now prefer following <a target="_blank" rel="noopener" href="http://hintjens.com/blog:96">Peter Hintjens' principles for writing good code</a>. I "use my own work." Meaning, I dare to write seemingly complex code myself. I still won't roll my own crypto or write a date library, but I dare to implement parts of a protocol or build an algorithm. It's not to say that I ditch every npm package and go npm-keto-diet. No, instead, I take a more mindful approach towards dependencies and only include them when I truly need them.</p>
 <p>I try to do that by leaving my technical vision at the doorstep of my office, so that I can now focus on solving the problems at hand. I try to stop worrying about eventualities far in the future as I view that as speculation. In cases I have past experiences, I use it to form my decision. For unchartered teritory, I move carefully, step by step.</p>
 <h2 id="i-use-open-source-to-my-advantage.">I use open source to my advantage.</h2>
 <p>I'm building websites since I'm a teenager. And had I open-sourced and maintained a few pieces of code that I need frequently, I'd be more productive now. Unfortunately, I was short-sighted. Surprisingly, I didn't think about still using JavaScript at 29 years of age 😂</p>
 <p>I stopped framing open source mainly around certain virtues like free speech, fairness or certain politics. They're still important virtues for me, but I learned that I could use open source also for building a personal toolset.</p>
 <p>Extracting a library from a codebase allows me to think about it from a user's perspective. It means I'm able to think about a piece of code's interfaces emphatically. Additionally, there's positive peer pressure. I'm not going to release shit to the world. When my project is public, it's going to have a proper README and some docs. And it's going to be tested. Since everybody can see it, I might as well create something I can be proud of.</p>
 <p>Hence, contributing to open source, for me, is about building high-quality software. Being anxious about not being able to monetize this particular piece of code has become less of a concern. <a target="_blank" rel="noopener" href="https://github.com/sindresorhus">sindresohrus</a> inspired me to treat open source packages like my personal toolbox.</p>
 <h2 id="conclusion">Conclusion</h2>
 <p>And that's my incomplete list of principles. I'm sure there's more than just these. Anyway, I still find some of these points quite controversial. I'm sure they won't work for everyone as all our contexts differ. But working solo as a freelancer, I've found that these principles contribute to me being content about what I'm doing. Hence, I was eager to share them.</p>
 <p>I'm curious to hear other's thoughts and see if they've taken similar paths. Please reach out! Also, don't forget to subscribe to my newsletter!</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.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.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.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.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.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.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/2021/63317c91823b52571b851e7a27eb7b4f/index.md
+++ b/cache/2021/63317c91823b52571b851e7a27eb7b4f/index.md
@@ -0,0 +1,31 @@
 title: How I Build JavaScript Apps In 2021
 url: https://timdaub.github.io/2021/01/16/web-principles/
 hash_url: 63317c91823b52571b851e7a27eb7b4f

 <p>It's now roughly seven or eight years that I'm building dynamic front ends for the web. From <a target="_blank" rel="noopener" href="https://www.ascribe.io/">digital art wallets</a> to games (<a target="_blank" rel="noopener" href="https://ipfs.leapdao.org/blog/Planet-A-ccc-ethberlin-recap/">1</a>, <a href="https://timdaub.github.io/videogame">2</a>) and <a href="https://timdaub.github.io/wasm-synth">synthesizers</a>, I've seen it all. And since my process of creation has dramatically changed over the years, today, I'd like to share how I'm developing web apps in 2021.</p>
 <h2 id="i-avoid-build-processes.">I avoid build processes.</h2>
 <p>I still remember the debates with colleagues about using <a target="_blank" rel="noopener" href="https://babeljs.io/">babel</a> a few years ago. Within the front end development world, transpiling had just become a thing, so we ended up babelifying our builds to use ES6. Our argument back then was that one day, we would be able to push our application's directory structure on a web server and since all browsers would then support the augmented ES6 features, our app would just work! Without a build process. WOW! That must have been around 2015. When I look at the source code of these old applications now, our technical visions didn't end up becoming reality.</p>
 <p>Now, I try to keep my build process to a minimum. When I need to write a demo app, I particularly like using <a target="_blank" rel="noopener" href="https://babeljs.io/docs/en/babel-standalone#script-tags"><code>&lt;script type="text/babel"&gt;</code></a>. I love <a target="_blank" rel="noopener" href="https://preactjs.com/guide/v10/getting-started/#no-build-tools-route">preact's "no build tools route."</a> too. When I have to set up an actual app, I avoid <a target="_blank" rel="noopener" href="https://webpack.js.org/">webpack</a> and <a target="_blank" rel="noopener" href="https://rollupjs.org/">rollup</a>. I mainly get frustrated about the myriad ways of configuring them. Some minor thing always ends up being broken, which leads to hours of debugging foreign code. And that's frustrating. Using preact's no build route, finally something like the above is possible:</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"module"</span>&gt;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">import</span> { h, Component, render } <span class="keyword">from</span> <span class="string">'https://unpkg.com/preact?module'</span>;</span><br><span class="line">  <span class="keyword">const</span> app = h(<span class="string">'h1'</span>, <span class="literal">null</span>, <span class="string">'Hello World!'</span>);</span><br><span class="line">  render(app, <span class="built_in">document</span>.body);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
 <p>When having to use a build tool, I gravitate towards <a target="_blank" rel="noopener" href="https://parceljs.org/">parcel</a> or <a target="_blank" rel="noopener" href="https://github.com/developit/microbundle">microbundle</a> as they come preconfigured. And in particular, parcel is excellent, as it's merely using an HTML file as its entry point. To me, that's promising as it assumes a proper directory structure and properly connected files such that maybe one day I can push my app to the web without that build step.</p>
 <h2 id="i-avoid-transpiling.">I avoid transpiling.</h2>
 <p>For the same reasons as pointed out above, I also try to avoid transpiling. It's not because I don't like ESNext features, but more because I want to minimize the risk of getting stuck with the transpiler. Hence, I try to avoid using babel. <a href="https://timdaub.github.io/2020/09/01/typescript/">I also don't use Typescript</a>. To me, JavaScript is productive enough. Additionally, for <a target="_blank" rel="noopener" href="https://reactjs.org/">react</a>-style projects, no transpilers mean I stopped using <a target="_blank" rel="noopener" href="https://reactjs.org/docs/introducing-jsx.html">JSX</a>. Instead, I found an excellent library called <a target="_blank" rel="noopener" href="https://github.com/developit/htm">htm</a> that uses JavaScript's template strings. It has a similar syntax to JSX, but it's not breaking ECMAScript standards and hence needs no transpliation.</p>
 <h2 id="i-avoid-the-new-and-shiny.">I avoid the <em>new</em> and <em>shiny</em>.</h2>
 <p>I even avoid changing the way I work if I don't feel comfortable or inclined. For example, I never switched to <a target="_blank" rel="noopener" href="https://reactjs.org/docs/hooks-intro.html">react hooks</a>. The <a target="_blank" rel="noopener" href="https://reactjs.org/docs/state-and-lifecycle.html">lifecycle methods</a> that I initially know from iOS Objective-C programming are - in my opinion - a beautiful metaphor for writing front end components. And neither did I have any issues with my sites' performance. I would make the switch if I started to have problems. But I don't. The same goes for up and coming frameworks. Angular V2? <a target="_blank" rel="noopener" href="https://svelte.dev/">Svelte</a>? Cool, but why relearn a framework when I'm already productive with the one I use?</p>
 <h2 id="i-test-everything.">I test EvErYtHiNg.</h2>
 <p>When I started front-end development, testing was complicated. Only a few front end developer colleagues tested their apps properly. I ended up doing a lot of testing by hand. It was frustrating and unproductive. But testing front ends has improved dramatically over the years. Not only have the tools been significantly enhanced.</p>
 <p>We, as front-end developers, have now also figured out how to correctly write front end tests. Finally, we're able to distinguish between functional code and presentational code. For functional code, we now write unit tests. For presentational code, we use snapshot-based testing and integration tests. I'm pleased about tools like <a target="_blank" rel="noopener" href="https://www.cypress.io/">cypress</a> that is great for integration tests. I also like <a target="_blank" rel="noopener" href="https://github.com/avajs/ava/">ava</a> for unit tests.</p>
 <h2 id="i-optimize-for-performance-and-quality.">I optimize for performance and quality.</h2>
 <p>I used to be eager about building extensively functional software: the more features, the better. I'm not anymore. Instead, I try to develop software that works well for my users. I strive for quality. So I try to measure my build's size. I take proper care about delivering my application, meaning I turn on compression and <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching">caching</a>. I care about optimizing my static assets like pictures. And I like to check my apps by using tools like <a target="_blank" rel="noopener" href="https://developers.google.com/speed/pagespeed/insights/?hl=de">PageSpeed Insights</a> or <a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/lighthouse">lighthouse</a>.</p>
 <h2 id="i-use-my-own-work">I use my own work</h2>
 <p>From experience, I learned that I hardly ever get stuck on a algorithmic problem. On the contrary, I get motivated to learn something new and excel in the process. However, I caught my self often spending many hours on debugging other people's code. Mainly when it's third-party libraries that I included via npm. Once, I thought that using npm packages was a JavaScript developer's superpower. Now, I know that it can also be their curse.</p>
 <p>Instead of collecting heaps of third-party code, I now prefer following <a target="_blank" rel="noopener" href="http://hintjens.com/blog:96">Peter Hintjens' principles for writing good code</a>. I "use my own work." Meaning, I dare to write seemingly complex code myself. I still won't roll my own crypto or write a date library, but I dare to implement parts of a protocol or build an algorithm. It's not to say that I ditch every npm package and go npm-keto-diet. No, instead, I take a more mindful approach towards dependencies and only include them when I truly need them.</p>
 <p>I try to do that by leaving my technical vision at the doorstep of my office, so that I can now focus on solving the problems at hand. I try to stop worrying about eventualities far in the future as I view that as speculation. In cases I have past experiences, I use it to form my decision. For unchartered teritory, I move carefully, step by step.</p>
 <h2 id="i-use-open-source-to-my-advantage.">I use open source to my advantage.</h2>
 <p>I'm building websites since I'm a teenager. And had I open-sourced and maintained a few pieces of code that I need frequently, I'd be more productive now. Unfortunately, I was short-sighted. Surprisingly, I didn't think about still using JavaScript at 29 years of age 😂</p>
 <p>I stopped framing open source mainly around certain virtues like free speech, fairness or certain politics. They're still important virtues for me, but I learned that I could use open source also for building a personal toolset.</p>
 <p>Extracting a library from a codebase allows me to think about it from a user's perspective. It means I'm able to think about a piece of code's interfaces emphatically. Additionally, there's positive peer pressure. I'm not going to release shit to the world. When my project is public, it's going to have a proper README and some docs. And it's going to be tested. Since everybody can see it, I might as well create something I can be proud of.</p>
 <p>Hence, contributing to open source, for me, is about building high-quality software. Being anxious about not being able to monetize this particular piece of code has become less of a concern. <a target="_blank" rel="noopener" href="https://github.com/sindresorhus">sindresohrus</a> inspired me to treat open source packages like my personal toolbox.</p>
 <h2 id="conclusion">Conclusion</h2>
 <p>And that's my incomplete list of principles. I'm sure there's more than just these. Anyway, I still find some of these points quite controversial. I'm sure they won't work for everyone as all our contexts differ. But working solo as a freelancer, I've found that these principles contribute to me being content about what I'm doing. Hence, I was eager to share them.</p>
 <p>I'm curious to hear other's thoughts and see if they've taken similar paths. Please reach out! Also, don't forget to subscribe to my newsletter!</p>
--- a/cache/2021/74eae1dc26bd4537941491b4e7e201bc/index.html
+++ b/cache/2021/74eae1dc26bd4537941491b4e7e201bc/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>Cheating Entropy with Native Web Technologies (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/2020/cheating-entropy-with-native-web-tech/">

 <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>Cheating Entropy with Native Web Technologies</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.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://blog.jim-nielsen.com/2020/cheating-entropy-with-native-web-tech/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <blockquote>
 <p>90% of my computer usage is updating computers. – Paul Ford, <a href="https://postlight.com/podcast">Postlight Podcast</a></p>
 </blockquote>
 <p>I have a number of old side projects which I occasionally have to revisit. The structure of these projects broadly falls under two categories:</p>
 <ol>
 <li>Ones I built with a mindset of having my starting point be the most basic, native web technology available. From that foundation, I enhanced functionality through layering on more sophisticated and experimental techniques, APIs, etc., where supported. All code was authored in vanilla HTML, CSS, and JavaScript. </li>
 <li>Ones I built with a mindset of having my starting point be abstractions of native web technology (frameworks, tooling, language sub/supersets).</li>
 </ol>
 <p>When I open an old project like number two (described above), I find entropy staring me back in the face: library updates, breaking API changes, refactored mental models, and possible downright obsolescence. An incredible amount of effort will be required to make a simple change, test it, and get it live.</p>
 <p>Conversely when I open an old project like number one (described above), I find myself relieved. A project authored in native web technologies, enhanced with an eye towards the future, with little or no tooling, leaves me facing few obstacles. Remove a couple shims that are no longer needed and that’s about it. Imagine that: you can remove code to update a project?</p>
 <p>The contrast between these two approaches has been on my mind as of late and spurred me to write down my thoughts.</p>
 <blockquote>
 <p>Any time you’re doing a side project, the first few days is really just fighting build tools, like “Okay, I wanted Sass, but now I’m stuck.” – Dave Rupert, <a href="https://shoptalkshow.com/432/">Shop Talk Show #432</a>:</p>
 </blockquote>
 <p>HTML 4 and HTML 5, CSS 2 and CSS 3, those numbers aren’t about semver and communicating breaking change. HTML 4 and HTML 5 is very different than Angular 1 and Angular 2. The promise of the web is that there are no breaking changes. HTML, CSS, and JS are, in a semver sense, still at version <code>1.x</code>. Whatever you wrote in 2018 or 2008 will still work. On the other hand, a project built on abstractions from native web technologies—frameworks, tooling, language sub/supersets—will contain innumerable dependencies with countless major version changes over time. Updating a single dependency often requires updating <em>everything</em>. Building on top of base web technologies, where possible, is a way to cheat the entropy and churn of modern web technology abstractions.</p>
 <p>This is why, over years of building for the web, I have learned  that I can significantly cut down on the entropy my future self will have to face by authoring web projects in vanilla HTML, CSS, and JS. I like to ask myself questions like:</p>
 <ul>
 <li>Could this be done with native ES modules instead of using a bundler?</li>
 <li>Could I do this with DOM scripting instead of using a JS framework?</li>
 <li>Could I author this in CSS instead of choosing a preprocessor? </li>
 </ul>
 <p>The more I author code <em>as it will be run by the browser</em> the easier it will be to maintain that code over time, despite its perceived inferior developer ergonomics (remember, developer experience encompasses both the present <em>and the future</em>, i.e. “how simple are the ergonomics to build this now <em>and maintain it into the future</em>?) I don’t mind typing some extra characters <em>now</em> if it means I don’t have to learn/relearn, setup, configure, integrate, update, maintain, and inevitably troubleshoot a build tool or framework <em>later</em>.</p>
 <p>In my experience, authoring vanilla CSS using selectors that largely repeat is easier than more tersely authoring nested selectors but having to maintain Sass over time. </p>
 <p>Similarly, authoring vanilla JS without language transpilation, bundling, etc., is easier than building and maintaining something like Babel + Webpack over time.</p>
 <p>Take a moment and think about this super power: if you write vanilla HTML, CSS, and JS, all you have to do is put that code in a web browser and it runs. Edit a file, refresh the page, you’ve got a feedback cycle. As soon as you introduce tooling, as soon as you introduce an abstraction not native to the browser, you may have to invent the universe for a feedback cycle. No longer writing CSS and instead writing Sass? Now you need a development server with a build process to watch your files and compile your changes <em>just to develop and test your project</em>. You’ve just added a giant, blocking dependency for your project to work. And if you can’t get that dependency working, your project is dead in the water until you can—both now and in the future. </p>
 </article>


 <hr>

 <footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.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.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.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.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.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.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/2021/74eae1dc26bd4537941491b4e7e201bc/index.md
+++ b/cache/2021/74eae1dc26bd4537941491b4e7e201bc/index.md
@@ -0,0 +1,29 @@
 title: Cheating Entropy with Native Web Technologies
 url: https://blog.jim-nielsen.com/2020/cheating-entropy-with-native-web-tech/
 hash_url: 74eae1dc26bd4537941491b4e7e201bc

 <blockquote>
 <p>90% of my computer usage is updating computers. – Paul Ford, <a href="https://postlight.com/podcast">Postlight Podcast</a></p>
 </blockquote>
 <p>I have a number of old side projects which I occasionally have to revisit. The structure of these projects broadly falls under two categories:</p>
 <ol>
 <li>Ones I built with a mindset of having my starting point be the most basic, native web technology available. From that foundation, I enhanced functionality through layering on more sophisticated and experimental techniques, APIs, etc., where supported. All code was authored in vanilla HTML, CSS, and JavaScript. </li>
 <li>Ones I built with a mindset of having my starting point be abstractions of native web technology (frameworks, tooling, language sub/supersets).</li>
 </ol>
 <p>When I open an old project like number two (described above), I find entropy staring me back in the face: library updates, breaking API changes, refactored mental models, and possible downright obsolescence. An incredible amount of effort will be required to make a simple change, test it, and get it live.</p>
 <p>Conversely when I open an old project like number one (described above), I find myself relieved. A project authored in native web technologies, enhanced with an eye towards the future, with little or no tooling, leaves me facing few obstacles. Remove a couple shims that are no longer needed and that’s about it. Imagine that: you can remove code to update a project?</p>
 <p>The contrast between these two approaches has been on my mind as of late and spurred me to write down my thoughts.</p>
 <blockquote>
 <p>Any time you’re doing a side project, the first few days is really just fighting build tools, like “Okay, I wanted Sass, but now I’m stuck.” – Dave Rupert, <a href="https://shoptalkshow.com/432/">Shop Talk Show #432</a>:</p>
 </blockquote>
 <p>HTML 4 and HTML 5, CSS 2 and CSS 3, those numbers aren’t about semver and communicating breaking change. HTML 4 and HTML 5 is very different than Angular 1 and Angular 2. The promise of the web is that there are no breaking changes. HTML, CSS, and JS are, in a semver sense, still at version <code>1.x</code>. Whatever you wrote in 2018 or 2008 will still work. On the other hand, a project built on abstractions from native web technologies—frameworks, tooling, language sub/supersets—will contain innumerable dependencies with countless major version changes over time. Updating a single dependency often requires updating <em>everything</em>. Building on top of base web technologies, where possible, is a way to cheat the entropy and churn of modern web technology abstractions.</p>
 <p>This is why, over years of building for the web, I have learned  that I can significantly cut down on the entropy my future self will have to face by authoring web projects in vanilla HTML, CSS, and JS. I like to ask myself questions like:</p>
 <ul>
 <li>Could this be done with native ES modules instead of using a bundler?</li>
 <li>Could I do this with DOM scripting instead of using a JS framework?</li>
 <li>Could I author this in CSS instead of choosing a preprocessor? </li>
 </ul>
 <p>The more I author code <em>as it will be run by the browser</em> the easier it will be to maintain that code over time, despite its perceived inferior developer ergonomics (remember, developer experience encompasses both the present <em>and the future</em>, i.e. “how simple are the ergonomics to build this now <em>and maintain it into the future</em>?) I don’t mind typing some extra characters <em>now</em> if it means I don’t have to learn/relearn, setup, configure, integrate, update, maintain, and inevitably troubleshoot a build tool or framework <em>later</em>.</p>
 <p>In my experience, authoring vanilla CSS using selectors that largely repeat is easier than more tersely authoring nested selectors but having to maintain Sass over time. </p>
 <p>Similarly, authoring vanilla JS without language transpilation, bundling, etc., is easier than building and maintaining something like Babel + Webpack over time.</p>
 <p>Take a moment and think about this super power: if you write vanilla HTML, CSS, and JS, all you have to do is put that code in a web browser and it runs. Edit a file, refresh the page, you’ve got a feedback cycle. As soon as you introduce tooling, as soon as you introduce an abstraction not native to the browser, you may have to invent the universe for a feedback cycle. No longer writing CSS and instead writing Sass? Now you need a development server with a build process to watch your files and compile your changes <em>just to develop and test your project</em>. You’ve just added a giant, blocking dependency for your project to work. And if you can’t get that dependency working, your project is dead in the water until you can—both now and in the future. </p>
--- a/cache/2021/7a21fd7cca573df8b35b973d8ee080c8/index.html
+++ b/cache/2021/7a21fd7cca573df8b35b973d8ee080c8/index.html
@@ -0,0 +1,352 @@
 <!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>Low-tech et Communs (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://wiki.lescommuns.org/wiki/Low-tech_et_Communs">

 <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>Low-tech et Communs</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.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://wiki.lescommuns.org/wiki/Low-tech_et_Communs" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <h2><span class="mw-headline" id="1-_Introduction">1- Introduction</span></h2>
 <p>Cette page explicite les liens entre Communs et low-tech notamment sous l'angle de la production de connaissances. Sans vouloir se limiter à la posture low-tech, <b>cette approche est également applicable aux techniques développées dans un cadre de construction de résilience</b>. Les pratiques de recherche &amp; développement (incluant la science et le design) sont également concernées par les notions de cette page.
 </p>
 <p>Cette page explicite les points clés pour <b>constituer des connaissances par un travail collectif et pour les entretenir dans la durée</b>. Cette approche est connue sous le nom des Communs. Le contexte spécifique de la low-tech est rappelé avant de décrire les 3 piliers constitutifs des Communs.
 Les pratiques (outils numériques, modèles économiques, juridiques,...) déjà en place pour construire des Communs sont détaillées. Enfin, quelques ressources dans le domaine low-tech, qui sont déjà traités comme des Communs, sont explicitées à titre d'illustration. 
 </p>
 <p>Pour échanger sur le contenu de cette page, la pertinence des argumentaires et exemples utilisés ou sur tout autre point, rendez-vous sur le <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://forum.lescommuns.org/t/communs-low-tech/1352">sujet du forum ad-hoc</a> ou sur l'onglet discussion.
 </p>
 <h3><span class="mw-headline" id="1.1-_Pourquoi_les_communs">1.1- Pourquoi les communs</span></h3>
 <blockquote>La notion de Commun a été conceptualisée depuis une trentaine d'années, en particulier par Elinor Ostrom. Mais, avant d'être un concept, c'est surtout un ensemble de pratiques qui s'appuie sur des modes de gestion collective de ressources développés au gré de plusieurs siècles. Ces pratiques ont été remises à jour, notamment pour gérer des ressources numériques (connaissances, logiciels), et commencent à être utilisées pour des systèmes matériels (comme l'était le four à pain communal).</blockquote>
 <p>En pratique, pourquoi utiliser ce concept ?
 </p>
 <ul><li> Pour faciliter le travail collectif en posant un cadre, cadre qui peut être évolutif</li>
 <li> Pour identifier, regrouper et faire évoluer de bonnes pratiques</li>
 <li> Pour créer des ressources qui vont perdurer dans le temps</li>
 <li> Pour mutualiser les efforts, tant sur la création de pratiques que sur l'entretien des ressources</li>
 <li> Pour adapter des modes de financement qui facilitent l'accès aux communs ainsi que leur création</li>
 <li> Pour prendre soin des contributeurs (en tant qu'être humain) et créer de la résilience collective.</li></ul>
 <h3><span class="mw-headline" id="1.2-_Le_principe_des_Communs">1.2- Le principe des Communs</span></h3>
 <blockquote>Les biens communs (ou “Communs”) sont des ressources gérées collectivement par une communauté selon une forme de gouvernance définie par elle-même.</blockquote>
 <ul><li> <i>note</i>: il convient de distinguer le terme de Commun des termes plus couramment utilisés de bien commun (en parlant d'une ressource naturelle partagée par ex.) ou d'une action en commun.</li></ul>
 <p><a href="/wiki/Fichier:Schema-Communs_642x450.jpg" class="image" title="Schema-Communs"><img alt="Schema-Communs" src="/images/lescommuns/6/67/Schema-Communs_642x450.jpg"></a>
 </p>
 <p>Parfois, la gouvernance est distinguée en 2 aspects:
 </p>
 <ul><li> les règles de prise de décision, un organigramme structurel,...  c'est la partie formelle (le côté visible de l'iceberg).</li>
 <li> les pratiques culturelles, les processus &amp; outils de travail, les espaces d'échange, le soin des autres ... moins formel mais nécessaire pour avancer ensemble.</li></ul>
 <h3><span class="mw-headline" id="1.3-_Les_low-tech_et_ses_particularit.C3.A9s">1.3-  Les low-tech et ses particularités</span></h3>
 <p>L’expression low-tech est d’abord un pied-de-nez au tout high-tech, d’une part une inquiétude face au pari unique et aux promesses de la croissance verte, une critique de l’excès technologique,  de  la possible fuite en avant technologiste, d’autre part une volonté de réappropriation de la technique et des savoirs, une possibilité de développer son autonomie. Une  seule  certitude:  les  low-tech  visent  à  satisfaire  les  «besoins», essentiels ou  non tout   en   réduisant drastiquement  la  consommation  de  matières  (notamment  non  renouvelables)  et  d’énergie,  la production  de  déchets  et  les  impacts  environnementaux,  surtout  le  cycle  de  vie  des  produits. <sup id="cite_ref-1" class="reference"><a href="#cite_note-1">[1]</a></sup>
 </p>
 <p>Pour mieux connaître le domaine des low-tech, 2 lectures particulièrement pertinentes sont:
 </p>
 <ul><li> le livre <b>L’âge des low-tech</b><sup id="cite_ref-2" class="reference"><a href="#cite_note-2">[2]</a></sup>, de Philippe Bihouix, Seuil, 2014. </li>
 <li> Le <b>hors série Socialter</b> sur les low-tech <sup id="cite_ref-3" class="reference"><a href="#cite_note-3">[3]</a></sup> qui donne un large point de vue sur les activités actuelles.</li></ul>
 <blockquote>Aujourd'hui, les Communs sont surtout liés à de l'immatériel (des connaissances, des codes logiciels, des organisations,...) mais le domaine des low-tech et plus largement des technologies fait appel à de la matière et des systèmes physiques, ce qui n'est pas toujours évident aux yeux des  praticiens du numérique (!).</blockquote>
 <p>Ainsi:
 </p>
 <ul><li> <b>Matérialité de l'activité</b>: une des finalités des low-tech est de produire des objets et des systèmes techniques ce qui fait intervenir des machines, des matériaux, de l'énergie. Il n'est pas possible de faire Ctrl-Z lorsque du bois a été coupé. Un espace ensoleillé ne peut être utilisé à la fois pour un potager en permaculture et à la fois pour de la cuisine solaire (Ctrl-C/V n'est pas possible ici !).</li></ul>
 <ul><li> <b>Lien avec un territoire</b>: les techniques, en particulier avec un caractère de résilience et/ou de relocalisation, sont liées à la typologie d'un territoire (son climat, sa géographie,...) et à sa population (culture, pratiques,...). Des pratiques valables à un endroit ne sont pas nécessairement transposables ailleurs.</li></ul>
 <ul><li> <b>Les lieux du Faire</b>: les espaces de travail (atelier, makerspace, laboratoire), les espaces d'expérimentation in-situ et les lieux de déploiement de low-tech (éco-lieu, éco-village, ...) sont des lieux physiques avec des gouvernances spécifiques à mettre en place. Tous ces lieux sont liés à des aspects de propriété privée ou collective ce qui pèse très fortement sur leur gouvernance et sur les conditions d'usage ou d'accès. </li></ul>

 <p><b>Remarques</b>
 </p>
 <ul><li> <cite>La popularisation de la “low-tech” depuis quelques années est un signe prometteur mais doit aussi appeler à la vigilance. La “low-tech” est irrémédiablement transformée par son traitement médiatique.</cite> (de <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://gauthierroussilhe.com/fr/posts/une-erreur-de-tech">Une erreur de "tech"</a>, 30/03/2020, Gauthier Roussilhe).</li></ul>
 <ul><li> Low-tech est très populairement comprise comme « basse technologie ». La technologie, c’est d’abord l’étude des techniques selon le courant de la technologie culturelle de Mauss, Leroi-Gourhan, Lemonnier et al. Le technologie est l'étude de l'état de l'art des techniques, l'observation aux diverses périodes historiques, en matière d'outils et de savoir-faire. Il comprend l'art, l'artisanat, les métiers, les sciences appliquées et éventuellement les connaissances. Un peu comme la biologie est l'observation et l'étude du vivant et de ses systèmes avec leurs évolutions. Les techniques s'accumulent et se sédimentent les unes sur les autres sans jamais s'effacer, ni disparaître<sup id="cite_ref-4" class="reference"><a href="#cite_note-4">[4]</a></sup></li></ul>
 <h2><span class="mw-headline" id="2-_Les_3_piliers">2- Les 3 piliers</span></h2>
 <h3><span class="mw-headline" id="2.1-_Les_ressources">2.1- Les ressources</span></h3>
 <blockquote>Les ressources peuvent être immatérielles comme les connaissances, les logiciels, ... ou matérielles comme des machines, des lieux,...</blockquote>
 <p>En low-tech, voici quelques exemples identifiés de ressources collectives:
 </p>
 <p><b>Connaissances</b>:
 </p>

 <p><b>Ressources matérielles</b> (exemples):
 </p>
 <ul><li> Une éolienne gérée collectivement dans un habitat partagé</li>
 <li> Un atelier/espace de fabrication avec un usage et un entretien collectif</li></ul>
 <h3><span class="mw-headline" id="2.2-_La_gouvernance">2.2- La gouvernance</span></h3>
 <blockquote>La communauté, réunie autour d'une ressource (par exemple un manuel de fabrication d'une LT ou la constitution d'un annuaire de formations en LT), choisit son mode de gouvernance. Elle décide donc de se gouverner elle-même sous la forme qui lui convient le mieux et qui soit adapté en fonction de la ressource gérée (système de vote collectif, confiance mutuelle, système représentatif, do-ocratie,...). Cette gouvernance doit pouvoir être remise en cause par les membres de la communauté elle-même.</blockquote>
 <p>Il existe de nombreuses formes de gouvernance possible, certaines plus adaptées que d'autres à un contexte donné. Des outils ont été développés pour encadrer la gestion de ces modes de gouvernance. Des expérimentations sont également documentées sur différentes plate-formes numériques (des rencontres sont également organisées pour partager ces pratiques de gouvernance et avoir des retours d'expérience)
 </p>
 <ul><li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org">Movilab</a> est une plate-forme qui capitalise de la connaissance autour de tiers-lieux</b> et permet de partager de la documentation d'actions ou de pratiques. Movilab est un wiki et <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/La_gouvernance_de_Movilab">gouvernée par les contributeurs</a>.
 <ul><li> Sur Movilab, on y trouve la documentation des <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/Comices_Du_Faire_2020">Comices du faire 2020</a>, le déroulé d'un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/Low-tech_Camp">Low-tech camp</a>, basé sur la recette des  <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/IndieCamp">IndieCamp</a>, qui se base sur l'émancipation collective comme outils pédagogiques pour des individus libres et responsables, <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/La_Myne">l'histoire de la Myne</a> et peut-être votre communauté low-tech. <b>Il s'agit de « <i><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://xavcc.frama.io/defaire/">Défaire</a></i> » les tonnes d'objets déjà existant sur terre plutôt que faire en étant extractiviste de ressources de la terre </b></li></ul></li></ul>
 <ul><li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="http://lescommuns.org">Lescommuns.org</a></b> est une communauté ouverte qui oeuvre à faire connaître les communs en France et qui est constituée de <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://annuaire.lescommuns.org/category/collectifs/">nombreux collectifs</a> dont l'Assemblée Virtuelle, France Tiers-Lieux, La Myne,...
 <ul><li> LesCommuns met à disposition <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://annuaire.lescommuns.org/category/outils/">des outils</a> pour faciliter la production de communs et la capitalisation des connaissances, notamment sous forme d'un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://wiki.lescommuns.org/">wiki</a> et de <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://pad.lescommuns.org/">pads</a> (<b>Note</b>: pour accéder aux pads, il faut se créer un compte personnel qui listera les pads que l'on consulte en étant connecté). Un <i>annuaire</i> rassemble des ressources sur les low-tech sur des pads et des wiki.</li>
 <li> La gouvernance de LesCommuns est discutée sur un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://chat.lescommuns.org/channel/.com1">chat</a> pour les échanges quotidiens et un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://forum.lescommuns.org/">forum</a> pour les partages d'informations</li></ul></li></ul>
 <h3><span class="mw-headline" id="2.3-_Les_communaut.C3.A9s">2.3- Les communautés</span></h3>
 <blockquote>Les communautés sont les groupements de personnes qui créent et organisent des ressources. Ces communautés peuvent prendre des formes différentes et être plus ou moins formalisées.</blockquote>
 <ul><li>Exemples de communautés en low-tech:
 <ul><li> Un collectif qui organise des formations pour apprendre à fabriquer des objets dans une posture low-tech</li>
 <li> Un groupe qui gére un annuaire d'acteurs du low-tech</li></ul></li></ul>
 <ul><li> Il est possible de considérer comme un Commun une simple page wiki présentant une liste de liens web sur une thématique low-tech donnée. Cette page peut être gérée par 3 personnes avec quelques règles pour choisir les liens retenus. La communauté est alors simplement constituées de ces 3 personnes.</li></ul>
 <ul><li> Le collectif autour d'un Commun n'a pas nécessairement besoin d'être parfaitement identifié. Dans la pratique, il y a souvent des personnes très investies, des contributeurs actifs, des contributeurs irréguliers et d'autres occasionnels.</li></ul>
 <ul><li> Une ressource, par ex. un manuel de fabrication ou un atelier de fabrication partagé, qui n'est pas géré par une ou plusieurs personnes ou entités ne peut plus être considéré comme un Commun. Mais, même s'il n'y a plus de communautés, la ressource continue d'exister (avec, néanmoins, un risque de la voir disparaitre par manque d'entretien).</li></ul>
 <h3><span class="mw-headline" id="2.4-_Bien_distinguer_communaut.C3.A9_et_ressource">2.4- Bien distinguer communauté et ressource</span></h3>
 <blockquote>Dans l'approche des Communs, une ressource peut perdurer même si la, ou les, communauté(s) qui gèrent cette ressource, change. Cette dissociation ressource/communauté génère cette stabilité et c'est ce qui fait la force des Communs.</blockquote>
 <p> Il existe, néanmoins, un risque que la ressource disparaisse ou se dégrade par manque d'entretien s'il n'y a plus de communauté.
 </p>
 <ul><li> Par exemple, la plate-forme <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://github.com">github</a> héberge des codes de logiciel. Si la communauté gérant un code n'agit plus et n'entretient plus leur gouvernance et leur espace d'échange (qu'il soit numérique ou physique), le code restera hébergé sur github, de manière garantie. Il sera disponible, à minima, pour être utilisé et, au mieux, pour être réapproprié par une nouvelle communauté qui poursuivra le développement et l'entretien.</li></ul>
 <ul><li> Le raisonnement est similaire pour un ensemble de pages hébergées sur <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org">wikipedia</a> dont le contenu peut évoluer au gré de la présence des contributeurs.</li></ul>
 <ul><li> <i>Exemple de risque</i>: une association qui développe un potager partagé et qui créé un wiki sur le site personnel pour documenter ces expérimentations. La structure associative peut disparaître (pour toutes sortes de raisons liées à la vie courante des associations) et emporter avec elle ces documentations (à moins qu'une personne de bonne volonté ne fasse une sauvegarde). Le fait que les documentations soient hébergées "en interne" peut également freiner l'appropriation par des personnes en dehors de la structure mais néanmoins intéressées.</li></ul>

 <h2><span class="mw-headline" id="3-_Les_pratiques_autour_des_Communs">3- Les pratiques autour des Communs</span></h2>
 <p>La production de Communs s'appuient sur des outils (économiques, juridiques, numériques,...) mais... ce ne sont que des outils. Mettre une licence Creative Common sur un tutorial de fabrication d'une low-tech ne le transforme pas pour autant en un Commun s'il n'y a pas un accès aux sources, un espace pour échanger sur l'évolution de la documentation, etc... De même, rendre un code ou un plan de fabrication Open Source ne veut pas nécessairement dire qu'il sera accessible et compréhensible sans expliciter le fonctionnement ou les raisons des choix techniques. 
 </p>
 <p><b>Point d'attention</b>: certains systèmes collaboratifs servent à alimenter des bases de données (par exemple: un appel à fournir des sites webs sur un thème donné). Il y a un risque que les contributeurs n'aient que peu de prise quant aux choix qui sont fait sur ces données (quelles données sont intégrées et lesquelles sont rejetées), à quoi seront utilisées ces données, etc... Ces systèmes sont louables dans l'idée mais il y a un risque réel que les contributeurs soient dépossédés de leurs apports et que cette ressource (la base de données) soit rendue inaccessible voire perdue si la structure porteuse de la base de données disparaît et que <i>les contributeurs ne puissent rien y faire</i>.
 Ces pratiques dites "collaboratives" ne permettent pas vraiment de reconnaître la contribution individuelle ou le travail fourni autrement que par une reconnaissance globale. Les wiki (Wikipedia par ex.) permettent d'identifier, par l'historique, les acteurs qui contribuent aux rédactions.
 </p>
 <p>Dans cette partie, il va être évoqué:
 </p>
 <ul><li> les outils numériques</li>
 <li> les licences</li>
 <li> les modèles économiques </li>
 <li> les structures juridiques</li></ul>
 <h3><span class="mw-headline" id="3.1-_Outils_num.C3.A9riques">3.1- Outils numériques</span></h3>
 <ul><li> Malgré les critiques que la posture low-tech peut avoir vis-à-vis des technologies numériques, ces outils restent aujourd'hui indispensables pour partager du savoir, des informations ou simplement pour s'organiser en communautés ou entre contributeurs. Si ces outils numériques paraissent aujourd'hui incontournables pour ces usages, il convient toutefois d'adopter des pratiques de sobriété numérique<sup id="cite_ref-5" class="reference"><a href="#cite_note-5">[5]</a></sup>.</li></ul>
 <ul><li> Les outils de documentation qui sont fortement recommandés et utilisés parmi les commoners, sont:
 <ul><li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://framapad.org/fr/">Framapad</a></b> (technologie <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Etherpad">Etherpad</a>)
 <ul><li> Prise en main rapide mais interface peu ergonomique</li>
 <li> les fichiers hébergés sur Framasoft sont à durée de vie limitée</li></ul></li>
 <li> <b>Pad</b> (langage <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Markdown">Markdown</a> utilisé par la technologie Codimd)
 <ul><li> Prise en mains un peu complexe (avec la double fenêtre)</li>
 <li> Interface ergonomique</li>
 <li> Gros plus par rapport à Framapad: Possibilité d'insertion d'images et de photos </li></ul></li>
 <li> <b>Wiki</b> (technologie <a target="_blank" rel="noreferrer noopener" class="external text" href="https://www.mediawiki.org">Mediawiki</a> le plus souvent)
 <ul><li> Interface peu évidente à prendre en main pour les novices</li>
 <li> Ne permet pas vraiment de travailler à plusieurs personnes en simultané sur une même page</li>
 <li> Très puissant pour capitaliser de l'information dans la durée et pour créer des bases de connaissance</li></ul></li></ul></li></ul>
 <ul><li> Ces outils numériques sont installés et mis à disposition sur des plate-formes, notamment par des organisations comme <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://indiehosters.net/">IndieHosters</a> et <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://framasoft.org">Framasoft</a>. Ces outils peuvent également être installés pour des projets dédiés. Les outils numériques de type googledrive, discord, skype sont très restrictifs sur les possibilités de repartage ou de réutilisation de l'information produite. Ce n'est pas <i>nécessairement</i> critique pour ce qui relève de l'échange instantané (de type chat ou visio) du point de vue de la capitalisation de l'information. Il est par contre rédhibitoire de s'appuyer sur des outils de type googledrive pour capitaliser de l'information et créer des communs (voir <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://www.google.com/intl/fr/drive/terms-of-service/">la licence</a>) et en particulier l'<a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://www.google.com/intl/fr/drive/terms-of-service/archived/">ancienne version de cette licence - partie 6</a> pour comprendre l'état d'esprit).</li></ul>
 <ul><li> Les données ou les fichiers produits ont intérêt à utiliser des formats standards pour permettre l'échange entre plate-forme ou entre outils numériques et de faciliter des sauvegardes (<i>Note</i>: la possibilité d'export d'un format à l'autre n'est qu'un pis-aller).
 <ul><li> Le format markdown (md) est un standard utilisé dans les pads, sur github et peut être inséré dans certains sites webs. Il est également lisible facilement par les humains avec un simple éditeur de texte.</li></ul></li></ul>
 <h3><span class="mw-headline" id="3.2-_Les_licences">3.2- Les licences</span></h3>
 <ul><li> Les licences utilisées sur des documents, en particulier numériques, permettent de définir ce qu'il est possible de faire avec le contenu, et à quelles conditions, en terme de partage et de réutilisation. Cependant, mettre une licence libre sur un document ne le transforme pas pour autant en un Commun. La licence est seulement un outil - à valeur juridique - pour encadrer l'usage d'une ressource.</li></ul>
 <ul><li> Les licences les plus utilisées dans le domaine des Communs sont <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Licence_Creative_Commons">les Creatives Commons</a>, mises en place à l'origine pour protéger des oeuvre culturelles (litterature, musique, écrits, ...). Il existe d'autres licences libres, en particulier la GNU licence adaptée pour du code logiciel. Un travail serait à faire pour identifier les licences les plus adaptées pour les ressources du low-tech et plus généralement pour les productions de la Recherche et Développement. La <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/CERN_Open_Hardware_Licence">CERN Open Hardware Licence</a> est une licence utilisée pour des projets de matériel libre et serait à étudier dans l'approche Low-tech et Commun.</li></ul>
 <ul><li> En pratique, les usages des licences Creative Commons sont détaillées dans plusieurs documents. Voir par exemple <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://coop-ist.cirad.fr/etre-auteur/utiliser-les-licences-creative-commons/4-les-6-licences-cc">le travail de  CoopIST</a> Coopérer en Information Scientifique et Technique. L'utilisation d'une licence CC est gratuite et ne nécessite pas de démarche spécifique auprès d'un organisme.</li></ul>
 <ul><li> En pratique, partager un document sur internet en ayant la volonté qu'il soit réutilisé et modifié mais sans mentionner une licence est contre productif. En effet, en France ainsi que dans de nombreux pays, sans mention explicite, c'est le <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Droit_d%27auteur">droit d'auteur</a> qui s'applique et qui empêche formellement le partage et la réutilisation. </li></ul>
 <ul><li> Les <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Brevet">brevets industriels</a> sont une autre forme de protection juridique de la connaissance. Cependant, une licence libre (licence CC par ex.) protège le document (qu'il soit un écrit, un audio, une vidéo), c'est-à-dire qu'il protège la mise en forme de l'information utilisée mais il ne protège pas le design d'un poêle à bois ou d'un mécanisme low-tech. Le brevet protège lui le design, pour fabriquer un objet, en tant que tel. Le type de protection est différent parce que l'objectif recherché est différent: la licence libre favorise le partage et la réutilisation en gardant la paternité de l'oeuvre (ses auteurs) tandis que le brevet cherche à contrôler l'utilisation du design breveté tout en partageant la connaissance autour de ce design (c'était du moins l'esprit initial du brevet). </li></ul>
 <h3><span class="mw-headline" id="3.3-_Mod.C3.A8les_.C3.A9conomiques_.2F_valorisation_de_la_contribution">3.3- Modèles économiques / valorisation de la contribution</span></h3>
 <p>Une des limites, dans la contribution aux Communs, est le temps à consacrer à leur création et leur entretien, surtout pour les Communs de la connaissance et pour l'entretien des organisations de ces Communs parce que ce travail n'a de valeur que sur du long terme. Ce travail reste difficile à faire reconnaitre auprès de la société humaine et à financer et les Communs autour des LT n'échappent pas à cette situation. Il n'existe pas de modèles économiques fonctionnels à grande échelle parce que le recul n'est pas suffisant mais une série d'expérimentation permet déjà de dégager quelques pratiques et des axes d'action, <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikiversity.org/wiki/Recherche:Financement_et_r%C3%A9tribution_dans_les_communs">comme ces rencontres de 2016</a> le montrent.
 </p>
 <ul><li> Du point de vue de la valorisation du temps de contribution, 3 aspects peuvent être dégagés: 
 <ul><li> comment obtenir des financements, pour des structures ou des personnes</li>
 <li> comment répartir ou distribuer ces budgets</li>
 <li> comment rétribuer les contributeurs (les personnes au final) du point de vue de l'aspect juridique</li></ul></li></ul>
 <ul><li> Quelques outils en expérimentation ou sessions d'échange: 
 <ul><li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/images/movilab/2/24/Vivre_des_communs_(2017).pdf">Vivre des communs</a> (ou comment rétribuer la contribution aux communs Vivre des communs)</b>: un document explicatif des principes généraux</li>
 <li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/Les_mod%C3%A8les_contributifs">Les modèles contributifs</a></b>: des bilans d'expérimentation et des synthèses des pratiques</li>
 <li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/Pratiques_de_travail_en_collectif_contributif_;_responsabilit%C3%A9s,_engagements_et_transparence.">Pratiques de travail en collectif contributif ; responsabilités, engagements et transparence.</a></b></li>
 <li> Spécifiquement dédié aux low-tech, le <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://agir.lowtech.fr/#fonctionnement">Fond de Dotation d'Agir Low-tech</a></b> est en cours de mise en place pour opérer et financer des projets et faire le lien entre les porteurs de projets, les donateurs, les contributeurs et le public.</li>
 <li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://openbadges.info/tout-savoir-sur-les-open-badges/">Open Badge</a></b> est utilisé pour reconnaître, valoriser et rendre visible une compétence, un savoir-faire, un savoir-être, un engagement, un rôle, une contribution, une participation, une réalisation, un projet ou tout simplement un intérêt. <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="http://numerique76.spip.ac-rouen.fr/spip.php?article149">Présentation d'usage dans le milieu académique</a>.</li></ul></li></ul>
 <h3><span class="mw-headline" id="3.4-_Les_structures_juridiques">3.4- Les structures juridiques</span></h3>
 <p><b>Les communautés peuvent se structurer en s'appuyant sur des structures juridiques mais ce n'est pas une obligation. Pour rappel, ce n'est pas le seul choix de structuration juridique qui va permettre de gérer une communauté avec une gouvernance ouverte cohérente avec l'esprit des communs (on peut très bien créer une association avec une gouvernance pyramidale).</b>
 </p>
 <ul><li> Les structurations juridiques sont <i>juste</i> des outils... juridiques.</li></ul>
 <ul><li> Les structures en association, en SCIC, en SCOP sont évidemment préférées mais il est aussi possible de s'appuyer sur des SARL ou même des SAS et aboutir également à des gouvernances ouvertes.</li></ul>
 <ul><li> En droit Français, on peut très bien se structurer en association non déclarée (ou <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Association_de_fait">association de fait</a>) lorsque l'on s'associe autour d'un objectif. C'est une structure qui n'a pas de personnalité juridique mais est légalement reconnue. Il est possible de rédiger des statuts mais, il y a la limite de ne pas pouvoir signer de documents légaux (bail, contrat) et de ne pas pouvoir gérer de l'argent (ouverture de compte en banque, subvention).</li></ul>

 <h2><span class="mw-headline" id="4-_Exemples_de_low-tech_en_Communs">4- Exemples de low-tech en Communs</span></h2>
 <p><b>Quelques exemples de low-tech ou de démarches dans cette posture qui sont traités comme des Communs</b>. A chacun des cas, on identifie ce qui est de l'ordre de la <i>ressource</i>, de la <i>communauté</i>, de la <i>gouvernance</i> et des <i>règles de gestion</i> associées. Cette liste n'a pas vocation à être exhaustive mais à donner des exemples variés pour appuyer les propos de cette page.
 </p>
 <h3><span class="mw-headline" id="4.1-_Production_de_gel_hydroalcoolique">4.1- Production de gel hydroalcoolique</span></h3>
 <ul><li> La recette de fabrication a été libérée par son inventeur <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Didier_Pittet">Didier Pittet</a> et <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://www.who.int/gpsc/5may/tools/system_change/guide_production_locale_produit_hydro_alcoolique.pdf?ua=1">documentée sur différents sites</a> pour une utilisation libre</li>
 <li> <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="http://www.lamyne.org">La Myne</a> mène différentes actions au travers du <b>programme Epidemyne</b> lors du premier confinement en 2020 et décide en particulier de fabriquer du gel HA. L'expérimentation est relatée sur <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://pad.lamyne.org/epidemyne_solution-hydroalcoolique">un carnet de bord</a> et sert aussi bien à tracer les étapes qu'à se coordonner au quotidien. 
 </li>
 <li> A la fin du confinement, tout le processus de fabrication et d'organisation est partagé avec la <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://pad.lamyne.org/RUSH_cellule_logistique_coordonn%C3%A9e#">cellule logistique RUSH</a> pour permettre, en cas de besoin, la production de gel en plus grande quantité et pour favoriser l'appropriation.</li>
 <li> Dans cette <b>posture de fabrication low-tech</b>, on retrouve les <b>caractéristiques des Communs</b> avec:
 <ul><li> l'usage d'une <i>ressource</i> libre (la recette de D. Pittet)</li>
 <li> la production d'une nouvelle <i>ressource</i> sous forme d'une documentation de fabrication et de logistique</li>
 <li> une <i>communauté</i> de contributeurs de la Myne qui s'organise selon des <i>règles discutées</i> via un canal de chat et des visio. Les règles de gestion sont partagées sur un pad public, en particulier la façon dont la production de gel a été répartie et distribuée aux bénéficiaires. </li></ul></li></ul>
 <h3><span class="mw-headline" id="4.2-_Hack2Eaux">4.2- Hack2Eaux</span></h3>

 <ul><li> Rédaction d’un document de prospection présentant le concept envisagé, l’écosystème local, les opportunités business, la philosophie du lieu, le storytelling, le timing, les objectifs, les surfaces disponibles, déjà développé et reconnu dans le mesure de qualité de l’air (en Allemagne ou en France par exemple avec <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="http://www.wiki-rennes.fr/Ambassad%E2%80%99Air">Ambassad’Air</a>), nous proposons de nous concentrer sur les capacités de production de matériels nécessaires à la prévention et analyse de matière organique et de l’eau en lien avec les phénomènes décrits.</li></ul>
 <ul><li> Caractéristiques de la solution : (re)localiser au sein de territoire par des <i>communautés</i> civiques impliquées, la production basée à minima sur les 4 libertés fondamentales selon « GNU Linux », les capacités de production :
 <ul><li> de contenus pédagogiques et support formatifs</li>
 <li> de <i>ressources</i> informationnelles</li>
 <li> de matériels de mesure et d’analyse des sols et de l’eau (matériel biologique, matériel chimique, matériel mécanique, matériel informatique)</li>
 <li> de production de données standardisées</li>
 <li> de <i>mise en réseau</i> de coopération</li></ul></li></ul>
 <h3><span class="mw-headline" id="4.3-_La_maison_rustique">4.3- La maison rustique</span></h3>

 <ul><li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Maison_rustique_du_XIXe_si%C3%A8cle">La maison rustique</a> est une encyclopédie pratique et exhaustive, rédigée au début du XIXe siècle, sur les travaux à la ferme.</b> De nombreuses pratiques et outils décrits sont proches de l'esprit low-tech.</li>
 <li> Cette encyclopédie a été numérisée par différentes structures et <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://www.apprendre-preparer-survivre.com/bible-de-lautonomie-totale-maison-rustique-19eme-siecle/">mise à disposition gratuitement sur internet</a> avec une qualité moyenne et une impossibilité de faire des recherches par mots clés.</li>
 <li> La <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikisource.org/wiki/Maison_rustique_du_XIXe_si%C3%A8cle/%C3%A9d._1844/Livre_4/ch._8#8.4">plate-forme wikisource</a> héberge les pages numérisées et permet de retranscrire les textes dans un format numérique avec un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikisource.org/wiki/Livre:Maison_rustique_du_XIXe_si%C3%A8cle,_%C3%A9d._Bixio,_1844,_III.djvu">ensemble d'outils pour suivre le travail collaboratif</a></li>
 <li> En plus des contributeurs de wikisource, une <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://maisonrustique-project.webnode.fr/">communauté</a> s'est structurée spécifiquement pour organiser sa contribution et ses règles de travail. Elle s'appuie en particulier sur un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://discord.gg/Tzpy6eTfte">discord</a>.</li>
 <li> On retrouve également ici une <i>ressource libre</i> (l'encyclopédie qui n'est plus soumise au droit d'auteur), une plate-forme liée à wikipédia qui <i>héberge la ressource</i> et garantie sa pérénité et une <i>communauté de contributeurs</i> pour la retranscription avec une <i>gouvernance discutée</i> sur un forum.</li></ul>
 <h3><span class="mw-headline" id="4.4-_L.27atelier_paysan">4.4- L'atelier paysan</span></h3>
 <ul><li> L'<a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://www.latelierpaysan.org">atelier paysan</a> conçoit des machines agricoles et organise des formations pour que les paysans apprennent à les fabriquer. Ces plans sont en open source sous licence creative commons (<i>ressource</i>) pour permettre aux paysans de modifier leurs machines et pour que d'autres structures puissent également organiser des formations en s'appuyant sur ces plans.</li>
 <li> Le bureau d'ingénierie de l'Atelier Paysan s'appuie en particulier sur les pratiques des paysans eux-mêmes pour adapter les conceptions des machines agricoles. Les échanges avec cette <i>communauté</i> se font au travers d'un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://forum.latelierpaysan.org/">forum de discussion</a> et par des rencontres directement sur les terrains agricoles.</li>
 <li> La <i>gouvernance</i> de la <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://latelierpaysan.org/La-cooperative-se-consolide-et-ne-lachera-rien">structure coopérative est discutée en détails</a> avec les ingénieurs, paysans, contributeurs &amp; partenaires.</li></ul>

 <h3><span class="mw-headline" id="4.5-_La_Fabrique_des_mobilit.C3.A9s_.26_les_low-tech">4.5- La Fabrique des mobilités &amp; les low-tech</span></h3>
 <ul><li>  La <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://wiki.lafabriquedesmobilites.fr">Fabrique des Mobilités</a> intervient ainsi comme un accélérateur dédié à un écosystème industriel en mutation. La Fabrique s’appuie sur les structures d’accompagnement existantes (incubateur, accélérateur, etc.) pour augmenter les chances de succès des meilleurs projets, renforçant ainsi l’ensemble de l’écosystème. L’activité des entrepreneurs et des partenaires utilisant les <i>ressources</i> de la Fabrique permettra de générer des “Communs”.</li></ul>
 <ul><li>  Le lieu d'échange de la <i>communauté</i> des contributeurs des communs de la fabrique des mobilités est <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://chat.fabmob.io">chat</a>.</li></ul>

 <h3><span class="mw-headline" id="4.6-_Open_Energy_Monitor">4.6- Open Energy Monitor</span></h3>
 <p>L'<a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://openenergymonitor.org/">Open Energy Monitor</a> est un système de monitoring de la consommation et de la production d'énergie électrique. Le système est en open-source et *complètement documenté* sur un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://wiki.openenergymonitor.org/index.php/Main_Page">wiki</a>, le code et tous les plans sont hébergés sur un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://github.com/openenergymonitor">compte github</a> (<i>ressources</i>). La <i>communauté</i> d'utilisateurs et de contributeurs de ce système de mesure échange sur un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://community.openenergymonitor.org/">forum</a> tant sur le développement que sur la <i>gouvernance</i>.
 </p>
 <h2><span class="mw-headline" id="5-_Licence_de_la_page_wiki">5- Licence de la page wiki</span></h2>
 <p>Cette page s'appuie sur des documents issues d'autres documents, en particulier de <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org">Wikipedia</a> et d'autres wiki (les liens vers les sources sont mentionnés à chaque fois). En fonction de la licence de ces sources, cette page est donc sous <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://creativecommons.org/licenses/">licence Creative Commons</a>.
 </p>
 <h2><span class="mw-headline" id="6-_Notes_et_r.C3.A9f.C3.A9rences">6- Notes et références</span></h2>
 </article>


 <hr>

 <footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.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.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.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.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.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.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/2021/7a21fd7cca573df8b35b973d8ee080c8/index.md
+++ b/cache/2021/7a21fd7cca573df8b35b973d8ee080c8/index.md
@@ -0,0 +1,176 @@
 title: Low-tech et Communs
 url: https://wiki.lescommuns.org/wiki/Low-tech_et_Communs
 hash_url: 7a21fd7cca573df8b35b973d8ee080c8

 <h2><span class="mw-headline" id="1-_Introduction">1- Introduction</span></h2>
 <p>Cette page explicite les liens entre Communs et low-tech notamment sous l'angle de la production de connaissances. Sans vouloir se limiter à la posture low-tech, <b>cette approche est également applicable aux techniques développées dans un cadre de construction de résilience</b>. Les pratiques de recherche &amp; développement (incluant la science et le design) sont également concernées par les notions de cette page.
 </p><p>Cette page explicite les points clés pour <b>constituer des connaissances par un travail collectif et pour les entretenir dans la durée</b>. Cette approche est connue sous le nom des Communs. Le contexte spécifique de la low-tech est rappelé avant de décrire les 3 piliers constitutifs des Communs.
 Les pratiques (outils numériques, modèles économiques, juridiques,...) déjà en place pour construire des Communs sont détaillées. Enfin, quelques ressources dans le domaine low-tech, qui sont déjà traités comme des Communs, sont explicitées à titre d'illustration. 
 </p><p>Pour échanger sur le contenu de cette page, la pertinence des argumentaires et exemples utilisés ou sur tout autre point, rendez-vous sur le <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://forum.lescommuns.org/t/communs-low-tech/1352">sujet du forum ad-hoc</a> ou sur l'onglet discussion.
 </p>
 <h3><span class="mw-headline" id="1.1-_Pourquoi_les_communs">1.1- Pourquoi les communs</span></h3>
 <blockquote>La notion de Commun a été conceptualisée depuis une trentaine d'années, en particulier par Elinor Ostrom. Mais, avant d'être un concept, c'est surtout un ensemble de pratiques qui s'appuie sur des modes de gestion collective de ressources développés au gré de plusieurs siècles. Ces pratiques ont été remises à jour, notamment pour gérer des ressources numériques (connaissances, logiciels), et commencent à être utilisées pour des systèmes matériels (comme l'était le four à pain communal).</blockquote>
 <p>En pratique, pourquoi utiliser ce concept ?
 </p>
 <ul><li> Pour faciliter le travail collectif en posant un cadre, cadre qui peut être évolutif</li>
 <li> Pour identifier, regrouper et faire évoluer de bonnes pratiques</li>
 <li> Pour créer des ressources qui vont perdurer dans le temps</li>
 <li> Pour mutualiser les efforts, tant sur la création de pratiques que sur l'entretien des ressources</li>
 <li> Pour adapter des modes de financement qui facilitent l'accès aux communs ainsi que leur création</li>
 <li> Pour prendre soin des contributeurs (en tant qu'être humain) et créer de la résilience collective.</li></ul>
 <h3><span class="mw-headline" id="1.2-_Le_principe_des_Communs">1.2- Le principe des Communs</span></h3>
 <blockquote>Les biens communs (ou “Communs”) sont des ressources gérées collectivement par une communauté selon une forme de gouvernance définie par elle-même.</blockquote>
 <ul><li> <i>note</i>: il convient de distinguer le terme de Commun des termes plus couramment utilisés de bien commun (en parlant d'une ressource naturelle partagée par ex.) ou d'une action en commun.</li></ul>
 <p><a href="/wiki/Fichier:Schema-Communs_642x450.jpg" class="image" title="Schema-Communs"><img alt="Schema-Communs" src="/images/lescommuns/6/67/Schema-Communs_642x450.jpg"></a>
 </p><p>Parfois, la gouvernance est distinguée en 2 aspects:
 </p>
 <ul><li> les règles de prise de décision, un organigramme structurel,...  c'est la partie formelle (le côté visible de l'iceberg).</li>
 <li> les pratiques culturelles, les processus &amp; outils de travail, les espaces d'échange, le soin des autres ... moins formel mais nécessaire pour avancer ensemble.</li></ul>
 <h3><span class="mw-headline" id="1.3-_Les_low-tech_et_ses_particularit.C3.A9s">1.3-  Les low-tech et ses particularités</span></h3>
 <p>L’expression low-tech est d’abord un pied-de-nez au tout high-tech, d’une part une inquiétude face au pari unique et aux promesses de la croissance verte, une critique de l’excès technologique,  de  la possible fuite en avant technologiste, d’autre part une volonté de réappropriation de la technique et des savoirs, une possibilité de développer son autonomie. Une  seule  certitude:  les  low-tech  visent  à  satisfaire  les  «besoins», essentiels ou  non tout   en   réduisant drastiquement  la  consommation  de  matières  (notamment  non  renouvelables)  et  d’énergie,  la production  de  déchets  et  les  impacts  environnementaux,  surtout  le  cycle  de  vie  des  produits. <sup id="cite_ref-1" class="reference"><a href="#cite_note-1">[1]</a></sup>
 </p><p>Pour mieux connaître le domaine des low-tech, 2 lectures particulièrement pertinentes sont:
 </p>
 <ul><li> le livre <b>L’âge des low-tech</b><sup id="cite_ref-2" class="reference"><a href="#cite_note-2">[2]</a></sup>, de Philippe Bihouix, Seuil, 2014. </li>
 <li> Le <b>hors série Socialter</b> sur les low-tech <sup id="cite_ref-3" class="reference"><a href="#cite_note-3">[3]</a></sup> qui donne un large point de vue sur les activités actuelles.</li></ul>
 <blockquote>Aujourd'hui, les Communs sont surtout liés à de l'immatériel (des connaissances, des codes logiciels, des organisations,...) mais le domaine des low-tech et plus largement des technologies fait appel à de la matière et des systèmes physiques, ce qui n'est pas toujours évident aux yeux des  praticiens du numérique (!).</blockquote>
 <p>Ainsi:
 </p>
 <ul><li> <b>Matérialité de l'activité</b>: une des finalités des low-tech est de produire des objets et des systèmes techniques ce qui fait intervenir des machines, des matériaux, de l'énergie. Il n'est pas possible de faire Ctrl-Z lorsque du bois a été coupé. Un espace ensoleillé ne peut être utilisé à la fois pour un potager en permaculture et à la fois pour de la cuisine solaire (Ctrl-C/V n'est pas possible ici !).</li></ul>
 <ul><li> <b>Lien avec un territoire</b>: les techniques, en particulier avec un caractère de résilience et/ou de relocalisation, sont liées à la typologie d'un territoire (son climat, sa géographie,...) et à sa population (culture, pratiques,...). Des pratiques valables à un endroit ne sont pas nécessairement transposables ailleurs.</li></ul>
 <ul><li> <b>Les lieux du Faire</b>: les espaces de travail (atelier, makerspace, laboratoire), les espaces d'expérimentation in-situ et les lieux de déploiement de low-tech (éco-lieu, éco-village, ...) sont des lieux physiques avec des gouvernances spécifiques à mettre en place. Tous ces lieux sont liés à des aspects de propriété privée ou collective ce qui pèse très fortement sur leur gouvernance et sur les conditions d'usage ou d'accès. </li></ul>

 <p><b>Remarques</b>
 </p>
 <ul><li> <cite>La popularisation de la “low-tech” depuis quelques années est un signe prometteur mais doit aussi appeler à la vigilance. La “low-tech” est irrémédiablement transformée par son traitement médiatique.</cite> (de <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://gauthierroussilhe.com/fr/posts/une-erreur-de-tech">Une erreur de "tech"</a>, 30/03/2020, Gauthier Roussilhe).</li></ul>
 <ul><li> Low-tech est très populairement comprise comme « basse technologie ». La technologie, c’est d’abord l’étude des techniques selon le courant de la technologie culturelle de Mauss, Leroi-Gourhan, Lemonnier et al. Le technologie est l'étude de l'état de l'art des techniques, l'observation aux diverses périodes historiques, en matière d'outils et de savoir-faire. Il comprend l'art, l'artisanat, les métiers, les sciences appliquées et éventuellement les connaissances. Un peu comme la biologie est l'observation et l'étude du vivant et de ses systèmes avec leurs évolutions. Les techniques s'accumulent et se sédimentent les unes sur les autres sans jamais s'effacer, ni disparaître<sup id="cite_ref-4" class="reference"><a href="#cite_note-4">[4]</a></sup></li></ul>
 <h2><span class="mw-headline" id="2-_Les_3_piliers">2- Les 3 piliers</span></h2>
 <h3><span class="mw-headline" id="2.1-_Les_ressources">2.1- Les ressources</span></h3>
 <blockquote>Les ressources peuvent être immatérielles comme les connaissances, les logiciels, ... ou matérielles comme des machines, des lieux,...</blockquote>
 <p>En low-tech, voici quelques exemples identifiés de ressources collectives:
 </p><p><b>Connaissances</b>:
 </p>

 <p><b>Ressources matérielles</b> (exemples):
 </p>
 <ul><li> Une éolienne gérée collectivement dans un habitat partagé</li>
 <li> Un atelier/espace de fabrication avec un usage et un entretien collectif</li></ul>
 <h3><span class="mw-headline" id="2.2-_La_gouvernance">2.2- La gouvernance</span></h3>
 <blockquote>La communauté, réunie autour d'une ressource (par exemple un manuel de fabrication d'une LT ou la constitution d'un annuaire de formations en LT), choisit son mode de gouvernance. Elle décide donc de se gouverner elle-même sous la forme qui lui convient le mieux et qui soit adapté en fonction de la ressource gérée (système de vote collectif, confiance mutuelle, système représentatif, do-ocratie,...). Cette gouvernance doit pouvoir être remise en cause par les membres de la communauté elle-même.</blockquote> 
 <p>Il existe de nombreuses formes de gouvernance possible, certaines plus adaptées que d'autres à un contexte donné. Des outils ont été développés pour encadrer la gestion de ces modes de gouvernance. Des expérimentations sont également documentées sur différentes plate-formes numériques (des rencontres sont également organisées pour partager ces pratiques de gouvernance et avoir des retours d'expérience)
 </p>
 <ul><li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org">Movilab</a> est une plate-forme qui capitalise de la connaissance autour de tiers-lieux</b> et permet de partager de la documentation d'actions ou de pratiques. Movilab est un wiki et <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/La_gouvernance_de_Movilab">gouvernée par les contributeurs</a>.
 <ul><li> Sur Movilab, on y trouve la documentation des <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/Comices_Du_Faire_2020">Comices du faire 2020</a>, le déroulé d'un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/Low-tech_Camp">Low-tech camp</a>, basé sur la recette des  <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/IndieCamp">IndieCamp</a>, qui se base sur l'émancipation collective comme outils pédagogiques pour des individus libres et responsables, <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/La_Myne">l'histoire de la Myne</a> et peut-être votre communauté low-tech. <b>Il s'agit de « <i><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://xavcc.frama.io/defaire/">Défaire</a></i> » les tonnes d'objets déjà existant sur terre plutôt que faire en étant extractiviste de ressources de la terre </b></li></ul></li></ul>
 <ul><li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="http://lescommuns.org">Lescommuns.org</a></b> est une communauté ouverte qui oeuvre à faire connaître les communs en France et qui est constituée de <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://annuaire.lescommuns.org/category/collectifs/">nombreux collectifs</a> dont l'Assemblée Virtuelle, France Tiers-Lieux, La Myne,...
 <ul><li> LesCommuns met à disposition <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://annuaire.lescommuns.org/category/outils/">des outils</a> pour faciliter la production de communs et la capitalisation des connaissances, notamment sous forme d'un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://wiki.lescommuns.org/">wiki</a> et de <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://pad.lescommuns.org/">pads</a> (<b>Note</b>: pour accéder aux pads, il faut se créer un compte personnel qui listera les pads que l'on consulte en étant connecté). Un <i>annuaire</i> rassemble des ressources sur les low-tech sur des pads et des wiki.</li>
 <li> La gouvernance de LesCommuns est discutée sur un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://chat.lescommuns.org/channel/.com1">chat</a> pour les échanges quotidiens et un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://forum.lescommuns.org/">forum</a> pour les partages d'informations</li></ul></li></ul>
 <h3><span class="mw-headline" id="2.3-_Les_communaut.C3.A9s">2.3- Les communautés</span></h3>
 <blockquote>Les communautés sont les groupements de personnes qui créent et organisent des ressources. Ces communautés peuvent prendre des formes différentes et être plus ou moins formalisées.</blockquote>
 <ul><li>Exemples de communautés en low-tech:
 <ul><li> Un collectif qui organise des formations pour apprendre à fabriquer des objets dans une posture low-tech</li>
 <li> Un groupe qui gére un annuaire d'acteurs du low-tech</li></ul></li></ul>
 <ul><li> Il est possible de considérer comme un Commun une simple page wiki présentant une liste de liens web sur une thématique low-tech donnée. Cette page peut être gérée par 3 personnes avec quelques règles pour choisir les liens retenus. La communauté est alors simplement constituées de ces 3 personnes.</li></ul>
 <ul><li> Le collectif autour d'un Commun n'a pas nécessairement besoin d'être parfaitement identifié. Dans la pratique, il y a souvent des personnes très investies, des contributeurs actifs, des contributeurs irréguliers et d'autres occasionnels.</li></ul>
 <ul><li> Une ressource, par ex. un manuel de fabrication ou un atelier de fabrication partagé, qui n'est pas géré par une ou plusieurs personnes ou entités ne peut plus être considéré comme un Commun. Mais, même s'il n'y a plus de communautés, la ressource continue d'exister (avec, néanmoins, un risque de la voir disparaitre par manque d'entretien).</li></ul>
 <h3><span class="mw-headline" id="2.4-_Bien_distinguer_communaut.C3.A9_et_ressource">2.4- Bien distinguer communauté et ressource</span></h3>
 <blockquote>Dans l'approche des Communs, une ressource peut perdurer même si la, ou les, communauté(s) qui gèrent cette ressource, change. Cette dissociation ressource/communauté génère cette stabilité et c'est ce qui fait la force des Communs.</blockquote><p> Il existe, néanmoins, un risque que la ressource disparaisse ou se dégrade par manque d'entretien s'il n'y a plus de communauté.
 </p><ul><li> Par exemple, la plate-forme <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://github.com">github</a> héberge des codes de logiciel. Si la communauté gérant un code n'agit plus et n'entretient plus leur gouvernance et leur espace d'échange (qu'il soit numérique ou physique), le code restera hébergé sur github, de manière garantie. Il sera disponible, à minima, pour être utilisé et, au mieux, pour être réapproprié par une nouvelle communauté qui poursuivra le développement et l'entretien.</li></ul>
 <ul><li> Le raisonnement est similaire pour un ensemble de pages hébergées sur <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org">wikipedia</a> dont le contenu peut évoluer au gré de la présence des contributeurs.</li></ul>
 <ul><li> <i>Exemple de risque</i>: une association qui développe un potager partagé et qui créé un wiki sur le site personnel pour documenter ces expérimentations. La structure associative peut disparaître (pour toutes sortes de raisons liées à la vie courante des associations) et emporter avec elle ces documentations (à moins qu'une personne de bonne volonté ne fasse une sauvegarde). Le fait que les documentations soient hébergées "en interne" peut également freiner l'appropriation par des personnes en dehors de la structure mais néanmoins intéressées.</li></ul>

 <h2><span class="mw-headline" id="3-_Les_pratiques_autour_des_Communs">3- Les pratiques autour des Communs</span></h2>
 <p>La production de Communs s'appuient sur des outils (économiques, juridiques, numériques,...) mais... ce ne sont que des outils. Mettre une licence Creative Common sur un tutorial de fabrication d'une low-tech ne le transforme pas pour autant en un Commun s'il n'y a pas un accès aux sources, un espace pour échanger sur l'évolution de la documentation, etc... De même, rendre un code ou un plan de fabrication Open Source ne veut pas nécessairement dire qu'il sera accessible et compréhensible sans expliciter le fonctionnement ou les raisons des choix techniques. 
 </p><p><b>Point d'attention</b>: certains systèmes collaboratifs servent à alimenter des bases de données (par exemple: un appel à fournir des sites webs sur un thème donné). Il y a un risque que les contributeurs n'aient que peu de prise quant aux choix qui sont fait sur ces données (quelles données sont intégrées et lesquelles sont rejetées), à quoi seront utilisées ces données, etc... Ces systèmes sont louables dans l'idée mais il y a un risque réel que les contributeurs soient dépossédés de leurs apports et que cette ressource (la base de données) soit rendue inaccessible voire perdue si la structure porteuse de la base de données disparaît et que <i>les contributeurs ne puissent rien y faire</i>.
 Ces pratiques dites "collaboratives" ne permettent pas vraiment de reconnaître la contribution individuelle ou le travail fourni autrement que par une reconnaissance globale. Les wiki (Wikipedia par ex.) permettent d'identifier, par l'historique, les acteurs qui contribuent aux rédactions.
 </p><p>Dans cette partie, il va être évoqué:
 </p>
 <ul><li> les outils numériques</li>
 <li> les licences</li>
 <li> les modèles économiques </li>
 <li> les structures juridiques</li></ul>
 <h3><span class="mw-headline" id="3.1-_Outils_num.C3.A9riques">3.1- Outils numériques</span></h3>
 <ul><li> Malgré les critiques que la posture low-tech peut avoir vis-à-vis des technologies numériques, ces outils restent aujourd'hui indispensables pour partager du savoir, des informations ou simplement pour s'organiser en communautés ou entre contributeurs. Si ces outils numériques paraissent aujourd'hui incontournables pour ces usages, il convient toutefois d'adopter des pratiques de sobriété numérique<sup id="cite_ref-5" class="reference"><a href="#cite_note-5">[5]</a></sup>.</li></ul>
 <ul><li> Les outils de documentation qui sont fortement recommandés et utilisés parmi les commoners, sont:
 <ul><li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://framapad.org/fr/">Framapad</a></b> (technologie <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Etherpad">Etherpad</a>)
 <ul><li> Prise en main rapide mais interface peu ergonomique</li>
 <li> les fichiers hébergés sur Framasoft sont à durée de vie limitée</li></ul></li>
 <li> <b>Pad</b> (langage <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Markdown">Markdown</a> utilisé par la technologie Codimd)
 <ul><li> Prise en mains un peu complexe (avec la double fenêtre)</li>
 <li> Interface ergonomique</li>
 <li> Gros plus par rapport à Framapad: Possibilité d'insertion d'images et de photos </li></ul></li>
 <li> <b>Wiki</b> (technologie <a target="_blank" rel="noreferrer noopener" class="external text" href="https://www.mediawiki.org">Mediawiki</a> le plus souvent)
 <ul><li> Interface peu évidente à prendre en main pour les novices</li>
 <li> Ne permet pas vraiment de travailler à plusieurs personnes en simultané sur une même page</li>
 <li> Très puissant pour capitaliser de l'information dans la durée et pour créer des bases de connaissance</li></ul></li></ul></li></ul>
 <ul><li> Ces outils numériques sont installés et mis à disposition sur des plate-formes, notamment par des organisations comme <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://indiehosters.net/">IndieHosters</a> et <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://framasoft.org">Framasoft</a>. Ces outils peuvent également être installés pour des projets dédiés. Les outils numériques de type googledrive, discord, skype sont très restrictifs sur les possibilités de repartage ou de réutilisation de l'information produite. Ce n'est pas <i>nécessairement</i> critique pour ce qui relève de l'échange instantané (de type chat ou visio) du point de vue de la capitalisation de l'information. Il est par contre rédhibitoire de s'appuyer sur des outils de type googledrive pour capitaliser de l'information et créer des communs (voir <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://www.google.com/intl/fr/drive/terms-of-service/">la licence</a>) et en particulier l'<a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://www.google.com/intl/fr/drive/terms-of-service/archived/">ancienne version de cette licence - partie 6</a> pour comprendre l'état d'esprit).</li></ul>
 <ul><li> Les données ou les fichiers produits ont intérêt à utiliser des formats standards pour permettre l'échange entre plate-forme ou entre outils numériques et de faciliter des sauvegardes (<i>Note</i>: la possibilité d'export d'un format à l'autre n'est qu'un pis-aller).
 <ul><li> Le format markdown (md) est un standard utilisé dans les pads, sur github et peut être inséré dans certains sites webs. Il est également lisible facilement par les humains avec un simple éditeur de texte.</li></ul></li></ul>
 <h3><span class="mw-headline" id="3.2-_Les_licences">3.2- Les licences</span></h3>
 <ul><li> Les licences utilisées sur des documents, en particulier numériques, permettent de définir ce qu'il est possible de faire avec le contenu, et à quelles conditions, en terme de partage et de réutilisation. Cependant, mettre une licence libre sur un document ne le transforme pas pour autant en un Commun. La licence est seulement un outil - à valeur juridique - pour encadrer l'usage d'une ressource.</li></ul>
 <ul><li> Les licences les plus utilisées dans le domaine des Communs sont <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Licence_Creative_Commons">les Creatives Commons</a>, mises en place à l'origine pour protéger des oeuvre culturelles (litterature, musique, écrits, ...). Il existe d'autres licences libres, en particulier la GNU licence adaptée pour du code logiciel. Un travail serait à faire pour identifier les licences les plus adaptées pour les ressources du low-tech et plus généralement pour les productions de la Recherche et Développement. La <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/CERN_Open_Hardware_Licence">CERN Open Hardware Licence</a> est une licence utilisée pour des projets de matériel libre et serait à étudier dans l'approche Low-tech et Commun.</li></ul>
 <ul><li> En pratique, les usages des licences Creative Commons sont détaillées dans plusieurs documents. Voir par exemple <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://coop-ist.cirad.fr/etre-auteur/utiliser-les-licences-creative-commons/4-les-6-licences-cc">le travail de  CoopIST</a> Coopérer en Information Scientifique et Technique. L'utilisation d'une licence CC est gratuite et ne nécessite pas de démarche spécifique auprès d'un organisme.</li></ul>
 <ul><li> En pratique, partager un document sur internet en ayant la volonté qu'il soit réutilisé et modifié mais sans mentionner une licence est contre productif. En effet, en France ainsi que dans de nombreux pays, sans mention explicite, c'est le <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Droit_d%27auteur">droit d'auteur</a> qui s'applique et qui empêche formellement le partage et la réutilisation. </li></ul>
 <ul><li> Les <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Brevet">brevets industriels</a> sont une autre forme de protection juridique de la connaissance. Cependant, une licence libre (licence CC par ex.) protège le document (qu'il soit un écrit, un audio, une vidéo), c'est-à-dire qu'il protège la mise en forme de l'information utilisée mais il ne protège pas le design d'un poêle à bois ou d'un mécanisme low-tech. Le brevet protège lui le design, pour fabriquer un objet, en tant que tel. Le type de protection est différent parce que l'objectif recherché est différent: la licence libre favorise le partage et la réutilisation en gardant la paternité de l'oeuvre (ses auteurs) tandis que le brevet cherche à contrôler l'utilisation du design breveté tout en partageant la connaissance autour de ce design (c'était du moins l'esprit initial du brevet). </li></ul>
 <h3><span class="mw-headline" id="3.3-_Mod.C3.A8les_.C3.A9conomiques_.2F_valorisation_de_la_contribution">3.3- Modèles économiques / valorisation de la contribution</span></h3>
 <p>Une des limites, dans la contribution aux Communs, est le temps à consacrer à leur création et leur entretien, surtout pour les Communs de la connaissance et pour l'entretien des organisations de ces Communs parce que ce travail n'a de valeur que sur du long terme. Ce travail reste difficile à faire reconnaitre auprès de la société humaine et à financer et les Communs autour des LT n'échappent pas à cette situation. Il n'existe pas de modèles économiques fonctionnels à grande échelle parce que le recul n'est pas suffisant mais une série d'expérimentation permet déjà de dégager quelques pratiques et des axes d'action, <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikiversity.org/wiki/Recherche:Financement_et_r%C3%A9tribution_dans_les_communs">comme ces rencontres de 2016</a> le montrent.
 </p>
 <ul><li> Du point de vue de la valorisation du temps de contribution, 3 aspects peuvent être dégagés: 
 <ul><li> comment obtenir des financements, pour des structures ou des personnes</li>
 <li> comment répartir ou distribuer ces budgets</li>
 <li> comment rétribuer les contributeurs (les personnes au final) du point de vue de l'aspect juridique</li></ul></li></ul>
 <ul><li> Quelques outils en expérimentation ou sessions d'échange: 
 <ul><li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/images/movilab/2/24/Vivre_des_communs_(2017).pdf">Vivre des communs</a> (ou comment rétribuer la contribution aux communs Vivre des communs)</b>: un document explicatif des principes généraux</li>
 <li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/Les_mod%C3%A8les_contributifs">Les modèles contributifs</a></b>: des bilans d'expérimentation et des synthèses des pratiques</li>
 <li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://movilab.org/wiki/Pratiques_de_travail_en_collectif_contributif_;_responsabilit%C3%A9s,_engagements_et_transparence.">Pratiques de travail en collectif contributif ; responsabilités, engagements et transparence.</a></b></li>
 <li> Spécifiquement dédié aux low-tech, le <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://agir.lowtech.fr/#fonctionnement">Fond de Dotation d'Agir Low-tech</a></b> est en cours de mise en place pour opérer et financer des projets et faire le lien entre les porteurs de projets, les donateurs, les contributeurs et le public.</li>
 <li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://openbadges.info/tout-savoir-sur-les-open-badges/">Open Badge</a></b> est utilisé pour reconnaître, valoriser et rendre visible une compétence, un savoir-faire, un savoir-être, un engagement, un rôle, une contribution, une participation, une réalisation, un projet ou tout simplement un intérêt. <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="http://numerique76.spip.ac-rouen.fr/spip.php?article149">Présentation d'usage dans le milieu académique</a>.</li></ul></li></ul>
 <h3><span class="mw-headline" id="3.4-_Les_structures_juridiques">3.4- Les structures juridiques</span></h3>
 <p><b>Les communautés peuvent se structurer en s'appuyant sur des structures juridiques mais ce n'est pas une obligation. Pour rappel, ce n'est pas le seul choix de structuration juridique qui va permettre de gérer une communauté avec une gouvernance ouverte cohérente avec l'esprit des communs (on peut très bien créer une association avec une gouvernance pyramidale).</b>
 </p>
 <ul><li> Les structurations juridiques sont <i>juste</i> des outils... juridiques.</li></ul>
 <ul><li> Les structures en association, en SCIC, en SCOP sont évidemment préférées mais il est aussi possible de s'appuyer sur des SARL ou même des SAS et aboutir également à des gouvernances ouvertes.</li></ul>
 <ul><li> En droit Français, on peut très bien se structurer en association non déclarée (ou <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Association_de_fait">association de fait</a>) lorsque l'on s'associe autour d'un objectif. C'est une structure qui n'a pas de personnalité juridique mais est légalement reconnue. Il est possible de rédiger des statuts mais, il y a la limite de ne pas pouvoir signer de documents légaux (bail, contrat) et de ne pas pouvoir gérer de l'argent (ouverture de compte en banque, subvention).</li></ul>

 <h2><span class="mw-headline" id="4-_Exemples_de_low-tech_en_Communs">4- Exemples de low-tech en Communs</span></h2>
 <p><b>Quelques exemples de low-tech ou de démarches dans cette posture qui sont traités comme des Communs</b>. A chacun des cas, on identifie ce qui est de l'ordre de la <i>ressource</i>, de la <i>communauté</i>, de la <i>gouvernance</i> et des <i>règles de gestion</i> associées. Cette liste n'a pas vocation à être exhaustive mais à donner des exemples variés pour appuyer les propos de cette page.
 </p>
 <h3><span class="mw-headline" id="4.1-_Production_de_gel_hydroalcoolique">4.1- Production de gel hydroalcoolique</span></h3>
 <ul><li> La recette de fabrication a été libérée par son inventeur <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Didier_Pittet">Didier Pittet</a> et <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://www.who.int/gpsc/5may/tools/system_change/guide_production_locale_produit_hydro_alcoolique.pdf?ua=1">documentée sur différents sites</a> pour une utilisation libre</li>
 <li> <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="http://www.lamyne.org">La Myne</a> mène différentes actions au travers du <b>programme Epidemyne</b> lors du premier confinement en 2020 et décide en particulier de fabriquer du gel HA. L'expérimentation est relatée sur <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://pad.lamyne.org/epidemyne_solution-hydroalcoolique">un carnet de bord</a> et sert aussi bien à tracer les étapes qu'à se coordonner au quotidien. 
 </li>
 <li> A la fin du confinement, tout le processus de fabrication et d'organisation est partagé avec la <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://pad.lamyne.org/RUSH_cellule_logistique_coordonn%C3%A9e#">cellule logistique RUSH</a> pour permettre, en cas de besoin, la production de gel en plus grande quantité et pour favoriser l'appropriation.</li>
 <li> Dans cette <b>posture de fabrication low-tech</b>, on retrouve les <b>caractéristiques des Communs</b> avec:
 <ul><li> l'usage d'une <i>ressource</i> libre (la recette de D. Pittet)</li>
 <li> la production d'une nouvelle <i>ressource</i> sous forme d'une documentation de fabrication et de logistique</li>
 <li> une <i>communauté</i> de contributeurs de la Myne qui s'organise selon des <i>règles discutées</i> via un canal de chat et des visio. Les règles de gestion sont partagées sur un pad public, en particulier la façon dont la production de gel a été répartie et distribuée aux bénéficiaires. </li></ul></li></ul>
 <h3><span class="mw-headline" id="4.2-_Hack2Eaux">4.2- Hack2Eaux</span></h3>

 <ul><li> Rédaction d’un document de prospection présentant le concept envisagé, l’écosystème local, les opportunités business, la philosophie du lieu, le storytelling, le timing, les objectifs, les surfaces disponibles, déjà développé et reconnu dans le mesure de qualité de l’air (en Allemagne ou en France par exemple avec <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="http://www.wiki-rennes.fr/Ambassad%E2%80%99Air">Ambassad’Air</a>), nous proposons de nous concentrer sur les capacités de production de matériels nécessaires à la prévention et analyse de matière organique et de l’eau en lien avec les phénomènes décrits.</li></ul>
 <ul><li> Caractéristiques de la solution : (re)localiser au sein de territoire par des <i>communautés</i> civiques impliquées, la production basée à minima sur les 4 libertés fondamentales selon « GNU Linux », les capacités de production :
 <ul><li> de contenus pédagogiques et support formatifs</li>
 <li> de <i>ressources</i> informationnelles</li>
 <li> de matériels de mesure et d’analyse des sols et de l’eau (matériel biologique, matériel chimique, matériel mécanique, matériel informatique)</li>
 <li> de production de données standardisées</li>
 <li> de <i>mise en réseau</i> de coopération</li></ul></li></ul>
 <h3><span class="mw-headline" id="4.3-_La_maison_rustique">4.3- La maison rustique</span></h3>

 <ul><li> <b><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org/wiki/Maison_rustique_du_XIXe_si%C3%A8cle">La maison rustique</a> est une encyclopédie pratique et exhaustive, rédigée au début du XIXe siècle, sur les travaux à la ferme.</b> De nombreuses pratiques et outils décrits sont proches de l'esprit low-tech.</li>
 <li> Cette encyclopédie a été numérisée par différentes structures et <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://www.apprendre-preparer-survivre.com/bible-de-lautonomie-totale-maison-rustique-19eme-siecle/">mise à disposition gratuitement sur internet</a> avec une qualité moyenne et une impossibilité de faire des recherches par mots clés.</li>
 <li> La <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikisource.org/wiki/Maison_rustique_du_XIXe_si%C3%A8cle/%C3%A9d._1844/Livre_4/ch._8#8.4">plate-forme wikisource</a> héberge les pages numérisées et permet de retranscrire les textes dans un format numérique avec un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikisource.org/wiki/Livre:Maison_rustique_du_XIXe_si%C3%A8cle,_%C3%A9d._Bixio,_1844,_III.djvu">ensemble d'outils pour suivre le travail collaboratif</a></li>
 <li> En plus des contributeurs de wikisource, une <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://maisonrustique-project.webnode.fr/">communauté</a> s'est structurée spécifiquement pour organiser sa contribution et ses règles de travail. Elle s'appuie en particulier sur un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://discord.gg/Tzpy6eTfte">discord</a>.</li>
 <li> On retrouve également ici une <i>ressource libre</i> (l'encyclopédie qui n'est plus soumise au droit d'auteur), une plate-forme liée à wikipédia qui <i>héberge la ressource</i> et garantie sa pérénité et une <i>communauté de contributeurs</i> pour la retranscription avec une <i>gouvernance discutée</i> sur un forum.</li></ul>
 <h3><span class="mw-headline" id="4.4-_L.27atelier_paysan">4.4- L'atelier paysan</span></h3>
 <ul><li> L'<a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://www.latelierpaysan.org">atelier paysan</a> conçoit des machines agricoles et organise des formations pour que les paysans apprennent à les fabriquer. Ces plans sont en open source sous licence creative commons (<i>ressource</i>) pour permettre aux paysans de modifier leurs machines et pour que d'autres structures puissent également organiser des formations en s'appuyant sur ces plans.</li>
 <li> Le bureau d'ingénierie de l'Atelier Paysan s'appuie en particulier sur les pratiques des paysans eux-mêmes pour adapter les conceptions des machines agricoles. Les échanges avec cette <i>communauté</i> se font au travers d'un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://forum.latelierpaysan.org/">forum de discussion</a> et par des rencontres directement sur les terrains agricoles.</li>
 <li> La <i>gouvernance</i> de la <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://latelierpaysan.org/La-cooperative-se-consolide-et-ne-lachera-rien">structure coopérative est discutée en détails</a> avec les ingénieurs, paysans, contributeurs &amp; partenaires.</li></ul>

 <h3><span class="mw-headline" id="4.5-_La_Fabrique_des_mobilit.C3.A9s_.26_les_low-tech">4.5- La Fabrique des mobilités &amp; les low-tech</span></h3>
 <ul><li>  La <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://wiki.lafabriquedesmobilites.fr">Fabrique des Mobilités</a> intervient ainsi comme un accélérateur dédié à un écosystème industriel en mutation. La Fabrique s’appuie sur les structures d’accompagnement existantes (incubateur, accélérateur, etc.) pour augmenter les chances de succès des meilleurs projets, renforçant ainsi l’ensemble de l’écosystème. L’activité des entrepreneurs et des partenaires utilisant les <i>ressources</i> de la Fabrique permettra de générer des “Communs”.</li></ul>
 <ul><li>  Le lieu d'échange de la <i>communauté</i> des contributeurs des communs de la fabrique des mobilités est <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://chat.fabmob.io">chat</a>.</li></ul>

 <h3><span class="mw-headline" id="4.6-_Open_Energy_Monitor">4.6- Open Energy Monitor</span></h3>
 <p>L'<a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://openenergymonitor.org/">Open Energy Monitor</a> est un système de monitoring de la consommation et de la production d'énergie électrique. Le système est en open-source et *complètement documenté* sur un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://wiki.openenergymonitor.org/index.php/Main_Page">wiki</a>, le code et tous les plans sont hébergés sur un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://github.com/openenergymonitor">compte github</a> (<i>ressources</i>). La <i>communauté</i> d'utilisateurs et de contributeurs de ce système de mesure échange sur un <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://community.openenergymonitor.org/">forum</a> tant sur le développement que sur la <i>gouvernance</i>.
 </p>
 <h2><span class="mw-headline" id="5-_Licence_de_la_page_wiki">5- Licence de la page wiki</span></h2>
 <p>Cette page s'appuie sur des documents issues d'autres documents, en particulier de <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fr.wikipedia.org">Wikipedia</a> et d'autres wiki (les liens vers les sources sont mentionnés à chaque fois). En fonction de la licence de ces sources, cette page est donc sous <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://creativecommons.org/licenses/">licence Creative Commons</a>.
 </p>
 <h2><span class="mw-headline" id="6-_Notes_et_r.C3.A9f.C3.A9rences">6- Notes et références</span></h2>
--- a/cache/2021/index.html
+++ b/cache/2021/index.html
@@ -149,6 +149,8 @@
      
        <li><a href="/david/cache/2021/b19c86fa9c66389e26495165b442d0c0/" title="Accès à l’article dans le cache local : L’emprise de la machine : une critique décroissanciste de la domination technique">L’emprise de la machine : une critique décroissanciste de la domination technique</a> (<a href="https://polemos-decroissance.org/lemprise-de-la-machine-une-critique-decroissanciste-de-la-domination-technique/" title="Accès à l’article original distant : L’emprise de la machine : une critique décroissanciste de la domination technique">original</a>)</li>
      
        <li><a href="/david/cache/2021/7a21fd7cca573df8b35b973d8ee080c8/" title="Accès à l’article dans le cache local : Low-tech et Communs">Low-tech et Communs</a> (<a href="https://wiki.lescommuns.org/wiki/Low-tech_et_Communs" title="Accès à l’article original distant : Low-tech et Communs">original</a>)</li>
      
        <li><a href="/david/cache/2021/2c4182f774f612fda62ca7b1652bbc0d/" title="Accès à l’article dans le cache local : La voiture coûte cher aux Français">La voiture coûte cher aux Français</a> (<a href="https://www.liberation.fr/economie/transports/la-voiture-coute-cher-aux-francais-20210526_26IJ75OXBVEJFE5HPIBUTPYLEA/" title="Accès à l’article original distant : La voiture coûte cher aux Français">original</a>)</li>
      
        <li><a href="/david/cache/2021/618145b6b22de36fbbc1cd3162d41515/" title="Accès à l’article dans le cache local : Territorialiser les systèmes numériques, l’exemple des centres de données">Territorialiser les systèmes numériques, l’exemple des centres de données</a> (<a href="https://gauthierroussilhe.com/post/territoires-centres-de-donnees.html" title="Accès à l’article original distant : Territorialiser les systèmes numériques, l’exemple des centres de données">original</a>)</li>
@@ -169,6 +171,8 @@
      
        <li><a href="/david/cache/2021/246f7c9e777e8403db950c0ed7a5d93b/" title="Accès à l’article dans le cache local : « On avait raison » : chez les complotistes, l’art du triomphalisme sélectif">« On avait raison » : chez les complotistes, l’art du triomphalisme sélectif</a> (<a href="https://www.lemonde.fr/les-decodeurs/article/2021/04/25/on-avait-raison-chez-les-complotistes-l-art-du-triomphalisme-selectif_6077975_4355770.html" title="Accès à l’article original distant : « On avait raison » : chez les complotistes, l’art du triomphalisme sélectif">original</a>)</li>
      
        <li><a href="/david/cache/2021/4072b1e628106ec95319062a87d21f47/" title="Accès à l’article dans le cache local : Copying is the way design works">Copying is the way design works</a> (<a href="https://matthewstrom.com/writing/copying/" title="Accès à l’article original distant : Copying is the way design works">original</a>)</li>
      
        <li><a href="/david/cache/2021/99c13c692ec7f2217311fdea482e8792/" title="Accès à l’article dans le cache local : Newsletters">Newsletters</a> (<a href="https://www.robinrendle.com/essays/newsletters" title="Accès à l’article original distant : Newsletters">original</a>)</li>
      
        <li><a href="/david/cache/2021/0bb6418a58c977e7b142597213f6225d/" title="Accès à l’article dans le cache local : Is GitHub a derivative work of GPL’d software?">Is GitHub a derivative work of GPL’d software?</a> (<a href="https://drewdevault.com/2021/07/04/Is-GitHub-a-derivative-work.html" title="Accès à l’article original distant : Is GitHub a derivative work of GPL’d software?">original</a>)</li>
@@ -309,6 +313,8 @@
      
        <li><a href="/david/cache/2021/8bef65b7167873d697f665dab2fdbb8b/" title="Accès à l’article dans le cache local : Maximizing Possible Outcomes In Simple Interfaces">Maximizing Possible Outcomes In Simple Interfaces</a> (<a href="https://www.otsukare.info/2021/03/29/dumb-down-danger" title="Accès à l’article original distant : Maximizing Possible Outcomes In Simple Interfaces">original</a>)</li>
      
        <li><a href="/david/cache/2021/23d224bccb7af8db5017cebf813fec56/" title="Accès à l’article dans le cache local : How to Favicon in 2021: Six files that fit most needs">How to Favicon in 2021: Six files that fit most needs</a> (<a href="https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs" title="Accès à l’article original distant : How to Favicon in 2021: Six files that fit most needs">original</a>)</li>
      
        <li><a href="/david/cache/2021/8809cdb7b9693d1edff1f6627eeaae83/" title="Accès à l’article dans le cache local : Web envoûté">Web envoûté</a> (<a href="https://www.la-grange.net/2021/06/02/envoutement" title="Accès à l’article original distant : Web envoûté">original</a>)</li>
      
        <li><a href="/david/cache/2021/df1a769924b63c144614f3d8e5b0d004/" title="Accès à l’article dans le cache local : Self-Driving Cars are Self-Driving Bullets">Self-Driving Cars are Self-Driving Bullets</a> (<a href="https://themobilist.medium.com/self-driving-cars-self-driving-bullets-955dfd2c5150" title="Accès à l’article original distant : Self-Driving Cars are Self-Driving Bullets">original</a>)</li>
@@ -381,6 +387,8 @@
      
        <li><a href="/david/cache/2021/6ad5b5985682512c140781b2b3c9ff7c/" title="Accès à l’article dans le cache local : That which is unique, breaks">That which is unique, breaks</a> (<a href="https://simonsarris.substack.com/p/that-which-is-unique-breaks" title="Accès à l’article original distant : That which is unique, breaks">original</a>)</li>
      
        <li><a href="/david/cache/2021/07f65527fb51a3d31cfd7173bde1d76c/" title="Accès à l’article dans le cache local : Les ressources pour l'écoconception et la sobriété numérique">Les ressources pour l'écoconception et la sobriété numérique</a> (<a href="https://www.pikselkraft.com/les-ressources-pour-l-ecoconception-et-la-sobriete-numerique/" title="Accès à l’article original distant : Les ressources pour l'écoconception et la sobriété numérique">original</a>)</li>
      
        <li><a href="/david/cache/2021/d314c611a907c9273ac48dfbfd940a8d/" title="Accès à l’article dans le cache local : Towards a more Elvish vision for Technology">Towards a more Elvish vision for Technology</a> (<a href="https://essays.georgestrakhov.com/elvish/" title="Accès à l’article original distant : Towards a more Elvish vision for Technology">original</a>)</li>
      
        <li><a href="/david/cache/2021/0086cb1d562c02cd96f9f2a38e5bcc42/" title="Accès à l’article dans le cache local : What is a feed? (a.k.a. RSS)">What is a feed? (a.k.a. RSS)</a> (<a href="https://aboutfeeds.com/" title="Accès à l’article original distant : What is a feed? (a.k.a. RSS)">original</a>)</li>
@@ -451,6 +459,8 @@
      
        <li><a href="/david/cache/2021/45af171610f986077420b27c2da46ec1/" title="Accès à l’article dans le cache local : I bought 300 emoji domain names from Kazakhstan and built an email service">I bought 300 emoji domain names from Kazakhstan and built an email service</a> (<a href="https://tinyprojects.dev/projects/mailoji" title="Accès à l’article original distant : I bought 300 emoji domain names from Kazakhstan and built an email service">original</a>)</li>
      
        <li><a href="/david/cache/2021/3ac474db4dc65c1d25e99cb30655ff12/" title="Accès à l’article dans le cache local : World smallest office suite">World smallest office suite</a> (<a href="https://zserge.com/posts/awfice/" title="Accès à l’article original distant : World smallest office suite">original</a>)</li>
      
        <li><a href="/david/cache/2021/40d98edeb7835abd7f9d4c1917e3ea5c/" title="Accès à l’article dans le cache local : How to style RSS feed">How to style RSS feed</a> (<a href="https://lepture.com/en/2019/rss-style-with-xsl" title="Accès à l’article original distant : How to style RSS feed">original</a>)</li>
      
        <li><a href="/david/cache/2021/0acb9b97e82885d127fefb8266875754/" title="Accès à l’article dans le cache local : La mort figurative vous va si bien.">La mort figurative vous va si bien.</a> (<a href="https://www.affordance.info/mon_weblog/2021/03/mort-figurative.html" title="Accès à l’article original distant : La mort figurative vous va si bien.">original</a>)</li>
@@ -463,6 +473,8 @@
      
        <li><a href="/david/cache/2021/372cdbf3dc67c7796673bec4aaeb9f0f/" title="Accès à l’article dans le cache local : DST Root CA X3 Expiration (September 2021)">DST Root CA X3 Expiration (September 2021)</a> (<a href="https://letsencrypt.org/docs/dst-root-ca-x3-expiration-september-2021/" title="Accès à l’article original distant : DST Root CA X3 Expiration (September 2021)">original</a>)</li>
      
        <li><a href="/david/cache/2021/63317c91823b52571b851e7a27eb7b4f/" title="Accès à l’article dans le cache local : How I Build JavaScript Apps In 2021">How I Build JavaScript Apps In 2021</a> (<a href="https://timdaub.github.io/2021/01/16/web-principles/" title="Accès à l’article original distant : How I Build JavaScript Apps In 2021">original</a>)</li>
      
        <li><a href="/david/cache/2021/86eba8e465d7ce11ef61a0c61f878f21/" title="Accès à l’article dans le cache local : Poor in Tech">Poor in Tech</a> (<a href="http://megelison.com/poor-in-tech" title="Accès à l’article original distant : Poor in Tech">original</a>)</li>
      
        <li><a href="/david/cache/2021/c6a317213165bc069aabb49c53184a7f/" title="Accès à l’article dans le cache local : Changes at Basecamp">Changes at Basecamp</a> (<a href="https://world.hey.com/jason/changes-at-basecamp-7f32afc5" title="Accès à l’article original distant : Changes at Basecamp">original</a>)</li>
@@ -485,6 +497,8 @@
      
        <li><a href="/david/cache/2021/2057ddcf3fd20edd602cee1b08ac17e8/" title="Accès à l’article dans le cache local : Designing Branch: Sustainable Interaction Design Principles">Designing Branch: Sustainable Interaction Design Principles</a> (<a href="https://branch.climateaction.tech/2020/10/15/designing-branch-sustainable-interaction-design-principles/" title="Accès à l’article original distant : Designing Branch: Sustainable Interaction Design Principles">original</a>)</li>
      
        <li><a href="/david/cache/2021/1357452f72e8fab727df874cbc2582d4/" title="Accès à l’article dans le cache local : Ataraxie numérique">Ataraxie numérique</a> (<a href="http://aswemay.fr/co/040011.html" title="Accès à l’article original distant : Ataraxie numérique">original</a>)</li>
      
        <li><a href="/david/cache/2021/1f9f4eb2d926148640ef831f28335380/" title="Accès à l’article dans le cache local : Des administrateurs d’extrême droite ont manipulé les articles de Wikipedia Croatie pendant 10 ans">Des administrateurs d’extrême droite ont manipulé les articles de Wikipedia Croatie pendant 10 ans</a> (<a href="https://www.numerama.com/politique/721329-des-administrateurs-dextreme-droite-ont-manipule-les-articles-de-wikipedia-croatie-pendant-10-ans.html" title="Accès à l’article original distant : Des administrateurs d’extrême droite ont manipulé les articles de Wikipedia Croatie pendant 10 ans">original</a>)</li>
      
        <li><a href="/david/cache/2021/05391381e6590e32184162110762aa62/" title="Accès à l’article dans le cache local : GitHub Copilot and Copyright">GitHub Copilot and Copyright</a> (<a href="https://mjtsai.com/blog/2021/07/07/github-copilot-and-copyright/" title="Accès à l’article original distant : GitHub Copilot and Copyright">original</a>)</li>
@@ -499,6 +513,8 @@
      
        <li><a href="/david/cache/2021/68f3b87ebf1ae01bccc75fc648ac9201/" title="Accès à l’article dans le cache local : Data isn’t oil, so what is it?">Data isn’t oil, so what is it?</a> (<a href="https://howtomeasureghosts.substack.com/p/data-isnt-oil-so-what-is-it" title="Accès à l’article original distant : Data isn’t oil, so what is it?">original</a>)</li>
      
        <li><a href="/david/cache/2021/74eae1dc26bd4537941491b4e7e201bc/" title="Accès à l’article dans le cache local : Cheating Entropy with Native Web Technologies">Cheating Entropy with Native Web Technologies</a> (<a href="https://blog.jim-nielsen.com/2020/cheating-entropy-with-native-web-tech/" title="Accès à l’article original distant : Cheating Entropy with Native Web Technologies">original</a>)</li>
      
        <li><a href="/david/cache/2021/9f3a8d345963dac24bef4df547fef72c/" title="Accès à l’article dans le cache local : Why light text on dark background is a bad idea">Why light text on dark background is a bad idea</a> (<a href="https://tatham.blog/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/" title="Accès à l’article original distant : Why light text on dark background is a bad idea">original</a>)</li>
      
        <li><a href="/david/cache/2021/626841dd876f103a10391b1b841ba5ae/" title="Accès à l’article dans le cache local : Host your own wikipedia backup">Host your own wikipedia backup</a> (<a href="https://dataswamp.org/~solene/2019-11-13-wikimedia-dump.html" title="Accès à l’article original distant : Host your own wikipedia backup">original</a>)</li>