davidbgk
/
larlet-fr-david


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

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

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

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

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

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

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

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

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

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

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

  OEmbed.register()
</script>

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

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

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

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

    
      <nav>
        <p>
          
            <a href="/david/2024/dependance/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dépendance</a>
          
            <a href="/david/2024/partage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#partage</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/03/13/" title="Lien permanent vers cet article">Sérendipité</a> <time datetime="2024-03-13">13 mars 2024</time>
    </h2>
    

<blockquote lang="en">
<p>Discovering things via links is way more fun than most algorithmically-driven discovery — in my humble&nbsp;opinion.</p>
<p>As an analogy, it’s kind of like going on vacation to a new place and staying/living amongst the locals vs. staying at a manicured 5-star hotel that gives you no reason to leave. <mark>Can you really say you visited the location if you never left the&nbsp;hotel?</mark></p>
<p><cite><em><a data-link-domain="blog.jim-nielsen.com" href="https://blog.jim-nielsen.com/2024/following-links/" hreflang="en"
            title="Consultation de l’article (anglais)">Following Links - Jim Nielsen’s Blog</a>
            <a href="/david/cache/2024/c26881e908632b460cfd93fe61cc0466/" hreflang="en"
                data-tippy data-description="Writing about the big beautiful mess that is making things for the world wide web."
                data-source="https://blog.jim-nielsen.com/2024/following-links/"
                data-date="2024-03-12"
                data-favicon="https://blog.jim-nielsen.com/favicon.ico"
                data-domain="blog.jim-nielsen.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>Je suis toujours étonné qu’il n’y ait pas des navigateurs qui affichent la toile de nos navigations de manière plus ou moins artistiques. On pourrait avoir des topologies de navigations, potentiellement quotidiennes, des points de comparaison avec d’autres personnes, une représentation de la curiosité, de l’enfermement dans des silos, etc.</p>

<blockquote lang="en">
<p>A surprising number of other features can be expressed in terms of&nbsp;links.</p>
<p><cite><em><a data-link-domain="subconscious.substack.com" href="https://subconscious.substack.com/p/all-you-need-is-links" hreflang="en"
            title="Consultation de l’article (anglais)">All you need is links</a>
            <a href="/david/cache/2024/a801772c901c3e5cfad33f637d00151e/" hreflang="en"
                data-tippy data-description="Before reaching for features, my goal is to explore, to the fullest extent, the creative potential of plain old links."
                data-source="https://subconscious.substack.com/p/all-you-need-is-links"
                data-date="2024-03-12"
                data-favicon="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F4d01c24b-d99d-497e-9e60-1a2427581cad%2Ffavicon-16x16.png"
                data-domain="subconscious.substack.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-112" title="Lien vers cette section de la page"><hr id="hr-112" /></a>

<blockquote lang="en">
<p><code>printf '\e]8;;http://example.com\e\\This is a link\e]8;;\e\\\n'</code></p>
<p><cite><em><a data-link-domain="notes.billmill.org" href="https://notes.billmill.org/programming/bash/Hyperlink_escape_codes.html" hreflang="en"
            title="Consultation de l’article (anglais)">Hyperlink escape codes</a>
            <a href="/david/cache/2024/f68e9507784b5baf1584085908d60f58/" hreflang="en"
                data-tippy data-description="To print out a clickable hyperlink in a terminal"
                data-source="https://notes.billmill.org/programming/bash/Hyperlink_escape_codes.html"
                data-date="2024-03-13"
                data-favicon="https://notes.billmill.org/favicon.ico"
                data-domain="notes.billmill.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>Qui me fait découvre <a data-link-domain="github.com" href="https://github.com/nedbat/watchgha">watchgha</a>, bien pratique pour avoir un accès rapide aux résultats de l’intégration&nbsp;continue.</p>
<figure>
    <a href="/static/david/2024/2024-03-13-watchgha.png"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-03-13-watchgha.png"
            width="2422" height="192"
            srcset="/static/david/2024/2024-03-13-watchgha.png 2422w, /static/david/2024/2024-03-13-watchgha.png 660w, /static/david/2024/2024-03-13-watchgha.png 990w, /static/david/2024/2024-03-13-watchgha.png 1320w"
            sizes="min(100vw, calc(100vh * 2422 / 192))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran du résultat de la commande git runs avec l’alias git qui pointe vers watchgha.">
    </a>
    <figcaption>Ça passe 🎉 (je vais essayer de faire une démo d’oEmbed par ici à un&nbsp;moment).</figcaption>
</figure>
<a href="#hr-113" title="Lien vers cette section de la page"><hr id="hr-113" /></a>

<blockquote>
<p>Le constat est simple&nbsp;: je trouve que le Web ne va pas fort en ce moment, et je voulais à ma petite échelle montrer un peu&nbsp;l’exemple.</p>
<p><cite><em><a data-link-domain="vincent-valentin.name" href="https://vincent-valentin.name/articles/motivation-s" hreflang="fr"
            title="Consultation de l’article">Motivation(s) chez Vincent Valentin.</a>
            <a href="/david/cache/2024/c6e0fe933581c74380fa8eaa7f229353/" hreflang="fr"
                data-tippy data-description="Site personnel de Vincent Valentin, habitant à Nantes, quarante-quatre ans et intégrateur web depuis plus de quinze ans."
                data-source="https://vincent-valentin.name/articles/motivation-s"
                data-date="2024-03-13"
                data-favicon="https://vincent-valentin.name/favicon-32x32.png"
                data-domain="vincent-valentin.name"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Très chouettes publications cette dernière semaine en tout cas&nbsp;&lt;3.</p>
