davidbgk
/
larlet-fr-david

<!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>Espoir — David Larlet</title>
<meta name="description" content="In a sense, every hyperlink on the World Wide Web is little act of hope. Even though I know that when I link to something, it probably won’t last, I still harbour that hope.">
<!-- 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>

<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>Espoir</h1>
</header>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2021/07/20/" title="Publication précédente : Jour 2">← Précédent</a> •
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a>
     • <a rel="next" href="/david/2021/07/22/" title="Publication suivante : Vol d’eau">Suivant →</a>
  </p>
</nav>
<hr>


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

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


  <nav>
    <p>
      
        <a href="/david/2021/incompetence/"
          title="Liste de tous les articles associés à cette étiquette"
          >#incompétence</a>
      
        <a href="/david/2021/traces/"
          title="Liste de tous les articles associés à cette étiquette"
          >#traces</a>
      
        <a href="/david/2021/web/"
          title="Liste de tous les articles associés à cette étiquette"
          >#web</a>
      
      <a href="/david/#tags"
        title="Liste de toutes les étiquettes existantes"
        ><svg class="icon icon-tags">
          <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
        </svg> tous ?</a>
    </p>
  </nav>

<nav>
  <p class="center">
    <a rel="prev" href="/david/2021/07/20/" title="Publication précédente : Jour 2">← Précédent</a> •
    <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
     • <a rel="next" href="/david/2021/07/22/" title="Publication suivante : Vol d’eau">Suivant →</a>
  </p>
</nav>
</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>