davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001
							<!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 #web
  — 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 #web">
  <!-- 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>#web</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/26/" title="Lien permanent vers cet article">GPX Viewer</a> <time datetime="2024-03-26">26 mars 2024</time>
    </h2>
    
<p><a href="/david/2024/03/25/" title="Inclusion">Suite de mes expérimentations</a> de la veille à la fois en cartographie et en <em>web components</em>. Je me suis demandé s’il était possible de faire un composant qui ne dépende pas de uMap pour afficher une trace GPX. Le fait d’avoir passé une heure à trouver la bonne <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">CSP</a> pour arriver à afficher une carte m’a d’une certaine manière motivé (c’était une journée&nbsp;galère).</p>
<p>Il se trouve qu’il existe <a data-link-domain="github.com" href="https://github.com/mpetazzoni/leaflet-gpx">leaflet-gpx</a> qui fait exactement ce que je voulais. Il ne me restait «&nbsp;plus qu’à&nbsp;» en faire un composant web, ce que j’avais déjà <a data-link-domain="gitlab.com" href="https://gitlab.com/umap-project/leaflet-webcomponents/">fait par ailleurs</a>&nbsp;:</p>
<gpx-viewer data-height="500px" data-width="800px">
  <p>
    Vous devriez voir s’afficher une carte de mon « Grand Tour de la forêt de Ouareau »,
    qui contient <a data-gpx href="/static/david/2024/grand_tour_de_la_foret_de_ouareau.gpx">cette trace GPX</a>,
    centrée sur <span data-latitude>46.2117</span>, <span data-longitude>-73.9335</span>
    avec un zoom de <span data-zoom>12</span>.
    Il est probable que cela ne s’exécute pas dans un agrégateur par exemple.
  </p>
</gpx-viewer>

<script type="module">
  import * as L from '/static/david/2024/leaflet.1.9.4/leaflet.1.9.4.js'
  window.L = L // Hack for leaflet-gpx, youpi.
</script>
<script type="module" nonce="oembed-web-component">
  class GPXViewer extends HTMLElement {
    static tagName = 'gpx-viewer'

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

    #attachCSS(path) {
      const linkElement = document.createElement('link')
      linkElement.setAttribute('rel', 'stylesheet')
      linkElement.setAttribute('href', path)
      this.shadowRoot.appendChild(linkElement)
    }

    #createMapContainer() {
      const mapContainer = document.createElement('div')
      mapContainer.style.height = this.dataset.height
      mapContainer.style.width = this.dataset.width
      this.shadowRoot.appendChild(mapContainer)
      return mapContainer
    }

    #createMap(mapContainer) {
      const map = L.map(mapContainer).setView(
        [
          this.querySelector('[data-latitude]').textContent,
          this.querySelector('[data-longitude]').textContent,
        ],
        this.querySelector('[data-zoom]').textContent
      )
      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(map)
      return map
    }

    #attachGPX(map) {
      const gpxUrl = this.querySelector('[data-gpx]').href
      new GPX(gpxUrl, {
        async: true,
        marker_options: {
          startIconUrl: '/static/david/2024/leaflet-gpx.1.7.0-custom/pin-icon-start.png',
          endIconUrl: '/static/david/2024/leaflet-gpx.1.7.0-custom/pin-icon-end.png',
          shadowUrl: '/static/david/2024/leaflet-gpx.1.7.0-custom/pin-shadow.png'
        }
      }).on('loaded', (e) => {
        map.fitBounds(e.target.getBounds())
      }).addTo(map)
    }

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

    async connectedCallback() {
      this.#attachCSS('/static/david/2024/leaflet.1.9.4/leaflet.css')
      const mapContainer = this.#createMapContainer()
      const map = this.#createMap(mapContainer)
      this.#attachGPX(map)
    }

  }

  import GPX from '/static/david/2024/leaflet-gpx.1.7.0-custom/gpx.1.7.0-custom.js'

  GPXViewer.register()
</script>