<a href="#hr-114" title="Lien vers cette section de la page"><hr id="hr-114" /></a>
<p>Rétropédalage sur <a href="/david/2024/03/12/" title="Surligner">le surlignage</a>. Beaucoup trop de retours qui trouvent cela davantage distrayant qu’utile. Pour l’instant, j’ai gardé la logique mais sans animation. Je me demande si je vais en faire un <em>opt-in</em> à un&nbsp;moment.</p>
<a href="#hr-115" title="Lien vers cette section de la page"><hr id="hr-115" /></a>

<blockquote>
<p>Puisque la demi-mesure ne fait pas partie de mon vocabulaire, j’ai tenu à travailler au plus proche des techniques médiévales. <mark>J’ai ainsi appris à encrer à la plume, dorer à la feuille d’or pur, peindre aux pigments en poudre et relier au cuir de chèvre.</mark> Je m’y suis dévouée corps et âme, dédiant le moindre de mon temps libre à la concrétisation de ce projet qui devait se mener dans le plus grand secret. Je m’attelais à l’ouvrage à la moindre opportunité, me levant parfois à l’aube pour grappiller une heure de calligraphie avant d’aller bosser ou prolongeant des soirées jusqu’au petit matin lorsque K travaillait de&nbsp;nuit.</p>
<p>Au total j’ai passé plus de 230&nbsp;heures sur ce&nbsp;projet</p>
<p><cite><em><a data-link-domain="hypothermia.fr" href="https://www.hypothermia.fr/2024/03/chiroto-t-datoca/" hreflang="fr"
            title="Consultation de l’article">Chiroto T. Datoca</a>
            <a href="/david/cache/2024/f5294ac20ea593cce56caf2379813a4a/" hreflang="fr"
                data-tippy data-description="Il y a quinze ans, j'ai entamé un projet de calligraphie que je n'ai jamais terminé, un cadeau que je n'ai jamais offert."
                data-source="https://www.hypothermia.fr/2024/03/chiroto-t-datoca/"
                data-date="2024-03-13"
                data-favicon="https://www.hypothermia.fr/wp-content/uploads/fbrfg/favicon-32x32.png"
                data-domain="hypothermia.fr"
                ><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>Ce moment où tu te rends compte que tu n’es pas perfectionniste en fait 🤯. Chapeau bas&nbsp;l’artiste.</p>
<a href="#hr-116" title="Lien vers cette section de la page"><hr id="hr-116" /></a>

<blockquote lang="en">
<p>Rust-like error handling in Python, with type-safety in&nbsp;mind.</p>
<p><cite><em><a data-link-domain="github.com" href="https://github.com/alexandermalyga/poltergeist">poltergeist</a></em></cite></p>
</blockquote>
<p>J’ai très souvent retrouvé le besoin de ce <em>pattern</em> dans mes&nbsp;projets.</p>
<a href="#hr-117" title="Lien vers cette section de la page"><hr id="hr-117" /></a>
<p>Sortie de la <a data-link-domain="pypi.org" href="https://pypi.org/project/pressoir-cli/2.0.0/">version 2.0&nbsp;de pressoir-cli</a> (oui, <a href="/david/2024/02/16/" title="uMap 2">c’est ma période</a>). L’une des prochaines étapes sera de générer sa propre documentation en l’utilisant. Ça peut paraitre stupide mais c’est trop <em>meta</em> pour ne pas le&nbsp;faire&nbsp;😇.</p>
<a href="#hr-118" title="Lien vers cette section de la page"><hr id="hr-118" /></a>

<blockquote>
<p>Nginx de part sa robustesse, sa structure minimaliste et son fonctionnement événementiel asynchrone est un serveur web plébiscité pour ses performances. Mais ce n’est pas parce qu’on a une Porsche qu’il ne faut pas tenter de la rendre encore plus&nbsp;puissante&#8239;!</p>
<p><cite><em><a data-link-domain="buzut.net" href="https://buzut.net/optimiser-nginx/" hreflang="fr"
            title="Consultation de l’article">Optimisez Nginx pour de meilleurs performances</a>
            <a href="/david/cache/2024/b33059055c307477e43390a51f9a104a/" hreflang="fr"
                data-tippy data-description="Nginx est réputé pour sa rapidité, mais quand votre serveur fait face à un trafic énorme, il est possible d'en tirer encore plus. Voyons comment !"
                data-source="https://buzut.net/optimiser-nginx/"
                data-date="2024-03-13"
                data-favicon="https://buzut.net/img/favicon.png"
                data-domain="buzut.net"
                ><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>Pour lecture&nbsp;ultérieure.</p>
<a href="#hr-119" title="Lien vers cette section de la page"><hr id="hr-119" /></a>

<blockquote>
<p><code>font-size: calc(1rem + 0.25vw);</code></p>
<p><cite><em><a data-link-domain="jameshfisher.com" href="https://jameshfisher.com/2024/03/12/a-formula-for-responsive-font-size/" hreflang="en"
            title="Consultation de l’article (anglais)">A formula for responsive font-size</a>
            <a href="/david/cache/2024/08b2b2735f74ebf856d8a850cc9e41cc/" hreflang="en"
                data-tippy data-description="This CSS is now part of most websites I make:"
                data-source="https://jameshfisher.com/2024/03/12/a-formula-for-responsive-font-size/"
                data-date="2024-03-13"
                data-favicon="https://jameshfisher.com/assets/jim_128.png"
                data-domain="jameshfisher.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>Moins poussé que le <a data-link-domain="utopia.fyi" href="https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&amp;s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&amp;g=s,l,xl,12">Fluid type scale calculator</a> mais dans un contexte plus minimaliste / simple ça fait déjà le&nbsp;taf.</p>
