davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
							<!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>