<p>Alors en fait, comme rien n’est jamais simple en JS, il a fallu que j’adapte le plugin qui n’était pas compatible avec les modules JS et que je fasse des galipettes pour que ça finisse par tomber en marche&nbsp;🤸. Cet écosystème est merveilleux (quel métier&#8239;!). J’ai quand même <a data-link-domain="github.com" href="https://github.com/mpetazzoni/leaflet-gpx/issues/153">remonté le problème</a>.</p>
<p>Au passage, inspiré par <a data-link-domain="blog.k-nut.eu" href="https://blog.k-nut.eu/leaflet-microdata-html-webcomponent" hreflang="en"
            title="Consultation de l’article (anglais)">le travail de Knut Hühne</a>
            <a href="/david/cache/2024/65fba9cd025cd2403f932cb2c928cf14/" hreflang="en"
                data-tippy data-description="An example of using schema.org microdata to build a HTML Webcomponent for Leaflet"
                data-source="https://blog.k-nut.eu/leaflet-microdata-html-webcomponent"
                data-date="2024-03-25"
                data-favicon="https://blog.k-nut.eu/favicon-32x32.png"
                data-domain="blog.k-nut.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> sur la sémantique des données d’une carte, je me suis demandé si j’allais définir un <a data-link-domain="schema.org" href="https://schema.org/itinerary">itinerary</a> pour un <a data-link-domain="schema.org" href="https://schema.org/Trip">Trip</a> avec des <a data-link-domain="schema.org" href="https://schema.org/GeoCoordinates">GeoCoordinates</a> mais ça m’a fait tirer un fil beaucoup trop long. Je garde l’idée sous le coude <a data-link-domain="umap-project.gitlab.io" href="https://umap-project.gitlab.io/leaflet-webcomponents/">pour mes propres recherches</a> dans le domaine cela&nbsp;dit.</p>
<p>Un composant de plus, je ne suis pas très satisfait de celui-ci car j’avais l’espoir d’arriver à quelque chose de facilement réutilisable. J’aurais au moins commencé à mettre les doigts dans le XML du format GPX. Il est possible de définir plusieurs segments au sein d’une même trace. Il peut y avoir pas mal de métadonnées, notamment de mise en forme de la trace mais aussi de caractéristiques (biologiques, physiques, etc).</p>
<a href="#hr-138" title="Lien vers cette section de la page"><hr id="hr-138" /></a>

<blockquote lang="en">
<p>The fact is that we can’t rely on any single website to hold the whole world’s knowledge, because it can be corrupted sooner or later. The only solution is a distributed architecture, with many smaller websites connecting with each other and sharing information. This is where ActivityPub comes in, the protocol used by Mastodon, Lemmy, Peertube and many other federated social media&nbsp;projects.</p>
<p>I have worked on Lemmy for the past four years, bringing it from a prototype to a fully functional Reddit alternative. I wrote the entire federation code and became very familiar with the protocol. <mark>I realized that the same technology easily be used to create a federated encyclopedia.</mark> As no one else took up such a project, I finally decided to do it on my own and create Ibis. Thanks to my previous experience with the tech stack and the ActivityPub library I created, I was able to complete a proof of concept in a relatively short time of four&nbsp;months.</p>
<p><cite><em><a data-link-domain="ibis.wiki" href="https://ibis.wiki/article/Announcing_Ibis,_the_federated_Wikipedia_Alternative@ibis.wiki" hreflang="en"
            title="Consultation de l’article (anglais)">Announcing Ibis, the federated Wikipedia Alternative</a>
            <a href="/david/cache/2024/691120ebac09f68413501b7f5daa2db7/" hreflang="en"
                data-tippy data-description=""
                data-source="https://ibis.wiki/article/Announcing_Ibis,_the_federated_Wikipedia_Alternative@ibis.wiki"
                data-date="2024-03-26"
                data-favicon=""
                data-domain="ibis.wiki"
                ><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>Wikipedia décentralisé, je dis oui&#8239;! Merci <a data-link-domain="alexsirac.com" href="https://alexsirac.com/activitypub-powered-wikis/" hreflang="fr"
            title="Consultation de l’article">Alex</a>
            <a href="/david/cache/2024/55c19feff784a41d2527b5f1589d931d/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://alexsirac.com/activitypub-powered-wikis/"
                data-date="2024-03-26"
                data-favicon="https://alexsirac.com/wp-content/uploads/2023/01/cropped-cropped-portraitplante-32x32.webp"
                data-domain="alexsirac.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>.</p>
<p>C’est important pour <a href="/david/2024/02/29/" title="Wikipédia">diverses</a> <a href="/david/2024/03/07/" title="Sondages">raisons</a>.</p>
<a href="#hr-139" title="Lien vers cette section de la page"><hr id="hr-139" /></a>

<blockquote lang="en">
<p>I think it’s time to admit that my hobby is buying stuff for my new&nbsp;hobby.</p>
<p><cite><em>Chris Hallbeck</em>, <a data-link-domain="mastodon.social" href="https://mastodon.social/@Chrishallbeck/112153815963114685">sur&nbsp;masto</a></cite></p>
</blockquote>
<p><em>Touché.</em></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/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/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/03/11/" title="Lien permanent vers cet article">LoginWall</a> <time datetime="2024-03-11">11 mars 2024</time>
    </h2>
    

<blockquote lang="en">
<p>I don’t have a LinkedIn account. I don’t like the idea that we both <strong>need</strong> an account. I need one to <strong>post</strong> my résumé, and you need one to <strong>view</strong> it. How does that benefit me to have my résumé behind a login wall? It doesn’t. It benefits LinkedIn. Now, my résumé is on my website, displayed more beautifully than LinkedIn lets&nbsp;me.</p>
<p>[…]</p>
<p>Every new thing that I add to my website works to regain my internet presence <strong>away</strong> from companies that <strong>do not</strong> have my interests at heart. And I will avoid future problems like a company deciding to put login walls or paywalls in front of my content. Or putting Nazi content beside mine. <mark>I can avoid all of that by&nbsp;self-publishing.</mark></p>
<p><cite><em><a data-link-domain="lmnt.me" href="https://lmnt.me/blog/web-independence.html" hreflang="en"
            title="Consultation de l’article (anglais)">Web Independence</a>
            <a href="/david/cache/2024/ce6e3472d21a189dc76b3fc6e6f1b49c/" hreflang="en"
                data-tippy data-description="Be independent. We can build things on the web without them. Better things."
                data-source="https://lmnt.me/blog/web-independence.html"
                data-date="2024-03-11"
                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>Le problème de sites comme LinkedIn c’est qu’il est difficile de se rendre compte de leur inaccessibilité lorsqu’on a un compte. Ou alors les personnes mettent leurs CV en signature de courriel en sachant que je ne vais pas pouvoir les&nbsp;consulter&#8239;?</p>
<p>Avec TwiX c’est encore pire car ça varie d’un jour sur l’autre. Parfois le <em>tweet</em> est accessible mais seul, parfois il faut un compte, parfois on accède à une page avec la liste des dernières publications de la personne mais ordonnées par «&nbsp;popularité&nbsp;», ça sent bon la girouette qui est à la tête de&nbsp;l’entreprise.</p>
<p>Et je ne parle même pas de ce qui se passe sur&nbsp;Facebook.</p>
<a href="#hr-108" title="Lien vers cette section de la page"><hr id="hr-108" /></a>

<blockquote lang="en">
<p>What I try to keep in mind is the <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Curb_cut_effect">curb cut effect</a>, also known as the «&nbsp;i want subtitles on my favourite show because even though my ears are just fine, i like to eat crisps while watching&nbsp;» rule. In many cases, adding accessibility to your website makes it nicer for everyone, not only for the people who needed these changes. (Corollary: everything that makes you squint is giving a giant migraine to someone else out&nbsp;there.)</p>
<p><cite><em><a data-link-domain="alexsirac.com" href="https://alexsirac.com/accessibility-notes/" hreflang="fr"
            title="Consultation de l’article">Accessibility notes from your headache-prone friend</a>
            <a href="/david/cache/2024/4dc1c2edacf179310783146044f0d06e/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://alexsirac.com/accessibility-notes/"
                data-date="2024-03-11"
                data-favicon="https://alexsirac.com/wp-content/uploads/2023/01/cropped-cropped-portraitplante-32x32.webp"
                data-domain="alexsirac.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 ne connaissais pas le nom de cet effet, j’espère le retenir en le notant ici. Merci&nbsp;Alex&#8239;!</p>
<p><mark>Lu le lendemain</mark> <a data-link-domain="toot.cat" href="https://toot.cat/@nickcolley/112073548430975046">sur masto</a>&nbsp;:</p>

<blockquote lang="en">
<p>It is true that meeting the needs of many disabled people makes services better for non-disabled&nbsp;people.</p>
<p>It is wrong though to say that all accessibility efforts benefit non-disabled&nbsp;people.</p>
<p>They don’t, meeting some access needs <em>only</em> benefit some disabled&nbsp;people.</p>
<p>It is tiring hearing &quot;you’ll be disabled in the future&quot; when there’s such a broad experience of disability that many people won’t experience due to&nbsp;age.</p>
<p>We must create strategies where we aim to humanise and value disabled people inherently and not have to lean so hard on non-disabled people’s self&nbsp;interest.</p>
</blockquote>
<a href="#hr-109" title="Lien vers cette section de la page"><hr id="hr-109" /></a>
<figure>
    <a href="/static/david/2024/2024-03-11-parcours-ouareau.png"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-03-11-parcours-ouareau.png"
            width="1294" height="1108"
            srcset="/static/david/2024/2024-03-11-parcours-ouareau.png 1294w, /static/david/2024/2024-03-11-parcours-ouareau.png 660w, /static/david/2024/2024-03-11-parcours-ouareau.png 990w, /static/david/2024/2024-03-11-parcours-ouareau.png 1320w"
            sizes="min(100vw, calc(100vh * 1294 / 1108))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran d’un parcours sur 4&nbsp;jours avec une soixantaine de kilomètres.">
    </a>
    <figcaption>Si ma cheville le&nbsp;permet.</figcaption>
</figure>
<p>J’ai joué avec le <a data-link-domain="komoot.com" href="https://www.komoot.com/fr-fr/plan">Planificateur d’itinéraire de Komoot</a> hier, je ne m’étais jamais demandé vraiment quelles distances est-ce que je pouvais parcourir dans la forêt. J’aime bien le fait d’avoir l’option de suivre les chemins connus. À voir si j’arrive à faire ce grand tour en rando rapide / légère. Je connais déjà 80% du parcours et je sais dès à présent que la deuxième journée serait bien longue. L’avantage d’être en terrain connu, c’est de connaître les endroits où je peux couper en cas de pépin&nbsp;physique.</p>
<p>J’ai du matériel très léger mais je me rends compte que la nourriture est déjà un défi sur 4&nbsp;jours pour garder un sac qui permette de courir. Je m’entraîne en ce moment en faisant des aller-retours à la bibliothèque avec 5kg de livres sur le dos. On verra bien si c’est utile… au pire j’aurais découvert des&nbsp;BD&nbsp;:-).</p>

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

<blockquote>
<p><mark>Une faible majorité</mark> des votants estime qu’il faut mentionner dans le résumé introductif le nom pré-transition d’une personne transgenre qui a acquis sous cette ancienne identité une notoriété suffisante pour remplir les critères&nbsp;d’admissibilité.</p>
<p>Dans leurs verbatims, les partisans de la mention du morinom insistent sur le caractère encyclopédique de l’information (62), puisque les sujets concernés ont acquis la notoriété sous leur ancien nom (50) et qu’elle s’appuie sur des sources secondaires publiques (31). Il convient selon eux d’indiquer de façon claire et accessible (31), sans réécriture de l’histoire (22), cette information utile au lecteur (15). Ils estiment que les biographies des personnes transgenres ne doivent pas être traitées différemment des autres (14) et rappellent que sur Wikipédia le sujet d’une biographie n’a pas de privilège éditorial sur son contenu (8). Si à leur sens l’information doit figurer dans l’article, il est en revanche inopportun de la répéter&nbsp;(24).</p>
<p>Les opposants arguent quant à eux que la mention du morinom est nuisible aux personnes concernées (83) ou constitue un manque de respect pour le sujet de la biographie (40). Ils considèrent qu’un nom obsolète ne peut pas être encyclopédique (37), qu’il s’agit d’une information privée (38), inutile (36), dont la mention est transphobe (17). L’avis d’une personne transgenre sujet d’une biographie doit selon eux être respecté&nbsp;(29).</p>
<p><cite><em><a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Sondage/Mention_du_nom_de_naissance_pour_les_personnes_trans/R%C3%A9sultats">Wikipédia:Sondage/Mention du nom de naissance pour les personnes&nbsp;trans/Résultats</a></em></cite></p>
</blockquote>
<p>54% des 357&nbsp;avis décomptés. Tristesse <a href="/david/2024/02/29/" title="Wikipédia">anticipée</a>.</p>
<p>Wikipedia est le seul service centralisé sur le Web qui ne souffre d’aucune concurrence. Alors les luttes sont internes, pour décrire le monde tel qu’il est perçu par une certaine population, que l’autre partie de la population prendra pour vérité. Il y a probablement un truc mâle·sain dans tout&nbsp;ça.</p>