<a href="#hr-120" title="Lien vers cette section de la page"><hr id="hr-120" /></a>

<blockquote lang="en">
<p>To enable such progress, <strong>the Web Consortium too has evolved, always taking a people-first approach:</strong> the Web must continue to serve humanity. The first such inflection point was the creation of the patent policy in 2003&nbsp;which assures that specifications can be implemented on a Royalty-Free basis and used at no cost, thus boosting adoption and usage. Another is the creation in 2011&nbsp;of W3C Community and Business Groups which enable everyone –not just W3C Members– to participate in the development of the Web or its technologies. Our most recent inflection point was <mark>re-launching the Consortium in 2023&nbsp;as a public-interest non-profit organization</mark> to work for the good of the&nbsp;public.</p>
<p><cite><em><a data-link-domain="w3.org" href="https://www.w3.org/blog/2024/from-a-humble-beginning-35-years-ago-the-web-is-now-central-to-the-daily-lives-of-billions/" hreflang="en"
            title="Consultation de l’article (anglais)">From a humble beginning 35&nbsp;years ago, the Web is now central to the daily lives of billions</a>
            <a href="/david/cache/2024/c684ecb41e8e4ea04c6dac1e1d87f776/" hreflang="en"
                data-tippy data-description="In this blog post, W3C CEO Seth Dobbs depicts how from a humble beginning 35 years ago, the Web is now central to the daily lives of billions of people."
                data-source="https://www.w3.org/blog/2024/from-a-humble-beginning-35-years-ago-the-web-is-now-central-to-the-daily-lives-of-billions/"
                data-date="2024-03-13"
                data-favicon="https://www.w3.org/favicon.ico"
                data-domain="w3.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>35&nbsp;ans de liens. Merci Tim <em>et al.</em> d’avoir permis&nbsp;cela.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/liens/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#liens</a>
          
            <a href="/david/2024/partage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#partage</a>
          
            <a href="/david/2024/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/03/12/" title="Lien permanent vers cet article">Surligner</a> <time datetime="2024-03-12">12 mars 2024</time>
    </h2>
    

<blockquote lang="en">
<p>A small JavaScript library <mark>to create and animate annotations on a web&nbsp;page</mark></p>
<p>Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned&nbsp;off.</p>
<p>Rough Notation is 3.8kb in size when gzipped, and the code is available on&nbsp;GitHub.</p>
<p><cite><em><a data-link-domain="roughnotation.com" href="https://roughnotation.com/">Rough&nbsp;Notation</a></em></cite></p>
</blockquote>
<p>J’utilise cette façon de mettre en avant des fragments de citations <a href="/david/2020/02/21/#surlignage">depuis un petit moment</a> et en passant <a data-link-domain="vanschklift.com" href="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21" hreflang="en"
            title="Consultation de l’article (anglais)">par chez Biou</a>
            <a href="/david/cache/2024/41e9f48de9ccd2449bceca518fff8606/" hreflang="en"
                data-tippy data-description="It has been a while since I last changed the theme of this blog! Seems that with all the time spent at home in the last three months, I had some new blog posts ideas, but blogging"
                data-source="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21"
                data-date="2024-03-12"
                data-favicon="https://vanschklift.com/themes/wip/img/android-icon-192x192.png"
                data-domain="vanschklift.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> aujourd’hui, j’ai trouvé l’effet bien sympathique. Je ne l’applique pour l’instant(?) que sur la balise <code>&lt;mark&gt;</code> (relativement inoffensif si ça casse), en respectant <code>prefers-reduced-motion</code> et en animant que lorsque la partie surlignée devient visible grâce à <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver">IntersectionObserver</a>.</p>
<p>Cela peut se révéler être distrayant pour certaines personnes car ça bouge à un endroit éloigné du point de lecture (merci @maiwann), invisible pour d’autres qui chargent les onglets sans être dessus (merci @lamecarlate). Il s’agit d’une famille d’animations pas trop invasives, encore moins essentielles, qui peuvent se révéler être de fausses bonnes idées. Je vais tester pour un temps, toujours dans cette recherche d’aller <a href="/david/2024/03/09/#hr-106">vers un peu plus de fantaisie</a>.</p>
<p>N’hésitez pas à me faire des&nbsp;retours.</p>
<p><mark>Plus tard dans la journée</mark>, Nicolas Hoizey m’indique qu’il sera possible d’avoir un <a data-link-domain="frontendmasters.com" href="https://frontendmasters.com/blog/highlight-text-when-a-user-scrolls-down-to-that-piece-of-text/" hreflang="en"
            title="Consultation de l’article (anglais)">comportement approchant en CSS</a>
            <a href="/david/cache/2024/5ff0fe74d43b57fa41db8851bc56ac88/" hreflang="en"
                data-tippy data-description="I was reading a great post on Lene Saile’s blog and noticed a cool little design feature on her site that highlights a line of text once you scroll to it. Here’s a video so you can see …"
                data-source="https://frontendmasters.com/blog/highlight-text-when-a-user-scrolls-down-to-that-piece-of-text/"
                data-date="2024-03-12"
                data-favicon="https://frontendmasters.com/favicon-32x32.png"
                data-domain="frontendmasters.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> <a data-link-domain="caniuse.com" href="https://caniuse.com/mdn-css_properties_animation-range">prochainement</a>.</p>
