davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839
							<!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>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <meta name="description" content="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">
  
  <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/04/22/" title="Lien permanent vers cet article">Alimentation</a> <time datetime="2024-04-22">22 avril 2024</time>
    </h2>
    
<p>Je réfléchis beaucoup au nombre de <a data-link-domain="fr.wiktionary.org" href="https://fr.wiktionary.org/wiki/Calorie">Calories</a> dont j’ai besoin sur une journée d’activités intensives. J’ai l’impression d’être autour de 3000-3500 —&nbsp;selon la température notamment. Il m’est difficile d’arriver à une telle quantité en restant en-dessous du kilo par jour <em>et</em> sans perdre l’appétit au cours du&nbsp;temps.</p>
<p>J’en suis à me dire que pour de la rando-course, il faut que j’expérimente une approche nutritive hybride aussi avec un petit déjeuner, un repas complet le soir et entre les deux des «&nbsp;collations&nbsp;» variées / équilibrées / hypercaloriques tous les 4-5&#8239;km par exemple. C’est très approximatif et à tester en conditions réelles bien sûr avant de&nbsp;ré-adapter.</p>
<p>Je suis en train d’itérer sur ma propre recette de <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Bannique">bannique</a>, tiraillé entre l’appropriation culturelle et la reconnaissance qu’il y a eu des siècles d’itérations avant moi… l’avantage d’une base relativement neutre étant de pouvoir la décliner en de multiples saveurs car le <em><a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Lembas">lembas</a></em> c’est un peu lassant au bout de quelques&nbsp;jours&#8239;!</p>
<p>On va voir si j’arrive à perdre du poids —&nbsp;dans le sac seulement&nbsp;— avec cette stratégie. J’ai déjà l’impression d’être à bord du <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Nebuchadnezzar_(The_Matrix)">Nebuchadnezzar</a> lorsque je mange mon gruau le matin, je ne suis pas encore prêt à me retrouver dans <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Soylent_(meal_replacement)">Soleil Vert</a>.</p>
<a href="#hr-157" title="Lien vers cette section de la page"><hr id="hr-157" /></a>

<blockquote lang="en">
<p>Too often, I notice that the instinct to give feedback works to cut off that kind of exploration. We assume that the person who is the object of our feedback has something to learn and fail to notice the same thing about ourselves. We presume that if something uncomfortable or unexpected happens, <mark>it represents an opportunity (or even an obligation) to give feedback—rather than an opportunity to get curious,</mark> to inquire into what’s going&nbsp;on.</p>
<p>We’ve funneled so much energy into feedback processes that I fear we’ve neglected more foundational skills: the ability to ask questions, to listen deeply, to see the things before us that we’re wont to&nbsp;ignore.</p>
<p><cite><em><a data-link-domain="everythingchanges.us" href="https://everythingchanges.us/blog/what-you-see/" hreflang="en"
            title="Consultation de l’article (anglais)">What you see | everything changes</a>
            <a href="/david/cache/2024/1fc13a9dd6654dd40f95de0d7d657128/" hreflang="en"
                data-tippy data-description="Attending to your own attention."
                data-source="https://everythingchanges.us/blog/what-you-see/"
                data-date="2024-04-22"
                data-favicon="https://everythingchanges.us/favicon.ico"
                data-domain="everythingchanges.us"
                ><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>🤐</p>
<a href="#hr-158" title="Lien vers cette section de la page"><hr id="hr-158" /></a>

