9 달 전 · e87ddd757f
--- a/david/2024/02/18/index.html
+++ b/david/2024/02/18/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/02/19/"
            title="Publication suivante : Injection">Suivant →</a>
      
    </p>
  </nav>
  
@@ -285,6 +289,10 @@ button.primary {
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/02/19/"
            title="Publication suivante : Injection">Suivant →</a>
      
    </p>
  </nav>

--- a/david/2024/02/19/index.html
+++ b/david/2024/02/19/index.html
@@ -0,0 +1,458 @@
 <!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>
    Injection
  — David Larlet</title>
  <meta name="description" content="It’s fun to think of other possible uses… Perhaps you could pull in HTML modules along with their relevant CSS link. Or embed a tweet or code examples in documentation or a blog post. It could probably even be used to load and apply a regular rel=stylesheet link asynchronously, and at a low priority, which is otherwise surprisingly hard to do (note: I didn’t test this idea much to say for sure).">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-02-03.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>
  <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>
  
 <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>Injection</h1>
      <p>Le <time datetime="2024-02-19">19 février 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/02/18/"
           title="Publication précédente : In·directions">← 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>
  

 <blockquote lang="en">
 <p>It’s fun to think of <mark>other possible uses…</mark> Perhaps you could pull in HTML modules along with their relevant CSS link. Or embed a tweet or code examples in documentation or a blog post. It could probably even be used to load and apply a regular <code>rel=stylesheet</code> link asynchronously, and at a low priority, which is otherwise surprisingly hard to do (note: I didn’t test this idea much to say for&nbsp;sure).</p>
 <p><cite><em><a data-link-domain="filamentgroup.com" href="https://www.filamentgroup.com/lab/html-includes/" hreflang="en"
            title="Consultation de l’article (anglais)">HTML Includes That Work Today</a>
            <a href="/david/cache/2024/88df28660094efbc5a13bb09d70dfea6/" hreflang="en"
                data-tippy data-description="Read this page on the Filament Group website"
                data-source="https://www.filamentgroup.com/lab/html-includes/"
                data-date="2024-02-19"
                data-favicon="https://www.filamentgroup.com/images/icons/favicon-32x32.png"
                data-domain="filamentgroup.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>J’ai cette page ouverte dans un onglet depuis littéralement des années. C’est <a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/">Alexis</a> qui me l’a rappelé en partageant <a data-link-domain="leanrada.com" href="https://leanrada.com/htmz/">htmz</a> aujourd’hui qui va un tout petit peu plus&nbsp;loin.</p>
 <p>Voilà le code en&nbsp;question&nbsp;:</p>
 <pre><code>&lt;iframe 
  src=&quot;/static/david/2024/test-injection.html&quot; 
  onload=&quot;
    this.before(
      (
        this.contentDocument.body||this.contentDocument
      ).children[0]
    );
    this.remove()
  &quot; 
  hidden&gt;
 &lt;/iframe&gt;
 </code></pre>
 <p>En résumé, on prend le code l’<code>iframe</code> et on l’injecte au chargement dans le document en cours. Voici un exemple (pas sûr que ça fonctionne depuis un&nbsp;agrégateur…)&nbsp;:</p>
 <iframe src="/static/david/2024/test-injection.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()" hidden></iframe>

 <p>J’ai ajouté l’attribut <code>hidden</code> à la proposition initiale pour éviter le flash. Si vous inspectez le code, vous constatez que le paragraphe précédent tout à fait classique alors qu’il s’agissait d’une <code>iframe</code> (sauf si vous avez une extension qui bloque les <code>iframe</code> bien sûr). Jusque là c’est <a data-link-domain="css-tricks.com" href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/" hreflang="en"
            title="Consultation de l’article (anglais)">une forme d’inclusion</a>
            <a href="/david/cache/2024/6bfc6bd7bc1d9158aa7f6591123e7f4b/" hreflang="en"
                data-tippy data-description="It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that"
                data-source="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/"
                data-date="2024-02-19"
                data-favicon="https://css-tricks.com/favicon.svg"
                data-domain="css-tricks.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> mais rien de bien&nbsp;utile.</p>
 <p>Ce qui devient un peu plus fou serait de pouvoir injecter un <em>Web Component</em> de cette façon&#8239;! Le problème étant que le <code>this.remove()</code> est exécuté avant le chargement du script de l’<code>iframe</code>… et si on le retire on conserve cet élément <code>hidden</code> dans le document. Ce n’est pas critique mais ce n’est pas très élégant non plus, d’autant que cela signifie que le composant est défini et instancié deux&nbsp;fois.</p>
 <style>para-graph { background: paleturquoise; color: black; }</style>

 <iframe src="/static/david/2024/test-injection-web-component.html" onload= "this.before((this.contentDocument.body||this.contentDocument).children[0]);this.before(this.contentDocument.scripts[0])" hidden></iframe>

 <p>Il y a probablement des choses qui m’échappent mais il se fait&nbsp;tard.</p>
 <p><em>To be&nbsp;continued…</em></p>
 <a href="#hr-79" title="Lien vers cette section de la page"><hr id="hr-79" /></a>
 <p>Découvertes du jour&nbsp;: <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base"><code>&lt;base&gt;</code></a> et <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis">globalThis</a>.</p>
 <p>Aussi, il n’est <a data-link-domain="github.com" href="https://github.com/django/django/commit/b7f500396e05cd1f0bb8901fce16e2d8393d2779">pas forcément indiqué</a> de générer une <code>SECRET_KEY</code> avec Django, il vaut mieux le faire en Python&nbsp;directement&nbsp;:</p>
 <pre><code>[depuis un shell]

 $ python3 -c 'import secrets; print(secrets.token_hex(100))'
 </code></pre>
 <a href="#hr-80" title="Lien vers cette section de la page"><hr id="hr-80" /></a>

 <blockquote lang="en">
 <p>So, what’s the fun of writing on the internet anymore? Well, if your aim is to be respected as an author, there’s probably not much fun to be had here at all. Don’t write online for fame and glory. Oblivion, obscurity and exploitation are all but guaranteed. Write here because <em>ideas</em> matter, not authorship. Write here because the more robots, pirates, and single-minded trolls swallow up cyberspace, <mark>the more we need independent writing in order to think new thoughts in the future</mark> — even if your words are getting dished up and plated by an&nbsp;algorithm.</p>
 <p><cite><em><a data-link-domain="jamesshelley.com" href="https://jamesshelley.com/blog/writing-on-the-internet.html" hreflang="en"
            title="Consultation de l’article (anglais)">What’s the fun in writing on the internet anymore?</a>
            <a href="/david/cache/2024/a005801f0e596f9ecb99037a992ecc1b/" hreflang="en"
                data-tippy data-description="The moment you release your words, you relinquish all control."
                data-source="https://jamesshelley.com/blog/writing-on-the-internet.html"
                data-date="2024-02-19"
                data-favicon="https://jamesshelley.com/images/favicon.png"
                data-domain="jamesshelley.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>Rester (et alimenter la machine) ou quitter (et laisser l’espace à la&nbsp;machine).</p>
 <p>Je n’aime pas beaucoup la <a data-link-domain="maggieappleton.com" href="https://maggieappleton.com/ai-dark-forest" hreflang="en"
            title="Consultation de l’article (anglais)">métaphore de la forêt noire</a>
            <a href="/david/cache/2024/140458968f9f7da7d14e181d0a80e799/" hreflang="en"
                data-tippy data-description="Proving you're a human on a web flooded with generative AI content"
                data-source="https://maggieappleton.com/ai-dark-forest"
                data-date="2024-02-19"
                data-favicon="https://maggieappleton.com//images/favicon/favicon.ico"
                data-domain="maggieappleton.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> ces temps-ci car j’apprécie un peu trop les forêts pour ça. J’aurais davantage l’impression de faire partie d’une haie alors qu’il y a beaucoup de monoculture aux alentours. Avec les double sens que cette méta·phore&nbsp;implique.</p>

  
    <nav>
      <p>
        
          <a href="/david/2024/apprentissage/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#apprentissage</a>
        
          <a href="/david/2024/laboratoire/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#laboratoire</a>
        
          <a href="/david/2024/web/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#web</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/02/18/"
           title="Publication précédente : In·directions">← 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>

  </body>
 </html>
--- a/david/2024/_sources/2024-02-19
+++ b/david/2024/_sources/2024-02-19
@@ -0,0 +1,64 @@
 # Injection

 > [en] It’s fun to think of ==other possible uses…== Perhaps you could pull in HTML modules along with their relevant CSS link. Or embed a tweet or code examples in documentation or a blog post. It could probably even be used to load and apply a regular `rel=stylesheet` link asynchronously, and at a low priority, which is otherwise surprisingly hard to do (note: I didn’t test this idea much to say for sure).
 >
 > <cite>*[HTML Includes That Work Today](https://www.filamentgroup.com/lab/html-includes/)*</cite>

 J’ai cette page ouverte dans un onglet depuis littéralement des années. C’est [Alexis](https://blog.notmyidea.org/) qui me l’a rappelé en partageant [htmz](https://leanrada.com/htmz/) aujourd’hui qui va un tout petit peu plus loin.

 Voilà le code en question :

 ```
 <iframe 
  src="/static/david/2024/test-injection.html" 
  onload="
    this.before(
      (
        this.contentDocument.body||this.contentDocument
      ).children[0]
    );
    this.remove()
  " 
  hidden>
 </iframe>
 ```

 En résumé, on prend le code l’`iframe` et on l’injecte au chargement dans le document en cours. Voici un exemple (pas sûr que ça fonctionne depuis un agrégateur…) :

 <iframe src="/static/david/2024/test-injection.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()" hidden></iframe>

 J’ai ajouté l’attribut `hidden` à la proposition initiale pour éviter le flash. Si vous inspectez le code, vous constatez que le paragraphe précédent tout à fait classique alors qu’il s’agissait d’une `iframe` (sauf si vous avez une extension qui bloque les `iframe` bien sûr). Jusque là c’est [une forme d’inclusion](https://css-tricks.com/the-simplest-ways-to-handle-html-includes/) mais rien de bien utile.

 Ce qui devient un peu plus fou serait de pouvoir injecter un *Web Component* de cette façon ! Le problème étant que le `this.remove()` est exécuté avant le chargement du script de l’`iframe`… et si on le retire on conserve cet élément `hidden` dans le document. Ce n’est pas critique mais ce n’est pas très élégant non plus, d’autant que cela signifie que le composant est défini et instancié deux fois.

 <style>para-graph { background: paleturquoise; color: black; }</style>

 <iframe src="/static/david/2024/test-injection-web-component.html" onload= "this.before((this.contentDocument.body||this.contentDocument).children[0]);this.before(this.contentDocument.scripts[0])" hidden></iframe>

 Il y a probablement des choses qui m’échappent mais il se fait tard.

 *To be continued…*

 ---

 Découvertes du jour : [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) et [globalThis](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis).

 Aussi, il n’est [pas forcément indiqué](https://github.com/django/django/commit/b7f500396e05cd1f0bb8901fce16e2d8393d2779) de générer une `SECRET_KEY` avec Django, il vaut mieux le faire en Python directement :

 ```
 [depuis un shell]

 $ python3 -c 'import secrets; print(secrets.token_hex(100))'
 ```

 ---

 > [en] So, what’s the fun of writing on the internet anymore? Well, if your aim is to be respected as an author, there’s probably not much fun to be had here at all. Don’t write online for fame and glory. Oblivion, obscurity and exploitation are all but guaranteed. Write here because *ideas* matter, not authorship. Write here because the more robots, pirates, and single-minded trolls swallow up cyberspace, ==the more we need independent writing in order to think new thoughts in the future== — even if your words are getting dished up and plated by an algorithm.
 > 
 > <cite>*[What’s the fun in writing on the internet anymore?](https://jamesshelley.com/blog/writing-on-the-internet.html)*</cite>

 Rester (et alimenter la machine) ou quitter (et laisser l’espace à la machine).

 Je n’aime pas beaucoup la [métaphore de la forêt noire](https://maggieappleton.com/ai-dark-forest) ces temps-ci car j’apprécie un peu trop les forêts pour ça. J’aurais davantage l’impression de faire partie d’une haie alors qu’il y a beaucoup de monoculture aux alentours. Avec les double sens que cette méta·phore implique.

 #apprentissage #laboratoire #web
--- a/david/2024/apprentissage/index.html
+++ b/david/2024/apprentissage/index.html
@@ -134,6 +134,138 @@
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/02/19/" title="Lien permanent vers cet article">Injection</a> <time datetime="2024-02-19">19 février 2024</time>
    </h2>
    

 <blockquote lang="en">
 <p>It’s fun to think of <mark>other possible uses…</mark> Perhaps you could pull in HTML modules along with their relevant CSS link. Or embed a tweet or code examples in documentation or a blog post. It could probably even be used to load and apply a regular <code>rel=stylesheet</code> link asynchronously, and at a low priority, which is otherwise surprisingly hard to do (note: I didn’t test this idea much to say for&nbsp;sure).</p>
 <p><cite><em><a data-link-domain="filamentgroup.com" href="https://www.filamentgroup.com/lab/html-includes/" hreflang="en"
            title="Consultation de l’article (anglais)">HTML Includes That Work Today</a>
            <a href="/david/cache/2024/88df28660094efbc5a13bb09d70dfea6/" hreflang="en"
                data-tippy data-description="Read this page on the Filament Group website"
                data-source="https://www.filamentgroup.com/lab/html-includes/"
                data-date="2024-02-19"
                data-favicon="https://www.filamentgroup.com/images/icons/favicon-32x32.png"
                data-domain="filamentgroup.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>J’ai cette page ouverte dans un onglet depuis littéralement des années. C’est <a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/">Alexis</a> qui me l’a rappelé en partageant <a data-link-domain="leanrada.com" href="https://leanrada.com/htmz/">htmz</a> aujourd’hui qui va un tout petit peu plus&nbsp;loin.</p>
 <p>Voilà le code en&nbsp;question&nbsp;:</p>
 <pre><code>&lt;iframe 
  src=&quot;/static/david/2024/test-injection.html&quot; 
  onload=&quot;
    this.before(
      (
        this.contentDocument.body||this.contentDocument
      ).children[0]
    );
    this.remove()
  &quot; 
  hidden&gt;
 &lt;/iframe&gt;
 </code></pre>
 <p>En résumé, on prend le code l’<code>iframe</code> et on l’injecte au chargement dans le document en cours. Voici un exemple (pas sûr que ça fonctionne depuis un&nbsp;agrégateur…)&nbsp;:</p>
 <iframe src="/static/david/2024/test-injection.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()" hidden></iframe>

 <p>J’ai ajouté l’attribut <code>hidden</code> à la proposition initiale pour éviter le flash. Si vous inspectez le code, vous constatez que le paragraphe précédent tout à fait classique alors qu’il s’agissait d’une <code>iframe</code> (sauf si vous avez une extension qui bloque les <code>iframe</code> bien sûr). Jusque là c’est <a data-link-domain="css-tricks.com" href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/" hreflang="en"
            title="Consultation de l’article (anglais)">une forme d’inclusion</a>
            <a href="/david/cache/2024/6bfc6bd7bc1d9158aa7f6591123e7f4b/" hreflang="en"
                data-tippy data-description="It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that"
                data-source="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/"
                data-date="2024-02-19"
                data-favicon="https://css-tricks.com/favicon.svg"
                data-domain="css-tricks.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> mais rien de bien&nbsp;utile.</p>
 <p>Ce qui devient un peu plus fou serait de pouvoir injecter un <em>Web Component</em> de cette façon&#8239;! Le problème étant que le <code>this.remove()</code> est exécuté avant le chargement du script de l’<code>iframe</code>… et si on le retire on conserve cet élément <code>hidden</code> dans le document. Ce n’est pas critique mais ce n’est pas très élégant non plus, d’autant que cela signifie que le composant est défini et instancié deux&nbsp;fois.</p>
 <style>para-graph { background: paleturquoise; color: black; }</style>

 <iframe src="/static/david/2024/test-injection-web-component.html" onload= "this.before((this.contentDocument.body||this.contentDocument).children[0]);this.before(this.contentDocument.scripts[0])" hidden></iframe>

 <p>Il y a probablement des choses qui m’échappent mais il se fait&nbsp;tard.</p>
 <p><em>To be&nbsp;continued…</em></p>
 <a href="#hr-79" title="Lien vers cette section de la page"><hr id="hr-79" /></a>
 <p>Découvertes du jour&nbsp;: <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base"><code>&lt;base&gt;</code></a> et <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis">globalThis</a>.</p>
 <p>Aussi, il n’est <a data-link-domain="github.com" href="https://github.com/django/django/commit/b7f500396e05cd1f0bb8901fce16e2d8393d2779">pas forcément indiqué</a> de générer une <code>SECRET_KEY</code> avec Django, il vaut mieux le faire en Python&nbsp;directement&nbsp;:</p>
 <pre><code>[depuis un shell]

 $ python3 -c 'import secrets; print(secrets.token_hex(100))'
 </code></pre>
 <a href="#hr-80" title="Lien vers cette section de la page"><hr id="hr-80" /></a>

 <blockquote lang="en">
 <p>So, what’s the fun of writing on the internet anymore? Well, if your aim is to be respected as an author, there’s probably not much fun to be had here at all. Don’t write online for fame and glory. Oblivion, obscurity and exploitation are all but guaranteed. Write here because <em>ideas</em> matter, not authorship. Write here because the more robots, pirates, and single-minded trolls swallow up cyberspace, <mark>the more we need independent writing in order to think new thoughts in the future</mark> — even if your words are getting dished up and plated by an&nbsp;algorithm.</p>
 <p><cite><em><a data-link-domain="jamesshelley.com" href="https://jamesshelley.com/blog/writing-on-the-internet.html" hreflang="en"
            title="Consultation de l’article (anglais)">What’s the fun in writing on the internet anymore?</a>
            <a href="/david/cache/2024/a005801f0e596f9ecb99037a992ecc1b/" hreflang="en"
                data-tippy data-description="The moment you release your words, you relinquish all control."
                data-source="https://jamesshelley.com/blog/writing-on-the-internet.html"
                data-date="2024-02-19"
                data-favicon="https://jamesshelley.com/images/favicon.png"
                data-domain="jamesshelley.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>Rester (et alimenter la machine) ou quitter (et laisser l’espace à la&nbsp;machine).</p>
 <p>Je n’aime pas beaucoup la <a data-link-domain="maggieappleton.com" href="https://maggieappleton.com/ai-dark-forest" hreflang="en"
            title="Consultation de l’article (anglais)">métaphore de la forêt noire</a>
            <a href="/david/cache/2024/140458968f9f7da7d14e181d0a80e799/" hreflang="en"
                data-tippy data-description="Proving you're a human on a web flooded with generative AI content"
                data-source="https://maggieappleton.com/ai-dark-forest"
                data-date="2024-02-19"
                data-favicon="https://maggieappleton.com//images/favicon/favicon.ico"
                data-domain="maggieappleton.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> ces temps-ci car j’apprécie un peu trop les forêts pour ça. J’aurais davantage l’impression de faire partie d’une haie alors qu’il y a beaucoup de monoculture aux alentours. Avec les double sens que cette méta·phore&nbsp;implique.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/apprentissage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#apprentissage</a>
          
            <a href="/david/2024/laboratoire/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#laboratoire</a>
          
            <a href="/david/2024/web/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#web</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/13/" title="Lien permanent vers cet article">Feutrage</a> <time datetime="2024-02-13">13 février 2024</time>
    </h2>
--- a/david/2024/index.html
+++ b/david/2024/index.html
@@ -182,7 +182,8 @@
      <a href="/david/2024/02/15/">Licence</a>, 
      <a href="/david/2024/02/16/">uMap&nbsp;2</a>, 
      <a href="/david/2024/02/17/">Quotidien</a>, 
      <a href="/david/2024/02/18/">In·directions</a>.
      <a href="/david/2024/02/18/">In·directions</a>, 
      <a href="/david/2024/02/19/">Injection</a>.
      
    </p>
  
@@ -192,7 +193,7 @@
      <a href="/david/2024/accessibilite/" rel="tag">#accessibilité (3)</a>, 
      <a href="/david/2024/accompagnement/" rel="tag">#accompagnement (2)</a>, 
      <a href="/david/2024/addiction/" rel="tag">#addiction (4)</a>, 
      <a href="/david/2024/apprentissage/" rel="tag">#apprentissage (11)</a>, 
      <a href="/david/2024/apprentissage/" rel="tag">#apprentissage (12)</a>, 
      <a href="/david/2024/commun/" rel="tag">#commun (7)</a>, 
      <a href="/david/2024/communaute/" rel="tag">#communauté (5)</a>, 
      <a href="/david/2024/decision/" rel="tag">#décision (6)</a>, 
@@ -208,6 +209,7 @@
      <a href="/david/2024/foret/" rel="tag">#forêt (4)</a>, 
      <a href="/david/2024/gratitude/" rel="tag">#gratitude (2)</a>, 
      <a href="/david/2024/ia/" rel="tag">#IA (2)</a>, 
      <a href="/david/2024/laboratoire/" rel="tag">#laboratoire (1)</a>, 
      <a href="/david/2024/lecture/" rel="tag">#lecture (1)</a>, 
      <a href="/david/2024/opendata/" rel="tag">#opendata (1)</a>, 
      <a href="/david/2024/opensource/" rel="tag">#opensource (6)</a>, 
@@ -222,7 +224,7 @@
      <a href="/david/2024/sport/" rel="tag">#sport (3)</a>, 
      <a href="/david/2024/technique/" rel="tag">#technique (12)</a>, 
      <a href="/david/2024/velo/" rel="tag">#vélo (1)</a>, 
      <a href="/david/2024/web/" rel="tag">#web (6)</a>.
      <a href="/david/2024/web/" rel="tag">#web (7)</a>.
      
    </p>
  
--- a/david/2024/laboratoire/index.html
+++ b/david/2024/laboratoire/index.html
@@ -0,0 +1,407 @@
 <!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>
    Étiquette #laboratoire
  — David Larlet</title>
  <meta name="description" content="Publications relatives au tag #laboratoire">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-02-03.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>
  <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>
  
  <style type="text/css">
    details[open] summary {
      display: none;
    }
  </style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>#laboratoire</h1>
      <p>Publications relatives à cette étiquette</p>
    </hgroup>
  </header>
  <nav>
    <p>
      <a href="/david/" title="Aller à l’accueil">
        Accueil</a>
      •
      <a rel="tags"
        href="/david/2024/#tags"
        title="Liste de toutes les étiquettes">
        Étiquettes</a>
      •
      <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
      •
      <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/02/19/" title="Lien permanent vers cet article">Injection</a> <time datetime="2024-02-19">19 février 2024</time>
    </h2>
    

 <blockquote lang="en">
 <p>It’s fun to think of <mark>other possible uses…</mark> Perhaps you could pull in HTML modules along with their relevant CSS link. Or embed a tweet or code examples in documentation or a blog post. It could probably even be used to load and apply a regular <code>rel=stylesheet</code> link asynchronously, and at a low priority, which is otherwise surprisingly hard to do (note: I didn’t test this idea much to say for&nbsp;sure).</p>
 <p><cite><em><a data-link-domain="filamentgroup.com" href="https://www.filamentgroup.com/lab/html-includes/" hreflang="en"
            title="Consultation de l’article (anglais)">HTML Includes That Work Today</a>
            <a href="/david/cache/2024/88df28660094efbc5a13bb09d70dfea6/" hreflang="en"
                data-tippy data-description="Read this page on the Filament Group website"
                data-source="https://www.filamentgroup.com/lab/html-includes/"
                data-date="2024-02-19"
                data-favicon="https://www.filamentgroup.com/images/icons/favicon-32x32.png"
                data-domain="filamentgroup.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>J’ai cette page ouverte dans un onglet depuis littéralement des années. C’est <a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/">Alexis</a> qui me l’a rappelé en partageant <a data-link-domain="leanrada.com" href="https://leanrada.com/htmz/">htmz</a> aujourd’hui qui va un tout petit peu plus&nbsp;loin.</p>
 <p>Voilà le code en&nbsp;question&nbsp;:</p>
 <pre><code>&lt;iframe 
  src=&quot;/static/david/2024/test-injection.html&quot; 
  onload=&quot;
    this.before(
      (
        this.contentDocument.body||this.contentDocument
      ).children[0]
    );
    this.remove()
  &quot; 
  hidden&gt;
 &lt;/iframe&gt;
 </code></pre>
 <p>En résumé, on prend le code l’<code>iframe</code> et on l’injecte au chargement dans le document en cours. Voici un exemple (pas sûr que ça fonctionne depuis un&nbsp;agrégateur…)&nbsp;:</p>
 <iframe src="/static/david/2024/test-injection.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()" hidden></iframe>

 <p>J’ai ajouté l’attribut <code>hidden</code> à la proposition initiale pour éviter le flash. Si vous inspectez le code, vous constatez que le paragraphe précédent tout à fait classique alors qu’il s’agissait d’une <code>iframe</code> (sauf si vous avez une extension qui bloque les <code>iframe</code> bien sûr). Jusque là c’est <a data-link-domain="css-tricks.com" href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/" hreflang="en"
            title="Consultation de l’article (anglais)">une forme d’inclusion</a>
            <a href="/david/cache/2024/6bfc6bd7bc1d9158aa7f6591123e7f4b/" hreflang="en"
                data-tippy data-description="It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that"
                data-source="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/"
                data-date="2024-02-19"
                data-favicon="https://css-tricks.com/favicon.svg"
                data-domain="css-tricks.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> mais rien de bien&nbsp;utile.</p>
 <p>Ce qui devient un peu plus fou serait de pouvoir injecter un <em>Web Component</em> de cette façon&#8239;! Le problème étant que le <code>this.remove()</code> est exécuté avant le chargement du script de l’<code>iframe</code>… et si on le retire on conserve cet élément <code>hidden</code> dans le document. Ce n’est pas critique mais ce n’est pas très élégant non plus, d’autant que cela signifie que le composant est défini et instancié deux&nbsp;fois.</p>
 <style>para-graph { background: paleturquoise; color: black; }</style>

 <iframe src="/static/david/2024/test-injection-web-component.html" onload= "this.before((this.contentDocument.body||this.contentDocument).children[0]);this.before(this.contentDocument.scripts[0])" hidden></iframe>

 <p>Il y a probablement des choses qui m’échappent mais il se fait&nbsp;tard.</p>
 <p><em>To be&nbsp;continued…</em></p>
 <a href="#hr-79" title="Lien vers cette section de la page"><hr id="hr-79" /></a>
 <p>Découvertes du jour&nbsp;: <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base"><code>&lt;base&gt;</code></a> et <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis">globalThis</a>.</p>
 <p>Aussi, il n’est <a data-link-domain="github.com" href="https://github.com/django/django/commit/b7f500396e05cd1f0bb8901fce16e2d8393d2779">pas forcément indiqué</a> de générer une <code>SECRET_KEY</code> avec Django, il vaut mieux le faire en Python&nbsp;directement&nbsp;:</p>
 <pre><code>[depuis un shell]

 $ python3 -c 'import secrets; print(secrets.token_hex(100))'
 </code></pre>
 <a href="#hr-80" title="Lien vers cette section de la page"><hr id="hr-80" /></a>

 <blockquote lang="en">
 <p>So, what’s the fun of writing on the internet anymore? Well, if your aim is to be respected as an author, there’s probably not much fun to be had here at all. Don’t write online for fame and glory. Oblivion, obscurity and exploitation are all but guaranteed. Write here because <em>ideas</em> matter, not authorship. Write here because the more robots, pirates, and single-minded trolls swallow up cyberspace, <mark>the more we need independent writing in order to think new thoughts in the future</mark> — even if your words are getting dished up and plated by an&nbsp;algorithm.</p>
 <p><cite><em><a data-link-domain="jamesshelley.com" href="https://jamesshelley.com/blog/writing-on-the-internet.html" hreflang="en"
            title="Consultation de l’article (anglais)">What’s the fun in writing on the internet anymore?</a>
            <a href="/david/cache/2024/a005801f0e596f9ecb99037a992ecc1b/" hreflang="en"
                data-tippy data-description="The moment you release your words, you relinquish all control."
                data-source="https://jamesshelley.com/blog/writing-on-the-internet.html"
                data-date="2024-02-19"
                data-favicon="https://jamesshelley.com/images/favicon.png"
                data-domain="jamesshelley.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>Rester (et alimenter la machine) ou quitter (et laisser l’espace à la&nbsp;machine).</p>
 <p>Je n’aime pas beaucoup la <a data-link-domain="maggieappleton.com" href="https://maggieappleton.com/ai-dark-forest" hreflang="en"
            title="Consultation de l’article (anglais)">métaphore de la forêt noire</a>
            <a href="/david/cache/2024/140458968f9f7da7d14e181d0a80e799/" hreflang="en"
                data-tippy data-description="Proving you're a human on a web flooded with generative AI content"
                data-source="https://maggieappleton.com/ai-dark-forest"
                data-date="2024-02-19"
                data-favicon="https://maggieappleton.com//images/favicon/favicon.ico"
                data-domain="maggieappleton.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> ces temps-ci car j’apprécie un peu trop les forêts pour ça. J’aurais davantage l’impression de faire partie d’une haie alors qu’il y a beaucoup de monoculture aux alentours. Avec les double sens que cette méta·phore&nbsp;implique.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/apprentissage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#apprentissage</a>
          
            <a href="/david/2024/laboratoire/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#laboratoire</a>
          
            <a href="/david/2024/web/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#web</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</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>
    
  </body>
 </html>
--- a/david/2024/web/index.html
+++ b/david/2024/web/index.html
@@ -134,6 +134,138 @@
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/02/19/" title="Lien permanent vers cet article">Injection</a> <time datetime="2024-02-19">19 février 2024</time>
    </h2>
    

 <blockquote lang="en">
 <p>It’s fun to think of <mark>other possible uses…</mark> Perhaps you could pull in HTML modules along with their relevant CSS link. Or embed a tweet or code examples in documentation or a blog post. It could probably even be used to load and apply a regular <code>rel=stylesheet</code> link asynchronously, and at a low priority, which is otherwise surprisingly hard to do (note: I didn’t test this idea much to say for&nbsp;sure).</p>
 <p><cite><em><a data-link-domain="filamentgroup.com" href="https://www.filamentgroup.com/lab/html-includes/" hreflang="en"
            title="Consultation de l’article (anglais)">HTML Includes That Work Today</a>
            <a href="/david/cache/2024/88df28660094efbc5a13bb09d70dfea6/" hreflang="en"
                data-tippy data-description="Read this page on the Filament Group website"
                data-source="https://www.filamentgroup.com/lab/html-includes/"
                data-date="2024-02-19"
                data-favicon="https://www.filamentgroup.com/images/icons/favicon-32x32.png"
                data-domain="filamentgroup.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>J’ai cette page ouverte dans un onglet depuis littéralement des années. C’est <a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/">Alexis</a> qui me l’a rappelé en partageant <a data-link-domain="leanrada.com" href="https://leanrada.com/htmz/">htmz</a> aujourd’hui qui va un tout petit peu plus&nbsp;loin.</p>
 <p>Voilà le code en&nbsp;question&nbsp;:</p>
 <pre><code>&lt;iframe 
  src=&quot;/static/david/2024/test-injection.html&quot; 
  onload=&quot;
    this.before(
      (
        this.contentDocument.body||this.contentDocument
      ).children[0]
    );
    this.remove()
  &quot; 
  hidden&gt;
 &lt;/iframe&gt;
 </code></pre>
 <p>En résumé, on prend le code l’<code>iframe</code> et on l’injecte au chargement dans le document en cours. Voici un exemple (pas sûr que ça fonctionne depuis un&nbsp;agrégateur…)&nbsp;:</p>
 <iframe src="/static/david/2024/test-injection.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()" hidden></iframe>

 <p>J’ai ajouté l’attribut <code>hidden</code> à la proposition initiale pour éviter le flash. Si vous inspectez le code, vous constatez que le paragraphe précédent tout à fait classique alors qu’il s’agissait d’une <code>iframe</code> (sauf si vous avez une extension qui bloque les <code>iframe</code> bien sûr). Jusque là c’est <a data-link-domain="css-tricks.com" href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/" hreflang="en"
            title="Consultation de l’article (anglais)">une forme d’inclusion</a>
            <a href="/david/cache/2024/6bfc6bd7bc1d9158aa7f6591123e7f4b/" hreflang="en"
                data-tippy data-description="It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that"
                data-source="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/"
                data-date="2024-02-19"
                data-favicon="https://css-tricks.com/favicon.svg"
                data-domain="css-tricks.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> mais rien de bien&nbsp;utile.</p>
 <p>Ce qui devient un peu plus fou serait de pouvoir injecter un <em>Web Component</em> de cette façon&#8239;! Le problème étant que le <code>this.remove()</code> est exécuté avant le chargement du script de l’<code>iframe</code>… et si on le retire on conserve cet élément <code>hidden</code> dans le document. Ce n’est pas critique mais ce n’est pas très élégant non plus, d’autant que cela signifie que le composant est défini et instancié deux&nbsp;fois.</p>
 <style>para-graph { background: paleturquoise; color: black; }</style>

 <iframe src="/static/david/2024/test-injection-web-component.html" onload= "this.before((this.contentDocument.body||this.contentDocument).children[0]);this.before(this.contentDocument.scripts[0])" hidden></iframe>

 <p>Il y a probablement des choses qui m’échappent mais il se fait&nbsp;tard.</p>
 <p><em>To be&nbsp;continued…</em></p>
 <a href="#hr-79" title="Lien vers cette section de la page"><hr id="hr-79" /></a>
 <p>Découvertes du jour&nbsp;: <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base"><code>&lt;base&gt;</code></a> et <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis">globalThis</a>.</p>
 <p>Aussi, il n’est <a data-link-domain="github.com" href="https://github.com/django/django/commit/b7f500396e05cd1f0bb8901fce16e2d8393d2779">pas forcément indiqué</a> de générer une <code>SECRET_KEY</code> avec Django, il vaut mieux le faire en Python&nbsp;directement&nbsp;:</p>
 <pre><code>[depuis un shell]

 $ python3 -c 'import secrets; print(secrets.token_hex(100))'
 </code></pre>
 <a href="#hr-80" title="Lien vers cette section de la page"><hr id="hr-80" /></a>

 <blockquote lang="en">
 <p>So, what’s the fun of writing on the internet anymore? Well, if your aim is to be respected as an author, there’s probably not much fun to be had here at all. Don’t write online for fame and glory. Oblivion, obscurity and exploitation are all but guaranteed. Write here because <em>ideas</em> matter, not authorship. Write here because the more robots, pirates, and single-minded trolls swallow up cyberspace, <mark>the more we need independent writing in order to think new thoughts in the future</mark> — even if your words are getting dished up and plated by an&nbsp;algorithm.</p>
 <p><cite><em><a data-link-domain="jamesshelley.com" href="https://jamesshelley.com/blog/writing-on-the-internet.html" hreflang="en"
            title="Consultation de l’article (anglais)">What’s the fun in writing on the internet anymore?</a>
            <a href="/david/cache/2024/a005801f0e596f9ecb99037a992ecc1b/" hreflang="en"
                data-tippy data-description="The moment you release your words, you relinquish all control."
                data-source="https://jamesshelley.com/blog/writing-on-the-internet.html"
                data-date="2024-02-19"
                data-favicon="https://jamesshelley.com/images/favicon.png"
                data-domain="jamesshelley.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>Rester (et alimenter la machine) ou quitter (et laisser l’espace à la&nbsp;machine).</p>
 <p>Je n’aime pas beaucoup la <a data-link-domain="maggieappleton.com" href="https://maggieappleton.com/ai-dark-forest" hreflang="en"
            title="Consultation de l’article (anglais)">métaphore de la forêt noire</a>
            <a href="/david/cache/2024/140458968f9f7da7d14e181d0a80e799/" hreflang="en"
                data-tippy data-description="Proving you're a human on a web flooded with generative AI content"
                data-source="https://maggieappleton.com/ai-dark-forest"
                data-date="2024-02-19"
                data-favicon="https://maggieappleton.com//images/favicon/favicon.ico"
                data-domain="maggieappleton.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> ces temps-ci car j’apprécie un peu trop les forêts pour ça. J’aurais davantage l’impression de faire partie d’une haie alors qu’il y a beaucoup de monoculture aux alentours. Avec les double sens que cette méta·phore&nbsp;implique.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/apprentissage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#apprentissage</a>
          
            <a href="/david/2024/laboratoire/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#laboratoire</a>
          
            <a href="/david/2024/web/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#web</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/04/" title="Lien permanent vers cet article">Tooltipopover</a> <time datetime="2024-02-04">4 février 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://blog.ecologie-politique.eu/post/I-m-so-happy-to-see-you">I'm so happy to see you</a>,
          19-02-2024
        </dt>
        <dd>
          Les logiques du développement personnel se sont doucement imposées dans notre imaginaire. Les ouvrages qui ont envahi les rayons des librairies peuvent dispenser une grande sagesse, si possible orientale, ou enchaîner les conseils simples ou les lieux communs (charité bien ordonnée commence par soi-même). Offrant une façade lisse, ils ont un propos aussi varié que consensuel. Depuis quelques…
          — <a href="https://blog.ecologie-politique.eu/">Aude</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://winnielim.org/journal/a-wet-mouldy-sponge/">a wet mouldy sponge</a>,
@@ -274,16 +284,6 @@
          — <a href="https://www.arthurperret.fr/">Arthur Perret</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://blog.ecologie-politique.eu/post/Cheres-collaboratrices">Chères collaboratrices</a>,
          02-02-2024
        </dt>
        <dd>
          Sandrine Holin, Chères collaboratrices. Comment échapper au féminisme néolibéral, La Découverte, 2023, 240 pages, 19,50 € Voici un livre dont on a envie de partager la lecture avec beaucoup d’amies et de camarades, en raison de son sujet qui en France reste assez rarement abordé. S’il est facile de mépriser certains féminismes, il est plus difficile en revanche de poser le doigt sur ce qui pose…
          — <a href="https://blog.ecologie-politique.eu/">Aude</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.quaternum.net/2024/02/02/trois-reponses-sur-ma-these/">Trois réponses sur ma thèse</a>,
--- a/david/index.html
+++ b/david/index.html
@@ -143,6 +143,7 @@
  <h2>Publications 2024</h2>
  <p>Liste des publications récentes en ordre anté-chronologique :</p>
  <p>
    <a href="/david/2024/02/19/">Injection</a>,
    <a href="/david/2024/02/18/">In·directions</a>,
    <a href="/david/2024/02/17/">Quotidien</a>,
    <a href="/david/2024/02/16/">uMap&nbsp;2</a>,
@@ -200,7 +201,7 @@
    <a href="/david/2024/accessibilite/" rel="tag">#accessibilité (3)</a>,
    <a href="/david/2024/accompagnement/" rel="tag">#accompagnement (2)</a>,
    <a href="/david/2024/addiction/" rel="tag">#addiction (4)</a>,
    <a href="/david/2024/apprentissage/" rel="tag">#apprentissage (11)</a>,
    <a href="/david/2024/apprentissage/" rel="tag">#apprentissage (12)</a>,
    <a href="/david/2024/commun/" rel="tag">#commun (7)</a>,
    <a href="/david/2024/communaute/" rel="tag">#communauté (5)</a>,
    <a href="/david/2024/decision/" rel="tag">#décision (6)</a>,
@@ -216,6 +217,7 @@
    <a href="/david/2024/foret/" rel="tag">#forêt (4)</a>,
    <a href="/david/2024/gratitude/" rel="tag">#gratitude (2)</a>,
    <a href="/david/2024/ia/" rel="tag">#IA (2)</a>,
    <a href="/david/2024/laboratoire/" rel="tag">#laboratoire (1)</a>,
    <a href="/david/2024/lecture/" rel="tag">#lecture (1)</a>,
    <a href="/david/2024/opendata/" rel="tag">#opendata (1)</a>,
    <a href="/david/2024/opensource/" rel="tag">#opensource (6)</a>,
@@ -230,7 +232,7 @@
    <a href="/david/2024/sport/" rel="tag">#sport (3)</a>,
    <a href="/david/2024/technique/" rel="tag">#technique (12)</a>,
    <a href="/david/2024/velo/" rel="tag">#vélo (1)</a>,
    <a href="/david/2024/web/" rel="tag">#web (6)</a>.
    <a href="/david/2024/web/" rel="tag">#web (7)</a>.
      
    
  </p>
--- a/david/log/index.xml
+++ b/david/log/index.xml
@@ -6,13 +6,68 @@
    <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-02-19T12:00:00+01:00</updated>
    <updated>2024-02-20T12: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">Injection</title>
            <link href="https://larlet.fr/david/2024/02/19/" rel="alternate" type="text/html" />
            <updated>2024-02-19T12:00:00+01:00</updated>
            <id>https://larlet.fr/david/2024/02/19/</id>
            <summary type="html">

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;It’s fun to think of &lt;mark&gt;other possible uses…&lt;/mark&gt; Perhaps you could pull in HTML modules along with their relevant CSS link. Or embed a tweet or code examples in documentation or a blog post. It could probably even be used to load and apply a regular &lt;code&gt;rel=stylesheet&lt;/code&gt; link asynchronously, and at a low priority, which is otherwise surprisingly hard to do (note: I didn’t test this idea much to say for&amp;nbsp;sure).&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.filamentgroup.com/lab/html-includes/&quot;&gt;HTML Includes That Work&amp;nbsp;Today&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;J’ai cette page ouverte dans un onglet depuis littéralement des années. C’est &lt;a href=&quot;https://blog.notmyidea.org/&quot;&gt;Alexis&lt;/a&gt; qui me l’a rappelé en partageant &lt;a href=&quot;https://leanrada.com/htmz/&quot;&gt;htmz&lt;/a&gt; aujourd’hui qui va un tout petit peu plus&amp;nbsp;loin.&lt;/p&gt;
 &lt;p&gt;Voilà le code en&amp;nbsp;question&amp;nbsp;:&lt;/p&gt;
 &lt;pre&gt;&lt;code&gt;&amp;lt;iframe 
  src=&amp;quot;/static/david/2024/test-injection.html&amp;quot; 
  onload=&amp;quot;
    this.before(
      (
        this.contentDocument.body||this.contentDocument
      ).children[0]
    );
    this.remove()
  &amp;quot; 
  hidden&amp;gt;
 &amp;lt;/iframe&amp;gt;
 &lt;/code&gt;&lt;/pre&gt;
 &lt;p&gt;En résumé, on prend le code l’&lt;code&gt;iframe&lt;/code&gt; et on l’injecte au chargement dans le document en cours. Voici un exemple (pas sûr que ça fonctionne depuis un&amp;nbsp;agrégateur…)&amp;nbsp;:&lt;/p&gt;
 &lt;iframe src=&quot;https://larlet.fr/static/david/2024/test-injection.html&quot; onload=&quot;this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()&quot; hidden&gt;&lt;/iframe&gt;

 &lt;p&gt;J’ai ajouté l’attribut &lt;code&gt;hidden&lt;/code&gt; à la proposition initiale pour éviter le flash. Si vous inspectez le code, vous constatez que le paragraphe précédent tout à fait classique alors qu’il s’agissait d’une &lt;code&gt;iframe&lt;/code&gt; (sauf si vous avez une extension qui bloque les &lt;code&gt;iframe&lt;/code&gt; bien sûr). Jusque là c’est &lt;a href=&quot;https://css-tricks.com/the-simplest-ways-to-handle-html-includes/&quot;&gt;une forme d’inclusion&lt;/a&gt; mais rien de bien&amp;nbsp;utile.&lt;/p&gt;
 &lt;p&gt;Ce qui devient un peu plus fou serait de pouvoir injecter un &lt;em&gt;Web Component&lt;/em&gt; de cette façon&amp;#8239;! Le problème étant que le &lt;code&gt;this.remove()&lt;/code&gt; est exécuté avant le chargement du script de l’&lt;code&gt;iframe&lt;/code&gt;… et si on le retire on conserve cet élément &lt;code&gt;hidden&lt;/code&gt; dans le document. Ce n’est pas critique mais ce n’est pas très élégant non plus, d’autant que cela signifie que le composant est défini et instancié deux&amp;nbsp;fois.&lt;/p&gt;
 &lt;style&gt;para-graph { background: paleturquoise; color: black; }&lt;/style&gt;

 &lt;iframe src=&quot;https://larlet.fr/static/david/2024/test-injection-web-component.html&quot; onload= &quot;this.before((this.contentDocument.body||this.contentDocument).children[0]);this.before(this.contentDocument.scripts[0])&quot; hidden&gt;&lt;/iframe&gt;

 &lt;p&gt;Il y a probablement des choses qui m’échappent mais il se fait&amp;nbsp;tard.&lt;/p&gt;
 &lt;p&gt;&lt;em&gt;To be&amp;nbsp;continued…&lt;/em&gt;&lt;/p&gt;
 &lt;hr /&gt;
 &lt;p&gt;Découvertes du jour&amp;nbsp;: &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base&quot;&gt;&lt;code&gt;&amp;lt;base&amp;gt;&lt;/code&gt;&lt;/a&gt; et &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis&quot;&gt;globalThis&lt;/a&gt;.&lt;/p&gt;
 &lt;p&gt;Aussi, il n’est &lt;a href=&quot;https://github.com/django/django/commit/b7f500396e05cd1f0bb8901fce16e2d8393d2779&quot;&gt;pas forcément indiqué&lt;/a&gt; de générer une &lt;code&gt;SECRET_KEY&lt;/code&gt; avec Django, il vaut mieux le faire en Python&amp;nbsp;directement&amp;nbsp;:&lt;/p&gt;
 &lt;pre&gt;&lt;code&gt;[depuis un shell]

 $ python3 -c &#x27;import secrets; print(secrets.token_hex(100))&#x27;
 &lt;/code&gt;&lt;/pre&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;So, what’s the fun of writing on the internet anymore? Well, if your aim is to be respected as an author, there’s probably not much fun to be had here at all. Don’t write online for fame and glory. Oblivion, obscurity and exploitation are all but guaranteed. Write here because &lt;em&gt;ideas&lt;/em&gt; matter, not authorship. Write here because the more robots, pirates, and single-minded trolls swallow up cyberspace, &lt;mark&gt;the more we need independent writing in order to think new thoughts in the future&lt;/mark&gt; — even if your words are getting dished up and plated by an&amp;nbsp;algorithm.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://jamesshelley.com/blog/writing-on-the-internet.html&quot;&gt;What’s the fun in writing on the internet&amp;nbsp;anymore?&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Rester (et alimenter la machine) ou quitter (et laisser l’espace à la&amp;nbsp;machine).&lt;/p&gt;
 &lt;p&gt;Je n’aime pas beaucoup la &lt;a href=&quot;https://maggieappleton.com/ai-dark-forest&quot;&gt;métaphore de la forêt noire&lt;/a&gt; ces temps-ci car j’apprécie un peu trop les forêts pour ça. J’aurais davantage l’impression de faire partie d’une haie alors qu’il y a beaucoup de monoculture aux alentours. Avec les double sens que cette méta·phore&amp;nbsp;implique.&lt;/p&gt;
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/apprentissage/&quot;&gt;#apprentissage&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/laboratoire/&quot;&gt;#laboratoire&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/web/&quot;&gt;#web&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">In·directions</title>
            <link href="https://larlet.fr/david/2024/02/18/" rel="alternate" type="text/html" />
@@ -1286,59 +1341,4 @@ par nos&amp;nbsp;obscurités&lt;/p&gt;
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/apprentissage/&quot;&gt;#apprentissage&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/foret/&quot;&gt;#forêt&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/protopie/&quot;&gt;#protopie&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">Extinction</title>
            <link href="https://larlet.fr/david/2024/01/20/" rel="alternate" type="text/html" />
            <updated>2024-01-20T12:00:00+01:00</updated>
            <id>https://larlet.fr/david/2024/01/20/</id>
            <summary type="html">

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;So where have all the websites gone? Well, the people who make them have all gone to war for the capitalist machine. They grew up and got jobs. A natural part of growing up. Silos came and plucked their voices. Invasive memes and short form content grew in their place. Hustle overtook leisure. Harassment overtook openness. Influence overtook creativity. An economy of interestingness replaced by one of followers, likes, and engagement&amp;nbsp;metrics.&lt;/p&gt;
 &lt;p&gt;One important thing to note; &lt;mark&gt;websites aren’t extinct.&lt;/mark&gt; In fact, you’re on one now! Uploading your own words is ancient technology but still&amp;nbsp;works.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://daverupert.com/2024/01/where-have-all-the-websites-gone/&quot;&gt;Where have all the flowers&amp;nbsp;gone?&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;En réponse à &lt;q lang=&quot;en&quot;&gt;&lt;a href=&quot;https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/&quot;&gt;Where have all the websites gone?&lt;/a&gt;&lt;/q&gt; que j’ai &lt;a href=&quot;https://larlet.fr/david/2024/01/10/#hr-24&quot;&gt;déjà cité&lt;/a&gt;. Peut-être que la capacité à publier est toujours là mais que nous avons &lt;a href=&quot;https://larlet.fr/david/2024/01/12/#hr-27&quot;&gt;trop changé&lt;/a&gt; pour être capables de perdurer dans cette pratique. 2024&amp;nbsp;pourrait me faire mentir car je vois une certaine effervescence dans mon agrégateur. On va bien voir si ça dure. On va bien voir si &lt;em&gt;je&lt;/em&gt;&amp;nbsp;dure.&lt;/p&gt;
 &lt;p&gt;&lt;em&gt;Guidé par le besoin, je suis en train d’automatiser des ancres sur mes &lt;code&gt;&amp;lt;hr&amp;gt;&lt;/code&gt;, fausse bonne idée&amp;#8239;? En affinant un peu le style ça me convient pour&amp;nbsp;l’instant.&lt;/em&gt;&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote&gt;
 &lt;p&gt;public-inbox implements the sharing of an email inbox via git to complement or replace traditional mailing lists.  Readers may read via NNTP, IMAP, POP3, Atom feeds or HTML&amp;nbsp;archives.&lt;/p&gt;
 &lt;p&gt;public-inbox spawned around three main&amp;nbsp;ideas:&lt;/p&gt;
 &lt;ul&gt;
 &lt;li&gt;Publicly accessible and archived communication is essential to Free Software&amp;nbsp;development.&lt;/li&gt;
 &lt;li&gt;Contributing to Free Software projects should not require the use of non-Free services or&amp;nbsp;software.&lt;/li&gt;
 &lt;li&gt;&lt;mark&gt;Graphical user interfaces should not be required for text-based communication.&lt;/mark&gt;  Users may have broken graphics drivers, limited eyesight, or be unable to afford modern&amp;nbsp;hardware.&lt;/li&gt;
 &lt;/ul&gt;
 &lt;p&gt;public-inbox aims to be easy-to-deploy and manage; encouraging projects to run their own instances with minimal&amp;nbsp;overhead.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://public-inbox.org/README.html&quot;&gt;public-inbox - an &amp;quot;archives first&amp;quot; approach to mailing&amp;nbsp;lists&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;D’une certaine manière, l’&lt;a href=&quot;https://github.com/jgm/pandoc/issues/9250&quot;&gt;extinction de voix des un·es&lt;/a&gt; fait mon bonheur de découverte aujourd’hui. J’espère que le réflexe ne sera pas de passer de &lt;em&gt;Google Groups&lt;/em&gt; à &lt;em&gt;Microsoft Github Discussions&lt;/em&gt; par&amp;nbsp;commodité.&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote&gt;
 &lt;p&gt;… ça veut dire qu’en vrai, les droits humains, tu t’en fiches pas&amp;nbsp;mal.&lt;/p&gt;
 &lt;p&gt;Et que tu es juste &lt;mark&gt;un peu raciste&lt;/mark&gt;.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://emmaclit.com/2024/01/19/culture-froncaise/&quot;&gt;Culture&amp;nbsp;fronçaise&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Voilà.&lt;/p&gt;
 &lt;hr /&gt;
 &lt;figure&gt;
    &lt;a href=&quot;https://larlet.fr/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg&quot;
        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
        &lt;img
            src=&quot;https://larlet.fr/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg&quot;
            width=&quot;3024&quot; height=&quot;3024&quot;
            srcset=&quot;/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg 3024w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_660x440.jpg 660w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_990x660.jpg 990w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_1320x880.jpg 1320w&quot;
            sizes=&quot;min(100vw, calc(100vh * 3024 / 3024))&quot;
            loading=&quot;lazy&quot;
            decoding=&quot;async&quot;
            alt=&quot;Un enfant de dos dans des traces de ski de fond classique à la tombée du jour&quot;&gt;
    &lt;/a&gt;
    &lt;figcaption&gt;-16°C, rien de mieux pour démarrer une fin de semaine qu’une sortie ski dans notre jardin après&amp;nbsp;l’école.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;p&gt;Cette photo est floue, c’est devenu tellement rare avec un téléphone (&lt;em&gt;OK&amp;nbsp;Boomer&lt;/em&gt;&amp;nbsp;:p). Les couleurs étaient superbes et une fois les mains réchauffées c’était une ambiance très agréable. On n’a pas croisé grand monde. La rééducation active continue tranquillement son&amp;nbsp;chemin.&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/evolution/&quot;&gt;#évolution&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/parentalite/&quot;&gt;#parentalité&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
@@ -276,6 +276,12 @@
    </template>
    
    <script id="search-index" type="application/json">[
  {
    "title": "Injection",
    "url": "/david/2024/02/19/",
    "date": "2024-02-19",
    "content": "It\u2019s fun to think of other possible uses\u2026 Perhaps you could pull in HTML modules along with their relevant CSS link. Or embed a tweet or code examples in documentation or a blog post. It could probably even be used to load and apply a regular rel=stylesheet link asynchronously, and at a low priority, which is otherwise surprisingly hard to do (note: I didn\u2019t test this idea much to say for\u00a0sure). HTML Includes That Work\u00a0Today J\u2019ai cette page ouverte dans un onglet depuis litt\u00e9ralement des ann\u00e9es. C\u2019est Alexis qui me l\u2019a rappel\u00e9 en partageant htmz aujourd\u2019hui qui va un tout petit peu plus\u00a0loin. Voil\u00e0 le code en\u00a0question\u00a0: <iframe src=\"/static/david/2024/test-injection.html\" onload=\" this.before( ( this.contentDocument.body||this.contentDocument ).children[0] ); this.remove() \" hidden> </iframe> En r\u00e9sum\u00e9, on prend le code l\u2019iframe et on l\u2019injecte au chargement dans le document en cours. Voici un exemple (pas s\u00fbr que \u00e7a fonctionne depuis un\u00a0agr\u00e9gateur\u2026)\u00a0: J\u2019ai ajout\u00e9 l\u2019attribut hidden \u00e0 la proposition initiale pour \u00e9viter le flash. Si vous inspectez le code, vous constatez que le paragraphe pr\u00e9c\u00e9dent tout \u00e0 fait classique alors qu\u2019il s\u2019agissait d\u2019une iframe (sauf si vous avez une extension qui bloque les iframe bien s\u00fbr). Jusque l\u00e0 c\u2019est une forme d\u2019inclusion mais rien de bien\u00a0utile. Ce qui devient un peu plus fou serait de pouvoir injecter un Web Component de cette fa\u00e7on\u202f! Le probl\u00e8me \u00e9tant que le this.remove() est ex\u00e9cut\u00e9 avant le chargement du script de l\u2019iframe\u2026 et si on le retire on conserve cet \u00e9l\u00e9ment hidden dans le document. Ce n\u2019est pas critique mais ce n\u2019est pas tr\u00e8s \u00e9l\u00e9gant non plus, d\u2019autant que cela signifie que le composant est d\u00e9fini et instanci\u00e9 deux\u00a0fois. para-graph { background: paleturquoise; color: black; } Il y a probablement des choses qui m\u2019\u00e9chappent mais il se fait\u00a0tard. To be\u00a0continued\u2026 D\u00e9couvertes du jour\u00a0: <base> et globalThis. Aussi, il n\u2019est pas forc\u00e9ment indiqu\u00e9 de g\u00e9n\u00e9rer une SECRET_KEY avec Django, il vaut mieux le faire en Python\u00a0directement\u00a0: [depuis un shell] $ python3 -c  import secrets; print(secrets.token_hex(100))  So, what\u2019s the fun of writing on the internet anymore? Well, if your aim is to be respected as an author, there\u2019s probably not much fun to be had here at all. Don\u2019t write online for fame and glory. Oblivion, obscurity and exploitation are all but guaranteed. Write here because ideas matter, not authorship. Write here because the more robots, pirates, and single-minded trolls swallow up cyberspace, the more we need independent writing in order to think new thoughts in the future \u2014 even if your words are getting dished up and plated by an\u00a0algorithm. What\u2019s the fun in writing on the internet\u00a0anymore? Rester (et alimenter la machine) ou quitter (et laisser l\u2019espace \u00e0 la\u00a0machine). Je n\u2019aime pas beaucoup la m\u00e9taphore de la for\u00eat noire ces temps-ci car j\u2019appr\u00e9cie un peu trop les for\u00eats pour \u00e7a. J\u2019aurais davantage l\u2019impression de faire partie d\u2019une haie alors qu\u2019il y a beaucoup de monoculture aux alentours. Avec les double sens que cette m\u00e9ta\u00b7phore\u00a0implique."
  },
  {
    "title": "In\u00b7directions",
    "url": "/david/2024/02/18/",
@@ -570,6 +576,12 @@
    "date": "2024-01-01",
    "content": "33\u202f% de 44\u00a0millions de consommateurs vont faire le Dry January 22\u202f% des consommateurs ont une conso excessive, c\u2019est-\u00e0-dire 10\u00a0verres/semaine max et plus de deux\u00a0verres/jour. Les seniors sont aussi tr\u00e8s touch\u00e9\u00b7es. L\u2019alcool est une drogue.. On peut faire la f\u00eate sans alcool et\u00a0s\u2019\u00e9clater. Quand on arr\u00eate\u00a0: bienfaits sur le foie, la peau, le coeur, etc\u2026 Pb\u00a0: m\u00e9moire, troubles cognitifs, responsable de cancer, pb sommeil, d\u00e9compensation de maladie psy,\u2026 41000\u00a0d\u00e9c\u00e8s par an en\u00a0France. Les cinq sympt\u00f4mes d\u00e9finissent un probl\u00e8me de\u00a0d\u00e9pendance\u00a0: Perte de\u00a0contr\u00f4le Usage\u00a0compulsif Envie\u00a0r\u00e9pressive Usage\u00a0chronique Cons\u00e9quences psychiques, physiques, sociales,\u2026 Bon Dry J. pour celleux qui le font\u202f! Moi j\u2019en\u00a0suis\u202f! @Air@framapiaf.org Dans mon entourage, de plus en plus de personnes que j\u2019estime ne boivent pas d\u2019alcool, de plus en plus de personnes qui vieillissent en deviennent d\u00e9pendantes. Je suis davantage attir\u00e9 par la premi\u00e8re option\u2026 et pas pour un seul\u00a0mois. Je me sens pr\u00eat, on verra bien o\u00f9 cela me\u00a0m\u00e8ne. Grosse envie de reprendre la CSS par ici en ce d\u00e9but d\u2019ann\u00e9e. Avec le dilemme de faire chuter cette motivation si je publie d\u00e8s maintenant avec l\u2019ancienne (qui restera effective sur les anciens articles). Je vais essayer de me\u00a0retenir."
  },
  {
    "title": "Injection",
    "url": "/david/2024/02/19/",
    "date": "2024-02-19",
    "content": "It\u2019s fun to think of other possible uses\u2026 Perhaps you could pull in HTML modules along with their relevant CSS link. Or embed a tweet or code examples in documentation or a blog post. It could probably even be used to load and apply a regular rel=stylesheet link asynchronously, and at a low priority, which is otherwise surprisingly hard to do (note: I didn\u2019t test this idea much to say for\u00a0sure). HTML Includes That Work\u00a0Today J\u2019ai cette page ouverte dans un onglet depuis litt\u00e9ralement des ann\u00e9es. C\u2019est Alexis qui me l\u2019a rappel\u00e9 en partageant htmz aujourd\u2019hui qui va un tout petit peu plus\u00a0loin. Voil\u00e0 le code en\u00a0question\u00a0: <iframe src=\"/static/david/2024/test-injection.html\" onload=\" this.before( ( this.contentDocument.body||this.contentDocument ).children[0] ); this.remove() \" hidden> </iframe> En r\u00e9sum\u00e9, on prend le code l\u2019iframe et on l\u2019injecte au chargement dans le document en cours. Voici un exemple (pas s\u00fbr que \u00e7a fonctionne depuis un\u00a0agr\u00e9gateur\u2026)\u00a0: J\u2019ai ajout\u00e9 l\u2019attribut hidden \u00e0 la proposition initiale pour \u00e9viter le flash. Si vous inspectez le code, vous constatez que le paragraphe pr\u00e9c\u00e9dent tout \u00e0 fait classique alors qu\u2019il s\u2019agissait d\u2019une iframe (sauf si vous avez une extension qui bloque les iframe bien s\u00fbr). Jusque l\u00e0 c\u2019est une forme d\u2019inclusion mais rien de bien\u00a0utile. Ce qui devient un peu plus fou serait de pouvoir injecter un Web Component de cette fa\u00e7on\u202f! Le probl\u00e8me \u00e9tant que le this.remove() est ex\u00e9cut\u00e9 avant le chargement du script de l\u2019iframe\u2026 et si on le retire on conserve cet \u00e9l\u00e9ment hidden dans le document. Ce n\u2019est pas critique mais ce n\u2019est pas tr\u00e8s \u00e9l\u00e9gant non plus, d\u2019autant que cela signifie que le composant est d\u00e9fini et instanci\u00e9 deux\u00a0fois. para-graph { background: paleturquoise; color: black; } Il y a probablement des choses qui m\u2019\u00e9chappent mais il se fait\u00a0tard. To be\u00a0continued\u2026 D\u00e9couvertes du jour\u00a0: <base> et globalThis. Aussi, il n\u2019est pas forc\u00e9ment indiqu\u00e9 de g\u00e9n\u00e9rer une SECRET_KEY avec Django, il vaut mieux le faire en Python\u00a0directement\u00a0: [depuis un shell] $ python3 -c  import secrets; print(secrets.token_hex(100))  So, what\u2019s the fun of writing on the internet anymore? Well, if your aim is to be respected as an author, there\u2019s probably not much fun to be had here at all. Don\u2019t write online for fame and glory. Oblivion, obscurity and exploitation are all but guaranteed. Write here because ideas matter, not authorship. Write here because the more robots, pirates, and single-minded trolls swallow up cyberspace, the more we need independent writing in order to think new thoughts in the future \u2014 even if your words are getting dished up and plated by an\u00a0algorithm. What\u2019s the fun in writing on the internet\u00a0anymore? Rester (et alimenter la machine) ou quitter (et laisser l\u2019espace \u00e0 la\u00a0machine). Je n\u2019aime pas beaucoup la m\u00e9taphore de la for\u00eat noire ces temps-ci car j\u2019appr\u00e9cie un peu trop les for\u00eats pour \u00e7a. J\u2019aurais davantage l\u2019impression de faire partie d\u2019une haie alors qu\u2019il y a beaucoup de monoculture aux alentours. Avec les double sens que cette m\u00e9ta\u00b7phore\u00a0implique."
  },
  {
    "title": "In\u00b7directions",
    "url": "/david/2024/02/18/",