<p><mark>Le lendemain</mark>, <a href="/david/2024/03/13/#hr-114">j’ai désactivé l’animation</a> suite à plusieurs retours de&nbsp;lecteur·ices.</p>
<a href="#hr-110" title="Lien vers cette section de la page"><hr id="hr-110" /></a>

<blockquote>
<p>Ce qu’Hashbang propose est de créer un registrar sous forme de SCIC avec en plus un processus participatif pour définir les services et leurs tarifs. Le premier service proposé sera certainement le nom de domaine, mais personne ne peut actuellement définir quel tarif sera proposé. <mark>Ce sera issu d’un processus participatif en fonction des participant·e·s au&nbsp;départ.</mark></p>
<p>Chez Hashbang, nous portons un regard attentif aux enjeux environnementaux et nous proposons donc de mesurer et limiter l’impact environnemental des activités du&nbsp;registrar.</p>
<p>Nous souhaitons également s’assurer qu’il n’y ait pas de discriminations et que les personnes minorisé·e·s puissent s’emparer de cet espace. Il faut donc s’attendre à ce qu’il y ait des événements en mixité choisie et du langage&nbsp;inclusif.</p>
<p><cite><em><a data-link-domain="hashbang.coop" href="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/" hreflang="fr"
            title="Consultation de l’article">Appel à intérêt pour un bureau d’enregistrement coopératif</a>
            <a href="/david/cache/2024/2c027efb3689a1067c7f32a659fd4092/" hreflang="fr"
                data-tippy data-description="Nous lançons un projet pour gérer des noms de domaines dans une nouvelle coopérative"
                data-source="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/"
                data-date="2024-03-12"
                data-favicon="https://hashbang.coop/static/images/favicon.1d2088a755c9.ico"
                data-domain="hashbang.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>Superbe initiative, coopératives pour&nbsp;tou·tes&#8239;!</p>
<a href="#hr-111" title="Lien vers cette section de la page"><hr id="hr-111" /></a>

