davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>ce que nous laissons (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

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

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


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


<hr>

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

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

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

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

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>