<blockquote lang="en">
<p>Today, the French-speaking Wikipedia passed a decision to deadname trans people in their&nbsp;biographies.</p>
<p>Some will argue that this makes WP-FR transphobic, and there is certainly something to it: while Wikipedia is not a monolithic institution, and while I am critical of the phrase &quot;Wikipedian community&quot;, it is a fact that WP-FR is effectively controlled by people hostile or indifferent to&nbsp;inclusion.</p>
<p>But <mark>this decision is utterly un-Wikipedian,</mark> and therefore lacks any legitimity, for&nbsp;2&nbsp;reasons</p>
<p><em><a data-link-domain="bagarrosphere.fr" href="https://bagarrosphere.fr/@photos_floues/112047957955051151">Rama sur&nbsp;Mastodon</a></em></p>
</blockquote>
<a href="#hr-102" title="Lien vers cette section de la page"><hr id="hr-102" /></a>

<blockquote lang="en">
<p>CSS <code>:has()</code> is a powerful feature that opens a lot of possibilities that weren’t possible before. It literally gives us CSS superpowers! I recommend you start using it today and experiment with&nbsp;it.</p>
<p><cite><em><a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/css-has-guide/" hreflang="en"
            title="Consultation de l’article (anglais)">CSS&nbsp;:has() Interactive Guide</a>
            <a href="/david/cache/2024/02eaae467a3a88479393c9fe026f655a/" hreflang="en"
                data-tippy data-description="Everything you need to know about CSS :has() selector."
                data-source="https://ishadeed.com/article/css-has-guide/"
                data-date="2024-03-07"
                data-favicon="https://ishadeed.com/assets/favicon-32x32.png"
                data-domain="ishadeed.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>Incroyable article d’Ahmad Shadeed complété par <a data-link-domain="piccalil.li" href="https://piccalil.li/blog/some-little-ways-im-using-css-has-in-the-real-world/" hreflang="en"
            title="Consultation de l’article (anglais)">d’autres cas pratiques</a>
            <a href="/david/cache/2024/529fce4c2b7c378f07aead94e62d3923/" hreflang="en"
                data-tippy data-description="I’ve created some low fidelity demos of :has() snippets that I’ve been using in real-world client projects."
                data-source="https://piccalil.li/blog/some-little-ways-im-using-css-has-in-the-real-world/"
                data-date="2024-03-07"
                data-favicon="https://piccalil.li/images/favicon-32x32.png"
                data-domain="piccalil.li"
                ><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> d’Andy Bell qui m’ont donné envie de jouer avec sur <a href="/david/">ma page d’accueil</a>. C’est subtil et je reviendrai dessus mais je trouve ça intéressant pour montrer le lien entre les articles de l’année et leurs étiquettes. Cela ne m’embête pas que ce ne soit pas accessible à des doigts, au clavier et/ou aux anciens navigateurs car c’est du bonus. En effet, c’est du Baseline2023™ <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">niveau support</a>.</p>
<p>Je me suis rendu compte en consultant les résultats de <a data-link-domain="social.lol" href="https://social.lol/@brandonwrites/112045044489173328">ce sondage</a> (92% des 363&nbsp;personnes ayant répondu vont consulter les archives d’un blog qu’elles découvrent) qu’il n’était pas évident de découvrir ce que je raconte par ici. Surtout avec des titres à un seul mot, aussi je tente des choses pour rendre plus explicite la toile qui est tissée quotidiennement. Depuis bientôt&nbsp;20&nbsp;ans.</p>
<a href="#hr-103" title="Lien vers cette section de la page"><hr id="hr-103" /></a>

<blockquote lang="en">
<p>A <strong>title drop</strong> is when a character in a movie says the title of the movie they’re in. Here’s a large-scale analysis of 73,921&nbsp;movies from the last 80&nbsp;years on how often, when and maybe even why that&nbsp;happens.</p>
<p><cite><em><a data-link-domain="titledrops.net" href="https://www.titledrops.net/">Full Of&nbsp;Themselves</a></em></cite></p>
</blockquote>
<p>Parfois tu tombes sur un site qui a demandé un effort non négligeable et tu te dis <del>à quoi bon</del> trop&nbsp;génial&#8239;!</p>

<blockquote>
<p>So who are the most excessive offenders in mentioning their titles over the course of the film? The overall star when it comes to fiction only came out last year: it’s Barbie by Greta Gerwig with an impressive 267&nbsp;title drops within its 1&nbsp;hour and 54&nbsp;minutes runtime, clocking in at a whopping 2.34&nbsp;BPM (Barbies Per&nbsp;Minute).</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>Je comprends mieux mon&nbsp;endormissement.</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/deception/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#déception</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/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/23/" title="Lien permanent vers cet article">Préparatifs</a> <time datetime="2024-02-23">23 février 2024</time>
    </h2>
    
<p>J’admire les personnes qui arrivent à prendre une photo de leur sac de manière éclatée avant de partir. J’ai toujours pas mal de choses à rajouter au dernier moment, j’essaye au moins d’avoir les basiques de façon&nbsp;certaine.</p>
<a href="#hr-86" title="Lien vers cette section de la page"><hr id="hr-86" /></a>

<blockquote lang="en">
<p>A utopia for web that I can envision would have <mark>rich component creation</mark> and manipulation capabilities in built as a part of spec and browsers implementing them. Hence, we won’t have to include any of the heavy third party libraries which will give faster load times to the users by saving the download costs by a huge&nbsp;amounts.</p>
<p><cite><em><a data-link-domain="codeburst.io" href="https://codeburst.io/generating-config-driven-dynamic-forms-using-web-components-7c8d400f7f2e" hreflang="en"
            title="Consultation de l’article (anglais)">Generating Config driven Dynamic Forms using Web Components</a>
            <a href="/david/cache/2024/5da390fa8d93278cd62233d3915729e7/" hreflang="en"
                data-tippy data-description="Over the years, we as UI Developers have become so habitual of using the already available UI Frameworks and Libraries like React, Angular, Vue etc due to the increasing demand of shipping things…"
                data-source="https://codeburst.io/generating-config-driven-dynamic-forms-using-web-components-7c8d400f7f2e"
                data-date="2024-02-23"
                data-favicon="https://miro.medium.com/v2/resize:fill:256:256/1*mNmxddJJTzkiBfK77mWuGA.png"
                data-domain="codeburst.io"
                ><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>Aujourd’hui, j’ai exploré les façons de faire des formulaires en assemblant des <em>Web Components</em>. Cet article de 2019&nbsp;donne un bon aperçu de ce qu’il est possible de faire. Il y a aussi <a data-link-domain="dev.to" href="https://dev.to/stuffbreaker/custom-forms-with-web-components-and-elementinternals-4jaj" hreflang="en"
            title="Consultation de l’article (anglais)">cet autre article</a>
            <a href="/david/cache/2024/2cadf792810f64540605c86a1431cb6b/" hreflang="en"
                data-tippy data-description="The ElementInternals API allows us to create form-associated custom elements which we can use to make our own supercharged form fields."
                data-source="https://dev.to/stuffbreaker/custom-forms-with-web-components-and-elementinternals-4jaj"
                data-date="2024-02-23"
                data-favicon="https://media.dev.to/cdn-cgi/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"
                data-domain="dev.to"
                ><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> qui m’a permis de découvrir <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals">ElementInternals</a>. Des frameworks comme Shoelace <a data-link-domain="shoelace.style" href="https://shoelace.style/getting-started/form-controls">pourraient être inspirants</a> dans le&nbsp;domaine.</p>
<a href="#hr-87" title="Lien vers cette section de la page"><hr id="hr-87" /></a>

<blockquote lang="en">
<p>RH uses GNOME 3. Ubuntu used Unity, alienated a lot of people who only knew how to use Windows-like desktops, and that made Mint a huge success. GNOME 2&nbsp;got forked as MATE, and Mint adopted it, helping a lot. Mint also built its own fork of GNOME 3, Cinnamon. Formerly tiny niche desktops like Xfce and LXDE got a <em>huge</em> boost. Debian adopted GNOME 3&nbsp;and systemd, annoying lots of its developers and causing the Devuan fork to&nbsp;happen.</p>
<p><cite><em><a data-link-domain="liam-on-linux.dreamwidth.org" href="https://liam-on-linux.dreamwidth.org/85359.html" hreflang="en"
            title="Consultation de l’article (anglais)">Everyone seems to forget why GNOME and GNOME 3&nbsp;and Unity happened</a>
            <a href="/david/cache/2024/ecae6fcce7e86066e432b5f38b2299ca/" hreflang="en"
                data-tippy data-description="That is *what* it came from, yes, but not *why*."
                data-source="https://liam-on-linux.dreamwidth.org/85359.html"
                data-date="2024-02-23"
                data-favicon="https://liam-on-linux.dreamwidth.org/favicon.ico"
                data-domain="liam-on-linux.dreamwidth.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>Fascinante&nbsp;histoire.</p>