<blockquote lang="en">
<p>I know a lot of people hate anti-ad-block popups, but to me they are&nbsp;perfect.</p>
<p>In presenting those popups, those websites demonstrate that they realize the lack of control they have. They show us so plainly that they are unable to make money from us, which leaves them no option but to grovel and beg us to turn off&nbsp;ad-blocking.[…]</p>
<p>When we use web browsers, <strong>we</strong> are in more control than <strong>they</strong> are. <mark>That’s simply not the case when we’re inside an app they get to&nbsp;control.</mark></p>
<p><cite><em><a data-link-domain="lmnt.me" href="https://lmnt.me/blog/anti-ad-block.html" hreflang="en"
            title="Consultation de l’article (anglais)">Anti-Ad-Block</a>
            <a href="/david/cache/2024/09cfcfafab15ad576de8b32d0046fb93/" hreflang="en"
                data-tippy data-description="I know a lot of people hate anti-ad-block popups, but to me they are perfect."
                data-source="https://lmnt.me/blog/anti-ad-block.html"
                data-date="2024-03-12"
                data-favicon="https://lmnt.me/lmnt.png"
                data-domain="lmnt.me"
                ><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>Ma configuration à ce sujet est assez extrême et il n’est pas rare (surtout sur les boutiques&#8239;!) que je doive m’y reprendre à pas mal de fois pour débloquer les <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/js-bloat/" hreflang="en"
            title="Consultation de l’article (anglais)">megabytes de JavaScript</a>
            <a href="/david/cache/2024/ad911ebf7ba5523ef0be1bdd599f7623/" hreflang="en"
                data-tippy data-description="What is the average size of JavaScript code downloaded per website? Fuck around and find out!"
                data-source="https://tonsky.me/blog/js-bloat/"
                data-date="2024-03-03"
                data-favicon="https://tonsky.me/i/favicon.png"
                data-domain="tonsky.me"
                ><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> à télécharger qui sont pertinents, ou plutôt nécessaires aux personnes ayant développé ces sites. Car pour ma part, je n’aurais besoin que de HTML dans 99% des&nbsp;cas…</p>
<p>…dit-il en venant d’ajouter 13Ko de&nbsp;JS&nbsp;😬.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/partage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#partage</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
            <a href="/david/2024/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/28/" title="Lien permanent vers cet article">Dérèglement</a> <time datetime="2024-02-28">28 février 2024</time>
    </h2>
    
<p>J’avais déjà remarqué leur départ très tardif en décembre. Hier soir, j’ai entendu mes premières bernaches. Demain matin, elles risquent d’avoir un petit peu&nbsp;frais…</p>
<figure>
    <a href="/static/david/2024/2024-02-28-courbe-temperature.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-28-courbe-temperature.jpg"
            width="960" height="2079"
            srcset="/static/david/2024/2024-02-28-courbe-temperature.jpg 960w, /static/david/2024/2024-02-28-courbe-temperature_660x440.jpg 660w, /static/david/2024/2024-02-28-courbe-temperature_990x660.jpg 990w, /static/david/2024/2024-02-28-courbe-temperature_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 960 / 2079))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran de la météo, les températures vont de 14°C à -13°C en moins de 12&nbsp;heures.">
    </a>
    <figcaption>#MeanwhileInCanada</figcaption>
</figure>
<a href="#hr-92" title="Lien vers cette section de la page"><hr id="hr-92" /></a>
<p>Le même jour, j’intègre les <a data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/directives.html#admonitions">admonitions</a> à un de nos outils interne et j’apprends qu’il est possible d’intégrer ce type de rendu pour le <a data-link-domain="github.com" href="https://github.com/orgs/community/discussions/16925"><em>markdown</em> servi par Microsoft Github</a> en lisant le <a data-link-domain="github.com" href="https://github.com/jgarber623/aria-collapsible">README de aria-collapsible</a>.</p>
<p>Au passage, j’apprends beaucoup en lisant le code de <em>Web Components</em> en ce moment. Il y a une effervescence dans le domaine parmi des personnes qui ont un bon niveau de JS ainsi qu’une sensibilité à l’accessibilité de leurs productions. Ici par exemple, je découvre comment faire des composants relativement&nbsp;défensifs.</p>
<a href="#hr-93" title="Lien vers cette section de la page"><hr id="hr-93" /></a>

<blockquote lang="en">
<p>Anyway, if you want to know some basic information about Passkeys I know a site you can check&nbsp;out.</p>
<p><cite><em><a data-link-domain="chriscoyier.net" href="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/" hreflang="en"
            title="Consultation de l’article (anglais)">Where I’m at on the whole CSS-Tricks thing</a>
            <a href="/david/cache/2024/2cbc47f0ebded9d54fe6163fa4ea0667/" hreflang="en"
                data-tippy data-description="It was March 2022 when I sold CSS-Tricks to DigitalOcean. So it’s been just about 2 years now."
                data-source="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/"
                data-date="2024-02-28"
                data-favicon="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23f8d773%22></rect><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2290%22>👨‍💻</text></svg>"
                data-domain="chriscoyier.net"
                ><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 d’honnêteté et… une belle ressource de perdue, ou en passe de l’être. <em>Tricky.</em></p>
<a href="#hr-94" title="Lien vers cette section de la page"><hr id="hr-94" /></a>

<blockquote lang="en">
<p>Using <code>color-mix()</code>, we can adjust the tint/shade based on the background color, meaning <mark>we don’t need to manually select lighter/darker colors</mark> for those states. And because we’re using OKLCH, the variations will be perceptually uniform, <a data-link-domain="lea.verou.me" href="https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/#3.-lch-lightness-actually-means-something">unlike HSL</a>. This means that tints and shades will look consistent for any color we&nbsp;choose!</p>
<p><cite><em><a data-link-domain="abeautifulsite.net" href="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/" hreflang="en"
            title="Consultation de l’article (anglais)">Better Buttons with color-mix() and Custom Properties</a>
            <a href="/david/cache/2024/b2ccbe813d97ba39ba64a1b6d14422dd/" hreflang="en"
                data-tippy data-description="Let the browser and OKLCH do the hard work of styling states."
                data-source="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/"
                data-date="2024-02-28"
                data-favicon="https://www.abeautifulsite.net/images/logos/leaf.svg"
                data-domain="abeautifulsite.net"
                ><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 personnes qui maîtrisent bien CSS vont avoir de plus en plus de valeur. À juste&nbsp;titre.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/documentation/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#documentation</a>
          
            <a href="/david/2024/partage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#partage</a>
          
            <a href="/david/2024/solastalgia/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#solastalgia</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/22/" title="Lien permanent vers cet article">Responsabilité</a> <time datetime="2024-02-22">22 février 2024</time>
    </h2>
    

<blockquote>
<p>Il n’y a pas vraiment de conclusion à tout ça. Nous avons été témoins, par le petit bout de la lorgnette, du tout début de cette histoire&#8239;; nous avons imaginé un instant <mark>avoir l’opportunité, ou le devoir,</mark> d’y faire quelque chose. Finalement, nous n’avons jamais vraiment donné notre&nbsp;avis.&nbsp;🤷</p>
<p><cite><em><a data-link-domain="codeursenliberte.fr" href="https://www.codeursenliberte.fr/blog/tous_anti_covid/" hreflang="fr"
            title="Consultation de l’article">TousAntiCovid&nbsp;: vu depuis Codeureuses en Liberté</a>
            <a href="/david/cache/2024/ddc3ee3603be2702cef745c180b87776/" hreflang="fr"
                data-tippy data-description="TousAntiCovid a refait récemment l’actualité sur les montants de l’hébergement et les modalités d’attribution du marché."
                data-source="https://www.codeursenliberte.fr/blog/tous_anti_covid/"
                data-date="2024-02-22"
                data-favicon="https://www.codeursenliberte.fr/favicon.png"
                data-domain="codeursenliberte.fr"
                ><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>Je me souviens vaguement de certaines discussions à ce sujet. D’un côté l’orgueil de penser que l’on pouvait faire mieux, de l’autre la culpabilité de pouvoir être associé à un tel projet. Et au milieu, une épidémie et le sentiment de pouvoir faire des choses avec nos compétences et notre position au sein de l’État français. Un mois plus tard, je m’embarquais dans <a href="/david/2020/05/26/">une autre aventure</a>, plus proche de mon&nbsp;style.</p>
<p>Deux années, 23&nbsp;millions de visiteur·euses uniques et 60&nbsp;millions de pages vues plus tard, j’ai l’impression d’avoir été utile à mon échelle. Merci à la D<a data-link-domain="ronan.amicel.net" href="https://ronan.amicel.net/">R</a><a data-link-domain="ut7.fr" href="https://www.ut7.fr/">R</a>u<a data-link-domain="maiwann.net" href="https://www.maiwann.net/">M</a><a data-link-domain="fr.linkedin.com" href="https://fr.linkedin.com/in/m%C3%A9lodiedahi">M</a> team pour cette&nbsp;période.</p>
<a href="#hr-84" title="Lien vers cette section de la page"><hr id="hr-84" /></a>

<blockquote lang="en">
<p>A custom element implementation of the Stack is provided for&nbsp;download.</p>
<p><cite><em><a data-link-domain="every-layout.dev" href="https://every-layout.dev/layouts/stack/#the-component" hreflang="en"
            title="Consultation de l’article (anglais)">The Stack: Every Layout</a>
            <a href="/david/cache/2024/6b2b8e2559a07b8d66dac842017b2619/" hreflang="en"
                data-tippy data-description="A composable CSS layout primitive."
                data-source="https://every-layout.dev/layouts/stack/#the-component"
                data-date="2024-02-22"
                data-favicon="https://every-layout.dev/images/favicon.png"
                data-domain="every-layout.dev"
                ><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>Utiliser des <em>Web Components</em> pour appliquer un style, je n’y avais pas encore&nbsp;songé.</p>
<a href="#hr-85" title="Lien vers cette section de la page"><hr id="hr-85" /></a>
<p>Hier soir, j’ai regardé <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/The_Deepest_Breath">The Deepest Breath</a>. J’ai mal dormi. D’autant que, plus tôt dans la journée, on m’avait transmis <a data-link-domain="youtube.com" href="https://www.youtube.com/watch?v=LFLl9q-bEgk">ce retour d’expérience</a>, flippant (et discutable) à plus d’un&nbsp;titre.</p>
<p>La récupération de ma cheville suit son cours, ça va être long, il manque du muscle. Je me sens suffisamment en confiance pour tenter une sortie hivernale en camping cette fin de semaine, on va voir ce que ça donne. Il va faire <q lang="fr_CA">frête</q> et ça laisse peu de place aux&nbsp;incapacités…</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/decision/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#décision</a>
          
            <a href="/david/2024/experience/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#expérience</a>
          
            <a href="/david/2024/partage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#partage</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/31/" title="Lien permanent vers cet article">Mécénat</a> <time datetime="2024-01-31">31 janvier 2024</time>
    </h2>
    
<p>Je termine mon mécénat de compétence avec uMap sur ces 4&nbsp;derniers mois (25&nbsp;jours de travail). Je suis très content d’avoir pu faire cette expérience avec / grâce à Scopyleft et&nbsp;OSM-FR.</p>
<p>Voici les notes que j’avais prises avant d’établir une Convention de mécénat avec <a data-link-domain="openstreetmap.fr" href="https://www.openstreetmap.fr/association/">OpenStreetMap France</a>, j’ai pris le soin de documenter la démarche car ça pourrait donner lieu à d’autres dons en nature de la part de Scopyleft (et puis ça pourrait peut-être vous inspirer&nbsp;😇).</p>
<p><em>Note&nbsp;: vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALawyer</em></p>

<blockquote>
<p>Une des possibilités offertes à un mécène entreprise consiste à apporter non pas des financements en numéraire mais des moyens (produits ou services) à la cause qu’elle entend soutenir. Il s’agit ici, d’un «&nbsp;mécénat en nature ou de compétence&nbsp;». Les critères d’éligibilité à cette forme de mécénat sont exactement les mêmes que ceux prévus pour une contribution en&nbsp;numéraire.</p>
<p><cite><em><a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Thematiques/Mecenat/Entreprises/Le-mecenat-en-nature-ou-en-competence">Source</a></em></cite></p>
</blockquote>

<blockquote>
<p>Le prêt de main d’œuvre&nbsp;: l’entreprise met à disposition d’un organisme éligible au mécénat un ou plusieurs salariés. C’est l’organisme qui pilote la mission et qui peut faire figure d’autorité fonctionnelle dans ce cadre. Le temps et la fréquence du mécénat de compétences peuvent considérablement varier en fonction des besoins&nbsp;: il peut aussi bien s’agir d’une mission courte, même d’une seule demi-journée, que d’une mission plus longue voir d’un plein temps dans la limite de&nbsp;3&nbsp;ans.</p>
<p><cite><em><a data-link-domain="cci.fr" href="https://www.cci.fr/actualites/le-mecenat-de-competences-comment-le-mettre-en-place-et-mobiliser-les-equipes">Source</a></em></cite></p>
</blockquote>
<p>Lorsque les dons sont effectués en nature, il est nécessaire de procéder à leur&nbsp;valorisation&nbsp;:</p>
<ul>
<li>pour le calcul de la réduction d’impôt que déclare&nbsp;l’entreprise&#8239;;</li>
<li>pour la réintégration extra-comptable de la valeur du don par&nbsp;l’entreprise&#8239;;</li>
<li>pour l’établissement du reçu fiscal par l’organisme bénéficiaire du&nbsp;don&#8239;;</li>
<li>pour la détermination des éventuels contreparties remises à l’entreprise par l’organisme bénéficiaire du&nbsp;don.</li>
</ul>
<h2 id="comment-valoriser-un-don-au-titre-dun-mecenat-de-competence">Comment valoriser un don au titre d’un mécénat de compétence&#8239;? <a href="#comment-valoriser-un-don-au-titre-dun-mecenat-de-competence" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>Pour chaque salarié mis à disposition, ce don est évalué à son coût de revient, à savoir la somme de sa rémunération et des charges sociales y afférentes dans la limite de trois fois le montant du plafond mentionné à l’article L. 241-3&nbsp;du code de la sécurité sociale (CSS), soit 10&#8239;284&#8239;€ par mois en&nbsp;2022.</p>
<p><cite><em><a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Thematiques/Mecenat/Entreprises/Le-mecenat-en-nature-ou-en-competence">Source</a></em></cite></p>
</blockquote>
<p>Ce n’est donc <strong>pas un TJM</strong> mais un <em>coût de revient</em>.</p>

<blockquote>
<p>A la suite de l’adoption de la <a data-link-domain="legifrance.gouv.fr" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000043964778">loi du 24&nbsp;août 2021&nbsp;confortant le respect des principes de la République</a>, l’administration fiscale a rappelé que <mark>la valorisation du don relève de la seule responsabilité de l’entreprise mécène</mark> qu’il s’agisse d’un don sous forme de biens (dons alimentaires notamment), de services ou d’une mise à disposition de personnel. Un <a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Media/Medias-creation-rapide/2041-mec-sd_4032.pdf">nouveau modèle de reçu fiscal</a> a été publié le 10&nbsp;juin&nbsp;2022.</p>
</blockquote>
<h2 id="avantages-fiscaux">Avantages fiscaux <a href="#avantages-fiscaux" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>Le mécénat de compétences ouvre droit à un avantage fiscal. Concrètement, comme pour toute action de mécénat, le «&nbsp;don&nbsp;» de compétences de l’entreprise ouvrira droit à une réduction d’impôts de 60% du montant du salaire chargé du salarié mis à disposition. Cet avantage est accessible à tous les types d’entreprises, sans montant minimum de&nbsp;don.</p>
<p><cite><em><a data-link-domain="economie.gouv.fr" href="https://www.economie.gouv.fr/files/Guide-pratique-mecenat-competences-novembre2021.pdf">Source</a></em></cite></p>
</blockquote>
<h2 id="modele">Modèle <a href="#modele" title="Ancre vers cette partie">#</a></h2><p>Un modèle de <a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Media/Medias-creation-rapide/Modele-de-convention-de-mecenat-d-entreprise.docx">convention de mécénat</a>, <a data-link-domain="associations.gouv.fr" href="https://www.associations.gouv.fr/IMG/pdf/asso_mecenat_2021_v1b.pdf">un autre</a> et <a data-link-domain="occitanie.developpement-durable.gouv.fr" href="https://www.occitanie.developpement-durable.gouv.fr/IMG/pdf/ex_convention_mecenat_competences_cle065a53.pdf">encore un autre</a>.</p>
<p>En synthèse, il&nbsp;faut&nbsp;:</p>
<h3>Les&nbsp;coordonnées</h3>
<p>Entre&nbsp;:</p>
<p>L’entreprise …, statut, dont le siège social est au …,<br />
Représentée par …, fonction,<br />
Ci-après dénommée «&nbsp;le&nbsp;mécène&nbsp;»,</p>
<p>Et</p>
<p>L’association …, sise au …,<br />
Représentée par son Président (&#8239;?), …<br />
Ci-après dénommée&nbsp;«&nbsp;l’association&nbsp;»,</p>
<p>Vu la loi n°2003-79&nbsp;du 1<sup>er</sup> août 2003&nbsp;relative au mécénat, aux associations et aux fondations et notamment les dispositions codifiées à l’article 238&nbsp;bis du code général des&nbsp;impôts.</p>
<h3>(optionnel) Préambule&nbsp;(contexte)</h3>
<ul>
<li>objet du mécénat de l’entreprise, de la&nbsp;fondation…</li>
<li>objet de l’association&nbsp;: présentation de sa mission/vocation générale, et laïus sur le
projet qu’ils portent en commun avec l’entreprise le cas&nbsp;échéant</li>
<li>rencontre de ces deux&nbsp;objets&#8239;?</li>
</ul>
<h3>Ce qui est&nbsp;convenu</h3>
<p>Il est convenu et décidé ce qui&nbsp;suit&nbsp;:</p>
<ul>
<li>La présente convention a pour objet de définir les conditions du soutien à l’association pour le projet suivant&nbsp;: (descriptif de l’action ou de la&nbsp;manifestation)</li>
<li>L’entreprise mécène s’engage à mettre à disposition le personnel suivant&nbsp;: représentant une valeur de … € sur la période de&nbsp;…</li>
</ul>

<blockquote>
<p>Pour valoriser ce mécénat de compétences, l’entreprise s’engage à comptabiliser et à valoriser le temps passé sur la mission sus nommée, soit le nombre d’heures passées x salaire horaire chargé (son commissaire aux comptes devra valider ce montant de salaire&nbsp;chargé).</p>
<p>L’association pourra ainsi remettre à l’entreprise un reçu fiscal précisant le nombre d’heures et le coût équivalent donné à&nbsp;l’association.</p>
<p>Conformément à l’article 238bis du code général des impôts, ce don en temps donnera droit à une réduction d’impôt égale à 60&#8239;% du montant des sommes versées dans la limite de 0,5% du C.A. HT.</p>
</blockquote>
<h3>Conditions</h3>
<ul>
<li>(optionnel / à adapter) L’association s’engage à faire figurer le nom de l’entreprise donatrice sur les supports d’information de l’action ou de la&nbsp;manifestation.</li>
<li>La présente convention est établie en vertu des dispositions de l’article 238&nbsp;bis du&nbsp;CGI</li>
<li>La présente convention prendra effet à sa date de signature et prendra fin le&nbsp;….</li>
</ul>
<p>Dans le cas où l’une des parties ne respecterait pas ses obligations contractuelles, cette convention serait résiliée de plein droit. En cas de litige, les parties conviennent d’une conciliation à&nbsp;l’amiable.</p>
<h3>Signatures</h3>
<p>Date, lieu et signatures&nbsp;:<br />
A … le …<br />
Représentant de l’entreprise /  Représentant de&nbsp;l’association</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/commun/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#commun</a>
          
            <a href="/david/2024/documentation/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#documentation</a>
          
            <a href="/david/2024/partage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#partage</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/26/" title="Lien permanent vers cet article">Cargo</a> <time datetime="2024-01-26">26 janvier 2024</time>
    </h2>
    

<blockquote lang="en">
<p>I think the actual harm of signing git commits is to perpetuate an engineering culture of unquestioningly cargo-culting sophisticated and complex tools like cryptographic signatures into new contexts where they have no&nbsp;use.</p>
<p>Just from a baseline utilitarian philosophical perspective, for a given action A, all else being equal, it’s always better not to do A, because taking an action always has some non-zero opportunity cost even if it is just the time taken to do it. Epsilon cost and zero benefit is still a net harm. This is even more true in the context of a complex system. Any action taken in response to a rule in a system is going to interact with all the other rules in that system. You have to pay complexity-rent on every new rule. <mark>So an apparently-useless embellishment like signing commits can have potentially far-reaching consequences in the&nbsp;future.</mark></p>
<p><cite><em><a data-link-domain="blog.glyph.im" href="https://blog.glyph.im/2024/01/unsigned-commits.html" hreflang="en"
            title="Consultation de l’article (anglais)">Unsigned Commits</a>
            <a href="/david/cache/2024/ce5fdc61fd66cdb9ce548fb543eba986/" hreflang="en"
                data-tippy data-description="Deciphering Glyph, the blog of Glyph Lefkowitz."
                data-source="https://blog.glyph.im/2024/01/unsigned-commits.html"
                data-date="2024-01-25"
                data-favicon="https://blog.glyph.im/images/favicon.ico"
                data-domain="blog.glyph.im"
                ><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’avoue avoir sauté sur l’occasion lorsque j’en ai eu la possibilité avec <a data-link-domain="git-tower.com" href="https://www.git-tower.com/help/guides/integration/gpg/mac">mon client git</a> pour avoir le badge vert sur Microsoft GitHub et Gitlab sans trop me poser de questions. C’était peut-être une erreur et je vais faire mûrir ma réflexion maintenant qu’on m’a mis le nez&nbsp;dedans.</p>
<p>Entre <em>refus de parvenir</em> et auto-défense&nbsp;numérique.</p>
<a href="#hr-50" title="Lien vers cette section de la page"><hr id="hr-50" /></a>

<blockquote>
<p>Cette lutte ne créera pas un mouvement de masse…<br />
Mais elle est un ingrédient, parmi de nombreuses autres luttes territoriales, qui toutes façonnent ces mêmes possibilités affectives…<br />
Se sentir coïncider non pas avec soi-même mais avec un milieu de vie…<br />
Se sentir maillé à un vaste collectif d’humains et de non-humains…<br />
Des affects, qui constituent la nécessaire force motrice du mouvement que nous espérons voir&nbsp;croître.</p>
<p><cite><em><a data-link-domain="puntish.blogspot.com" href="http://puntish.blogspot.com/2024/01/defendre-le-glacier-de-la-grave.html">Défendre le glacier de La&nbsp;Grave</a></em></cite></p>
</blockquote>
<p>La justesse d’Alessandro Pignocchi et les couleurs de ses&nbsp;aquarelles&nbsp;💚.</p>
<a href="#hr-51" title="Lien vers cette section de la page"><hr id="hr-51" /></a>

<blockquote lang="en">
<p>Every time I have told someone “I want to replace PDF“, the statement has been met with extreme skepticism. Hopefully this document has convinced you that <mark>HTML-via-EPUB could potentially be a viable</mark> and desirable document format for the&nbsp;future.</p>
<p><cite><em><a data-link-domain="willcrichton.net" href="https://willcrichton.net/notes/portable-epubs/" hreflang="en"
            title="Consultation de l’article (anglais)">Portable EPUBs</a>
            <a href="/david/cache/2024/ffaf50bf5d5e4cf870a618b518ee5ba7/" hreflang="en"
                data-tippy data-description="A proposal for the next generation of portable documents."
                data-source="https://willcrichton.net/notes/portable-epubs/"
                data-date="2024-01-25"
                data-favicon=""
                data-domain="willcrichton.net"
                ><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>Superbe initiative qui rappelle cruellement ce <a data-link-domain="xkcd.com" href="https://xkcd.com/927/">célèbre XKCD</a> mais qui m’est franchement bien plus utilisable qu’un PDF, quel que soit le lecteur… à part pour en récupérer la source avec mon extracteur maison. Cela me fait découvrir <a data-link-domain="nota-lang.org" href="https://nota-lang.org/">Nota</a> au&nbsp;passage.</p>
<p>Un simple individu peut-il faire bouger des choses dans le&nbsp;domaine&#8239;?</p>
<a href="#hr-52" title="Lien vers cette section de la page"><hr id="hr-52" /></a>

<blockquote>
<p>Les sites et outils numériques que je&nbsp;propose</p>
<p><cite><em><a data-link-domain="eyssette.github.io" href="https://eyssette.github.io/">Cédric&nbsp;Eyssette</a></em></cite></p>
</blockquote>
<p>Beaucoup de belles et frugales choses (autour de markdown) à explorer sur cet&nbsp;espace.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/gratitude/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#gratitude</a>
          
            <a href="/david/2024/partage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#partage</a>
          
            <a href="/david/2024/psychologie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#psychologie</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>