8 місяці тому · dd1036ed42
--- a/david/2024/03/24/index.html
+++ b/david/2024/03/24/index.html
@@ -152,6 +152,10 @@
         title="Aller à la page de recherche"
         rel="search" data-no-instant>Recherche</a>
      
        • <a rel="next"
            href="/david/2024/03/25/"
            title="Publication suivante : Inclusion">Suivant →</a>
      
    </p>
  </nav>
  
@@ -240,6 +244,10 @@
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/03/25/"
            title="Publication suivante : Inclusion">Suivant →</a>
      
    </p>
  </nav>

--- a/david/2024/03/25/index.html
+++ b/david/2024/03/25/index.html
@@ -0,0 +1,512 @@
 <!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>
    Inclusion
  — David Larlet</title>
  <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>
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <meta name="description" content="Dans le cadre de manger ma propre bouffe pour chien mon autoéquipement, je voulais vérifier si l’implémentation de oEmbed dans uMap était utilisable… et il se trouve que ce n’était pas le cas avant aujourd’hui. Il y aurait encore des pistes d’améliorations mais au moins ça affiche une carte (si vous autorisez les requêtes externes en JS) :">
  <!-- 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">
  
 <style type="text/css">
  .tippy-content {
    min-width: 280px;
    padding: .5rem;
    font-size: calc(var(--fluid-0) * 0.8);
    font-family: var(--labor-font);
    letter-spacing: initial;
    text-align: left;
  }
  .tippy-content h3 {
    margin-top: 0;
  }
  .tippy-content h3 img {
    max-width: 2rem;
    max-height: 2rem;
    display: inline-block;
  }
  .tippy-content .tippy-links {
    display: flex;
    justify-content: space-around;
  }
  .tippy-content a {
    padding: .4rem;
    color: #F06048;
  }
 </style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>Inclusion</h1>
      <p>Le <time datetime="2024-03-25">25 mars 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/03/24/"
           title="Publication précédente : Cage">← Précédent</a> •
      
      <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
      •
      <a href="/david/recherche/"
         title="Aller à la page de recherche"
         rel="search" data-no-instant>Recherche</a>
      
    </p>
  </nav>
  
 <p>Dans le cadre de <del><a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Eating_your_own_dog_food">manger ma propre bouffe pour chien</a></del> mon <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Auto%C3%A9quipement">autoéquipement</a>, je voulais vérifier si l’implémentation de <a data-link-domain="oembed.com" href="https://oembed.com/">oEmbed</a> dans <a data-link-domain="umap-project.org" href="https://umap-project.org/fr/">uMap</a> était utilisable… et il se trouve que ce n’était pas le cas avant aujourd’hui. Il y aurait encore des pistes d’améliorations mais au moins ça affiche une carte (si vous autorisez les requêtes externes en&nbsp;JS)&nbsp;:</p>
 <style type="text/css">
  o-embed {
    /* Size of the oembed + paragraph + margins. */
    height: calc(300px + 1rem + 3rem);
  }
 </style>

 <o-embed url="https://umap.openstreetmap.fr/fr/map/grand-tour-de-la-foret-de-ouareau_1037457">
  <p>
    Vous devriez voir s’afficher une carte de mon « Grand Tour de la forêt de Ouareau »,
    il est probable que cela ne s’exécute pas dans un agrégateur par exemple.
  </p>
 </o-embed>

 <script type="module">
  class OEmbed extends HTMLElement {
    static tagName = 'o-embed'

    static register(tagName, registry) {
      if(!registry && ('customElements' in globalThis)) {
        registry = globalThis.customElements
      }
      registry?.define(tagName || this.tagName, this)
    }

    get url() {
      return this.getAttribute('url') || ''
    }

    constructor() {
      super()
      this.attachShadow({ mode: 'open' })
    }

    async connectedCallback() {
      let slot = document.createElement('slot')
      this.shadowRoot.appendChild(slot)

      const html = await this.fetchText(this.url)
      const oEmbedLink = this.extractOembedLink(html)
      const oEmbedJson = await this.fetchJson(oEmbedLink)
      this.innerHTML = oEmbedJson.html
    }

    fetchText(url) {
      return fetch(url)
        .then((data) => data.text())
        .catch(console.error.bind(this))
    }

    fetchJson(url) {
      return fetch(url, { type: 'json' })
        .then((data) => data.json())
        .catch(console.error.bind(this))
    }

    extractOembedLink(html) {
      const parser = new DOMParser()
      const htmlDocument = parser.parseFromString(html, "text/html")
      const oEmbedMeta = htmlDocument.documentElement.querySelector(
        'link[type="application/json+oembed"]'
      )
      return oEmbedMeta.href
    }
  }

  OEmbed.register()
 </script>

 <p>J’en ai fait un <em>web component</em> car je compte explorer / publier davantage de cartes par la suite. Je vais essayer d’ajouter des options lorsqu’elles deviendront disponibles côté uMap. Pour l’instant, il faudra vous contenter d’un <code>view-source:</code> (meilleure fonctionnalité du Web, ne l’oublions&nbsp;jamais).</p>
 <p>Au passage, j’ai mis à jour le moteur de ce site pour pouvoir injecter des morceaux de HTML (et donc CSS/JS) sur des billets en particulier. Je m’amuse&nbsp;bien&nbsp;🧑‍🔬.</p>
 <p>Je compte <a href="/david/2024/03/11/#hr-109">reparler de cette carte</a>.</p>
 <a href="#hr-134" title="Lien vers cette section de la page"><hr id="hr-134" /></a>
 <p>Beaucoup moins glorieux, j’ai participé à <a data-link-domain="forum.openstreetmap.fr" href="https://forum.openstreetmap.fr/t/mise-en-production-umap-v2-1-x-compliquee-perte-des-dernieres-donnees-sauvegardees-sur-52-cartes/22336">de la perte de données</a> aujourd’hui. Nous avons eu besoin de trois cerveaux et pas mal d’heures pour comprendre ce qu’il se passait. Il était difficile de tester / imaginer / reproduire autrement que sur le serveur de production. C’est déjà pas mal d’avoir eu la possibilité de passer en lecture seule avant que ça ne touche trop de&nbsp;cartes.</p>
 <p>J’ai appris qu’il ne fallait pas se fier à l’ordre des IDs… lorsqu’ils deviennent des&nbsp;UUIDs&#8239;!</p>
 <a href="#hr-135" title="Lien vers cette section de la page"><hr id="hr-135" /></a>

 <blockquote lang="en">
 <p>A data hoarder’s dream come true: bundle any web page into a single HTML file. You can finally replace that gazillion of open tabs with a gazillion of .html files stored somewhere on your precious little&nbsp;drive.</p>
 <p>Unlike the conventional “Save page as”, monolith not only saves the target document, <mark>it embeds CSS, image, and JavaScript assets all at once,</mark> producing a single HTML5 document that is a joy to store and&nbsp;share.</p>
 <p><cite><em><a data-link-domain="github.com" href="https://github.com/Y2Z/monolith">monolith</a></em></cite></p>
 </blockquote>
 <p>Je me demande si je ne devrais pas avoir recours à ce type d’outil plutôt que de n’extraire que la partie de HTML qui m’intéresse pour garder <a href="/david/2024/02/03/" title="Archives">une copie des liens</a> que je lie par ici. C’est pour l’instant un peu fastidieux mais ça me fait aussi découvrir des choses en explorant le code des&nbsp;autres.</p>
 <a href="#hr-136" title="Lien vers cette section de la page"><hr id="hr-136" /></a>

 <blockquote lang="en">
 <p>For this reason, I got more into <mark>“Conflict-free Resolution Data Types” (CRDTs),</mark> with the goal of understanding what they are, how they work, what are the different libraries out there, and which one would be a good fit for us, if&nbsp;any.</p>
 <p><cite><em><a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/a-comparison-of-javascript-crdts.html" hreflang="fr"
            title="Consultation de l’article">A comparison of JavaScript CRDTs</a>
            <a href="/david/cache/2024/2c0b2588dfcd3a194da4133c7505cd3e/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://blog.notmyidea.org/a-comparison-of-javascript-crdts.html"
                data-date="2024-03-25"
                data-favicon="https://blog.notmyidea.org/favicon-32x32.png"
                data-domain="blog.notmyidea.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>J’apprends plein de choses à ce sujet grâce à Alexis, c’est chouette à explorer par&nbsp;procuration.</p>
 <a href="#hr-137" title="Lien vers cette section de la page"><hr id="hr-137" /></a>

 <blockquote lang="en">
 <p>To summarize, digital information requires maintenance. It's not sufficient to make backups; the backups also need to be maintained, upgraded, transferred, and curated. Without conscientious care, the data of today will be lost forever in a few years. Even with care, it's possible through software or hardware changes to lose access forever. That shoebox of old backup CDs will be unreadable&nbsp;soon.</p>
 <p>Which brings us back to those old photo caches. They held negatives and prints, physical objects that stored images. They needed no attention, no curating, no updating. They sat untended and forgotten for decades, but through all that time faithfully held their information, waiting for a future discoverer. As a result, we can all see what the Scott Antarctic expedition saw, and I can see what my great-grandparents looked&nbsp;like.</p>
 <p><mark>It is a sad irony that modern technology makes it unlikely that future generations will see the images made&nbsp;today.</mark></p>
 <p>Ask yourself whether your great-grandchildren will be able to see your photographs. If the images exist only as a digital image file, the answer is almost certainly, &quot;No&quot;. If, however, there are physical prints, the odds improve. Those digital images need to be made real to endure. Without a print, a digital photograph has no&nbsp;future.</p>
 <p><cite><em><a data-link-domain="commandcenter.blogspot.com" href="https://commandcenter.blogspot.com/2014/08/prints.html" hreflang="en"
            title="Consultation de l’article (anglais)">command center: Prints</a>
            <a href="/david/cache/2024/46dc6f44f3e34c4c0626ad4b13dba768/" hreflang="en"
                data-tippy data-description="Two long-buried caches of photographs came to light last year. One was a stack of cellulose nitrate negatives made on the Scott Antarctic ex..."
                data-source="https://commandcenter.blogspot.com/2014/08/prints.html"
                data-date="2024-03-25"
                data-favicon="https://commandcenter.blogspot.com/favicon.ico"
                data-domain="commandcenter.blogspot.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>Très vrai <em>et</em> je me demande si le fait d’avoir des artefacts qui perdurent sur plusieurs générations sans entretien / transmission n’est pas justement un épiphénomène. Le numérique est peut-être plus proche de la transmission orale, une information qui a besoin d’être appropriée par læ récepteur·ice pour qu’elle continue à&nbsp;vivre.</p>
 <p>Ce sera à moi d’apprendre à ma descendance comment garder en vie cette flamme numérique qui vacille à chaque coup de vent de format&nbsp;propriétaire.</p>

  
    <nav>
      <p>
        
          <a href="/david/2024/dependance/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#dépendance</a>
        
          <a href="/david/2024/partage/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#partage</a>
        
          <a href="/david/2024/technique/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#technique</a>
        
        <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
      </p>
    </nav>
  
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/03/24/"
           title="Publication précédente : Cage">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
    </p>
  </nav>

      
        <form action="/david/recherche/" method="get">
          <fieldset>
            <legend>Recherche</legend>
            <label for="input-search">Termes de votre recherche :</label>
            <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
            <input type="submit" value="Chercher">
            <p id="indexation-infos">
              <small>
                Seuls les contenus de ces 8 dernières années sont indexés.
              </small>
            </p>
          </fieldset>
        </form>
      
      <aside>
        <theme-toggle></theme-toggle>
      </aside>
    </article>
    <hr>
    <footer>
      <p>
        <a href="/david/" title="Aller à l’accueil">Accueil</a>
        •
        <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
        •
        <a href="http://larlet.com"
           title="Go to my English profile"
           data-instant>Pro</a>
        •
        <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
        •
        <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset div {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème</legend>
            <div>
              <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>
            </div>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      class ThemeToggle extends HTMLElement {
        constructor() {
          super()
          const themeSelectorTemplate = document.querySelector('#theme-selector')
          const form = themeSelectorTemplate.content.firstElementChild
          this.attachShadow({ mode: 'open' })
          this.shadowRoot.appendChild(form.cloneNode(true))
        }

        connectedCallback() {
          const form = this.shadowRoot.querySelector('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 colorsLayer = undefined
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
          let mediaRules = []
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.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) {
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
    
  <script src="/static/david/js/popper-2.11.8.min.js"></script>
  <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  <script>
    tippy('[data-tippy]', {
      content(reference) {
        reference.addEventListener('click', (e) => e.preventDefault())
        return `
        <h3 lang="fr">
          <img src="${reference.dataset.favicon}" loading="lazy">
          <a href="${reference.dataset.source}"
            >Article sur ${reference.dataset.domain}</a></h3>
        <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
        <div class="tippy-links" lang="fr">
          <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
        </div>
        `
      },
      allowHTML: true,
      interactive: true,
      delay: [150, 700],
      hideOnClick: false
    })
  </script>
  <script type="module">
    import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'

    const markObserver = new IntersectionObserver((entries, observer) => {
      const computedStyle = getComputedStyle(document.documentElement)
      const markBackground = computedStyle.getPropertyValue('--mark-background')
      for (const entry of entries) {
        if (entry.intersectionRatio === 0) continue
        const markElement = entry.target
        markElement.style.backgroundColor = 'inherit'
        const annotation = annotate(
          markElement, {
            type: 'highlight',
            multiline: true,
            color: markBackground,
            // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
            animate: false
          }
        )
        annotation.show()
        observer.unobserve(markElement)
      }
    }, {threshold: 1.0})

    for (const markElement of document.querySelectorAll('mark')) {
      markObserver.observe(markElement)
    }
  </script>

  </body>
 </html>
--- a/david/2024/_sources/2024-03-25
+++ b/david/2024/_sources/2024-03-25
@@ -1,13 +1,20 @@
 <!-- https://www.web3isgoinggreat.com/single/2024-02-28-0 -->
 <!-- https://umap.openstreetmap.fr/fr/map/grand-tour-de-la-foret-de-ouareau_1037457 -->
 <style type="text/css">
  o-embed {
    /* Size of the oembed + paragraph + margins. */
    height: calc(300px + 1rem + 3rem);
  }
 </style>

 <oembed-lazy url="https://umap.openstreetmap.fr/fr/map/grand-tour-de-la-foret-de-ouareau_1037457">
  Une carte de la Grande Boucle de la forêt de Ouareau
 </oembed-lazy>
 <o-embed url="https://umap.openstreetmap.fr/fr/map/grand-tour-de-la-foret-de-ouareau_1037457">
  <p>
    Vous devriez voir s’afficher une carte de mon « Grand Tour de la forêt de Ouareau »,
    il est probable que cela ne s’exécute pas dans un agrégateur par exemple.
  </p>
 </o-embed>

 <script type="module">
  class OembedLazy extends HTMLElement {
    static tagName = 'oembed-lazy'
  class OEmbed extends HTMLElement {
    static tagName = 'o-embed'

    static register(tagName, registry) {
      if(!registry && ('customElements' in globalThis)) {
@@ -31,13 +38,7 @@

      const html = await this.fetchText(this.url)
      const oEmbedLink = this.extractOembedLink(html)
      console.log(oEmbedLink)
      const corsLink = `http://cors-anywhere.herokuapp.com/${
        oEmbedLink.replaceAll('%3A', ':').replaceAll('%2F', '/')
      }`
      console.log(corsLink)
      const oEmbedJson = await this.fetchJson(corsLink)
      console.log(oEmbedJson)
      const oEmbedJson = await this.fetchJson(oEmbedLink)
      this.innerHTML = oEmbedJson.html
    }

@@ -63,5 +64,5 @@
    }
  }

  OembedLazy.register()
  OEmbed.register()
 </script>
--- a/david/2024/_sources/2024-03-25
+++ b/david/2024/_sources/2024-03-25
@@ -0,0 +1,53 @@
 # Inclusion

 Dans le cadre de ~~[manger ma propre bouffe pour chien](https://en.wikipedia.org/wiki/Eating_your_own_dog_food)~~ mon [autoéquipement](https://fr.wikipedia.org/wiki/Auto%C3%A9quipement), je voulais vérifier si l’implémentation de [oEmbed](https://oembed.com/) dans [uMap](https://umap-project.org/fr/) était utilisable… et il se trouve que ce n’était pas le cas avant aujourd’hui. Il y aurait encore des pistes d’améliorations mais au moins ça affiche une carte (si vous autorisez les requêtes externes en JS) :

 {{ extra }}

 J’en ai fait un *web component* car je compte explorer / publier davantage de cartes par la suite. Je vais essayer d’ajouter des options lorsqu’elles deviendront disponibles côté uMap. Pour l’instant, il faudra vous contenter d’un `view-source:` (meilleure fonctionnalité du Web, ne l’oublions jamais).

 Au passage, j’ai mis à jour le moteur de ce site pour pouvoir injecter des morceaux de HTML (et donc CSS/JS) sur des billets en particulier. Je m’amuse bien 🧑‍🔬.

 Je compte [reparler de cette carte](/david/2024/03/11/#hr-109).

 ---

 Beaucoup moins glorieux, j’ai participé à [de la perte de données](https://forum.openstreetmap.fr/t/mise-en-production-umap-v2-1-x-compliquee-perte-des-dernieres-donnees-sauvegardees-sur-52-cartes/22336) aujourd’hui. Nous avons eu besoin de trois cerveaux et pas mal d’heures pour comprendre ce qu’il se passait. Il était difficile de tester / imaginer / reproduire autrement que sur le serveur de production. C’est déjà pas mal d’avoir eu la possibilité de passer en lecture seule avant que ça ne touche trop de cartes.

 J’ai appris qu’il ne fallait pas se fier à l’ordre des IDs… lorsqu’ils deviennent des UUIDs !

 ---

 > [en] A data hoarder’s dream come true: bundle any web page into a single HTML file. You can finally replace that gazillion of open tabs with a gazillion of .html files stored somewhere on your precious little drive.
 >
 > Unlike the conventional “Save page as”, monolith not only saves the target document, ==it embeds CSS, image, and JavaScript assets all at once,== producing a single HTML5 document that is a joy to store and share.
 > 
 > <cite>*[monolith](https://github.com/Y2Z/monolith)*</cite>

 Je me demande si je ne devrais pas avoir recours à ce type d’outil plutôt que de n’extraire que la partie de HTML qui m’intéresse pour garder [une copie des liens](/david/2024/02/03/) que je lie par ici. C’est pour l’instant un peu fastidieux mais ça me fait aussi découvrir des choses en explorant le code des autres.

 ---

 > [en] For this reason, I got more into ==“Conflict-free Resolution Data Types” (CRDTs),== with the goal of understanding what they are, how they work, what are the different libraries out there, and which one would be a good fit for us, if any.
 >
 > <cite>*[A comparison of JavaScript CRDTs](https://blog.notmyidea.org/a-comparison-of-javascript-crdts.html)*</cite>

 J’apprends plein de choses à ce sujet grâce à Alexis, c’est chouette à explorer par procuration.

 ---

 > [en] To summarize, digital information requires maintenance. It's not sufficient to make backups; the backups also need to be maintained, upgraded, transferred, and curated. Without conscientious care, the data of today will be lost forever in a few years. Even with care, it's possible through software or hardware changes to lose access forever. That shoebox of old backup CDs will be unreadable soon.
 >
 > Which brings us back to those old photo caches. They held negatives and prints, physical objects that stored images. They needed no attention, no curating, no updating. They sat untended and forgotten for decades, but through all that time faithfully held their information, waiting for a future discoverer. As a result, we can all see what the Scott Antarctic expedition saw, and I can see what my great-grandparents looked like.
 >
 > ==It is a sad irony that modern technology makes it unlikely that future generations will see the images made today.==
 >
 > Ask yourself whether your great-grandchildren will be able to see your photographs. If the images exist only as a digital image file, the answer is almost certainly, "No". If, however, there are physical prints, the odds improve. Those digital images need to be made real to endure. Without a print, a digital photograph has no future.
 > 
 > <cite>*[command center: Prints](https://commandcenter.blogspot.com/2014/08/prints.html)*</cite>

 Très vrai _et_ je me demande si le fait d’avoir des artefacts qui perdurent sur plusieurs générations sans entretien / transmission n’est pas justement un épiphénomène. Le numérique est peut-être plus proche de la transmission orale, une information qui a besoin d’être appropriée par læ récepteur·ice pour qu’elle continue à vivre.

 Ce sera à moi d’apprendre à ma descendance comment garder en vie cette flamme numérique qui vacille à chaque coup de vent de format propriétaire.

 #dépendance #partage #technique
--- a/david/2024/dependance/index.html
+++ b/david/2024/dependance/index.html
@@ -134,6 +134,164 @@
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/03/25/" title="Lien permanent vers cet article">Inclusion</a> <time datetime="2024-03-25">25 mars 2024</time>
    </h2>
    
 <p>Dans le cadre de <del><a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Eating_your_own_dog_food">manger ma propre bouffe pour chien</a></del> mon <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Auto%C3%A9quipement">autoéquipement</a>, je voulais vérifier si l’implémentation de <a data-link-domain="oembed.com" href="https://oembed.com/">oEmbed</a> dans <a data-link-domain="umap-project.org" href="https://umap-project.org/fr/">uMap</a> était utilisable… et il se trouve que ce n’était pas le cas avant aujourd’hui. Il y aurait encore des pistes d’améliorations mais au moins ça affiche une carte (si vous autorisez les requêtes externes en&nbsp;JS)&nbsp;:</p>
 <style type="text/css">
  o-embed {
    /* Size of the oembed + paragraph + margins. */
    height: calc(300px + 1rem + 3rem);
  }
 </style>

 <o-embed url="https://umap.openstreetmap.fr/fr/map/grand-tour-de-la-foret-de-ouareau_1037457">
  <p>
    Vous devriez voir s’afficher une carte de mon « Grand Tour de la forêt de Ouareau »,
    il est probable que cela ne s’exécute pas dans un agrégateur par exemple.
  </p>
 </o-embed>

 <script type="module">
  class OEmbed extends HTMLElement {
    static tagName = 'o-embed'

    static register(tagName, registry) {
      if(!registry && ('customElements' in globalThis)) {
        registry = globalThis.customElements
      }
      registry?.define(tagName || this.tagName, this)
    }

    get url() {
      return this.getAttribute('url') || ''
    }

    constructor() {
      super()
      this.attachShadow({ mode: 'open' })
    }

    async connectedCallback() {
      let slot = document.createElement('slot')
      this.shadowRoot.appendChild(slot)

      const html = await this.fetchText(this.url)
      const oEmbedLink = this.extractOembedLink(html)
      const oEmbedJson = await this.fetchJson(oEmbedLink)
      this.innerHTML = oEmbedJson.html
    }

    fetchText(url) {
      return fetch(url)
        .then((data) => data.text())
        .catch(console.error.bind(this))
    }

    fetchJson(url) {
      return fetch(url, { type: 'json' })
        .then((data) => data.json())
        .catch(console.error.bind(this))
    }

    extractOembedLink(html) {
      const parser = new DOMParser()
      const htmlDocument = parser.parseFromString(html, "text/html")
      const oEmbedMeta = htmlDocument.documentElement.querySelector(
        'link[type="application/json+oembed"]'
      )
      return oEmbedMeta.href
    }
  }

  OEmbed.register()
 </script>

 <p>J’en ai fait un <em>web component</em> car je compte explorer / publier davantage de cartes par la suite. Je vais essayer d’ajouter des options lorsqu’elles deviendront disponibles côté uMap. Pour l’instant, il faudra vous contenter d’un <code>view-source:</code> (meilleure fonctionnalité du Web, ne l’oublions&nbsp;jamais).</p>
 <p>Au passage, j’ai mis à jour le moteur de ce site pour pouvoir injecter des morceaux de HTML (et donc CSS/JS) sur des billets en particulier. Je m’amuse&nbsp;bien&nbsp;🧑‍🔬.</p>
 <p>Je compte <a href="/david/2024/03/11/#hr-109">reparler de cette carte</a>.</p>
 <a href="#hr-134" title="Lien vers cette section de la page"><hr id="hr-134" /></a>
 <p>Beaucoup moins glorieux, j’ai participé à <a data-link-domain="forum.openstreetmap.fr" href="https://forum.openstreetmap.fr/t/mise-en-production-umap-v2-1-x-compliquee-perte-des-dernieres-donnees-sauvegardees-sur-52-cartes/22336">de la perte de données</a> aujourd’hui. Nous avons eu besoin de trois cerveaux et pas mal d’heures pour comprendre ce qu’il se passait. Il était difficile de tester / imaginer / reproduire autrement que sur le serveur de production. C’est déjà pas mal d’avoir eu la possibilité de passer en lecture seule avant que ça ne touche trop de&nbsp;cartes.</p>
 <p>J’ai appris qu’il ne fallait pas se fier à l’ordre des IDs… lorsqu’ils deviennent des&nbsp;UUIDs&#8239;!</p>
 <a href="#hr-135" title="Lien vers cette section de la page"><hr id="hr-135" /></a>

 <blockquote lang="en">
 <p>A data hoarder’s dream come true: bundle any web page into a single HTML file. You can finally replace that gazillion of open tabs with a gazillion of .html files stored somewhere on your precious little&nbsp;drive.</p>
 <p>Unlike the conventional “Save page as”, monolith not only saves the target document, <mark>it embeds CSS, image, and JavaScript assets all at once,</mark> producing a single HTML5 document that is a joy to store and&nbsp;share.</p>
 <p><cite><em><a data-link-domain="github.com" href="https://github.com/Y2Z/monolith">monolith</a></em></cite></p>
 </blockquote>
 <p>Je me demande si je ne devrais pas avoir recours à ce type d’outil plutôt que de n’extraire que la partie de HTML qui m’intéresse pour garder <a href="/david/2024/02/03/" title="Archives">une copie des liens</a> que je lie par ici. C’est pour l’instant un peu fastidieux mais ça me fait aussi découvrir des choses en explorant le code des&nbsp;autres.</p>
 <a href="#hr-136" title="Lien vers cette section de la page"><hr id="hr-136" /></a>

 <blockquote lang="en">
 <p>For this reason, I got more into <mark>“Conflict-free Resolution Data Types” (CRDTs),</mark> with the goal of understanding what they are, how they work, what are the different libraries out there, and which one would be a good fit for us, if&nbsp;any.</p>
 <p><cite><em><a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/a-comparison-of-javascript-crdts.html" hreflang="fr"
            title="Consultation de l’article">A comparison of JavaScript CRDTs</a>
            <a href="/david/cache/2024/2c0b2588dfcd3a194da4133c7505cd3e/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://blog.notmyidea.org/a-comparison-of-javascript-crdts.html"
                data-date="2024-03-25"
                data-favicon="https://blog.notmyidea.org/favicon-32x32.png"
                data-domain="blog.notmyidea.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>J’apprends plein de choses à ce sujet grâce à Alexis, c’est chouette à explorer par&nbsp;procuration.</p>
 <a href="#hr-137" title="Lien vers cette section de la page"><hr id="hr-137" /></a>

 <blockquote lang="en">
 <p>To summarize, digital information requires maintenance. It's not sufficient to make backups; the backups also need to be maintained, upgraded, transferred, and curated. Without conscientious care, the data of today will be lost forever in a few years. Even with care, it's possible through software or hardware changes to lose access forever. That shoebox of old backup CDs will be unreadable&nbsp;soon.</p>
 <p>Which brings us back to those old photo caches. They held negatives and prints, physical objects that stored images. They needed no attention, no curating, no updating. They sat untended and forgotten for decades, but through all that time faithfully held their information, waiting for a future discoverer. As a result, we can all see what the Scott Antarctic expedition saw, and I can see what my great-grandparents looked&nbsp;like.</p>
 <p><mark>It is a sad irony that modern technology makes it unlikely that future generations will see the images made&nbsp;today.</mark></p>
 <p>Ask yourself whether your great-grandchildren will be able to see your photographs. If the images exist only as a digital image file, the answer is almost certainly, &quot;No&quot;. If, however, there are physical prints, the odds improve. Those digital images need to be made real to endure. Without a print, a digital photograph has no&nbsp;future.</p>
 <p><cite><em><a data-link-domain="commandcenter.blogspot.com" href="https://commandcenter.blogspot.com/2014/08/prints.html" hreflang="en"
            title="Consultation de l’article (anglais)">command center: Prints</a>
            <a href="/david/cache/2024/46dc6f44f3e34c4c0626ad4b13dba768/" hreflang="en"
                data-tippy data-description="Two long-buried caches of photographs came to light last year. One was a stack of cellulose nitrate negatives made on the Scott Antarctic ex..."
                data-source="https://commandcenter.blogspot.com/2014/08/prints.html"
                data-date="2024-03-25"
                data-favicon="https://commandcenter.blogspot.com/favicon.ico"
                data-domain="commandcenter.blogspot.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>Très vrai <em>et</em> je me demande si le fait d’avoir des artefacts qui perdurent sur plusieurs générations sans entretien / transmission n’est pas justement un épiphénomène. Le numérique est peut-être plus proche de la transmission orale, une information qui a besoin d’être appropriée par læ récepteur·ice pour qu’elle continue à&nbsp;vivre.</p>
 <p>Ce sera à moi d’apprendre à ma descendance comment garder en vie cette flamme numérique qui vacille à chaque coup de vent de format&nbsp;propriétaire.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/dependance/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dépendance</a>
          
            <a href="/david/2024/partage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#partage</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/03/23/" title="Lien permanent vers cet article">Intendant</a> <time datetime="2024-03-23">23 mars 2024</time>
    </h2>
--- a/david/2024/index.html
+++ b/david/2024/index.html
@@ -219,7 +219,8 @@
      <a href="/david/2024/03/20/">PageCrypt</a>, 
      <a href="/david/2024/03/21/">Fourchette</a>, 
      <a href="/david/2024/03/23/">Intendant</a>, 
      <a href="/david/2024/03/24/">Cage</a>.
      <a href="/david/2024/03/24/">Cage</a>, 
      <a href="/david/2024/03/25/">Inclusion</a>.
      
    </p>
  
@@ -239,7 +240,7 @@
      <a href="/david/2024/decentralisation/" rel="tag">#décentralisation (1)</a>, 
      <a href="/david/2024/deception/" rel="tag">#déception (3)</a>, 
      <a href="/david/2024/decision/" rel="tag">#décision (8)</a>, 
      <a href="/david/2024/dependance/" rel="tag">#dépendance (7)</a>, 
      <a href="/david/2024/dependance/" rel="tag">#dépendance (8)</a>, 
      <a href="/david/2024/documentation/" rel="tag">#documentation (2)</a>, 
      <a href="/david/2024/dystopie/" rel="tag">#dystopie (3)</a>, 
      <a href="/david/2024/echanges/" rel="tag">#échanges (5)</a>, 
@@ -259,7 +260,7 @@
      <a href="/david/2024/opendata/" rel="tag">#opendata (1)</a>, 
      <a href="/david/2024/opensource/" rel="tag">#opensource (9)</a>, 
      <a href="/david/2024/parentalite/" rel="tag">#parentalité (5)</a>, 
      <a href="/david/2024/partage/" rel="tag">#partage (6)</a>, 
      <a href="/david/2024/partage/" rel="tag">#partage (7)</a>, 
      <a href="/david/2024/parvenir/" rel="tag">#parvenir (3)</a>, 
      <a href="/david/2024/photographie/" rel="tag">#photographie (2)</a>, 
      <a href="/david/2024/poesie/" rel="tag">#poésie (3)</a>, 
@@ -269,7 +270,7 @@
      <a href="/david/2024/psychologie/" rel="tag">#psychologie (11)</a>, 
      <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (5)</a>, 
      <a href="/david/2024/sport/" rel="tag">#sport (6)</a>, 
      <a href="/david/2024/technique/" rel="tag">#technique (19)</a>, 
      <a href="/david/2024/technique/" rel="tag">#technique (20)</a>, 
      <a href="/david/2024/velo/" rel="tag">#vélo (1)</a>, 
      <a href="/david/2024/web/" rel="tag">#web (13)</a>.
      
--- a/david/2024/partage/index.html
+++ b/david/2024/partage/index.html
@@ -134,6 +134,164 @@
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/03/25/" title="Lien permanent vers cet article">Inclusion</a> <time datetime="2024-03-25">25 mars 2024</time>
    </h2>
    
 <p>Dans le cadre de <del><a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Eating_your_own_dog_food">manger ma propre bouffe pour chien</a></del> mon <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Auto%C3%A9quipement">autoéquipement</a>, je voulais vérifier si l’implémentation de <a data-link-domain="oembed.com" href="https://oembed.com/">oEmbed</a> dans <a data-link-domain="umap-project.org" href="https://umap-project.org/fr/">uMap</a> était utilisable… et il se trouve que ce n’était pas le cas avant aujourd’hui. Il y aurait encore des pistes d’améliorations mais au moins ça affiche une carte (si vous autorisez les requêtes externes en&nbsp;JS)&nbsp;:</p>
 <style type="text/css">
  o-embed {
    /* Size of the oembed + paragraph + margins. */
    height: calc(300px + 1rem + 3rem);
  }
 </style>

 <o-embed url="https://umap.openstreetmap.fr/fr/map/grand-tour-de-la-foret-de-ouareau_1037457">
  <p>
    Vous devriez voir s’afficher une carte de mon « Grand Tour de la forêt de Ouareau »,
    il est probable que cela ne s’exécute pas dans un agrégateur par exemple.
  </p>
 </o-embed>

 <script type="module">
  class OEmbed extends HTMLElement {
    static tagName = 'o-embed'

    static register(tagName, registry) {
      if(!registry && ('customElements' in globalThis)) {
        registry = globalThis.customElements
      }
      registry?.define(tagName || this.tagName, this)
    }

    get url() {
      return this.getAttribute('url') || ''
    }

    constructor() {
      super()
      this.attachShadow({ mode: 'open' })
    }

    async connectedCallback() {
      let slot = document.createElement('slot')
      this.shadowRoot.appendChild(slot)

      const html = await this.fetchText(this.url)
      const oEmbedLink = this.extractOembedLink(html)
      const oEmbedJson = await this.fetchJson(oEmbedLink)
      this.innerHTML = oEmbedJson.html
    }

    fetchText(url) {
      return fetch(url)
        .then((data) => data.text())
        .catch(console.error.bind(this))
    }

    fetchJson(url) {
      return fetch(url, { type: 'json' })
        .then((data) => data.json())
        .catch(console.error.bind(this))
    }

    extractOembedLink(html) {
      const parser = new DOMParser()
      const htmlDocument = parser.parseFromString(html, "text/html")
      const oEmbedMeta = htmlDocument.documentElement.querySelector(
        'link[type="application/json+oembed"]'
      )
      return oEmbedMeta.href
    }
  }

  OEmbed.register()
 </script>

 <p>J’en ai fait un <em>web component</em> car je compte explorer / publier davantage de cartes par la suite. Je vais essayer d’ajouter des options lorsqu’elles deviendront disponibles côté uMap. Pour l’instant, il faudra vous contenter d’un <code>view-source:</code> (meilleure fonctionnalité du Web, ne l’oublions&nbsp;jamais).</p>
 <p>Au passage, j’ai mis à jour le moteur de ce site pour pouvoir injecter des morceaux de HTML (et donc CSS/JS) sur des billets en particulier. Je m’amuse&nbsp;bien&nbsp;🧑‍🔬.</p>
 <p>Je compte <a href="/david/2024/03/11/#hr-109">reparler de cette carte</a>.</p>
 <a href="#hr-134" title="Lien vers cette section de la page"><hr id="hr-134" /></a>
 <p>Beaucoup moins glorieux, j’ai participé à <a data-link-domain="forum.openstreetmap.fr" href="https://forum.openstreetmap.fr/t/mise-en-production-umap-v2-1-x-compliquee-perte-des-dernieres-donnees-sauvegardees-sur-52-cartes/22336">de la perte de données</a> aujourd’hui. Nous avons eu besoin de trois cerveaux et pas mal d’heures pour comprendre ce qu’il se passait. Il était difficile de tester / imaginer / reproduire autrement que sur le serveur de production. C’est déjà pas mal d’avoir eu la possibilité de passer en lecture seule avant que ça ne touche trop de&nbsp;cartes.</p>
 <p>J’ai appris qu’il ne fallait pas se fier à l’ordre des IDs… lorsqu’ils deviennent des&nbsp;UUIDs&#8239;!</p>
 <a href="#hr-135" title="Lien vers cette section de la page"><hr id="hr-135" /></a>

 <blockquote lang="en">
 <p>A data hoarder’s dream come true: bundle any web page into a single HTML file. You can finally replace that gazillion of open tabs with a gazillion of .html files stored somewhere on your precious little&nbsp;drive.</p>
 <p>Unlike the conventional “Save page as”, monolith not only saves the target document, <mark>it embeds CSS, image, and JavaScript assets all at once,</mark> producing a single HTML5 document that is a joy to store and&nbsp;share.</p>
 <p><cite><em><a data-link-domain="github.com" href="https://github.com/Y2Z/monolith">monolith</a></em></cite></p>
 </blockquote>
 <p>Je me demande si je ne devrais pas avoir recours à ce type d’outil plutôt que de n’extraire que la partie de HTML qui m’intéresse pour garder <a href="/david/2024/02/03/" title="Archives">une copie des liens</a> que je lie par ici. C’est pour l’instant un peu fastidieux mais ça me fait aussi découvrir des choses en explorant le code des&nbsp;autres.</p>
 <a href="#hr-136" title="Lien vers cette section de la page"><hr id="hr-136" /></a>

 <blockquote lang="en">
 <p>For this reason, I got more into <mark>“Conflict-free Resolution Data Types” (CRDTs),</mark> with the goal of understanding what they are, how they work, what are the different libraries out there, and which one would be a good fit for us, if&nbsp;any.</p>
 <p><cite><em><a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/a-comparison-of-javascript-crdts.html" hreflang="fr"
            title="Consultation de l’article">A comparison of JavaScript CRDTs</a>
            <a href="/david/cache/2024/2c0b2588dfcd3a194da4133c7505cd3e/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://blog.notmyidea.org/a-comparison-of-javascript-crdts.html"
                data-date="2024-03-25"
                data-favicon="https://blog.notmyidea.org/favicon-32x32.png"
                data-domain="blog.notmyidea.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>J’apprends plein de choses à ce sujet grâce à Alexis, c’est chouette à explorer par&nbsp;procuration.</p>
 <a href="#hr-137" title="Lien vers cette section de la page"><hr id="hr-137" /></a>

 <blockquote lang="en">
 <p>To summarize, digital information requires maintenance. It's not sufficient to make backups; the backups also need to be maintained, upgraded, transferred, and curated. Without conscientious care, the data of today will be lost forever in a few years. Even with care, it's possible through software or hardware changes to lose access forever. That shoebox of old backup CDs will be unreadable&nbsp;soon.</p>
 <p>Which brings us back to those old photo caches. They held negatives and prints, physical objects that stored images. They needed no attention, no curating, no updating. They sat untended and forgotten for decades, but through all that time faithfully held their information, waiting for a future discoverer. As a result, we can all see what the Scott Antarctic expedition saw, and I can see what my great-grandparents looked&nbsp;like.</p>
 <p><mark>It is a sad irony that modern technology makes it unlikely that future generations will see the images made&nbsp;today.</mark></p>
 <p>Ask yourself whether your great-grandchildren will be able to see your photographs. If the images exist only as a digital image file, the answer is almost certainly, &quot;No&quot;. If, however, there are physical prints, the odds improve. Those digital images need to be made real to endure. Without a print, a digital photograph has no&nbsp;future.</p>
 <p><cite><em><a data-link-domain="commandcenter.blogspot.com" href="https://commandcenter.blogspot.com/2014/08/prints.html" hreflang="en"
            title="Consultation de l’article (anglais)">command center: Prints</a>
            <a href="/david/cache/2024/46dc6f44f3e34c4c0626ad4b13dba768/" hreflang="en"
                data-tippy data-description="Two long-buried caches of photographs came to light last year. One was a stack of cellulose nitrate negatives made on the Scott Antarctic ex..."
                data-source="https://commandcenter.blogspot.com/2014/08/prints.html"
                data-date="2024-03-25"
                data-favicon="https://commandcenter.blogspot.com/favicon.ico"
                data-domain="commandcenter.blogspot.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>Très vrai <em>et</em> je me demande si le fait d’avoir des artefacts qui perdurent sur plusieurs générations sans entretien / transmission n’est pas justement un épiphénomène. Le numérique est peut-être plus proche de la transmission orale, une information qui a besoin d’être appropriée par læ récepteur·ice pour qu’elle continue à&nbsp;vivre.</p>
 <p>Ce sera à moi d’apprendre à ma descendance comment garder en vie cette flamme numérique qui vacille à chaque coup de vent de format&nbsp;propriétaire.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/dependance/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dépendance</a>
          
            <a href="/david/2024/partage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#partage</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/03/13/" title="Lien permanent vers cet article">Sérendipité</a> <time datetime="2024-03-13">13 mars 2024</time>
    </h2>
--- a/david/2024/technique/index.html
+++ b/david/2024/technique/index.html
@@ -134,6 +134,164 @@
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/03/25/" title="Lien permanent vers cet article">Inclusion</a> <time datetime="2024-03-25">25 mars 2024</time>
    </h2>
    
 <p>Dans le cadre de <del><a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Eating_your_own_dog_food">manger ma propre bouffe pour chien</a></del> mon <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Auto%C3%A9quipement">autoéquipement</a>, je voulais vérifier si l’implémentation de <a data-link-domain="oembed.com" href="https://oembed.com/">oEmbed</a> dans <a data-link-domain="umap-project.org" href="https://umap-project.org/fr/">uMap</a> était utilisable… et il se trouve que ce n’était pas le cas avant aujourd’hui. Il y aurait encore des pistes d’améliorations mais au moins ça affiche une carte (si vous autorisez les requêtes externes en&nbsp;JS)&nbsp;:</p>
 <style type="text/css">
  o-embed {
    /* Size of the oembed + paragraph + margins. */
    height: calc(300px + 1rem + 3rem);
  }
 </style>

 <o-embed url="https://umap.openstreetmap.fr/fr/map/grand-tour-de-la-foret-de-ouareau_1037457">
  <p>
    Vous devriez voir s’afficher une carte de mon « Grand Tour de la forêt de Ouareau »,
    il est probable que cela ne s’exécute pas dans un agrégateur par exemple.
  </p>
 </o-embed>

 <script type="module">
  class OEmbed extends HTMLElement {
    static tagName = 'o-embed'

    static register(tagName, registry) {
      if(!registry && ('customElements' in globalThis)) {
        registry = globalThis.customElements
      }
      registry?.define(tagName || this.tagName, this)
    }

    get url() {
      return this.getAttribute('url') || ''
    }

    constructor() {
      super()
      this.attachShadow({ mode: 'open' })
    }

    async connectedCallback() {
      let slot = document.createElement('slot')
      this.shadowRoot.appendChild(slot)

      const html = await this.fetchText(this.url)
      const oEmbedLink = this.extractOembedLink(html)
      const oEmbedJson = await this.fetchJson(oEmbedLink)
      this.innerHTML = oEmbedJson.html
    }

    fetchText(url) {
      return fetch(url)
        .then((data) => data.text())
        .catch(console.error.bind(this))
    }

    fetchJson(url) {
      return fetch(url, { type: 'json' })
        .then((data) => data.json())
        .catch(console.error.bind(this))
    }

    extractOembedLink(html) {
      const parser = new DOMParser()
      const htmlDocument = parser.parseFromString(html, "text/html")
      const oEmbedMeta = htmlDocument.documentElement.querySelector(
        'link[type="application/json+oembed"]'
      )
      return oEmbedMeta.href
    }
  }

  OEmbed.register()
 </script>

 <p>J’en ai fait un <em>web component</em> car je compte explorer / publier davantage de cartes par la suite. Je vais essayer d’ajouter des options lorsqu’elles deviendront disponibles côté uMap. Pour l’instant, il faudra vous contenter d’un <code>view-source:</code> (meilleure fonctionnalité du Web, ne l’oublions&nbsp;jamais).</p>
 <p>Au passage, j’ai mis à jour le moteur de ce site pour pouvoir injecter des morceaux de HTML (et donc CSS/JS) sur des billets en particulier. Je m’amuse&nbsp;bien&nbsp;🧑‍🔬.</p>
 <p>Je compte <a href="/david/2024/03/11/#hr-109">reparler de cette carte</a>.</p>
 <a href="#hr-134" title="Lien vers cette section de la page"><hr id="hr-134" /></a>
 <p>Beaucoup moins glorieux, j’ai participé à <a data-link-domain="forum.openstreetmap.fr" href="https://forum.openstreetmap.fr/t/mise-en-production-umap-v2-1-x-compliquee-perte-des-dernieres-donnees-sauvegardees-sur-52-cartes/22336">de la perte de données</a> aujourd’hui. Nous avons eu besoin de trois cerveaux et pas mal d’heures pour comprendre ce qu’il se passait. Il était difficile de tester / imaginer / reproduire autrement que sur le serveur de production. C’est déjà pas mal d’avoir eu la possibilité de passer en lecture seule avant que ça ne touche trop de&nbsp;cartes.</p>
 <p>J’ai appris qu’il ne fallait pas se fier à l’ordre des IDs… lorsqu’ils deviennent des&nbsp;UUIDs&#8239;!</p>
 <a href="#hr-135" title="Lien vers cette section de la page"><hr id="hr-135" /></a>

 <blockquote lang="en">
 <p>A data hoarder’s dream come true: bundle any web page into a single HTML file. You can finally replace that gazillion of open tabs with a gazillion of .html files stored somewhere on your precious little&nbsp;drive.</p>
 <p>Unlike the conventional “Save page as”, monolith not only saves the target document, <mark>it embeds CSS, image, and JavaScript assets all at once,</mark> producing a single HTML5 document that is a joy to store and&nbsp;share.</p>
 <p><cite><em><a data-link-domain="github.com" href="https://github.com/Y2Z/monolith">monolith</a></em></cite></p>
 </blockquote>
 <p>Je me demande si je ne devrais pas avoir recours à ce type d’outil plutôt que de n’extraire que la partie de HTML qui m’intéresse pour garder <a href="/david/2024/02/03/" title="Archives">une copie des liens</a> que je lie par ici. C’est pour l’instant un peu fastidieux mais ça me fait aussi découvrir des choses en explorant le code des&nbsp;autres.</p>
 <a href="#hr-136" title="Lien vers cette section de la page"><hr id="hr-136" /></a>

 <blockquote lang="en">
 <p>For this reason, I got more into <mark>“Conflict-free Resolution Data Types” (CRDTs),</mark> with the goal of understanding what they are, how they work, what are the different libraries out there, and which one would be a good fit for us, if&nbsp;any.</p>
 <p><cite><em><a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/a-comparison-of-javascript-crdts.html" hreflang="fr"
            title="Consultation de l’article">A comparison of JavaScript CRDTs</a>
            <a href="/david/cache/2024/2c0b2588dfcd3a194da4133c7505cd3e/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://blog.notmyidea.org/a-comparison-of-javascript-crdts.html"
                data-date="2024-03-25"
                data-favicon="https://blog.notmyidea.org/favicon-32x32.png"
                data-domain="blog.notmyidea.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>J’apprends plein de choses à ce sujet grâce à Alexis, c’est chouette à explorer par&nbsp;procuration.</p>
 <a href="#hr-137" title="Lien vers cette section de la page"><hr id="hr-137" /></a>

 <blockquote lang="en">
 <p>To summarize, digital information requires maintenance. It's not sufficient to make backups; the backups also need to be maintained, upgraded, transferred, and curated. Without conscientious care, the data of today will be lost forever in a few years. Even with care, it's possible through software or hardware changes to lose access forever. That shoebox of old backup CDs will be unreadable&nbsp;soon.</p>
 <p>Which brings us back to those old photo caches. They held negatives and prints, physical objects that stored images. They needed no attention, no curating, no updating. They sat untended and forgotten for decades, but through all that time faithfully held their information, waiting for a future discoverer. As a result, we can all see what the Scott Antarctic expedition saw, and I can see what my great-grandparents looked&nbsp;like.</p>
 <p><mark>It is a sad irony that modern technology makes it unlikely that future generations will see the images made&nbsp;today.</mark></p>
 <p>Ask yourself whether your great-grandchildren will be able to see your photographs. If the images exist only as a digital image file, the answer is almost certainly, &quot;No&quot;. If, however, there are physical prints, the odds improve. Those digital images need to be made real to endure. Without a print, a digital photograph has no&nbsp;future.</p>
 <p><cite><em><a data-link-domain="commandcenter.blogspot.com" href="https://commandcenter.blogspot.com/2014/08/prints.html" hreflang="en"
            title="Consultation de l’article (anglais)">command center: Prints</a>
            <a href="/david/cache/2024/46dc6f44f3e34c4c0626ad4b13dba768/" hreflang="en"
                data-tippy data-description="Two long-buried caches of photographs came to light last year. One was a stack of cellulose nitrate negatives made on the Scott Antarctic ex..."
                data-source="https://commandcenter.blogspot.com/2014/08/prints.html"
                data-date="2024-03-25"
                data-favicon="https://commandcenter.blogspot.com/favicon.ico"
                data-domain="commandcenter.blogspot.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>Très vrai <em>et</em> je me demande si le fait d’avoir des artefacts qui perdurent sur plusieurs générations sans entretien / transmission n’est pas justement un épiphénomène. Le numérique est peut-être plus proche de la transmission orale, une information qui a besoin d’être appropriée par læ récepteur·ice pour qu’elle continue à&nbsp;vivre.</p>
 <p>Ce sera à moi d’apprendre à ma descendance comment garder en vie cette flamme numérique qui vacille à chaque coup de vent de format&nbsp;propriétaire.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/dependance/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dépendance</a>
          
            <a href="/david/2024/partage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#partage</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/03/23/" title="Lien permanent vers cet article">Intendant</a> <time datetime="2024-03-23">23 mars 2024</time>
    </h2>
--- a/david/blogroll/index.html
+++ b/david/blogroll/index.html
@@ -174,6 +174,16 @@
    </nav>
    <p>N’hésitez pas à me contacter si vous ne souhaitez pas figurer dans cette liste.</p>
    <h2>Leurs dernières publications</h2>
    <dl>
        <dt>
          <a href="https://www.hypothermia.fr/2024/03/papiliorama/">Papiliorama</a>,
          25-03-2024
        </dt>
        <dd>
          K m’a fait la surprise de m’emmener dans une serre à papillons mi-mars et c’était une des plus chouettes sorties que j’ai faites ces derniers temps. Une capsule de ressourcement dans un état d’émerveillement enfantin qui n’était pas sans me rappeler ma fascination des aquariums. C’est une visite de quelques heures que je recommande fortement,… Poursuivre la lecture Papiliorama
          — <a href="https://www.hypothermia.fr/">Eliness</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://winnielim.org/journal/the-dam/">the dam</a>,
@@ -304,16 +314,6 @@
          — <a href="https://blog.ecologie-politique.eu/">Aude</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.hypothermia.fr/2024/02/armee-musicale-personnelle/">Parenthèse – Armée musicale personnelle</a>,
          26-02-2024
        </dt>
        <dd>
          Trouver du soutien dans les cris de valkyries.
          — <a href="https://www.hypothermia.fr/">Eliness</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://n.survol.fr/n/le-monde-tel-quil-aurait-pu-etre-2">Le monde tel qu’il aurait pu être</a>,
--- a/david/index.html
+++ b/david/index.html
@@ -468,6 +468,7 @@
  </style>
  <p>Liste des publications récentes en ordre anté-chronologique :</p>
  <p>
    <a href="/david/2024/03/25/" data-dependance data-partage data-technique  title="Étiquettes : dépendance, partage, technique.">Inclusion</a>,
    <a href="/david/2024/03/24/" data-courage data-lecture data-poesie  title="Étiquettes : courage, lecture, poésie.">Cage</a>,
    <a href="/david/2024/03/23/" data-dependance data-psychologie data-technique  title="Étiquettes : dépendance, psychologie, technique.">Intendant</a>,
    <a href="/david/2024/03/21/" data-communaute data-opensource data-technique  title="Étiquettes : communauté, opensource, technique.">Fourchette</a>,
@@ -567,7 +568,7 @@
    <a href="/david/2024/decentralisation/" data-tag="decentralisation" rel="tag">#décentralisation (1)</a>,
    <a href="/david/2024/deception/" data-tag="deception" rel="tag">#déception (3)</a>,
    <a href="/david/2024/decision/" data-tag="decision" rel="tag">#décision (8)</a>,
    <a href="/david/2024/dependance/" data-tag="dependance" rel="tag">#dépendance (7)</a>,
    <a href="/david/2024/dependance/" data-tag="dependance" rel="tag">#dépendance (8)</a>,
    <a href="/david/2024/documentation/" data-tag="documentation" rel="tag">#documentation (2)</a>,
    <a href="/david/2024/dystopie/" data-tag="dystopie" rel="tag">#dystopie (3)</a>,
    <a href="/david/2024/echanges/" data-tag="echanges" rel="tag">#échanges (5)</a>,
@@ -587,7 +588,7 @@
    <a href="/david/2024/opendata/" data-tag="opendata" rel="tag">#opendata (1)</a>,
    <a href="/david/2024/opensource/" data-tag="opensource" rel="tag">#opensource (9)</a>,
    <a href="/david/2024/parentalite/" data-tag="parentalite" rel="tag">#parentalité (5)</a>,
    <a href="/david/2024/partage/" data-tag="partage" rel="tag">#partage (6)</a>,
    <a href="/david/2024/partage/" data-tag="partage" rel="tag">#partage (7)</a>,
    <a href="/david/2024/parvenir/" data-tag="parvenir" rel="tag">#parvenir (3)</a>,
    <a href="/david/2024/photographie/" data-tag="photographie" rel="tag">#photographie (2)</a>,
    <a href="/david/2024/poesie/" data-tag="poesie" rel="tag">#poésie (3)</a>,
@@ -597,7 +598,7 @@
    <a href="/david/2024/psychologie/" data-tag="psychologie" rel="tag">#psychologie (11)</a>,
    <a href="/david/2024/solastalgia/" data-tag="solastalgia" rel="tag">#solastalgia (5)</a>,
    <a href="/david/2024/sport/" data-tag="sport" rel="tag">#sport (6)</a>,
    <a href="/david/2024/technique/" data-tag="technique" rel="tag">#technique (19)</a>,
    <a href="/david/2024/technique/" data-tag="technique" rel="tag">#technique (20)</a>,
    <a href="/david/2024/velo/" data-tag="velo" rel="tag">#vélo (1)</a>,
    <a href="/david/2024/web/" data-tag="web" rel="tag">#web (13)</a>.
      
--- a/david/log/index.xml
+++ b/david/log/index.xml
@@ -6,13 +6,124 @@
    <link href="https://larlet.fr/david/" rel="alternate" type="text/html" />
    <link href="https://larlet.fr/david/log/" rel="self" />
    <id>https://larlet.fr/david/</id>
    <updated>2024-03-25T12:00:00+01:00</updated>
    <updated>2024-03-26T12:00:00+01:00</updated>
    <author>
        <name>David Larlet</name>
        <uri>https://larlet.fr/david/</uri>
    </author>
    <rights>Copyright (c) 2004-2024, David Larlet</rights>
    
        <entry xml:lang="fr">
            <title type="html">Inclusion</title>
            <link href="https://larlet.fr/david/2024/03/25/" rel="alternate" type="text/html" />
            <updated>2024-03-25T12:00:00+01:00</updated>
            <id>https://larlet.fr/david/2024/03/25/</id>
            <summary type="html">
 &lt;p&gt;Dans le cadre de &lt;del&gt;&lt;a href=&quot;https://en.wikipedia.org/wiki/Eating_your_own_dog_food&quot;&gt;manger ma propre bouffe pour chien&lt;/a&gt;&lt;/del&gt; mon &lt;a href=&quot;https://fr.wikipedia.org/wiki/Auto%C3%A9quipement&quot;&gt;autoéquipement&lt;/a&gt;, je voulais vérifier si l’implémentation de &lt;a href=&quot;https://oembed.com/&quot;&gt;oEmbed&lt;/a&gt; dans &lt;a href=&quot;https://umap-project.org/fr/&quot;&gt;uMap&lt;/a&gt; était utilisable… et il se trouve que ce n’était pas le cas avant aujourd’hui. Il y aurait encore des pistes d’améliorations mais au moins ça affiche une carte (si vous autorisez les requêtes externes en&amp;nbsp;JS)&amp;nbsp;:&lt;/p&gt;
 &lt;style type=&quot;text/css&quot;&gt;
  o-embed {
    /* Size of the oembed + paragraph + margins. */
    height: calc(300px + 1rem + 3rem);
  }
 &lt;/style&gt;

 &lt;o-embed url=&quot;https://umap.openstreetmap.fr/fr/map/grand-tour-de-la-foret-de-ouareau_1037457&quot;&gt;
  &lt;p&gt;
    Vous devriez voir s’afficher une carte de mon « Grand Tour de la forêt de Ouareau »,
    il est probable que cela ne s’exécute pas dans un agrégateur par exemple.
  &lt;/p&gt;
 &lt;/o-embed&gt;

 &lt;script type=&quot;module&quot;&gt;
  class OEmbed extends HTMLElement {
    static tagName = &#x27;o-embed&#x27;

    static register(tagName, registry) {
      if(!registry &amp;&amp; (&#x27;customElements&#x27; in globalThis)) {
        registry = globalThis.customElements
      }
      registry?.define(tagName || this.tagName, this)
    }

    get url() {
      return this.getAttribute(&#x27;url&#x27;) || &#x27;&#x27;
    }

    constructor() {
      super()
      this.attachShadow({ mode: &#x27;open&#x27; })
    }

    async connectedCallback() {
      let slot = document.createElement(&#x27;slot&#x27;)
      this.shadowRoot.appendChild(slot)

      const html = await this.fetchText(this.url)
      const oEmbedLink = this.extractOembedLink(html)
      const oEmbedJson = await this.fetchJson(oEmbedLink)
      this.innerHTML = oEmbedJson.html
    }

    fetchText(url) {
      return fetch(url)
        .then((data) =&gt; data.text())
        .catch(console.error.bind(this))
    }

    fetchJson(url) {
      return fetch(url, { type: &#x27;json&#x27; })
        .then((data) =&gt; data.json())
        .catch(console.error.bind(this))
    }

    extractOembedLink(html) {
      const parser = new DOMParser()
      const htmlDocument = parser.parseFromString(html, &quot;text/html&quot;)
      const oEmbedMeta = htmlDocument.documentElement.querySelector(
        &#x27;link[type=&quot;application/json+oembed&quot;]&#x27;
      )
      return oEmbedMeta.href
    }
  }

  OEmbed.register()
 &lt;/script&gt;

 &lt;p&gt;J’en ai fait un &lt;em&gt;web component&lt;/em&gt; car je compte explorer / publier davantage de cartes par la suite. Je vais essayer d’ajouter des options lorsqu’elles deviendront disponibles côté uMap. Pour l’instant, il faudra vous contenter d’un &lt;code&gt;view-source:&lt;/code&gt; (meilleure fonctionnalité du Web, ne l’oublions&amp;nbsp;jamais).&lt;/p&gt;
 &lt;p&gt;Au passage, j’ai mis à jour le moteur de ce site pour pouvoir injecter des morceaux de HTML (et donc CSS/JS) sur des billets en particulier. Je m’amuse&amp;nbsp;bien&amp;nbsp;🧑‍🔬.&lt;/p&gt;
 &lt;p&gt;Je compte &lt;a href=&quot;https://larlet.fr/david/2024/03/11/#hr-109&quot;&gt;reparler de cette carte&lt;/a&gt;.&lt;/p&gt;
 &lt;hr /&gt;
 &lt;p&gt;Beaucoup moins glorieux, j’ai participé à &lt;a href=&quot;https://forum.openstreetmap.fr/t/mise-en-production-umap-v2-1-x-compliquee-perte-des-dernieres-donnees-sauvegardees-sur-52-cartes/22336&quot;&gt;de la perte de données&lt;/a&gt; aujourd’hui. Nous avons eu besoin de trois cerveaux et pas mal d’heures pour comprendre ce qu’il se passait. Il était difficile de tester / imaginer / reproduire autrement que sur le serveur de production. C’est déjà pas mal d’avoir eu la possibilité de passer en lecture seule avant que ça ne touche trop de&amp;nbsp;cartes.&lt;/p&gt;
 &lt;p&gt;J’ai appris qu’il ne fallait pas se fier à l’ordre des IDs… lorsqu’ils deviennent des&amp;nbsp;UUIDs&amp;#8239;!&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;A data hoarder’s dream come true: bundle any web page into a single HTML file. You can finally replace that gazillion of open tabs with a gazillion of .html files stored somewhere on your precious little&amp;nbsp;drive.&lt;/p&gt;
 &lt;p&gt;Unlike the conventional “Save page as”, monolith not only saves the target document, &lt;mark&gt;it embeds CSS, image, and JavaScript assets all at once,&lt;/mark&gt; producing a single HTML5 document that is a joy to store and&amp;nbsp;share.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://github.com/Y2Z/monolith&quot;&gt;monolith&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Je me demande si je ne devrais pas avoir recours à ce type d’outil plutôt que de n’extraire que la partie de HTML qui m’intéresse pour garder &lt;a href=&quot;https://larlet.fr/david/2024/02/03/&quot;&gt;une copie des liens&lt;/a&gt; que je lie par ici. C’est pour l’instant un peu fastidieux mais ça me fait aussi découvrir des choses en explorant le code des&amp;nbsp;autres.&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;For this reason, I got more into &lt;mark&gt;“Conflict-free Resolution Data Types” (CRDTs),&lt;/mark&gt; with the goal of understanding what they are, how they work, what are the different libraries out there, and which one would be a good fit for us, if&amp;nbsp;any.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://blog.notmyidea.org/a-comparison-of-javascript-crdts.html&quot;&gt;A comparison of JavaScript&amp;nbsp;CRDTs&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;J’apprends plein de choses à ce sujet grâce à Alexis, c’est chouette à explorer par&amp;nbsp;procuration.&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;To summarize, digital information requires maintenance. It&#x27;s not sufficient to make backups; the backups also need to be maintained, upgraded, transferred, and curated. Without conscientious care, the data of today will be lost forever in a few years. Even with care, it&#x27;s possible through software or hardware changes to lose access forever. That shoebox of old backup CDs will be unreadable&amp;nbsp;soon.&lt;/p&gt;
 &lt;p&gt;Which brings us back to those old photo caches. They held negatives and prints, physical objects that stored images. They needed no attention, no curating, no updating. They sat untended and forgotten for decades, but through all that time faithfully held their information, waiting for a future discoverer. As a result, we can all see what the Scott Antarctic expedition saw, and I can see what my great-grandparents looked&amp;nbsp;like.&lt;/p&gt;
 &lt;p&gt;&lt;mark&gt;It is a sad irony that modern technology makes it unlikely that future generations will see the images made&amp;nbsp;today.&lt;/mark&gt;&lt;/p&gt;
 &lt;p&gt;Ask yourself whether your great-grandchildren will be able to see your photographs. If the images exist only as a digital image file, the answer is almost certainly, &amp;quot;No&amp;quot;. If, however, there are physical prints, the odds improve. Those digital images need to be made real to endure. Without a print, a digital photograph has no&amp;nbsp;future.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://commandcenter.blogspot.com/2014/08/prints.html&quot;&gt;command center: Prints&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Très vrai &lt;em&gt;et&lt;/em&gt; je me demande si le fait d’avoir des artefacts qui perdurent sur plusieurs générations sans entretien / transmission n’est pas justement un épiphénomène. Le numérique est peut-être plus proche de la transmission orale, une information qui a besoin d’être appropriée par læ récepteur·ice pour qu’elle continue à&amp;nbsp;vivre.&lt;/p&gt;
 &lt;p&gt;Ce sera à moi d’apprendre à ma descendance comment garder en vie cette flamme numérique qui vacille à chaque coup de vent de format&amp;nbsp;propriétaire.&lt;/p&gt;
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/dependance/&quot;&gt;#dépendance&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/partage/&quot;&gt;#partage&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/technique/&quot;&gt;#technique&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
        </entry>
    
        <entry xml:lang="fr">
            <title type="html">Cage</title>
            <link href="https://larlet.fr/david/2024/03/24/" rel="alternate" type="text/html" />
@@ -1094,34 +1205,4 @@ Et je sais enfin qui je&amp;nbsp;suis…&lt;/p&gt;
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/decision/&quot;&gt;#décision&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/experience/&quot;&gt;#expérience&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/partage/&quot;&gt;#partage&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
        </entry>
    
        <entry xml:lang="fr">
            <title type="html">Cinéma</title>
            <link href="https://larlet.fr/david/2024/02/21/" rel="alternate" type="text/html" />
            <updated>2024-02-21T12:00:00+01:00</updated>
            <id>https://larlet.fr/david/2024/02/21/</id>
            <summary type="html">

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;Software is a creative industry with more in common with media production industries than&amp;nbsp;housebuilding.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.baldurbjarnason.com/2024/software-is-a-medium-of-setbacks/&quot;&gt;Software is a medium of setbacks, but a medium’s limitations don’t define the&amp;nbsp;artist&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Pour filer la métaphore, je me demande si les assistants à base de &lt;a href=&quot;https://vitrinelinguistique.oqlf.gouv.qc.ca/fiche-gdt/fiche/26570880/grand-modele-de-langage&quot;&gt;grands modèles de langage&lt;/a&gt; seraient l’équivalent des environnements verts dans lesquels évoluent les acteur·ices aujourd’hui. Leur métier a changé avec la technologie, leur jeu a dû s’adapter pour transmettre des émotions dans un contexte où iels ne maîtrisent plus du tout la chaîne de représentation de leur travail. J’imagine que même la vérification de leur prise nécessite une bonne dose&amp;nbsp;d’imaginaire.&lt;/p&gt;
 &lt;p&gt;Quel est leur sentiment à la fin d’une journée de tournage&amp;#8239;? Quel sera le&amp;nbsp;mien&amp;#8239;?&lt;/p&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;Dear Mr. Architect!&lt;/p&gt;
 &lt;p&gt;Please design and build me a house. I am not quite sure of what I need, so you should use your discretion. My house should have between two and forty-five bedrooms. Just make sure the plans are such that the bedrooms can be easily added or deleted. When you bring the blueprints to me, I will make the final decision of what I want. Also, bring me the cost breakdown for each configuration so that I can arbitrarily pick&amp;nbsp;one.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;http://www.gksoft.com/a/fun/architects.html&quot;&gt;If Architects had to work like Programmers&lt;/a&gt;&lt;/em&gt;, 1995&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;hr /&gt;

 &lt;blockquote&gt;
 &lt;p&gt;Fracas est un collectif queer et féministe d’aide à la gestion de conflits interpersonnels, de violences et d’agressions au sein de&amp;nbsp;collectifs.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.collectif-fracas.com/&quot;&gt;Fracas, collectif queer et féministe d’aide à la gestion de&amp;nbsp;conflits&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Si peu de temps et tellement à&amp;nbsp;explorer.&lt;/p&gt;
 &lt;p&gt;(&lt;a href=&quot;https://cqfd-journal.org/Se-reapproprier-nos-conflits&quot;&gt;Via CQFD&lt;/a&gt; qui arrive à ne faire aucun lien vers le site en question, ça me rend&amp;nbsp;fou…)&lt;/p&gt;
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/dystopie/&quot;&gt;#dystopie&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/ia/&quot;&gt;#IA&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/psychologie/&quot;&gt;#psychologie&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
        </entry>
    
 </feed>
--- a/david/recherche/index.html
+++ b/david/recherche/index.html