<a href="#hr-88" title="Lien vers cette section de la page"><hr id="hr-88" /></a>

<blockquote lang="en">
<p>As of version 2.1.0&nbsp;this project will split into Plausible Community Edition and Plausible Enterprise Edition. The Community Edition (CE) will remain completely open source under the AGPLv3 license. The Enterprise Edition (EE) will contain extra features that will be published as source-available on Github, but we do not grant rights for anyone else to use, distribute or otherwise exploit these&nbsp;features.</p>
<p><cite><em><a data-link-domain="github.com" href="https://github.com/plausible/analytics/releases/tag/v2.1.0-rc.0">Release notes de Plausible&nbsp;2.1.0</a></em></cite></p>
</blockquote>
<p>Des <a data-link-domain="plausible.io" href="https://plausible.io/blog/community-edition" hreflang="en"
            title="Consultation de l’article (anglais)">raisons un peu plus détaillées</a>
            <a href="/david/cache/2024/d6e0a9beec0623cc66cede135fc7acdc/" hreflang="en"
                data-tippy data-description="We’re introducing the “free as in beer”, self-hosted and AGPL-licensed Plausible Community Edition (CE)."
                data-source="https://plausible.io/blog/community-edition"
                data-date="2024-02-23"
                data-favicon="https://plausible.io/assets/images/icon/favicon-16x16.png"
                data-domain="plausible.io"
                ><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> ayant motivé ce&nbsp;choix.</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/processus/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#processus</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/19/" title="Lien permanent vers cet article">Injection</a> <time datetime="2024-02-19">19 février 2024</time>
    </h2>
    

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

<p>J’ai ajouté l’attribut <code>hidden</code> à la proposition initiale pour éviter le flash. Si vous inspectez le code, vous constatez que le paragraphe précédent tout à fait classique alors qu’il s’agissait d’une <code>iframe</code> (sauf si vous avez une extension qui bloque les <code>iframe</code> bien sûr). Jusque là c’est <a data-link-domain="css-tricks.com" href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/" hreflang="en"
            title="Consultation de l’article (anglais)">une forme d’inclusion</a>
            <a href="/david/cache/2024/6bfc6bd7bc1d9158aa7f6591123e7f4b/" hreflang="en"
                data-tippy data-description="It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that"
                data-source="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/"
                data-date="2024-02-19"
                data-favicon="https://css-tricks.com/favicon.svg"
                data-domain="css-tricks.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a> mais rien de bien&nbsp;utile.</p>
<p>Ce qui devient un peu plus fou serait de pouvoir injecter un <em>Web Component</em> de cette façon&#8239;! Le problème étant que le <code>this.remove()</code> est exécuté avant le chargement du script de l’<code>iframe</code>… et si on le retire on conserve cet élément <code>hidden</code> dans le document. Ce n’est pas critique mais ce n’est pas très élégant non plus, d’autant que cela signifie que le composant est défini et instancié deux&nbsp;fois.</p>
<style>para-graph { background: paleturquoise; color: black; }</style>

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

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

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

<blockquote lang="en">
<p>So, what’s the fun of writing on the internet anymore? Well, if your aim is to be respected as an author, there’s probably not much fun to be had here at all. Don’t write online for fame and glory. Oblivion, obscurity and exploitation are all but guaranteed. Write here because <em>ideas</em> matter, not authorship. Write here because the more robots, pirates, and single-minded trolls swallow up cyberspace, <mark>the more we need independent writing in order to think new thoughts in the future</mark> — even if your words are getting dished up and plated by an&nbsp;algorithm.</p>
<p><cite><em><a data-link-domain="jamesshelley.com" href="https://jamesshelley.com/blog/writing-on-the-internet.html" hreflang="en"
            title="Consultation de l’article (anglais)">What’s the fun in writing on the internet anymore?</a>
            <a href="/david/cache/2024/a005801f0e596f9ecb99037a992ecc1b/" hreflang="en"
                data-tippy data-description="The moment you release your words, you relinquish all control."
                data-source="https://jamesshelley.com/blog/writing-on-the-internet.html"
                data-date="2024-02-19"
                data-favicon="https://jamesshelley.com/images/favicon.png"
                data-domain="jamesshelley.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Rester (et alimenter la machine) ou quitter (et laisser l’espace à la&nbsp;machine).</p>
<p>Je n’aime pas beaucoup la <a data-link-domain="maggieappleton.com" href="https://maggieappleton.com/ai-dark-forest" hreflang="en"
            title="Consultation de l’article (anglais)">métaphore de la forêt noire</a>
            <a href="/david/cache/2024/140458968f9f7da7d14e181d0a80e799/" hreflang="en"
                data-tippy data-description="Proving you're a human on a web flooded with generative AI content"
                data-source="https://maggieappleton.com/ai-dark-forest"
                data-date="2024-02-19"
                data-favicon="https://maggieappleton.com//images/favicon/favicon.ico"
                data-domain="maggieappleton.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a> ces temps-ci car j’apprécie un peu trop les forêts pour ça. J’aurais davantage l’impression de faire partie d’une haie alors qu’il y a beaucoup de monoculture aux alentours. Avec les double sens que cette méta·phore&nbsp;implique.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/apprentissage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#apprentissage</a>
          
            <a href="/david/2024/laboratoire/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#laboratoire</a>
          
            <a href="/david/2024/web/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#web</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/04/" title="Lien permanent vers cet article">Tooltipopover</a> <time datetime="2024-02-04">4 février 2024</time>
    </h2>
    

<blockquote lang="en">
<p><a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a> – This provides a declarative mechanism to create content that always renders in the topmost-layer, so that it overlays other web page content. <mark>This can be useful for building features like tooltips</mark> and notifications. Support for popover was the #1&nbsp;author request in the recent State of HTML&nbsp;survey.</p>
<p><cite><em><a data-link-domain="hacks.mozilla.org" href="https://hacks.mozilla.org/2024/02/announcing-interop-2024/" hreflang="en"
            title="Consultation de l’article (anglais)">Announcing Interop 2024</a>
            <a href="/david/cache/2024/0deb984b2f799d391607afcaa488446d/" hreflang="en"
                data-tippy data-description="Following the success of Interop 2023, we are pleased to confirm that the project will continue in 2024 with a new selection of focus areas."
                data-source="https://hacks.mozilla.org/2024/02/announcing-interop-2024/"
                data-date="2024-02-03"
                data-favicon="https://hacks.mozilla.org/wp-content/themes/Hax/favicon.ico"
                data-domain="hacks.mozilla.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>Ma première intuition pour enrichir les liens de la version archivée était de passer par des éléments natifs (comme toujours). Initialement, j’ai même envisagé un <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog">élément <code>&lt;dialog&gt;</code></a> qui est déjà mieux supporté mais ça rentrait mal dans le DOM là où je voulais l’insérer. Je me met alors en quête d’un <em><a data-link-domain="github.com" href="https://github.com/oddbird/popover-polyfill">polyfill</a></em> pour la Popover API qui pourrait convenir mais j’ai un peu peur des effets de bord vu que je découvre et qu’il y a quand même <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using">pas mal de possibilités</a>. J’en suis même à me <a data-link-domain="open-ui.org" href="https://open-ui.org/components/popover.research.explainer/" hreflang="en"
            title="Consultation de l’article (anglais)">lire une bonne page de doc</a>
            <a href="/david/cache/2024/bf61b62532f71e39e7b92c76dc36bb0f/" hreflang="en"
                data-tippy data-description="A very common UI pattern on the Web, for which there is no native API, is “popover UI”, also sometimes called “popovers”, “pop up UI”, or “popovers”. Popovers are a general class of UI that have three common behaviors"
                data-source="https://open-ui.org/components/popover.research.explainer/"
                data-date="2024-02-03"
                data-favicon="https://open-ui.org/images/favicon-32x32.png"
                data-domain="open-ui.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> pour essayer de comprendre la distinction entre les&nbsp;deux.</p>