<blockquote>
<p>Partout on dégaine l’adjectif «&nbsp;systémique&nbsp;» sauf là, où il serait pourtant bien utile. C’est pas un problème de personnes, c’est pas que les masculinités alternatives sont un modèle qui ne s’est pas encore assez diffusé, c’est parce que l’appartenance à une classe qui a des privilèges sur une autre produit quelque chose chez les dominants, une certaine répugnance à ne pas en profiter. Difficile dans ces conditions de se mettre au service du <mark>féminisme entendu comme l’émancipation des femmes et non comme une aventure de développement personnel</mark>&nbsp;[…]</p>
<p><cite><em><a data-link-domain="blog.ecologie-politique.eu" href="https://blog.ecologie-politique.eu/post/Les-hommes-doux-sont-ils-l-avenir-du-feminisme" hreflang="fr"
            title="Consultation de l’article">Les hommes doux sont-ils l’avenir du féminisme&#8239;?</a>
            <a href="/david/cache/2024/ece1ee6687c7070e9bf39adb74294b8c/" hreflang="fr"
                data-tippy data-description="Même si lafemme est l’avenir de l’homme, c’est moins sur nous que sur les hommes que sont projetées nombre d’attentes concernant le recul espéré du sexisme. Comme si nous ne"
                data-source="https://blog.ecologie-politique.eu/post/Les-hommes-doux-sont-ils-l-avenir-du-feminisme"
                data-date="2024-04-22"
                data-favicon=""
                data-domain="blog.ecologie-politique.eu"
                ><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>Ça pique là où il faut que ça&nbsp;pique.</p>
<a href="#hr-159" title="Lien vers cette section de la page"><hr id="hr-159" /></a>

<blockquote lang="en">
<p>Even if you decide not to post the comment or delete it after it is posted, the files are not deleted from GitHub’s CDN, and the download URLs continue to work&nbsp;forever.</p>
<p>As the file’s URL contains the name of the repository the comment was created in, and as almost every software company uses GitHub, this flaw can allow threat actors to develop extraordinarily crafty and trustworthy&nbsp;lures.</p>
<p><cite><em><a data-link-domain="bleepingcomputer.com" href="https://www.bleepingcomputer.com/news/security/github-comments-abused-to-push-malware-via-microsoft-repo-urls/" hreflang="en"
            title="Consultation de l’article (anglais)">GitHub comments abused to push malware via Microsoft repo URLs</a>
            <a href="/david/cache/2024/81659ceed4b37a8c94095c3b743fe13a/" hreflang="en"
                data-tippy data-description="A GitHub flaw, or possibly&nbsp;a design decision, is being abused by threat actors to distribute malware using URLs associated with a Microsoft repository, making the files appear trustworthy."
                data-source="https://www.bleepingcomputer.com/news/security/github-comments-abused-to-push-malware-via-microsoft-repo-urls/"
                data-date="2024-04-22"
                data-favicon="https://www.bleepstatic.com/favicon/bleeping.ico"
                data-domain="bleepingcomputer.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>Une astuce pour un hébergement d’images aux frais de Microsoft est en train d’être documentée. À juste titre, je n’avais pas conscience que l’URL était liée au dépôt ce qui ouvre pas mal de possibilités niveau&nbsp;sécurité.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/adaptation/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#adaptation</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/sport/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#sport</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/04/14/" title="Lien permanent vers cet article">Apex 2</a> <time datetime="2024-04-14">14 avril 2024</time>
    </h2>
    