<p>Je finis par abandonner cette piste et je me dis que ça pourrait être un <em>Web Component</em> intéressant. Je m’arrache les cheveux un bon petit moment sur le positionnement et je capitule en me disant qu’il y a déjà des personnes qui ont produit des outils comme <a data-link-domain="floating-ui.com" href="https://floating-ui.com/">Floating UI</a> ou <a data-link-domain="atomiks.github.io" href="https://atomiks.github.io/tippyjs/">Tippy.js</a>. Choisir c’est renoncer… et j’ai fait les deux à la fois en optant pour Tippy qui <a data-link-domain="atomiks.github.io" href="https://atomiks.github.io/tippyjs/v6/accessibility/" hreflang="en"
            title="Consultation de l’article (anglais)">prend soin de l’accessibilité</a>
            <a href="/david/cache/2024/af0aee71fef1821c89ce368622f9a464/" hreflang="en"
                data-tippy data-description="Tooltip and popovers are usually not mouse-only UI elements. If vital functionality or information is contained within them, they should be accessible to keyboard and touch inputs so that users who navigate interfaces without using a mouse are not locked out."
                data-source="https://atomiks.github.io/tippyjs/v6/accessibility/"
                data-date="2024-02-03"
                data-favicon="https://atomiks.github.io/tippyjs/favicon-32x32.png?v=68cd85fe631cbce4dad8be8ef26f93f3"
                data-domain="atomiks.github.io"
                ><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>. J’ai trop besoin d’avoir <em>l’expérience de l’interface</em> pour pouvoir affiner par la suite et faire les choses à ma&nbsp;sauce.</p>
<p>N’hésitez pas à jouer avec et à me faire des retours, c’est amené à&nbsp;évoluer.</p>
<a href="#hr-65" title="Lien vers cette section de la page"><hr id="hr-65" /></a>

<blockquote lang="en">
<p>My recipe for fiction set ten years in the future used to be 90% already-here, 9% not-here-yet but predictable, and 1% who-ordered-that. But <mark>unfortunately the ratios have changed.</mark> I think we're now down to maybe 80% already-here —climate change takes a huge toll on infrastructure— then 15% not-here-yet but predictable, and a whopping 5% of utterly unpredictable deep&nbsp;craziness.</p>
<p><cite><em><a data-link-domain="antipope.org" href="https://www.antipope.org/charlie/blog-static/2018/01/dude-you-broke-the-future.html" hreflang="en"
            title="Consultation de l’article (anglais)">Dude, you broke the future!</a>
            <a href="/david/cache/2024/71b177818657a209fc76f23c08c21d25/" hreflang="en"
                data-tippy data-description="In this talk, author Charles Stross will give a rambling, discursive, and angry tour of what went wrong with the 21st century, why we didn't see it coming, where we can expect it to go next, and a few suggestions for what to do about it if we don't like it."
                data-source="https://www.antipope.org/charlie/blog-static/2018/01/dude-you-broke-the-future.html"
                data-date="2024-02-03"
                data-favicon="https://www.antipope.org/favicon.ico"
                data-domain="antipope.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>Cela me rappelle une discussion récente au sujet du manque de pertinence de la météo et de la difficulté à faire de la prédiction sur des données rendues obsolètes par le changement climatique. Les modèles ne sont pas (encore&#8239;?) adaptés à un tel&nbsp;chaos.</p>
<p>Manifestement, les écrivains non&nbsp;plus.</p>

<blockquote lang="en">
<p>Someone out there is working on it: a geolocation-aware social media scraping deep learning application, that uses a gamified, competitive interface to reward its “players” for joining in acts of mob violence against whoever the app developer hates. Probably it has an inoccuous-seeming but highly addictive training mode to get the users accustomed to working in teams and obeying the app's instructions—think Ingress or Pokemon Go. Then, at some pre-planned zero hour, <mark>it switches mode and starts rewarding players for violence</mark>—players who have been primed to think of their targets as vermin, by a steady drip-feed of micro-targeted dehumanizing propaganda delivered over a period of&nbsp;months.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>Ah si en&nbsp;fait&nbsp;😬.</p>
<a href="#hr-66" title="Lien vers cette section de la page"><hr id="hr-66" /></a>

<blockquote lang="en">
<p>If we want a system that is consistent with the flourishing of life on earth, we will need a system that mimics nature. Our current economic model doesn’t - for many reasons - and needs to change. Looking at nature, including our own human nature in our private lives, gives us many ideas for what this new, harmonious system could look&nbsp;like.</p>
<p><cite><em><a data-link-domain="erinremblance.substack.com" href="https://erinremblance.substack.com/p/we-are-all-socialists-in-our-private" hreflang="en"
            title="Consultation de l’article (anglais)">“We Are All Socialists in Our Private Lives”</a>
            <a href="/david/cache/2024/f5b5c3dff862cc55318684cf434b8d74/" hreflang="en"
                data-tippy data-description="David Graeber gets to the heart of human (and more than human) nature."
                data-source="https://erinremblance.substack.com/p/we-are-all-socialists-in-our-private"
                data-date="2024-02-03"
                data-favicon="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F79e3e832-517f-4ca3-989b-41eb1c8249d7%2Ffavicon-16x16.png"
                data-domain="erinremblance.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>
<p>Il n’y a que les classes moyennes qui peuvent être socialistes. C’était tout l’enjeu de leur destruction pour n’avoir plus que des personnes qui aient peur de perdre le <em>trop peu</em> ou le <em>vraiment beaucoup</em> qu’elles ont. Et la peur rend la manipulation tellement plus&nbsp;facile…</p>

<blockquote lang="en">
<p>If a monkey hoarded more bananas than it could eat, while most of the other monkeys starved, scientists would study that monkey to figure out what the heck was wrong with it. When humans do it, we put them on the cover of&nbsp;Forbes.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>🙈</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/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/01/29/" title="Lien permanent vers cet article">Déploiement</a> <time datetime="2024-01-29">29 janvier 2024</time>
    </h2>
    

<blockquote>
<p>Ce qui me fait penser que cela fait plusieurs fois que je veux demander comment David déploie son&nbsp;site.</p>
<p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/24/herbe" hreflang="fr"
            title="Consultation de l’article">herbe</a>
            <a href="/david/cache/2024/956819385548bba6e768563b12edc2d6/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://www.la-grange.net/2024/01/24/herbe"
                data-date="2024-01-28"
                data-favicon="https://www.la-grange.net/favicon.ico"
                data-domain="la-grange.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>Mes <a data-link-domain="git.larlet.fr" href="https://git.larlet.fr/explore/repos">dépôts</a> contiennent le HTML généré car c’est ce que je considère comme étant la version pérenne de mes écrits donc je ne souhaite pas avoir une génération sur le serveur. Cela fait grossir le dépôt mais ça offre une tranquillité d’esprit de pouvoir observer les différences lorsque je modifie le&nbsp;moteur.</p>
<p>Il se trouve que ces dépôts sont sur le même serveur que celui qui sert les pages HTML que vous voyez. Je lance donc une commande distante avec <a data-link-domain="minicli.readthedocs.io" href="https://minicli.readthedocs.io/">minicli</a> qui va faire une archive du dépôt git au bon endroit sur le&nbsp;serveur&nbsp;:</p>
<pre><code>git archive --remote=larlet-fr-index.git master | tar -x -C larlet-fr
git archive --remote=larlet-fr-david.git master | tar -x -C larlet-fr
git archive --remote=larlet-fr-david-cache.git master | tar -x -C larlet-fr/david
[…]
</code></pre>
<p>J’itère ainsi sur chacun des dépôts concernés et l’avantage c’est que je peux donner un sous-dossier à la commande <code>tar</code> selon où je veux placer le contenu dans l’arborescence. Par exemple, ci-dessus, les articles archivés <code>larlet-fr-david-cache.git</code> arrivent directement dans mon dossier personnel <code>larlet-fr/david</code>. Il faut tout de même vérifier de ne pas écraser ses propres&nbsp;dossiers/fichiers.</p>
<p>Le déploiement met à ce jour une trentaine de secondes. Ce n’est pas optimisé mais je n’ai pas besoin de&nbsp;l’optimiser.</p>
<a href="#hr-53" title="Lien vers cette section de la page"><hr id="hr-53" /></a>

<blockquote lang="en">
<p>I therefore officially announce 2024&nbsp;to be the year when the square checkbox has finally&nbsp;died.</p>
<p><cite><em><a data-link-domain="tonsky.me" href="https://tonsky.me/blog/checkbox/" hreflang="en"
            title="Consultation de l’article (anglais)">In Loving Memory of Square Checkbox</a>
            <a href="/david/cache/2024/ff566a58892db07815a327802fea66d3/" hreflang="en"
                data-tippy data-description="History of checkboxes and radio buttons in user interfaces"
                data-source="https://tonsky.me/blog/checkbox/"
                data-date="2024-01-28"
                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></em></cite></p>
</blockquote>
<p>À quand une petite coche sur les <a data-link-domain="alvaromontoro.com" href="https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari" hreflang="en"
            title="Consultation de l’article (anglais)">futurs toggle/switch natifs</a>
            <a href="/david/cache/2024/b351cda8d2ccd73362ca1729845b7e79/" hreflang="en"
                data-tippy data-description="Toggle switches are a common request by Designers and Developers. Safari proposed a native way to create switches in HTML without the hassle of dealing with CSS or unnecessary control states."
                data-source="https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari"
                data-date="2024-01-28"
                data-favicon="https://alvaromontoro.com/fav.ico"
                data-domain="alvaromontoro.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>&#8239;? Ou <a data-link-domain="grumpy.website" href="https://grumpy.website/1457">pire</a>&#8239;? 🙈</p>
<p>R.I.P. <a data-link-domain="nubero.ch" href="https://www.nubero.ch/blog/009/" hreflang="de"
            title="Consultation de l’article">les boutons</a>
            <a href="/david/cache/2024/a3ccfb51f65cd59f375d5424d243e012/" hreflang="de"
                data-tippy data-description="Nuberodesign: Agentur fÃ¼r Grafikdesign, Animation, Videoproduktion und Usability in Winterthur"
                data-source="https://www.nubero.ch/blog/009/"
                data-date="2024-01-28"
                data-favicon="https://www.nubero.ch/favicon.svg"
                data-domain="nubero.ch"
                ><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>&nbsp;aussi…</p>
<a href="#hr-54" title="Lien vers cette section de la page"><hr id="hr-54" /></a>

<blockquote>
<p>Les poètes et écrivains évitaient tous la colère des rois et des puissants par l’utilisation de métaphores. Mais c’est justement par cette analogie que cela devient&nbsp;intéressant.</p>
<p><mark>Les empires informatiques d’aujourd’hui comme exemples de l’absolutisme du pouvoir des siècles précédents posent la question plus qu’intéressantes sur la liberté d’expression.</mark> Quand tout l’espace de notre expression transite par un domaine privé et commercial, nous ne sommes plus dans l’espace public de notre expression mais bien dans cet espace contrôlé. Que devient le sens de notre communication si dès que nous sommes sur ces espaces, l’expression devient plus limitée que celle que l’espace public&nbsp;permet.</p>
<p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/26/fraichement" hreflang="fr"
            title="Consultation de l’article">fraîchement</a>
            <a href="/david/cache/2024/b692faaa55fd2775e957b20e833e9e5e/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://www.la-grange.net/2024/01/26/fraichement"
                data-date="2024-01-28"
                data-favicon="https://www.la-grange.net/favicon.ico"
                data-domain="la-grange.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>Il est interdit de parler anglais dans les écoles québécoises. Il n’en fallait pas beaucoup plus pour que les élèves aient envie de l’apprendre et d’échanger entre eux dans cette langue. <em>Oppression + contre-pouvoir = culture&nbsp;commune.</em></p>
<p>Aussi, l’enseignement de l’anglais est relativement médiocre pour une province qui insiste sur le bilinguisme. Difficile d’en mesurer&nbsp;l’intention.</p>
<a href="#hr-55" title="Lien vers cette section de la page"><hr id="hr-55" /></a>

<blockquote>
<p>[…] Je ne sais pas ce qui est le plus important, préserver un nom de domaine n’est qu’une partie. Préserver le contenu derrière le nom de domaine est plus difficile. Il faut penser serveurs, mise à jour de sécurité, les technologies utilisées, etc.</p>
<p>Le No JS pour les sites Web est rarement mentionné pour la longévité du contenu. Et pourtant c’est une pièce&nbsp;fondamentale.</p>
<p>Peut-être il serait plus important de <mark>penser à ce que les autres voudront préserver plutôt que de penser à ce que nous voulons transmettre.</mark> De même que voulons nous préserver des générations antérieures pour nous aider à mieux penser notre propre&nbsp;disparition.</p>
<p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/23/legacy" hreflang="fr"
            title="Consultation de l’article">ce que nous laissons</a>
            <a href="/david/cache/2024/1fe484434058e9c44d21bfebb0ddba31/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://www.la-grange.net/2024/01/23/legacy"
                data-date="2024-01-28"
                data-favicon="https://www.la-grange.net/favicon.ico"
                data-domain="la-grange.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>Peut-être que si chaque personne avait sa <a href="/david/cache/2024/">propre archive</a> des publications des autres, on aurait accès à un réseau de citations distribuées qui contribueraient à cette préservation. Et qui auraient été considérées comme étant «&nbsp;pertinentes&nbsp;» par les lecteur·ices&#8239;? Les guillemets sont importants car citation ne veut pas forcément dire caution ou intérêt le plus grand. Par exemple, l’<a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/22/carnet" hreflang="fr"
            title="Consultation de l’article">anecdote</a>
            <a href="/david/cache/2024/790f724c45b26de460f9eeac04d48884/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://www.la-grange.net/2024/01/22/carnet"
                data-date="2024-01-28"
                data-favicon="https://www.la-grange.net/favicon.ico"
                data-domain="la-grange.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> <q lang="fr">Je me pose de sérieuses questions sur l’image que nous renvoyons à notre enfant.</q> me fait beaucoup réfléchir et me donne envie de la conserver sans forcément la citer. Comment combiner réactions publiques et souvenirs plus&nbsp;intimes&#8239;?</p>