<p><em>Bon allez, retour <a href="/david/2024/03/14/" title="Montre 2">après un mois</a>, autant dire que je manque de&nbsp;recul.</em></p>
<p>Je l’ai porté tous les jours, et même la nuit, ce qui ne m’était jamais arrivé auparavant. C’est à la fois la légèreté (42&nbsp;grammes&#8239;!) et le bracelet très confortable (et qui sèche vite) qui permettent cela. La possibilité d’inverser le cadran de la montre pour avoir les boutons à l’opposé du poignet me correspond bien dans mes peurs à ce niveau là aussi. Côté ergonomie, j’adore qu’il n’y ait que 3&nbsp;boutons, la roulette est un peu lente à mon goût par&nbsp;contre.</p>
<p>Niveau motivation, je m’y attendais mais pas dans cette proportion là, j’ai fait énormément de sport(s) ce dernier mois. J’ai enregistré une cinquantaine d’activités mais je consigne aussi les aller-retours à l’école en vélo car je voulais vraiment identifier les moments de «&nbsp;récupération active&nbsp;». Il y en a d’autres que j’ai loupé donc ça compense. J’ai redécouvert ma <em>pain cave</em> à cette occasion mais ça fera l’objet d’un billet distinct. J’ai redécouvert mes douleurs d’usure&nbsp;aussi…</p>
<p>Je suis surpris qu’il n’y ait pas un mode pour générer des activités <em>a posteriori</em> vu que tout est consigné au quotidien, même avec une fréquence de rafraichissement moindre qu’en effort explicite ça serait intéressant pour éviter d’avoir à y penser. Encore plus surprenant&nbsp;: il n’est pas possible de changer un type d’activité après coup, ce qui me serait très utile quand je suis avec l’enfant car je ne sais jamais quand une marche va se transformer en course (et <em>vice versa</em>).</p>
<p>Le GPS est suffisamment précis pour mon usage (vs. double fréquence), ce qui m’avait beaucoup fait hésité avec la version Pro. Je suis très content d’avoir parié sur des taille / poids qui me conviennent davantage. En contrepartie, la batterie tient pour 2 <a href="/david/2024/03/29/" title="Jour 1">longs</a> <a href="/david/2024/03/30/" title="Jour 2">jours</a> de randonnée, pas beaucoup plus. Un câble de plus à transporter, c’est acceptable. Niveau orientation, c’est pas mal fait, chaque déviation émet un son+vibration avec la distance et le chemin / direction pour rattraper. Je n’ai pas trouvé / cherché s’il était possible de lui dire que la déviation était intentionnelle en cours d’exercice. J’ai la crainte que ça sonne à un moment où je suis un animal selon le contexte… probablement un paramètre à&nbsp;trouver.</p>
<p>J’ai redécouvert les zones d’effort, le seuil, la VMA, la charge d’entrainement et toutes ces choses là. C’était geekement plaisant de jouer avec ces données. Il y aussi celles relatives au sommeil qui me font réfléchir (pendant les insomnies par&nbsp;exemple&nbsp;🙃).</p>

<blockquote>
<p>Il faut que j’apprenne à ne pas courir <em>contre</em> mais <em>avec</em> la montre. <mark>J’ai trop tendance à pousser</mark> alors qu’elle sait bien à mon poignet que mon cœur ne va pas&nbsp;suivre.</p>
<p>Il y a du travail à faire pour transformer un jugement en&nbsp;allié.</p>
<p><cite><a href="/david/2024/03/14/" title="Montre 2">Auto-citation</a></cite></p>
</blockquote>
<p>Bon sur ce plan là, je n’ai pas été très bon. J’ai l’impression de ne pas attendre suffisamment entre deux efforts <em>et</em> en même temps il y a un autre panneau qui donne le moment optimal pour retourner s’entrainer et qui contredit celui-ci. Il faut que je prenne le temps de mieux me réécouter à ce&nbsp;niveau.</p>
<figure>
    <a href="/static/david/2024/2024-04-14-recuperation.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-04-14-recuperation.jpg"
            width="960" height="2079"
            srcset="/static/david/2024/2024-04-14-recuperation.jpg 960w, /static/david/2024/2024-04-14-recuperation_660x440.jpg 660w, /static/david/2024/2024-04-14-recuperation_990x660.jpg 990w, /static/david/2024/2024-04-14-recuperation_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 960 / 2079))"
            loading="lazy"
            decoding="async"
            alt="Panneau de Récupération de l’application COROS.">
    </a>
    <figcaption>Suis-je vraiment en situation de fatigue / à 50% de mes capacités sur la majorité de mes sessions&nbsp;?!</figcaption>
</figure>
<p>Je suis frustré par les capacités limitées de récupération des données (automatisée). J’ai le sentiment qu’il faut passer par une autre plateforme tierce, ou synchroniser à des «&nbsp;services&nbsp;» comme Strava, pour y avoir accès et ça me frustre. Je <a href="/david/2024/03/19/#hr-124">l’évoquais par ici</a>. Sur des données de santé, ça me fait bien suer de sortir des serveurs de collecte que je tolère déjà à moitié. Autre déception&nbsp;: ces outils sont vraiment faits pour être personnels et il n’y a pas de mode «&nbsp;prêt&nbsp;» pour une activité. La seule option trouvée pour ne pas fausser les statistiques personnelles semble être de supprimer l’activité après avoir récupéré les&nbsp;données.</p>
<p>Le prédic(a)teur de course qui m’annonçait initialement un marathon à 5h, j’avoue, ça pique un peu. Et peut-être que ça a participé à ma motivation aussi&nbsp;🤷. On apprend à mutuellement se connaître, on verra dans six mois une fois les courbes&nbsp;stabilisées.</p>
<p>Niveau montre connectée, je pensais désactiver les notifications dès le premier jour et en fait c’est assez pratique pour trier ce qui est de l’information et ce qui demande une interaction. C’est sûr que je pourrais mieux filtrer à la base mais la plupart des outils ne permettent pas d’avoir une telle granularité. Cela m’a d’une certaine manière éloigné de mon temps d’écran de téléphone (un peu moins) indispensable. J’apprécie de pouvoir mettre des alarmes qui vibrent et qui ne dérangent vraiment que moi, surtout pour les&nbsp;réveils.</p>
<p>J’ai fait trois <a href="/david/2024/04/07/" title="Piscine">séances</a> de <a href="/david/2024/04/10/#hr-146">piscine</a> pour l’instant et c’est vraiment chouette d’avoir des chiffres à ce sujet, je pense que ça peut m’aider à progresser dans ce domaine. Je n’ai pas suffisamment repris le vélo pour voir si c’est pertinent dans ce contexte aussi. C’est une montre qui est quand même très orientée course dans l’ensemble, le couplage avec un <a data-link-domain="coros.ca" href="https://coros.ca/coros-pod2">Pod 2</a> est probablement un moyen d’aller plus loin dans l’amélioration de la foulée notamment. À voir si je creuse cet aspect, j’ai déjà de quoi&nbsp;faire.</p>
<p>Je ne sais toujours pas à quoi cela sert de connaître le nombre de ses pas <em>estimés</em> par jour. Encore moins le nombre d’étages… les <em>watchfaces</em> par contre c’est marrant (au début&#8239;?). Dans l’ensemble ça dépasse mes attentes qui étaient assez élevée, c’est rare. N’hésitez pas si vous avez des questions spécifiques auxquelles je peux&nbsp;répondre.</p>

<blockquote>
<p><em>[Aujourd’hui, en allant à la piscine en courant]</em><br />
— Pfiou, j’ai pas encore bien récupéré depuis vendredi…<br />
— Ah je me disais bien que tu étais à la traîne, je pensais que c’était juste la vieillesse.<br />
—&nbsp;🫠</p>
</blockquote>
<p>Difficile de vivre avec un <del>athlète élite</del> enfant de 10&nbsp;ans&nbsp;parfois.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/enthousiasme/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#enthousiasme</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/sport/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#sport</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/03/20/" title="Lien permanent vers cet article">PageCrypt</a> <time datetime="2024-03-20">20 mars 2024</time>
    </h2>
    
<p><a href="/david/2024/03/19/" title="Excitation">J’y ai passé ma soirée</a> mais j’ai un <a data-link-domain="davidbgk.gitlab.io" href="https://davidbgk.gitlab.io/page-crypt-web-component/">truc qui fonctionne pour une démo</a>. Ça ressemble beaucoup à un <em>patchwork</em> de bouts de code récupérés <a data-link-domain="maxlaumeister.com" href="https://www.maxlaumeister.com/pagecrypt/">ici</a> et <a data-link-domain="github.com" href="https://github.com/Greenheart/pagecrypt">là</a> puis <a data-link-domain="github.com" href="https://github.com/MaxLaumeister/PageCrypt/blob/master/python/encrypt.py">aussi là</a> pour la partie&nbsp;Python.</p>
<p>Il y a encore pas mal de travail —&nbsp;notamment pour rendre la page suffisamment accessible&nbsp;— mais au moins la partie crypto / boîte noire semble fonctionner à la fois du côté génération en Python et consommation en JS. C’est la partie qui me faisait un peu peur et sur laquelle j’ai un peu patiné car c’est bien au-delà de mes compétences et que je ne veux pas prendre l’initiative de trop adapter sans comprendre les enjeux niveau&nbsp;sécurité.</p>
<p>Le dépôt est <a data-link-domain="gitlab.com" href="https://gitlab.com/davidbgk/page-crypt-web-component">par ici</a>. Il faut encore que je décide si le formulaire pour le mot de passe devient un <em>web component</em> dédié et/ou un sous-composant, je ne suis pas satisfait du couplage implicite actuel. Itération, itération.</p>
<p>En bonus, il est possible d’accéder directement au contenu de la page en mettant le mot de passe en ancre de l’URL. J’ai appris au passage que ce fragment d’URL n’était pas transmis dans la requête et ne restait que dans l’historique du&nbsp;navigateur.</p>
<p><em>Si tu n’as pas honte de ton premier commit, tout ça… la suite&nbsp;demain.</em></p>
<a href="#hr-125" title="Lien vers cette section de la page"><hr id="hr-125" /></a>

<blockquote>
<p>Les mots ont un impact et, inconsciemment, quand vous ne les utilisez pas dans la bonne manière, vous minimisez mon handicap et donc vous faites moins d'effort que&nbsp;nécessaire.</p>
<p>Autre point, dit-on «&nbsp;personne en situation en handicap&nbsp;» ou «&nbsp;personne&nbsp;handicapée&#8239;?&nbsp;»</p>
<p>Là, encore, il y a une&nbsp;subtilité.</p>
<p>Je vais à un événement tech où les conférences ne sont pas sous-titrées. Je suis en situation de handicap puisque les conférences ne me sont pas du tout&nbsp;accessibles.</p>
<p>Je vais à un événement tech où les conférences sont toutes sous-titrées. Je ne suis pas en situation de handicap puisque les conférences me sont totalement&nbsp;accessibles.</p>
<p>Voici la différence. <mark>Être en situation de handicap, c’est subir la situation faute&nbsp;d’accessibilité.</mark></p>
<p><cite><em><a data-link-domain="emmanuelle-aboaf.netlify.app" href="https://emmanuelle-aboaf.netlify.app/blog/article/n-ayez-pas-peur-des-mots" hreflang="fr"
            title="Consultation de l’article">N’ayez pas peur des mots</a>
            <a href="/david/cache/2024/5201efaa6fe6a80f69647a354c9afd18/" hreflang="fr"
                data-tippy data-description="Les mots ont un impact et pourtant ils ne sont pas utilisés en tant que tels. Le mot handicapé·e n’est pas un gros mot, pas plus que les mots sourd·e et aveugle. Malheureusement, certaines personnes n’osent pas les dire par peur de vexer ou en pensant que ça ne se dit pas. Cependant, en ne les disant pas, vous créez un tabou. Je vous partage mes réflexions sur le sujet à travers cet article."
                data-source="https://emmanuelle-aboaf.netlify.app/blog/article/n-ayez-pas-peur-des-mots"
                data-date="2024-03-20"
                data-favicon="https://emmanuelle-aboaf.netlify.app/blog/article/favicon-32x32.png"
                data-domain="emmanuelle-aboaf.netlify.app"
                ><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>Cette page ne contient pas le contenu du HTML qui s’affiche et ça me rend triste car j’en apprécie le contenu qui m’apprend des choses / me fait&nbsp;réfléchir.</p>
<p>Un autre angle de&nbsp;l’accessibilité&#8239;?</p>
<a href="#hr-126" title="Lien vers cette section de la page"><hr id="hr-126" /></a>

<blockquote lang="en">
<p>So don’t publish for the&nbsp;world.</p>
<p>When I write something here on my website, I’m not thinking about the world reading it. That would be paralyzing. I do sometimes imagine that one person is reading it; someone just like me who hasn’t yet had this particular thought, or come up with that particular&nbsp;idea.</p>
<p>I’m writing for myself. <mark>I write to figure out what I think.</mark> I also publish mostly for myself—a public archive for future me. But if what I publish just happens to connect with one other person, I’m&nbsp;glad.</p>
<p><cite><em><a data-link-domain="adactio.com" href="https://adactio.com/journal/20996" hreflang="en"
            title="Consultation de l’article (anglais)">What the world needs</a>
            <a href="/david/cache/2024/318dd7526e11f9476c9cbc88eb3f2b9b/" hreflang="en"
                data-tippy data-description="Write for yourself."
                data-source="https://adactio.com/journal/20996"
                data-date="2024-03-20"
                data-favicon="https://adactio.com/icon.png"
                data-domain="adactio.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>
<a href="#hr-127" title="Lien vers cette section de la page"><hr id="hr-127" /></a>

<blockquote lang="en">
<p>My goal, for this digital place I’m creating, is to make you go away. And that’s not because I want to be left alone but because <mark>I hope to help you discover new digital places to explore.</mark> If I see you again, it’s because you decided to come back, and not because you got lost and trapped inside the digital walls I&nbsp;erected.</p>
<p><cite><em><a data-link-domain="manuelmoreale.com" href="https://manuelmoreale.com/digital-walled-gardens" hreflang="en"
            title="Consultation de l’article (anglais)">Digital walled gardens</a>
            <a href="/david/cache/2024/812f09bae33b395819539fd2c4693fe2/" hreflang="en"
                data-tippy data-description="The concept of a walled garden is not a new one in the digital world. It’s just a fancier, less aggressive way to describe a closed ecosystem or a …"
                data-source="https://manuelmoreale.com/digital-walled-gardens"
                data-date="2024-03-20"
                data-favicon="https://manuelmoreale.com/favicon.ico"
                data-domain="manuelmoreale.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>🌱</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/laboratoire/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#laboratoire</a>
          
            <a href="/david/2024/opensource/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#opensource</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/03/01/" title="Lien permanent vers cet article">Simple</a> <time datetime="2024-03-01">1 mars 2024</time>
    </h2>
    

<blockquote lang="en">
<p>We can bring that into RSS by treating any interaction as content. If you post something, thats an entry in your feed (as before). If you comment on something, thats also an entry in your feed. If you like something, thats another entry in your feed. If you follow someone (which would mean subscribing to some RSS feed), thats also another entry in your feed. To mark that interactive nature of some feed entry, <mark>we can simple extend RSS a&nbsp;bit</mark></p>
<p><cite><em><a data-link-domain="gist.github.com" href="https://gist.github.com/loreanvictor/bddd8824c744024d338e935bd7e96707" hreflang="en"
            title="Consultation de l’article (anglais)">Interaction as Content</a>
            <a href="/david/cache/2024/e401917f8e9785285afed817e5344443/" hreflang="en"
                data-tippy data-description="Interaction as Content. GitHub Gist: instantly share code, notes, and snippets."
                data-source="https://gist.github.com/loreanvictor/bddd8824c744024d338e935bd7e96707"
                data-date="2024-03-01"
                data-favicon="https://github.githubassets.com/favicons/favicon.png"
                data-domain="gist.github.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>Tout est dans le <q lang="en">simple</q>&nbsp;🙃.</p>
<p>Rédiger une spécification comme <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Media_RSS">Media RSS</a> n’est déjà pas trivial mais alors faire en sorte que cela soit adopté et devienne un standard c’est une autre paire de&nbsp;manches.</p>

<blockquote lang="en">
<p>RSS originated in 1999, and has strived to be a simple, easy to understand format, with relatively modest goals. After it became a popular format, <mark>developers wanted to extend it</mark> using modules defined in namespaces, as specified by the&nbsp;W3C.</p>
<p>RSS 2.0&nbsp;adds that capability, following a simple rule. A RSS feed may contain elements and attributes not described on this page, only if those elements and attributes are defined in a&nbsp;namespace.</p>
<p><cite><em><a data-link-domain="rssboard.org" href="https://www.rssboard.org/rss-specification#extendingRss" hreflang="en"
            title="Consultation de l’article (anglais)">RSS 2.0&nbsp;Specification</a>
            <a href="/david/cache/2024/85b765a918ef094a5a2dd13a1ff5dd7d/" hreflang="en"
                data-tippy data-description="The current version of the RSS 2.0 specification (2.0.11), published on March 30, 2009."
                data-source="https://www.rssboard.org/rss-specification#extendingRss"
                data-date="2024-03-01"
                data-favicon="https://www.rssboard.org/favicon.ico"
                data-domain="rssboard.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Beaucoup de personnes ont envie de faire davantage avec RSS, c’est la diffusion à une échelle non anecdotique qui est difficile. Peut-être qu’un acteur comme Mastodon pourrait peser dans la balance d’une telle&nbsp;initiative.</p>

<blockquote lang="en">
<p>Another feature area I would think about is interactivity. I’m fascinated with Google’s work in Gmail around “Inbox Actions” – basically the one-click buttons to perform an email action like RSVP, or reviewing a bug. Here’s an explainer with some&nbsp;examples.</p>
<p>Let’s call it Feed Actions. <mark>Feed Actions could also be an RSS&nbsp;extension.</mark></p>
<p><cite><em><a data-link-domain="interconnected.org" href="https://interconnected.org/home/2021/05/26/chrome_and_rss" hreflang="en"
            title="Consultation de l’article (anglais)">Three requests for the Google Chrome team as they experiment with RSS</a>
            <a href="/david/cache/2024/4a9c4c407b34c40ec5b3783ac5f274a7/" hreflang="en"
                data-tippy data-description="Posted on Wednesday 26 May 2021. 976 words, 11 links. By Matt Webb."
                data-source="https://interconnected.org/home/2021/05/26/chrome_and_rss"
                data-date="2024-03-01"
                data-favicon=""
                data-domain="interconnected.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>J’ai deux communautés dans lesquelles c’est même devenu un <em>running gag</em> de créer un outil qui explorerait de nouvelles&nbsp;possibilités.</p>
<p><a href="/david/2021/05/26/">Suivez-moi</a> et vous n’aurez plus jamais faim&#8239;! Gniarkgniarkgniark&nbsp;🦁⚡️</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/evolution/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#évolution</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/20/" title="Lien permanent vers cet article">Véhicule</a> <time datetime="2024-02-20">20 février 2024</time>
    </h2>
    

<blockquote>
<p>John Burroughs est d’avis que l’étude expérimentale des animaux en captivité est totalement futile. Leur caractère, leurs habitudes, leur appétit changent complètement lorsqu’ils sont arrachés à leur habitat naturel. Comment pourrions-nous donc envisager les potentialités de la nature humaine alors qu’elle est confinée dans un espace restreint et contrainte quotidiennement à la&nbsp;soumission&#8239;?</p>
<p>Seuls la liberté, l’épanouissement, la chance et, par-dessous tout, la paix et la sérénité peuvent nous renseigner sur les véritables facteurs dominants de la nature humaine et toutes ses merveilleuses&nbsp;possibilités.</p>
<p>L’anarchisme représente donc essentiellement la libération de l’esprit de la domination religieuse&#8239;; la libération du corps du joug de la propriété&#8239;; la libération de l’individu des entraves et des restrictions du gouvernement. L’anarchisme représente un ordre social fondé sur <mark>le regroupement volontaire des individus en vue de produire une véritable richesse sociale</mark>&#8239;; un ordre qui garantira à tout être humain le libre accès à la terre et la pleine jouissance des nécessités de la vie, selon les désirs, les goûts et les inclinations de&nbsp;chacun.</p>
<p><cite><em>Ce que l’anarchisme représente vraiment</em>, Emma Goldman, 1911</cite></p>
</blockquote>
<p>L’exercice Scopyleft du jour était d’imaginer et de partager le véhicule que représente la coopérative pour chacun·e d’entre nous aujourd’hui. J’ai été agréablement surpris que nous proposions tou·tes quelque chose de différent. Les questions n’ont pas besoin d’être très élaborées pour apporter des éclairages personnels sur une même&nbsp;situation.</p>
<a href="#hr-81" title="Lien vers cette section de la page"><hr id="hr-81" /></a>

<blockquote lang="en">
<p>Your AI-free Content Deserves a&nbsp;Badge</p>
<p>Artificial Intelligence (AI) is trained using human-created content. If humans stop producing new content and rely solely on AI, online content across the world may become repetitive and&nbsp;stagnant.</p>
<p>If your content is not AI-generated, add the badge to your work, with&nbsp;pride.</p>
<p><cite><em><a data-link-domain="notbyai.fyi" href="https://notbyai.fyi/">not by&nbsp;AI</a></em></cite></p>
</blockquote>
<p>De <a href="/david/2024/02/19/#hr-80">même qu’hier</a>, je m’interroge beaucoup sur le notion de plagIAt. Je copie-colle des citations, j’explore des idées déjà connues, je crée un <em>patchwork</em> quotidien, quelle différence avec un algorithme suffisamment bien&nbsp;nourri&#8239;?</p>
<a href="#hr-82" title="Lien vers cette section de la page"><hr id="hr-82" /></a>

<blockquote>
<p>Depuis plus de dix ans, l’Ouvre-Boîtes a mis en place les prêts Coopitalistes. Le principe est simple&nbsp;: des citoyennes et citoyens ou associations investissent de l’argent à l’Ouvre-Boîtes pour sept&nbsp;ans.</p>
<p>En captant cette épargne solidaire, <mark>la coopérative se créée une banque interne</mark> qui finance des projets&nbsp;comme&nbsp;:</p>
<ul>
<li>Des projets collectifs&nbsp;: travaux pour aménager un lieu à disposition des entrepreneur·es (le Grand&nbsp;Bain),</li>
<li>Des investissements pour des entrepreneur·es qui en ont besoin pour lancer leur activité&nbsp;: vélos, voiture, appareil photos, ordinateurs, outils de&nbsp;jardinage…</li>
<li>Des besoins exceptionnels de&nbsp;trésorerie</li>
</ul>
<p><cite><em><a data-link-domain="ouvre-boites.coop" href="https://www.ouvre-boites.coop/les-coopitalistes" hreflang="fr"
            title="Consultation de l’article">Les Coopitalistes</a>
            <a href="/david/cache/2024/865257313ae3d6aca13284128d6523d5/" hreflang="fr"
                data-tippy data-description="Depuis plus de dix ans, l’Ouvre-Boîtes a mis en place les prêts Coopitalistes."
                data-source="https://www.ouvre-boites.coop/les-coopitalistes"
                data-date="2024-02-20"
                data-favicon="https://www.ouvre-boites.coop/themes/custom/front/favicon.ico"
                data-domain="ouvre-boites.coop"
                ><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>Les alternatives existent, elles sont moins faciles à trouver mais elles existent. Et elles&nbsp;inspirent.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/echanges/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#échanges</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/protopie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#protopie</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</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>