<p>Maintenant je vais vouloir citer encore plus d’articles de&nbsp;Karl&nbsp;(-:.</p>
<p><em>PS&nbsp;: Un réseau de <a data-link-domain="flus.fr" href="https://flus.fr/">flus</a> ou <a data-link-domain="readeck.org" href="https://readeck.org">readeck</a> serait aussi une option s’ils pouvaient devenir un des nœuds d’une archive distribuée et&nbsp;collective.</em></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/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/01/17/" title="Lien permanent vers cet article">Vieillesse</a> <time datetime="2024-01-17">17 janvier 2024</time>
    </h2>
    

<blockquote>
<p>Je travaille dans des équipes techniques informatiques, le web, les nouvelles technologies, les startups. Autour de moi je ne vois que des jeunes, avec quelques rares personnes de ma&nbsp;génération.</p>
<p><mark>Il n’y a quasiment aucune personne de 50&nbsp;ans ou plus dans les équipes techniques.</mark> Les exemples que j’ai en tête sont quelques pointures nationales ou internationales, pas du tout représentatives du&nbsp;métier.</p>
<p><cite><em><a data-link-domain="n.survol.fr" href="https://n.survol.fr/n/quand-je-serai-bien-vieux" hreflang="fr"
            title="Consultation de l’article">Quand je serai bien vieux</a>
            <a href="/david/cache/2024/112d32ccefb9aec48180de42e1fe1534/" hreflang="fr"
                data-tippy data-description="Quand vous serez bien vieille, au soir, à la chandelle, Assise auprès du feu, dévidant et filant, Pierre de Ronsard"
                data-source="https://n.survol.fr/n/quand-je-serai-bien-vieux"
                data-date="2024-01-16"
                data-favicon=""
                data-domain="n.survol.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>Cet onglet d’Éric D. est ouvert dans mon navigateur depuis plus d’un an (rassurez-vous, il était bien entouré avec au moins 300&nbsp;collègues). Le temps passant, je me pose également ces&nbsp;questions…</p>
<p>Il y a deux&nbsp;aspects&nbsp;:</p>
<ol>
<li>Jusqu’à quand est-ce que l’on aura besoin de&nbsp;moi&#8239;?</li>
<li>Jusqu’à quand est-ce que j’aurai besoin de&nbsp;coder&#8239;?</li>
</ol>
<p>Sur la première, j’ai l’impression que l’expérience de base s’accumule et aura toujours une certaine valeur, je ne vois pas vraiment de plateau depuis 25&nbsp;ans mais des centres d’intérêts qui évoluent plutôt en étoile. Certains sont des impasses —&nbsp;ou mis en dormance plus ou moins prolongée&nbsp;—, d’autres sont temporels et/ou gagnent un regain d’intérêt au gré de produits et de rencontres. Ce n’est pas tant d’avoir appris à apprendre que d’avoir croisé suffisamment de situations pour permettre à des équipes de sauter certains fossés ou <em>sentir</em> lorsqu’il y a un outil / techno / pattern qui vaut le coup. Je ne me sens pas obsolète et encore moins face à une IA-llucinante actuelle qui nécessite cette&nbsp;expérience.</p>
<p>C’est le deuxième point qui est critique car il touche à l’envie et peut-être que d’ici quelques années la technique m’intéressera moins pour plein de raisons (stagnation, répétition, sentiment d’inutilité, consommation de ressources, etc). Et peut-être que le code ne sera plus alors une expression de ma personnalité à laquelle je voudrai consacrer autant de temps. Et peut-être que je n’aurai plus envie de transmettre non plus à des personnes moins expérimentées pour ces mêmes raisons. Aujourd’hui, derrière ce besoin de coder, il y a cette nécessité d’apprendre en continu et de me sentir capable d’avoir un semblant d’<a href="/david/2024/01/11/" title="Impact">impact</a> sur ce&nbsp;monde.</p>
<p>Je peux aussi considérer que je ne suis qu’à la moitié de ma carrière technique. C’est vertigineux exprimé ainsi. <em>Et pourquoi&nbsp;pas.</em></p>

<blockquote lang="en">
<p>After almost 10&nbsp;years of remote work, it would be close to impossible for me to go back to an&nbsp;office.</p>
<p><cite><em><a data-link-domain="world.hey.com" href="https://world.hey.com/jorge/aging-programmer-d448bdec" hreflang="en"
            title="Consultation de l’article (anglais)">Aging programmer</a>
            <a href="/david/cache/2024/ba977526c7a8cab6935708b2cdba5c0c/" hreflang="en"
                data-tippy data-description="Back in college, they told me that I would start my career writing code, but eventually, I would move to a position where I would ask others to code my designs. To celebrate that this turned out to be completely false, here are some assorted reflections as a 40-year-old programmer that looks back"
                data-source="https://world.hey.com/jorge/aging-programmer-d448bdec"
                data-date="2024-01-16"
                data-favicon="https://world.hey.com/jorge/avatar-d08cb3ee63ecbd49736f76ee2caffa4c99a1c0fd"
                data-domain="world.hey.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 souvent ce sentiment (je partage les autres points de l’article aussi). Je ne sais pas du tout ce que ça ferait de retourner dans un bureau mais au-delà de cette hypothèse physique, c’est le côté avec subordination / pyramidal que j’ai l’impression d’avoir dépassé sans vraiment de possibilité de retour en arrière. Il n’y a que dans des collectifs bien spécifiques que j’aurais une chance de trouver une place qui me soit&nbsp;acceptable.</p>
<p><em>Voir aussi <a data-link-domain="news.ycombinator.com" href="https://news.ycombinator.com/item?id=32961933">cette discussion</a> à ce&nbsp;sujet.</em></p>
<a href="#hr-36" title="Lien vers cette section de la page"><hr id="hr-36" /></a>
<p>J’ai de plus en plus de mal avec les légalistes donneurs de leçons qui utilisent le ton le plus anxiogèno-aggressif qui soit. La vieillesse a ceci de bon que je commence à savoir retourner ces situations en interrogeant les intentions et les peurs de ces&nbsp;personnes.</p>
<a href="#hr-37" title="Lien vers cette section de la page"><hr id="hr-37" /></a>

<blockquote lang="en">
<p>The big one is that the logical alternatives to Node – the “no Node” work environments developers are likely to reach for <em>aren’t going to be based on JavaScript</em>. Import maps mean that browsers effectively have an API surface that non-JS projects can use to build a dependency management system. Much of the tooling surrounding JavaScript is <mark>now implemented in Rust,</mark> not JS – much of it driven by Deno itself – and that makes it more easily accessible outside both the Node and Deno&nbsp;ecosystems.</p>
<p><cite><em><a data-link-domain="baldurbjarnason.com" href="https://www.baldurbjarnason.com/2024/disillusioned-with-deno/" hreflang="en"
            title="Consultation de l’article (anglais)">Disillusioned with Deno</a>
            <a href="/david/cache/2024/7d2d2bce96cbc020423299e7de03d2cf/" hreflang="en"
                data-tippy data-description="This is a part of a series where I review the work I’ve done over the past couple of years."
                data-source="https://www.baldurbjarnason.com/2024/disillusioned-with-deno/"
                data-date="2024-01-16"
                data-favicon="https://www.baldurbjarnason.com/dark-bird.svg"
                data-domain="baldurbjarnason.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 partage l’analyse de Baldur, l’avenir est à la rouille. De <a data-link-domain="biomejs.dev" href="https://biomejs.dev/">Biome</a> à <a data-link-domain="docs.astral.sh" href="https://docs.astral.sh/ruff/">Ruff</a> en passant par <a data-link-domain="rye-up.com" href="https://rye-up.com/">rye</a> ou <a data-link-domain="hurl.dev" href="https://hurl.dev/">hurl</a> pour n’en citer que quelques uns, <a data-link-domain="rust-lang.org" href="https://www.rust-lang.org/">Rust</a> est en train de devenir un véritable atout pour tout ce qui est&nbsp;outils-performants-autour-du-web.</p>
<p>Les (vieilles) mauvaises langues pourraient dire que l’on arrive au bout de la décennie tout-JS, surtout avec l’arrivée de <a data-link-domain="component-model.bytecodealliance.org" href="https://component-model.bytecodealliance.org/language-support/python.html">WebAssembly+Python</a>&nbsp;🤞.</p>

    
      <nav>
        <p>
          
            <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/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/01/11/" title="Lien permanent vers cet article">Impact</a> <time datetime="2024-01-11">11 janvier 2024</time>
    </h2>
    

<blockquote lang="en">
<p>If front web developers work closer to the users’ needs and problems, <mark>if they feel more implicated in the user experience,</mark> they will understand the impact of what they are building and will naturally adopt the strengths of the front web. […]</p>
<p>Maybe, in order to fix the front web, we have to fix human nature: make things less about money and self-satisfaction, and more about improving people’s lives and understanding the impact of what we are&nbsp;creating.</p>
<p><cite><em><a data-link-domain="gericci.me" href="https://gericci.me/we-need-to-talk-about-the-front-web-5.html" hreflang="en"
            title="Consultation de l’article (anglais)">Part 5: Clues to Fix the Front Web</a>
            <a href="/david/cache/2024/40aada3cc8d6897fda5a277c4299c1fd/" hreflang="en"
                data-tippy data-description="Clues to Fix the Front Web"
                data-source="https://gericci.me/we-need-to-talk-about-the-front-web-5.html"
                data-date="2024-01-09"
                data-favicon="https://gericci.me/img/favicon.png"
                data-domain="gericci.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>Même si je m’émeus encore de l’esthétique d’un <em>Web Component</em> ou d’une nouvelle technique CSS, j’essaye d’être plus attentif au fil des ans à l’impact potentiel des bouts de code que j’assemble. C’est là où <a data-link-domain="daverupert.com" href="https://daverupert.com/2022/06/demo-to-demo-loop/" hreflang="en"
            title="Consultation de l’article (anglais)">les démo</a>
            <a href="/david/cache/2024/9f8c0e75066c1882a3b4ce084e3223ed/" hreflang="en"
                data-tippy data-description="The personal blog of Dave Rupert, web developer and podcaster from Austin, TX."
                data-source="https://daverupert.com/2022/06/demo-to-demo-loop/"
                data-date="2024-01-09"
                data-favicon="https://daverupert.com/favicon.ico"
                data-domain="daverupert.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> prennent tout leur sens pour vérifier la pertinence de ce qui a été produit. Se libérer de l’égoïsme technique pour aller vers le soin porté aux utilisateur·ices, essayer de comprendre leurs besoins, synthétiser, proposer, se tromper, recommencer. Dans une spirale d’essais-erreurs, on se rapproche d’un centre enviable où les contraintes techniques sont minimisées et les besoins proches d’être comblés. Chaque partie ayant un petit peu appris sur l’autre au cours de ce bout de chemin&nbsp;commun.</p>
<p><strong>Une carrière est la cartographie de ces expériences.</strong> Savoir identifier les <em>optima</em> locaux qui ont pu procurer de la joie ainsi que les lieux de convergence où l’on aime bien aller car il y a le bon dosage effort / récompense. Apprendre à reconnaître les sentiers hasardeux où l’on a déjà laissé des plumes et reconnaître aussi qu’un contexte et des personnes peuvent&nbsp;changer.</p>
<p>Admettre que l’on a soi-même changé tout au long de ce&nbsp;cheminement.</p>

<blockquote lang="en">
<p>At most software startups, customers typically don’t care if your product runs on Heroku, Kubernetes, or a really brittle singly-homed machine in Joe’s closet. No purchasing decisions hinge on your commitment to write servers in Rust or use Nix for hermetic everything. And although they might exist, I have sadly never had a customer write a testimonial for the elegant collection of internal services involved in responding to that single HTTP&nbsp;request.</p>
<p>No; customers are not paying for, nor give a shit about, these things. Sorry. It’s still cool stuff. It’s just not what you’re&nbsp;selling.</p>
<p><mark>Customers want software that delivers problem-solving <em>impact</em>.</mark> And at the early stage, which is all the way until you’ve reached product-market fit, they’re almost certainly not getting enough, fast enough. You should be spending as much time as you can at this level of the stack, The Product: thinking, building, learning.</p>
<p><cite><em><a data-link-domain="hoho.com" href="https://hoho.com/posts/your-stack-is-not-the-product/" hreflang="en"
            title="Consultation de l’article (anglais)">Your tech stack is not the product</a>
            <a href="/david/cache/2024/877b1e29328f6ad1b6fef26d7407ec5f/" hreflang="en"
                data-tippy data-description="Early stage technology decisions must be, uncomfortably, a means to an end."
                data-source="https://hoho.com/posts/your-stack-is-not-the-product/"
                data-date="2024-01-09"
                data-favicon="https://hoho.com/favicon-16x16.png"
                data-domain="hoho.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-25" title="Lien vers cette section de la page"><hr id="hr-25" /></a>

<blockquote lang="en">
<p>You can’t make an article on a UX topic without showcasing a practical example. Let’s explore examples that I spotted on the web and how to fix&nbsp;them.</p>
<p><cite><em><a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size" hreflang="en"
            title="Consultation de l’article (anglais)">Designing better target sizes</a>
            <a href="/david/cache/2024/c98206d38897264005bcd5b453d032b1/" hreflang="en"
                data-tippy data-description="An interactive guide on designing better target sizes on the web."
                data-source="https://ishadeed.com/article/target-size"
                data-date="2024-01-10"
                data-favicon="https://ishadeed.com/assets/favicon-32x32.png"
                data-domain="ishadeed.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>Superbe article de Ahmad Shadeed. En résumé, il faut soigner ses <em>paddings</em> mais il y a pas mal d’astuces CSS pour y arriver dans certaines conditions. Je retiens notamment l’usage d’un <code>:after</code> pour ça <a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size#mobile-menu">lorsqu’il s’agit d’icônes</a>&nbsp;notamment&nbsp;:</p>
<pre><code>.search__filter:after {
  content: &quot;&quot;;
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scale(2);
}
</code></pre>
<p>Je découvre au passage qu’il y a pas mal d’options d’accessibilité dans <a data-link-domain="polypane.app" href="https://polypane.app/">Polypane</a> que j’utilise depuis peu et que je n’ai pas pleinement&nbsp;exploré.</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/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/01/03/" title="Lien permanent vers cet article">Appariement</a> <time datetime="2024-01-03">3 janvier 2024</time>
    </h2>
    
<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi" href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
<p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS&nbsp;layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes&nbsp;sections.</p>
<p>Je m’amuse comme un petit fou même si la CSS fait subitement&nbsp;350&nbsp;lignes.</p>
<a href="#hr-4" title="Lien vers cette section de la page"><hr id="hr-4" /></a>

<blockquote>
<p><mark>Je crois qu’on écrit pour créer un monde dans lequel on puisse vivre.</mark> Je ne pouvais vivre dans aucun de ceux qui m’étaient proposés&nbsp;: le monde de mes parents, le monde de la guerre, le monde de la politique. Il me fallait créer un monde à moi, comme un climat, un pays, une atmosphère, où je puisse respirer, régner et me régénérer lorsque j’étais détruite par la&nbsp;vie.</p>
<p><cite><em>Journal 1947-1955</em>, Anaïs&nbsp;Nin</cite></p>
</blockquote>
<p>L’introduction de <em>Alors nous irons trouver la beauté ailleurs</em> par Corinne Morel Darleux m’aura suffit pour&nbsp;aujourd’hui&nbsp;🙂.</p>
<a href="#hr-5" title="Lien vers cette section de la page"><hr id="hr-5" /></a>
<p>On a couru 10&#8239;km avec l’enfant. À ce rythme là, je ne sais pas si je vais pouvoir suivre longtemps&#8239;! La récompense a été de croiser un renard urbain de vraiment très près, moins de 5&nbsp;mètres, que l’on a bien eu le temps d’observer vu qu’il courrait vers nous. Par contre un flasque de plus de 10&nbsp;ans s’est percée dans ma poche pendant la course, j’étais bien trempé avec du vent. Il faisait&nbsp;-6°C.</p>
<p>Tout ça pour aller chercher un bidon d’huile pour la transmission de la&nbsp;voiture.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/accompagnement/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#accompagnement</a>
          
            <a href="/david/2024/ecriture/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#écriture</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/01/02/" title="Lien permanent vers cet article">Fondations</a> <time datetime="2024-01-02">2 janvier 2024</time>
    </h2>
    
<p>Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses&nbsp;: des <em>grids</em>, des <em>layers</em>, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du&nbsp;temps.</p>
<p>Je commence par regarder à quoi ressemble une page nue avec la précédente sémantique HTML. Ce n’est pas si mal mais les icônes en SVG pourraient avoir des dimensions plus appropriées. Je les retire, il est temps de gagner en légèreté. Je regarde à quoi ressemblent des <em>reset</em>&nbsp;modernes&nbsp;:</p>
<ul>
<li><a data-link-domain="piccalil.li" href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy&nbsp;Bell&#8239;;</li>
<li><a data-link-domain="joshwcomeau.com" href="https://www.joshwcomeau.com/css/custom-css-reset/">My Custom CSS Reset</a> par Josh W. Comeau&#8239;;</li>
<li><a data-link-domain="github.com" href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam&nbsp;Suzanne&#8239;;</li>
<li><a data-link-domain="jgthms.com" href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy&nbsp;Thomas.</li>
</ul>
<p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com" href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com" href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de&nbsp;colon.</p>
<p>Je finis par tout jeter / ré-interroger et je m’en sors avec&nbsp;6&nbsp;règles.</p>
<p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique —&nbsp;<a data-link-domain="quaternum.net" href="https://www.quaternum.net/2023/06/02/fabrique-concept/" hreflang="fr"
            title="Consultation de l’article">coucou Antoine</a>
            <a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" hreflang="fr"
                data-tippy data-description="Le terme fabrique définit une approche spécifique dans la création et dans la production d’artefact, y compris dans le domaine de l’édition."
                data-source="https://www.quaternum.net/2023/06/02/fabrique-concept/"
                data-date="2024-01-07"
                data-favicon=""
                data-domain="quaternum.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>&nbsp;— fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes&nbsp;publications.</p>
<p>Je suis satisfait de mon résultat très minimaliste du&nbsp;jour.</p>
<a href="#hr-2" title="Lien vers cette section de la page"><hr id="hr-2" /></a>

<blockquote>
<p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des&nbsp;rêves.</p>
<p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2023/07/10/notes-train" hreflang="fr"
            title="Consultation de l’article">notes</a>
            <a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://www.la-grange.net/2023/07/10/notes-train"
                data-date="2024-01-07"
                data-favicon="https://www.la-grange.net/favicon.ico"
                data-domain="la-grange.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>🧡</p>
<a href="#hr-3" title="Lien vers cette section de la page"><hr id="hr-3" /></a>
<p>Plus tard, je me rends compte en voulant faire les choses proprement que j’avais déjà fait des essais il y a un peu plus d’un&nbsp;an&nbsp;:</p>
<figure>
    <a href="/static/david/2024/2024-01-02-ancien-essai.png"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-01-02-ancien-essai.png"
            width="2488" height="1486"
            srcset="/static/david/2024/2024-01-02-ancien-essai.png 2488w, /static/david/2024/2024-01-02-ancien-essai.png 660w, /static/david/2024/2024-01-02-ancien-essai.png 990w, /static/david/2024/2024-01-02-ancien-essai.png 1320w"
            sizes="min(100vw, calc(100vh * 2488 / 1486))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran de l’essai">
    </a>
    <figcaption>Capture d’écran de&nbsp;l’essai.</figcaption>
</figure>
<p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo&nbsp;😱 (Bizmeud, <a data-link-domain="velvetyne.fr" href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la&nbsp;poubelle.</p>
<p>Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi&#8239;? Oui, et ça ouvre des perspectives d’agencements photographiques à&nbsp;explorer…</p>

    
      <nav>
        <p>
          
            <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/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>
    
  

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