davidbgk
/
larlet-fr-david
Vērot 1
Pievienot zvaigznīti 0
Atdalīts 0
Kods Laidieni 0 Aktivitāte
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
902 Revīzijas
1 Atzars
Koks: ec7f0fd736
Atzari Tagi
${ item.name }
Izveidot atzaru ${ searchTerm }
no 'ec7f0fd736'
${ noResults }
larlet-fr-david/david/2024/dependance/index.html

index.html 82KB
Neapstrādāts Vainot Vēsture

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173 
  1. <!DOCTYPE html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang="fr">

  4.   <!-- Has to be within the first 1024 bytes, hence before the `title` element

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6.   <meta charset="utf-8">

  7.   <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8.   <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10.   <meta name="viewport" content="width=device-width,initial-scale=1">

  11.   <!-- Required to make a valid HTML5 document. -->

  12.   <title>

  13.     Étiquette #dépendance

  14.   — David Larlet</title>

  15.   <script>

  16.     function toggleTheme(themeName) {

  17.       document.documentElement.classList.toggle(

  18.         'forced-dark',

  19.         themeName === 'dark'

  20.       )

  21.       document.documentElement.classList.toggle(

  22.         'forced-light',

  23.         themeName === 'light'

  24.       )

  25.     }

  26.     const selectedTheme = localStorage.getItem('theme')

  27.     if (selectedTheme !== 'undefined') {

  28.       toggleTheme(selectedTheme)

  29.     }

  30.   </script>

  31.   <!-- Documented, feel free to shoot an email. -->

  32.   <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">

  33.   <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->

  34.   <link rel="preload"

  35.         href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"

  36.         as="font"

  37.         type="font/woff2"

  38.         media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"

  39.         crossorigin>

  40.   <link rel="preload"

  41.         href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"

  42.         as="font"

  43.         type="font/woff2"

  44.         media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"

  45.         crossorigin>

  46.   <link rel="preload"

  47.         href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"

  48.         as="font"

  49.         type="font/woff2"

  50.         media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"

  51.         crossorigin>

  52.   <link rel="preload"

  53.         href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"

  54.         as="font"

  55.         type="font/woff2"

  56.         media="(prefers-color-scheme: dark)"

  57.         crossorigin>

  58.   <link rel="preload"

  59.         href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"

  60.         as="font"

  61.         type="font/woff2"

  62.         media="(prefers-color-scheme: dark)"

  63.         crossorigin>

  64.   <link rel="preload"

  65.         href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"

  66.         as="font"

  67.         type="font/woff2"

  68.         media="(prefers-color-scheme: dark)"

  69.         crossorigin>

  70.   <meta name="description" content="Publications relatives au tag #dépendance">

  71.   <!-- That good ol' feed, subscribe :). -->

  72.   <link rel="alternate"

  73.         type="application/atom+xml"

  74.         title="Feed"

  75.         href="/david/log/">

  76.   <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  77.   <link rel="apple-touch-icon"

  78.         sizes="180x180"

  79.         href="/static/david/icons2/apple-touch-icon.png">

  80.   <link rel="icon"

  81.         type="image/png"

  82.         sizes="32x32"

  83.         href="/static/david/icons2/favicon-32x32.png">

  84.   <link rel="icon"

  85.         type="image/png"

  86.         sizes="16x16"

  87.         href="/static/david/icons2/favicon-16x16.png">

  88.   <link rel="manifest" href="/static/david/icons2/site.webmanifest">

  89.   <link rel="mask-icon"

  90.         href="/static/david/icons2/safari-pinned-tab.svg"

  91.         color="#07486c">

  92.   <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">

  93.   <meta name="msapplication-TileColor" content="#f7f7f7">

  94.   <meta name="msapplication-config"

  95.         content="/static/david/icons2/browserconfig.xml">

  96.   <meta name="theme-color"

  97.         content="#f7f7f7"

  98.         media="(prefers-color-scheme: light)">

  99.   <meta name="theme-color"

  100.         content="#272727"

  101.         media="(prefers-color-scheme: dark)">

  102.   <!-- Is that even respected? Retrospectively? What a shAItshow…

  103.   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->

  104.   <meta name="robots" content="noai, noimageai">

  105.   <!-- To get attribution when linking on mastodon. -->

  106.   <meta name="fediverse:creator" content="@david@larlet.fr">

  107.   

  108.   <style type="text/css">

  109.     details[open] summary {

  110.       display: none;

  111.     }

  112.   </style>

  113. 

  114.   <body data-instant-intensity="viewport-all">

  115.     <article>

  116.       

  117.   <header>

  118.     <hgroup>

  119.       <h1>#dépendance</h1>

  120.       <p>Publications relatives à cette étiquette</p>

  121.     </hgroup>

  122.   </header>

  123.   <nav>

  124.     <p>

  125.       <a href="/david/" title="Aller à l’accueil">

  126.         Accueil</a>

  127.       •

  128.       <a rel="tags"

  129.         href="/david/2024/#tags"

  130.         title="Liste de toutes les étiquettes">

  131.         Étiquettes</a>

  132.       •

  133.       <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>

  134.       •

  135.       <a href="/david/log/" title="Accès au flux RSS">Suivre</a>

  136.     </p>

  137.   </nav>

  138.   

  139.     <h2>

  140.       <a href="/david/2024/03/25/" title="Lien permanent vers cet article">Inclusion</a> <time datetime="2024-03-25">25 mars 2024</time>

  141.     </h2>

  142.     

  143. <p>Dans le cadre de <del><a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Eating_your_own_dog_food">manger ma propre bouffe pour chien</a></del> mon <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Auto%C3%A9quipement">autoéquipement</a>, je voulais vérifier si l’implémentation de <a data-link-domain="oembed.com" href="https://oembed.com/">oEmbed</a> dans <a data-link-domain="umap-project.org" href="https://umap-project.org/fr/">uMap</a> était utilisable… et il se trouve que ce n’était pas le cas avant aujourd’hui. Il y aurait encore des pistes d’améliorations mais au moins ça affiche une carte (si vous autorisez les requêtes externes en&nbsp;JS)&nbsp;:</p>

  144. <style type="text/css">

  145.   o-embed {

  146.     /* Size of the oembed + paragraph + margins. */

  147.     height: calc(300px + 1rem + 3rem);

  148.   }

  149. </style>

  150. 

  151. <o-embed url="https://umap.openstreetmap.fr/fr/map/grand-tour-de-la-foret-de-ouareau_1037457">

  152.   <p>

  153.     Vous devriez voir s’afficher une carte de mon « Grand Tour de la forêt de Ouareau »,

  154.     il est probable que cela ne s’exécute pas dans un agrégateur par exemple.

  155.   </p>

  156. </o-embed>

  157. 

  158. <script type="module">

  159.   class OEmbed extends HTMLElement {

  160.     static tagName = 'o-embed'

  161. 

  162.     static register(tagName, registry) {

  163.       if(!registry && ('customElements' in globalThis)) {

  164.         registry = globalThis.customElements

  165.       }

  166.       registry?.define(tagName || this.tagName, this)

  167.     }

  168. 

  169.     get url() {

  170.       return this.getAttribute('url') || ''

  171.     }

  172. 

  173.     constructor() {

  174.       super()

  175.       this.attachShadow({ mode: 'open' })

  176.     }

  177. 

  178.     async connectedCallback() {

  179.       let slot = document.createElement('slot')

  180.       this.shadowRoot.appendChild(slot)

  181. 

  182.       const html = await this.fetchText(this.url)

  183.       const oEmbedLink = this.extractOembedLink(html)

  184.       const oEmbedJson = await this.fetchJson(oEmbedLink)

  185.       this.innerHTML = oEmbedJson.html

  186.     }

  187. 

  188.     fetchText(url) {

  189.       return fetch(url)

  190.         .then((data) => data.text())

  191.         .catch(console.error.bind(this))

  192.     }

  193. 

  194.     fetchJson(url) {

  195.       return fetch(url, { type: 'json' })

  196.         .then((data) => data.json())

  197.         .catch(console.error.bind(this))

  198.     }

  199. 

  200.     extractOembedLink(html) {

  201.       const parser = new DOMParser()

  202.       const htmlDocument = parser.parseFromString(html, "text/html")

  203.       const oEmbedMeta = htmlDocument.documentElement.querySelector(

  204.         'link[type="application/json+oembed"]'

  205.       )

  206.       return oEmbedMeta.href

  207.     }

  208.   }

  209. 

  210.   OEmbed.register()

  211. </script>

  212. 

  213. <p>J’en ai fait un <em>web component</em> car je compte explorer / publier davantage de cartes par la suite. Je vais essayer d’ajouter des options lorsqu’elles deviendront disponibles côté uMap. Pour l’instant, il faudra vous contenter d’un <code>view-source:</code> (meilleure fonctionnalité du Web, ne l’oublions&nbsp;jamais).</p>

  214. <p>Au passage, j’ai mis à jour le moteur de ce site pour pouvoir injecter des morceaux de HTML (et donc CSS/JS) sur des billets en particulier. Je m’amuse&nbsp;bien&nbsp;🧑‍🔬.</p>

  215. <p>Je compte <a href="/david/2024/03/11/#hr-109">reparler de cette carte</a>.</p>

  216. <a href="#hr-134" title="Lien vers cette section de la page"><hr id="hr-134" /></a>

  217. <p>Beaucoup moins glorieux, j’ai participé à <a data-link-domain="forum.openstreetmap.fr" href="https://forum.openstreetmap.fr/t/mise-en-production-umap-v2-1-x-compliquee-perte-des-dernieres-donnees-sauvegardees-sur-52-cartes/22336">de la perte de données</a> aujourd’hui. Nous avons eu besoin de trois cerveaux et pas mal d’heures pour comprendre ce qu’il se passait. Il était difficile de tester / imaginer / reproduire autrement que sur le serveur de production. C’est déjà pas mal d’avoir eu la possibilité de passer en lecture seule avant que ça ne touche trop de&nbsp;cartes.</p>

  218. <p>J’ai appris qu’il ne fallait pas se fier à l’ordre des IDs… lorsqu’ils deviennent des&nbsp;UUIDs&#8239;!</p>

  219. <a href="#hr-135" title="Lien vers cette section de la page"><hr id="hr-135" /></a>

  220. 

  221. <blockquote lang="en">

  222. <p>A data hoarder’s dream come true: bundle any web page into a single HTML file. You can finally replace that gazillion of open tabs with a gazillion of .html files stored somewhere on your precious little&nbsp;drive.</p>

  223. <p>Unlike the conventional “Save page as”, monolith not only saves the target document, <mark>it embeds CSS, image, and JavaScript assets all at once,</mark> producing a single HTML5 document that is a joy to store and&nbsp;share.</p>

  224. <p><cite><em><a data-link-domain="github.com" href="https://github.com/Y2Z/monolith">monolith</a></em></cite></p>

  225. </blockquote>

  226. <p>Je me demande si je ne devrais pas avoir recours à ce type d’outil plutôt que de n’extraire que la partie de HTML qui m’intéresse pour garder <a href="/david/2024/02/03/" title="Archives">une copie des liens</a> que je lie par ici. C’est pour l’instant un peu fastidieux mais ça me fait aussi découvrir des choses en explorant le code des&nbsp;autres.</p>

  227. <a href="#hr-136" title="Lien vers cette section de la page"><hr id="hr-136" /></a>

  228. 

  229. <blockquote lang="en">

  230. <p>For this reason, I got more into <mark>“Conflict-free Resolution Data Types” (CRDTs),</mark> with the goal of understanding what they are, how they work, what are the different libraries out there, and which one would be a good fit for us, if&nbsp;any.</p>

  231. <p><cite><em><a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/a-comparison-of-javascript-crdts.html" hreflang="fr"

  232.             title="Consultation de l’article">A comparison of JavaScript CRDTs</a>

  233.             <a href="/david/cache/2024/2c0b2588dfcd3a194da4133c7505cd3e/" hreflang="fr"

  234.                 data-tippy data-description=""

  235.                 data-source="https://blog.notmyidea.org/a-comparison-of-javascript-crdts.html"

  236.                 data-date="2024-03-25"

  237.                 data-favicon="https://blog.notmyidea.org/favicon-32x32.png"

  238.                 data-domain="blog.notmyidea.org"

  239.                 ><svg xmlns="http://www.w3.org/2000/svg"

  240.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  241.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  242.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  243.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  244.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  245.                 </svg>

  246.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  247. </blockquote>

  248. <p>J’apprends plein de choses à ce sujet grâce à Alexis, c’est chouette à explorer par&nbsp;procuration.</p>

  249. <a href="#hr-137" title="Lien vers cette section de la page"><hr id="hr-137" /></a>

  250. 

  251. <blockquote lang="en">

  252. <p>To summarize, digital information requires maintenance. It's not sufficient to make backups; the backups also need to be maintained, upgraded, transferred, and curated. Without conscientious care, the data of today will be lost forever in a few years. Even with care, it's possible through software or hardware changes to lose access forever. That shoebox of old backup CDs will be unreadable&nbsp;soon.</p>

  253. <p>Which brings us back to those old photo caches. They held negatives and prints, physical objects that stored images. They needed no attention, no curating, no updating. They sat untended and forgotten for decades, but through all that time faithfully held their information, waiting for a future discoverer. As a result, we can all see what the Scott Antarctic expedition saw, and I can see what my great-grandparents looked&nbsp;like.</p>

  254. <p><mark>It is a sad irony that modern technology makes it unlikely that future generations will see the images made&nbsp;today.</mark></p>

  255. <p>Ask yourself whether your great-grandchildren will be able to see your photographs. If the images exist only as a digital image file, the answer is almost certainly, &quot;No&quot;. If, however, there are physical prints, the odds improve. Those digital images need to be made real to endure. Without a print, a digital photograph has no&nbsp;future.</p>

  256. <p><cite><em><a data-link-domain="commandcenter.blogspot.com" href="https://commandcenter.blogspot.com/2014/08/prints.html" hreflang="en"

  257.             title="Consultation de l’article (anglais)">command center: Prints</a>

  258.             <a href="/david/cache/2024/46dc6f44f3e34c4c0626ad4b13dba768/" hreflang="en"

  259.                 data-tippy data-description="Two long-buried caches of photographs came to light last year. One was a stack of cellulose nitrate negatives made on the Scott Antarctic ex..."

  260.                 data-source="https://commandcenter.blogspot.com/2014/08/prints.html"

  261.                 data-date="2024-03-25"

  262.                 data-favicon="https://commandcenter.blogspot.com/favicon.ico"

  263.                 data-domain="commandcenter.blogspot.com"

  264.                 ><svg xmlns="http://www.w3.org/2000/svg"

  265.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  266.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  267.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  268.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  269.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  270.                 </svg>

  271.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  272. </blockquote>

  273. <p>Très vrai <em>et</em> je me demande si le fait d’avoir des artefacts qui perdurent sur plusieurs générations sans entretien / transmission n’est pas justement un épiphénomène. Le numérique est peut-être plus proche de la transmission orale, une information qui a besoin d’être appropriée par læ récepteur·ice pour qu’elle continue à&nbsp;vivre.</p>

  274. <p>Ce sera à moi d’apprendre à ma descendance comment garder en vie cette flamme numérique qui vacille à chaque coup de vent de format&nbsp;propriétaire.</p>

  275. 

  276.     

  277.       <nav>

  278.         <p>

  279.           

  280.             <a href="/david/2024/dependance/"

  281.                title="Liste de tous les articles 2024 associés à cette étiquette"

  282.                rel="tag">#dépendance</a>

  283.           

  284.             <a href="/david/2024/partage/"

  285.                title="Liste de tous les articles 2024 associés à cette étiquette"

  286.                rel="tag">#partage</a>

  287.           

  288.             <a href="/david/2024/technique/"

  289.                title="Liste de tous les articles 2024 associés à cette étiquette"

  290.                rel="tag">#technique</a>

  291.           

  292.           <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>

  293.         </p>

  294.       </nav>

  295.     

  296.   

  297.     <h2>

  298.       <a href="/david/2024/03/23/" title="Lien permanent vers cet article">Intendant</a> <time datetime="2024-03-23">23 mars 2024</time>

  299.     </h2>

  300.     

  301. 

  302. <blockquote lang="en">

  303. <p>In <a data-link-domain="andrewkelley.me" href="https://andrewkelley.me/post/why-we-cant-have-nice-software.html">Why We Can’t Have Nice Software</a>, I point out this pattern of needless software churn in the mindless quest for profit. This is a perfect example occurring right now. Redict has already reached its peak; it does not need any more serious software development to occur. It does not need to <a data-link-domain="redis.com" href="https://redis.com/blog/the-future-of-redis/">pivot to AI</a>. It can be maintained for decades to come with minimal effort. It can continue to provide a high amount of value for a low amount of labor. That’s the entire point of&nbsp;software!</p>

  304. <p>Redict does not have any profit left to offer. It no longer needs a fund-raising entity behind it anymore. <mark>It just needs a good project&nbsp;steward.</mark></p>

  305. <p><cite><em><a data-link-domain="andrewkelley.me" href="https://andrewkelley.me/post/redis-renamed-to-redict.html" hreflang="en"

  306.             title="Consultation de l’article (anglais)">Redis Renamed to Redict</a>

  307.             <a href="/david/cache/2024/d58c7619eec894c5c069244114ea1df5/" hreflang="en"

  308.                 data-tippy data-description="In other words, Redict is the true spiritual successor to what was once Redis."

  309.                 data-source="https://andrewkelley.me/post/redis-renamed-to-redict.html"

  310.                 data-date="2024-03-23"

  311.                 data-favicon=""

  312.                 data-domain="andrewkelley.me"

  313.                 ><svg xmlns="http://www.w3.org/2000/svg"

  314.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  315.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  316.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  317.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  318.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  319.                 </svg>

  320.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  321. </blockquote>

  322. <p>Je me pose beaucoup de questions sur cette notion de finitude logicielle. Et sur le fait de parfois créer ma propre nécessité, sans en avoir forcément conscience ou&nbsp;l’intention.</p>

  323. <p>J’y vois un parallèle avec une frugalité que je n’arrive pas à atteindre, les deux étant probablement&nbsp;liés.</p>

  324. <p>Il me reste encore tellement de choses à&nbsp;démêler…</p>

  325. <a href="#hr-130" title="Lien vers cette section de la page"><hr id="hr-130" /></a>

  326. 

  327. <blockquote lang="en">

  328. <p>So, yeah, I’ve been at this for a while, and this is the answer: Write CSS. Not too much. Mostly&nbsp;scoped.</p>

  329. <p>I’m sure we’ll never argue about how to manage CSS ever&nbsp;again.</p>

  330. <p><cite><em><a data-link-domain="leereamsnyder.com" href="https://www.leereamsnyder.com/write-css-not-too-much-mostly-scoped" hreflang="en"

  331.             title="Consultation de l’article (anglais)">Write CSS. Not too much. Mostly scoped.</a>

  332.             <a href="/david/cache/2024/4e116948ed4d26daa981a6c4ea9e4282/" hreflang="en"

  333.                 data-tippy data-description="Let’s talk about Tailwind and appease no one"

  334.                 data-source="https://www.leereamsnyder.com/write-css-not-too-much-mostly-scoped"

  335.                 data-date="2024-03-23"

  336.                 data-favicon="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%3e%3cstyle%3e%20@media%20(prefers-color-scheme:%20dark)%20{%20.lee%20{%20fill:%20%23FF4640;%20}%20.ream%20{%20fill:%20%23EC7F00;%20}%20.sny%20{%20fill:%20%23FFB258;%20}%20.der%20{%20fill:%20%23FFDFC6;%20}%20.letters%20{%20fill:%20%23373948;%20}%20}%20%3c/style%3e%3cpath%20class='lee'%20fill='%239B70FF'%20d='M0%203.066A3.066%203.066%200%200%201%203.066%200h57.868A3.066%203.066%200%200%201%2064%203.066v14.946H0V3.066Z'/%3e%3cpath%20class='ream'%20fill='%2300749D'%20d='M64%2034.108H0V15.713h64z'/%3e%3cpath%20class='sny'%20fill='%230092C5'%20d='M64%2031.808v20.695H0V31.808z'/%3e%3cpath%20class='der'%20fill='%238BCFFC'%20d='M64%2047.904v13.03A3.066%203.066%200%200%201%2060.934%2064H3.066A3.066%203.066%200%200%201%200%2060.934v-13.03h64Z'/%3e%3cg%20class='letters'%20fill='%23fff'%20fill-rule='nonzero'%3e%3cpath%20d='M13.275%2040.809c0-4.277%207.379-14.523%207.379-20.304%200-3.102-1.927-4.7-5.17-4.7-4.089%200-8.554%202.021-13.865%206.063a20.491%2020.491%200%200%201%202.726%204.277c3.807-3.055%206.016-4.559%207.849-4.559%201.081%200%201.457.517%201.457%201.363%200%203.76-6.956%2012.643-6.956%2019.458%200%204.136%202.444%206.063%207.144%206.063%205.687%200%2010.481-2.679%2016.215-9.494-1.175-.893-2.303-1.739-3.854-3.384-3.854%205.405-7.332%207.52-10.199%207.52-1.927%200-2.726-.846-2.726-2.303ZM50.286%2048c.33-1.692%201.128-3.431%201.833-5.17-.987.047-3.384.141-5.875.141-1.692%200-1.88-1.128-1.41-2.444%202.444-6.58%206.44-10.81%2010.575-10.81%201.363%200%202.491.423%203.243%201.41-.235-.047-.517-.047-.799-.047-2.538%200-3.9%201.739-3.9%203.76s1.268%203.29%203.336%203.29c3.29%200%204.935-3.431%204.935-7.332%200-3.619-1.692-6.627-5.687-6.627-4.183%200-7.52%203.055-10.763%209.87h-.423c.423-2.021.658-3.572.658-4.559%200-3.525-2.115-5.264-5.499-5.264-2.96%200-5.78%201.363-8.883%203.854.893.987%201.645%202.256%202.491%203.807%202.021-1.833%203.478-2.679%204.935-2.679%201.081%200%201.551.705%201.551%201.88%200%201.645-.94%205.311-2.726%209.776-.705%201.739-1.363%202.115-2.679%202.115-2.02%200-3.572-.141-4.324-.141-.329%201.692-1.08%203.431-1.786%205.17%202.632-.141%2018.33-.141%2021.197%200Z'/%3e%3c/g%3e%3c/svg%3e"

  337.                 data-domain="leereamsnyder.com"

  338.                 ><svg xmlns="http://www.w3.org/2000/svg"

  339.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  340.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  341.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  342.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  343.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  344.                 </svg>

  345.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  346. </blockquote>

  347. <p>Ça commence par le classique «&nbsp;pour ou contre Tailwind&nbsp;» mais après il y a des choses&nbsp;inspirantes.</p>

  348. <a href="#hr-131" title="Lien vers cette section de la page"><hr id="hr-131" /></a>

  349. 

  350. <blockquote lang="en">

  351. <p>quick q, however: how do they get off the worm when they’ve arrived at their&nbsp;destination</p>

  352. <p>keep noticing that the movie cuts before they get off, Denis my friend you can’t fool me, how do you stop riding the worm, answer&nbsp;us</p>

  353. <p><cite><em><a data-link-domain="youngvulgarian.substack.com" href="https://youngvulgarian.substack.com/p/sydney-sweeney-if-youre-free-on-thursday" hreflang="en"

  354.             title="Consultation de l’article (anglais)">Sydney Sweeney, if you’re free on Thursday,</a>

  355.             <a href="/david/cache/2024/0e3d54128711421c0878723dafed66e8/" hreflang="en"

  356.                 data-tippy data-description="Behold! I have had a thought."

  357.                 data-source="https://youngvulgarian.substack.com/p/sydney-sweeney-if-youre-free-on-thursday"

  358.                 data-date="2024-03-23"

  359.                 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%2Fdaf53371-1861-41b7-8e48-82787a877e62%2Ffavicon-16x16.png"

  360.                 data-domain="youngvulgarian.substack.com"

  361.                 ><svg xmlns="http://www.w3.org/2000/svg"

  362.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  363.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  364.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  365.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  366.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  367.                 </svg>

  368.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  369. </blockquote>

  370. <p>Tiens c’est vrai ça&#8239;! 🤔🤯</p>

  371. 

  372.     

  373.       <nav>

  374.         <p>

  375.           

  376.             <a href="/david/2024/dependance/"

  377.                title="Liste de tous les articles 2024 associés à cette étiquette"

  378.                rel="tag">#dépendance</a>

  379.           

  380.             <a href="/david/2024/psychologie/"

  381.                title="Liste de tous les articles 2024 associés à cette étiquette"

  382.                rel="tag">#psychologie</a>

  383.           

  384.             <a href="/david/2024/technique/"

  385.                title="Liste de tous les articles 2024 associés à cette étiquette"

  386.                rel="tag">#technique</a>

  387.           

  388.           <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>

  389.         </p>

  390.       </nav>

  391.     

  392.   

  393.     <h2>

  394.       <a href="/david/2024/03/11/" title="Lien permanent vers cet article">LoginWall</a> <time datetime="2024-03-11">11 mars 2024</time>

  395.     </h2>

  396.     

  397. 

  398. <blockquote lang="en">

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

  400. <p>[…]</p>

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

  402. <p><cite><em><a data-link-domain="lmnt.me" href="https://lmnt.me/blog/web-independence.html" hreflang="en"

  403.             title="Consultation de l’article (anglais)">Web Independence</a>

  404.             <a href="/david/cache/2024/ce6e3472d21a189dc76b3fc6e6f1b49c/" hreflang="en"

  405.                 data-tippy data-description="Be independent. We can build things on the web without them. Better things."

  406.                 data-source="https://lmnt.me/blog/web-independence.html"

  407.                 data-date="2024-03-11"

  408.                 data-favicon="https://lmnt.me/lmnt.png"

  409.                 data-domain="lmnt.me"

  410.                 ><svg xmlns="http://www.w3.org/2000/svg"

  411.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  412.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  413.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  414.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  415.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  416.                 </svg>

  417.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  418. </blockquote>

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

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

  421. <p>Et je ne parle même pas de ce qui se passe sur&nbsp;Facebook.</p>

  422. <a href="#hr-108" title="Lien vers cette section de la page"><hr id="hr-108" /></a>

  423. 

  424. <blockquote lang="en">

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

  426. <p><cite><em><a data-link-domain="alexsirac.com" href="https://alexsirac.com/accessibility-notes/" hreflang="fr"

  427.             title="Consultation de l’article">Accessibility notes from your headache-prone friend</a>

  428.             <a href="/david/cache/2024/4dc1c2edacf179310783146044f0d06e/" hreflang="fr"

  429.                 data-tippy data-description=""

  430.                 data-source="https://alexsirac.com/accessibility-notes/"

  431.                 data-date="2024-03-11"

  432.                 data-favicon="https://alexsirac.com/wp-content/uploads/2023/01/cropped-cropped-portraitplante-32x32.webp"

  433.                 data-domain="alexsirac.com"

  434.                 ><svg xmlns="http://www.w3.org/2000/svg"

  435.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  436.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  437.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  438.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  439.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  440.                 </svg>

  441.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  442. </blockquote>

  443. <p>Je ne connaissais pas le nom de cet effet, j’espère le retenir en le notant ici. Merci&nbsp;Alex&#8239;!</p>

  444. <p><mark>Lu le lendemain</mark> <a data-link-domain="toot.cat" href="https://toot.cat/@nickcolley/112073548430975046">sur masto</a>&nbsp;:</p>

  445. 

  446. <blockquote lang="en">

  447. <p>It is true that meeting the needs of many disabled people makes services better for non-disabled&nbsp;people.</p>

  448. <p>It is wrong though to say that all accessibility efforts benefit non-disabled&nbsp;people.</p>

  449. <p>They don’t, meeting some access needs <em>only</em> benefit some disabled&nbsp;people.</p>

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

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

  452. </blockquote>

  453. <a href="#hr-109" title="Lien vers cette section de la page"><hr id="hr-109" /></a>

  454. <figure>

  455.     <a href="/static/david/2024/2024-03-11-parcours-ouareau.png"

  456.         title="Cliquer pour une version haute résolution">

  457.         <img

  458.             src="/static/david/2024/2024-03-11-parcours-ouareau.png"

  459.             width="1294" height="1108"

  460.             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"

  461.             sizes="min(100vw, calc(100vh * 1294 / 1108))"

  462.             loading="lazy"

  463.             decoding="async"

  464.             alt="Capture d’écran d’un parcours sur 4&nbsp;jours avec une soixantaine de kilomètres.">

  465.     </a>

  466.     <figcaption>Si ma cheville le&nbsp;permet.</figcaption>

  467. </figure>

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

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

  470. 

  471.     

  472.       <nav>

  473.         <p>

  474.           

  475.             <a href="/david/2024/decentralisation/"

  476.                title="Liste de tous les articles 2024 associés à cette étiquette"

  477.                rel="tag">#décentralisation</a>

  478.           

  479.             <a href="/david/2024/dependance/"

  480.                title="Liste de tous les articles 2024 associés à cette étiquette"

  481.                rel="tag">#dépendance</a>

  482.           

  483.             <a href="/david/2024/web/"

  484.                title="Liste de tous les articles 2024 associés à cette étiquette"

  485.                rel="tag">#web</a>

  486.           

  487.           <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>

  488.         </p>

  489.       </nav>

  490.     

  491.   

  492.     <h2>

  493.       <a href="/david/2024/03/03/" title="Lien permanent vers cet article">Permanence</a> <time datetime="2024-03-03">3 mars 2024</time>

  494.     </h2>

  495.     

  496. 

  497. <blockquote lang="en">

  498. <p>Eventually, I started asking myself: <mark><em>why am I promising permanence?</em></mark> The answer crept up on me: <em>because permanence is better than nothing.</em> Without the momentum of obligation, I didn’t trust myself to begin anything in&nbsp;earnest.</p>

  499. <p>The thing is, it never worked. The half-life of obligation is short; the half-life of guilt is long. Promises never saved one of my side projects, but they clogged many nights and weekends with the gunk of regret. Something had to&nbsp;change.</p>

  500. <p><cite><em><a data-link-domain="dianaberlin.com" href="https://dianaberlin.com/posts/no-more-forever-projects" hreflang="en"

  501.             title="Consultation de l’article (anglais)">No more forever projects</a>

  502.             <a href="/david/cache/2024/4c8a04c4c0e928bd78f22db77425bb47/" hreflang="en"

  503.                 data-tippy data-description="It took me a long time to see past forever projects.  I told myself that making promises gave beginnings gravity. I labeled  my newsletter &nbsp;a “lifelong project” not long after I started it. I called  /mentoring  a “movement” the day I announced it. Commitment marked a project as something w"

  504.                 data-source="https://dianaberlin.com/posts/no-more-forever-projects"

  505.                 data-date="2024-03-03"

  506.                 data-favicon="https://images.squarespace-cdn.com/content/v1/598927e3bebafbda588a07e2/1504459315187-9G9MSVDRY4HEGXNT8JAL/favicon.ico"

  507.                 data-domain="dianaberlin.com"

  508.                 ><svg xmlns="http://www.w3.org/2000/svg"

  509.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  510.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  511.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  512.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  513.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  514.                 </svg>

  515.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  516. </blockquote>

  517. <p>Je vais aller m’enforester avec cette question. Le refuge ne va pas être accessible via la piste de ski (de fond), plus assez de&nbsp;neige.</p>

  518. <p>Un 3&nbsp;mars, au nord de&nbsp;Montréal.</p>

  519. <a href="#hr-97" title="Lien vers cette section de la page"><hr id="hr-97" /></a>

  520. 

  521. <blockquote>

  522. <p>Ces chaleurs extrêmes de 2023&nbsp;ont moins à voir avec le développement d’El Niño qu’avec les conditions anticycloniques de la zone. <em>«&nbsp;On a observé une baisse des vents assez forte sur l’Atlantique Nord,</em> explique Christophe Cassou. <em>Or quand il y a moins de vent, il y a moins d’évaporation, ce qui conduit à un réchauffement des eaux de surface. Ces eaux chauffent aussi car elles se mélangent moins avec les eaux plus profondes et plus&nbsp;froides.&nbsp;»</em></p>

  523. <p>Aujourd’hui, cette configuration météorologique a disparu mais les eaux de surface de l’Atlantique Nord continuent de battre des records de chaleur à cause du phénomène El Niño, qui a fini par réchauffer progressivement les eaux de l’océan pendant&nbsp;l’hiver.</p>

  524. <p><cite><em><a data-link-domain="lemonde.fr" href="https://www.lemonde.fr/les-decodeurs/article/2024/03/03/climat-pourquoi-les-temperatures-battent-tous-les-records-depuis-la-mi-2023_6219806_4355770.html" hreflang="fr"

  525.             title="Consultation de l’article">Climat&nbsp;: pourquoi les températures battent tous les records depuis la mi-2023</a>

  526.             <a href="/david/cache/2024/6fc45aab6c9584cbb6f55ef70a685d01/" hreflang="fr"

  527.                 data-tippy data-description="L’année 2023 a été classée comme la plus chaude enregistrée depuis 1850, avec 14,98 °C de moyenne sur l’ensemble du globe. La tendance continue en 2024. Le principal coupable : le réchauffement lié aux gaz à effet de serre d’origine humaine."

  528.                 data-source="https://www.lemonde.fr/les-decodeurs/article/2024/03/03/climat-pourquoi-les-temperatures-battent-tous-les-records-depuis-la-mi-2023_6219806_4355770.html"

  529.                 data-date="2024-03-03"

  530.                 data-favicon="https://www.lemonde.fr/dist/assets/img/logos/pwa-180.png"

  531.                 data-domain="lemonde.fr"

  532.                 ><svg xmlns="http://www.w3.org/2000/svg"

  533.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  534.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  535.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  536.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  537.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  538.                 </svg>

  539.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  540. </blockquote>

  541. <p>Les Décodeurs m’offrent une grille de lecture des phénomènes en cours&nbsp;intéressante.</p>

  542. <a href="#hr-98" title="Lien vers cette section de la page"><hr id="hr-98" /></a>

  543. 

  544. <blockquote lang="en">

  545. <p>From pragma directives, to async scripts, to stylesheets, to open graph tags, it’s easy to mess up and can have consequences. Capo.js will show you the <a data-link-domain="rviscomi.github.io" href="https://rviscomi.github.io/capo.js/user/rules/">specific order of elements</a> to make your <code>&lt;head&gt;</code> and your page a little (or a lotta) bit&nbsp;faster.</p>

  546. <p><cite><em><a data-link-domain="frontendmasters.com" href="https://frontendmasters.com/blog/capo-js-a-five-minute-web-performance-boost/" hreflang="en"

  547.             title="Consultation de l’article (anglais)">Capo.js: A five minute web performance boost</a>

  548.             <a href="/david/cache/2024/a122504621c3c5318c0bdee38ef4479b/" hreflang="en"

  549.                 data-tippy data-description="You want a quick web performance win at work that’s sure to get you a promotion? Want it to only take five minutes? Then I got you. Capo.js is a tool to get your <head> in order. It’s based o…"

  550.                 data-source="https://frontendmasters.com/blog/capo-js-a-five-minute-web-performance-boost/"

  551.                 data-date="2024-03-03"

  552.                 data-favicon="https://frontendmasters.com/favicon-32x32.png"

  553.                 data-domain="frontendmasters.com"

  554.                 ><svg xmlns="http://www.w3.org/2000/svg"

  555.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  556.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  557.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  558.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  559.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  560.                 </svg>

  561.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  562. </blockquote>

  563. <p>Il est aussi possible d’<a data-link-domain="rviscomi.github.io" href="https://rviscomi.github.io/capo.js/user/demo/">utiliser la démo</a> sans installer aucun JS en copiant du HTML ou en pointant vers une page. J’ai du mal à évaluer à quel point c’est pertinent pour cet espace, peut-être davantage dans des <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/js-bloat/" hreflang="en"

  564.             title="Consultation de l’article (anglais)">contextes sans prise de soin</a>

  565.             <a href="/david/cache/2024/ad911ebf7ba5523ef0be1bdd599f7623/" hreflang="en"

  566.                 data-tippy data-description="What is the average size of JavaScript code downloaded per website? Fuck around and find out!"

  567.                 data-source="https://tonsky.me/blog/js-bloat/"

  568.                 data-date="2024-03-03"

  569.                 data-favicon="https://tonsky.me/i/favicon.png"

  570.                 data-domain="tonsky.me"

  571.                 ><svg xmlns="http://www.w3.org/2000/svg"

  572.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  573.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  574.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  575.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  576.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  577.                 </svg>

  578.                 <span class="sr-only">[archive]</span></a> qui semblent être la norme&nbsp;aujourd’hui.</p>

  579. <a href="#hr-99" title="Lien vers cette section de la page"><hr id="hr-99" /></a>

  580. 

  581. <blockquote>

  582. <p>Rêve de la nuit&nbsp;dernière</p>

  583. <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/02/20/reve" hreflang="fr"

  584.             title="Consultation de l’article">rêve - Carnets Web de La Grange</a>

  585.             <a href="/david/cache/2024/24716a84007189a332fd8db3e5ff4c05/" hreflang="fr"

  586.                 data-tippy data-description=""

  587.                 data-source="https://www.la-grange.net/2024/02/20/reve"

  588.                 data-date="2024-03-03"

  589.                 data-favicon="https://www.la-grange.net/favicon.ico"

  590.                 data-domain="la-grange.net"

  591.                 ><svg xmlns="http://www.w3.org/2000/svg"

  592.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  593.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  594.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  595.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  596.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  597.                 </svg>

  598.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  599. </blockquote>

  600. <p>💚</p>

  601. 

  602.     

  603.       <nav>

  604.         <p>

  605.           

  606.             <a href="/david/2024/dependance/"

  607.                title="Liste de tous les articles 2024 associés à cette étiquette"

  608.                rel="tag">#dépendance</a>

  609.           

  610.             <a href="/david/2024/opensource/"

  611.                title="Liste de tous les articles 2024 associés à cette étiquette"

  612.                rel="tag">#opensource</a>

  613.           

  614.             <a href="/david/2024/parvenir/"

  615.                title="Liste de tous les articles 2024 associés à cette étiquette"

  616.                rel="tag">#parvenir</a>

  617.           

  618.           <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>

  619.         </p>

  620.       </nav>

  621.     

  622.   

  623.     <h2>

  624.       <a href="/david/2024/03/02/" title="Lien permanent vers cet article">Montre</a> <time datetime="2024-03-02">2 mars 2024</time>

  625.     </h2>

  626.     

  627. <p>J’ai une <a data-link-domain="suunto.com" href="https://www.suunto.com/fr-ca/Produits/Montres-de-sport/Suunto-Ambit/Suunto-Ambit-Black/" hreflang="fr"

  628.             title="Consultation de l’article">Suunto Ambit Black</a>

  629.             <a href="/david/cache/2024/4050651a19400713c8563166e2a9abd5/" hreflang="fr"

  630.                 data-tippy data-description="La qualifier de simple montre serait un peu réducteur."

  631.                 data-source="https://www.suunto.com/fr-ca/Produits/Montres-de-sport/Suunto-Ambit/Suunto-Ambit-Black/"

  632.                 data-date="2024-03-02"

  633.                 data-favicon="https://www.suunto.com/favicon-16x16.png"

  634.                 data-domain="suunto.com"

  635.                 ><svg xmlns="http://www.w3.org/2000/svg"

  636.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  637.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  638.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  639.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  640.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  641.                 </svg>

  642.                 <span class="sr-only">[archive]</span></a> achetée il y a une douzaine d’années. (Merci à Suunto de garder une page avec les caractéristiques d’un produit qui n’est plus construit / vendu&#8239;! C’est notamment utile pour comparer les spécifications de taille et poids.) Je me demandais si les montres actuelles allaient pouvoir résister à une <a href="/david/2024/02/24/" title="Jour 1">température inférieure à -20°C</a> et il semblerait que ce ne soit pas le cas, tous les modèles que j’ai consulté spécifient clairement que c’est la limite&nbsp;basse.</p>

  643. <figure>

  644.     <a href="/static/david/2024/2024-03-02-coros-apex-2-temperatures.png"

  645.         title="Cliquer pour une version haute résolution">

  646.         <img

  647.             src="/static/david/2024/2024-03-02-coros-apex-2-temperatures.png"

  648.             width="2390" height="1306"

  649.             srcset="/static/david/2024/2024-03-02-coros-apex-2-temperatures.png 2390w, /static/david/2024/2024-03-02-coros-apex-2-temperatures.png 660w, /static/david/2024/2024-03-02-coros-apex-2-temperatures.png 990w, /static/david/2024/2024-03-02-coros-apex-2-temperatures.png 1320w"

  650.             sizes="min(100vw, calc(100vh * 2390 / 1306))"

  651.             loading="lazy"

  652.             decoding="async"

  653.             alt="Capture d’écran pour la Coros Apex 2&nbsp;qui va de -20°C à 50°C.">

  654.     </a>

  655.     <figcaption>Même Kiki a du mal par -20°C&nbsp;!</figcaption>

  656. </figure>

  657. <p><em>Détail marrant&nbsp;: Kilian Jornet était déjà sur les photos de promotion de la Suunto Ambit Black et on le retrouve sur la Coros Apex 2&nbsp;Pro&nbsp;d’aujourd’hui.</em></p>

  658. <p>Au-delà de l’aspect scientifique d’envisager une montre qui résiste aux températures locales, il y a une <a href="/david/2024/01/27/" title="Jour 1">situation récente</a> qui me reste en tête aussi (ce n’est <a href="/david/2020/12/18/">pas la première fois</a>, et ce ne sera certainement pas la dernière). Une position GPS précise aurait certainement pu m’aider dans ce cas là, si je n’avais pas été trop entêté pour ne pas la consulter. J’envisage aussi des <a href="/david/2024/01/06/" title="Objectif">objectifs</a> sur lesquels j’ai besoin de me rassurer / entraîner spécifiquement en ayant une idée des distances que je pourrais parcourir dans un contexte donné que j’envisage plus rapide que ce que j’ai l’habitude de&nbsp;faire.</p>

  659. <p>Je cherche en priorité une montre qui affiche un fond de carte, ce n’est pas tant ma trace programmée que ce qu’il y a autour qui m’intéresse dans d’autres contextes exploratoires. Sur ma montre actuelle, je ne pouvais qu’enregistrer une trace à suivre qui m’indiquait les déviations mais <em>pour ma pratique</em> ce n’était pas très intéressant. Savoir qu’il y a un lac / chemin forestier à proximité peut changer ma sortie. Difficile de savoir <em>a priori</em> si les données pour mes lieux de balade seront à jour ou suffisamment&nbsp;détaillées.</p>

  660. <p>J’ai regardé l’Apple Watch Ultra 2, la Suunto Vertical Titanium Solar, des Garmin d’«&nbsp;aventure&nbsp;» et finalement la Coros Apex 2 (Pro). Dans tous les cas, ce sont de grosses montres et j’ai un poignet fin. Dans tous les cas, le <em>marketing</em> est complètement délirant&nbsp;🙃. Sans compter le prix. La Coros semble être la moins chère (!) qui réponde à l’ensemble de mes attentes, la version Pro ayant une meilleure précision GPS et autonomie, ce qui m’importe&nbsp;beaucoup.</p>

  661. <p>Ah, <a href="/david/2024/02/07/#hr-69">aussi</a>. Difficile à justifier, même amortie sur la prochaine décennie… et c’est d’ailleurs là où j’ai de sérieux doutes en terme d’obsolescence programmée, ce qui a duré 10&nbsp;ans ne durera probablement plus 10&nbsp;ans. Triste réalité. J’essaye de ne pas trop me demande si <em>je</em> vais être capable de passer encore une décennie à arpenter la&nbsp;forêt.</p>

  662. <p><strong>Montre</strong> moi tes peurs et je te dirai comment les&nbsp;acheter.</p>

  663. <p><em>P.S.&nbsp;: j’ai un petit truc qui me gratte aussi dans le fait de ne pas être utilisateur régulier de <a data-link-domain="umap-project.org" href="https://umap-project.org/fr/">uMap</a>, ce qui est un manque à différents niveaux. Avoir davantage de données me motiverait certainement à jouer avec. Il y a des lieux que je veux garder intimes et d’autres qui sont déjà bien publics. J’ai une vieille envie de pouvoir raconter mes sorties sur un fond de carte à la <a data-link-domain="storymap.knightlab.com" href="https://storymap.knightlab.com/">StoryMap</a> (<a data-link-domain="github.com" href="https://github.com/slead/leaflet-storymap">avec Leaflet&#8239;?</a>) pour agrémenter les récits de sons et images correspondants aux lieux&nbsp;parcourus.</em></p>

  664. 

  665.     

  666.       <nav>

  667.         <p>

  668.           

  669.             <a href="/david/2024/dependance/"

  670.                title="Liste de tous les articles 2024 associés à cette étiquette"

  671.                rel="tag">#dépendance</a>

  672.           

  673.             <a href="/david/2024/sport/"

  674.                title="Liste de tous les articles 2024 associés à cette étiquette"

  675.                rel="tag">#sport</a>

  676.           

  677.             <a href="/david/2024/technique/"

  678.                title="Liste de tous les articles 2024 associés à cette étiquette"

  679.                rel="tag">#technique</a>

  680.           

  681.           <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>

  682.         </p>

  683.       </nav>

  684.     

  685.   

  686.     <h2>

  687.       <a href="/david/2024/02/18/" title="Lien permanent vers cet article">In·directions</a> <time datetime="2024-02-18">18 février 2024</time>

  688.     </h2>

  689.     

  690. 

  691. <blockquote lang="en">

  692. <p>Any time you have a design that references the same value across multiple pieces of UI, I’d suggest that is an opportunity for <mark>abstracting</mark> that value into a name that better describes the intention of the value in the&nbsp;design.</p>

  693. <p><cite><em><a data-link-domain="jwdallas.com" href="https://jwdallas.com/posts/namingcssvariables/" hreflang="en"

  694.             title="Consultation de l’article (anglais)">Naming Variables In CSS</a>

  695.             <a href="/david/cache/2024/d0ffe1891c332b6fc6e7d7826d8489da/" hreflang="en"

  696.                 data-tippy data-description="Some collected thoughts around how to name variables in CSS. Ideas, conventions, and some do's and don't for consideration."

  697.                 data-source="https://jwdallas.com/posts/namingcssvariables/"

  698.                 data-date="2024-02-18"

  699.                 data-favicon="https://jwdallas.com/icons/favicon.ico"

  700.                 data-domain="jwdallas.com"

  701.                 ><svg xmlns="http://www.w3.org/2000/svg"

  702.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  703.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  704.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  705.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  706.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  707.                 </svg>

  708.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  709. </blockquote>

  710. <p>Je me demande souvent quel est le bon niveau hiérarchique au sein des CSS modernes. L’approche constatée actuelle semble être de mettre des variables par couleur (par exemple) puis ensuite définir des variables intermédiaires pour leur donner un sens pour un contexte&nbsp;donné.</p>

  711. <pre><code>:root {

  712.   --umap-color-darkBlue: #263B58;

  713. }

  714. button {

  715.   --color-primary: var(--umap-color-darkBlue);

  716. }

  717. button.primary {

  718.   background-color: var(--color-primary);

  719. }

  720. </code></pre>

  721. <p>Il s’agit ici de partir d’un exemple simpliste mais concret. J’imagine qu’il y a autant de dévelopeur·euse que de façon d’écrire ces 3&nbsp;seules déclarations&nbsp;:). Pourquoi <code>:root</code> et pas <code>html</code>&#8239;? Est-ce qu’il faut définir les couleurs primaires sur le <code>button</code> ou sur <code>form, nav</code>&#8239;? Ou faire sauter cet intermédiaire&#8239;? Est-ce qu’il faut <code>button.primary</code>, <code>.primary</code>, <code>.button-primary</code>, <code>.button.button-primary</code>&#8239;? Etc, etc.</p>

  722. <p>Et je ne mentionne même pas les solutions à partir de <code>:host</code> / <code>:host-context()</code> ou <code>:scope</code> qui sont encore d’autres façons de faire qui sont peut-être amenées à devenir&nbsp;populaires.</p>

  723. <p>Venant d’un langage dont l’<a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Zen_of_Python">un des mantras</a> est <q lang="en">There should be one-- and preferably only one --obvious way to do it.</q>, il est plus difficile de se retrouver devant une telle… flexibilité&#8239;? Lorsqu’on envisage un commun sur ces 10&nbsp;prochaines années, comment trouver une stratégie maintenable qui s’inscrira dans la durée avec&nbsp;enthousiasme&#8239;?</p>

  724. <p>Ce qui est certain, c’est que l’approche de Tailwind ne me convient pas du&nbsp;tout.</p>

  725. 

  726. <blockquote lang="en">

  727. <p>To keep up with the ever-evolving CSS standard Tailwind introduced another set of language literals. Over the years Tailwind has grown from a simple set of atoms to a <mark>vendor-specific</mark> language with expressions, operators, and method&nbsp;calls.</p>

  728. <p><cite><em><a data-link-domain="nuejs.org" href="https://nuejs.org/blog/tailwind-misinformation-engine/" hreflang=""

  729.             title="Consultation de l’article">Tailwind marketing and misinformation engine</a>

  730.             <a href="/david/cache/2024/44c12c8fbb59c7239f0f3b04bae189b7/" hreflang=""

  731.                 data-tippy data-description="The origins of Tailwind and how it is framed against semantic CSS"

  732.                 data-source="https://nuejs.org/blog/tailwind-misinformation-engine/"

  733.                 data-date="2024-02-18"

  734.                 data-favicon="https://nuejs.org/img/favicon.svg"

  735.                 data-domain="nuejs.org"

  736.                 ><svg xmlns="http://www.w3.org/2000/svg"

  737.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  738.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  739.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  740.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  741.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  742.                 </svg>

  743.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  744. </blockquote>

  745. <a href="#hr-77" title="Lien vers cette section de la page"><hr id="hr-77" /></a>

  746. 

  747. <blockquote lang="en">

  748. <p><em>File over app</em> is a philosophy: if you want to create digital artifacts that last, they must be files you can control, in formats that are easy to retrieve and read. <mark>Use tools that give you this&nbsp;freedom.</mark></p>

  749. <p><em>File over app</em> is an appeal to tool makers: accept that all software is ephemeral, and give people ownership over their&nbsp;data.</p>

  750. <p><cite><em><a data-link-domain="stephango.com" href="https://stephango.com/file-over-app" hreflang="en"

  751.             title="Consultation de l’article (anglais)">File over app - Steph Ango</a>

  752.             <a href="/david/cache/2024/20d288eb47779c4f1b3f36fb86aa7108/" hreflang="en"

  753.                 data-tippy data-description="If you want to create digital artifacts that last, they must be files you can control, in formats that are easy to retrieve and read. Use tools that give you..."

  754.                 data-source="https://stephango.com/file-over-app"

  755.                 data-date="2024-02-18"

  756.                 data-favicon="https://stephango.com/icon.svg"

  757.                 data-domain="stephango.com"

  758.                 ><svg xmlns="http://www.w3.org/2000/svg"

  759.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  760.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  761.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  762.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  763.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  764.                 </svg>

  765.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  766. </blockquote>

  767. <a href="#hr-78" title="Lien vers cette section de la page"><hr id="hr-78" /></a>

  768. 

  769. <blockquote lang="en">

  770. <p>Learn about the systems that already exist, and build on them rather than around them. If an existing system doesn’t do what you want, maybe the problem is in the design of your system, not that&nbsp;one.</p>

  771. <p>If you do build a new component, make sure it’s of general utility. Don’t build infrastructure that solves only the problems of your own&nbsp;team.</p>

  772. <p>It’s easy to build complexity. In the rush to launch, it’s quicker and easier to code than to redesign. <mark>But the costs accumulate and you lose in the long&nbsp;run.</mark></p>

  773. <p><cite><em><a data-link-domain="commandcenter.blogspot.com" href="https://commandcenter.blogspot.com/2023/12/simplicity.html" hreflang="en"

  774.             title="Consultation de l’article (anglais)">command center: Simplicity</a>

  775.             <a href="/david/cache/2024/6b26bff7f4772cf8fb78878ff4f9594f/" hreflang="en"

  776.                 data-tippy data-description="In May 2009, Google hosted an internal  Design Wizardry  panel, with talks by Jeff Dean,  Mike Burrows, Paul Haahr, Alfred Spector, Bill Cou..."

  777.                 data-source="https://commandcenter.blogspot.com/2023/12/simplicity.html"

  778.                 data-date="2024-02-18"

  779.                 data-favicon="https://commandcenter.blogspot.com/favicon.ico"

  780.                 data-domain="commandcenter.blogspot.com"

  781.                 ><svg xmlns="http://www.w3.org/2000/svg"

  782.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  783.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  784.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  785.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  786.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  787.                 </svg>

  788.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  789. </blockquote>

  790. 

  791.     

  792.       <nav>

  793.         <p>

  794.           

  795.             <a href="/david/2024/commun/"

  796.                title="Liste de tous les articles 2024 associés à cette étiquette"

  797.                rel="tag">#commun</a>

  798.           

  799.             <a href="/david/2024/dependance/"

  800.                title="Liste de tous les articles 2024 associés à cette étiquette"

  801.                rel="tag">#dépendance</a>

  802.           

  803.             <a href="/david/2024/technique/"

  804.                title="Liste de tous les articles 2024 associés à cette étiquette"

  805.                rel="tag">#technique</a>

  806.           

  807.           <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>

  808.         </p>

  809.       </nav>

  810.     

  811.   

  812.     <h2>

  813.       <a href="/david/2024/02/03/" title="Lien permanent vers cet article">Archives</a> <time datetime="2024-02-03">3 février 2024</time>

  814.     </h2>

  815.     

  816. 

  817. <blockquote lang="en">

  818. <p>Google will no longer be keeping a backup of the entire Internet. Google Search’s “cached” links have long been an alternative way to load a website that was down or had changed, but now the company is killing them off. Google “Search Liaison” Danny Sullivan confirmed the feature removal in an X post, saying the feature “was meant for helping people access pages when way back, you often couldn’t depend on a page loading. These days, <mark>things have greatly improved.</mark> So, it was decided to retire&nbsp;it.”</p>

  819. <p><cite><em><a data-link-domain="arstechnica.com" href="https://arstechnica.com/gadgets/2024/02/google-search-kills-off-cached-webpages/" hreflang="en"

  820.             title="Consultation de l’article (anglais)">Google will no longer back up the Internet: Cached webpages are dead</a>

  821.             <a href="/david/cache/2024/75c7b6350ba18a5a11ee3bbf8b3b64be/" hreflang="en"

  822.                 data-tippy data-description="Google Search will no longer make site backups while crawling the web."

  823.                 data-source="https://arstechnica.com/gadgets/2024/02/google-search-kills-off-cached-webpages/"

  824.                 data-date="2024-02-03"

  825.                 data-favicon="https://cdn.arstechnica.net/wp-content/themes/ars/assets/img/material-ars-db41652381.png"

  826.                 data-domain="arstechnica.com"

  827.                 ><svg xmlns="http://www.w3.org/2000/svg"

  828.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  829.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  830.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  831.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  832.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  833.                 </svg>

  834.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  835. </blockquote>

  836. <p><em>(rires)</em></p>

  837. <p>Forcément en lisant ça un samedi matin, j’étais immédiatement motivé pour améliorer la façon dont j’archive les liens par ici. À commencer par des méta-données qui permettraient d’avoir une prévisualisation des liens un peu&nbsp;enrichie.</p>

  838. <p>Je me dis que je ne dois pas être le seul à essayer d’extraire des informations des pages. Et j’en trouve pas mal&nbsp;: <a data-link-domain="github.com" href="https://github.com/gri38/hyperlink_preview">hyperlink_preview</a>, <a data-link-domain="github.com" href="https://github.com/scrapinghub/extruct">extruct</a> ou <a data-link-domain="github.com" href="https://github.com/seanbreckenridge/url_cache">url_cache</a> pour ne citer qu’eux. Cela me met sur la piste de <a data-link-domain="github.com" href="https://github.com/michaelhelmick/lassie">Lassie</a> qui semble extraire ce que j’aimerais avoir&nbsp;: une image ou favicon, potentiellement une description, ainsi qu’une langue. Jake Lazaroff m’avait <a href="/david/2024/02/01/#hr-60">depuis répondu</a> qu’il génère en fait ses vignettes au moment de la <a data-link-domain="gist.github.com" href="https://gist.github.com/jakelazaroff/36b9665efe02870576acfc033171d6bf">construction du site</a>. Je ne veux pas totalement suivre cette approche car je ne veux pas stocker d’images additionnelles mais je vais essayer d’avoir une solution&nbsp;hybride.</p>

  839. <p>Cela m’embête de plus en plus de coupler le générateur de site aux (méta-)données des archives. <em>À&nbsp;méditer.</em></p>

  840. <p>Pour ce qui est de l’interface, ça attendra un autre jour. J’ai tout de même ajouté des attributs <code>hreflang</code> et la bonne langue dans les pages d’archives, un truc qui me grattait depuis un bout de&nbsp;temps.</p>

  841. <a href="#hr-62" title="Lien vers cette section de la page"><hr id="hr-62" /></a>

  842. <p>Cela fait <a href="/david/2020/02/07/#sonos">bien longtemps</a> que je regrette d’avoir acheté des enceintes Sonos. Hier —&nbsp;encore une fois frustré par l’application proposée par défaut&nbsp;— je découvre <a data-link-domain="github.com" href="https://github.com/SoCo/SoCo">SoCo</a> ainsi que <a data-link-domain="github.com" href="https://github.com/avantrec/soco-cli">soco-cli</a> après quelques recherches. Je passe ensuite la soirée à batailler avec Automator pour pouvoir faire un clic-droit sur un dossier local et que ça me lise les fichiers FLAC qui sont&nbsp;dedans.</p>

  843. <p>J’arrive à la solution&nbsp;suivante&nbsp;:</p>

  844. <pre><code>on run {input, parameters}

  845.     tell application &quot;Terminal&quot;

  846.         do script &quot;cd ~/sonos &amp;&amp; sonos Chambre play_dir '&quot; &amp; (POSIX path of input) &amp; &quot;'&quot;

  847.     end tell

  848.     return input

  849. end run

  850. </code></pre>

  851. <p>Ce n’est pas très élégant et je n’ai pas réussi à faire en sorte que ça se lance dans iTerm mais au moins ça joue de la&nbsp;musique.</p>

  852. <a href="#hr-63" title="Lien vers cette section de la page"><hr id="hr-63" /></a>

  853. 

  854. <blockquote lang="en">

  855. <p><strong>drab</strong> focuses on providing JavaScript functionality where it’s most useful. Many of the elements are helpful wrappers <mark>around browser APIs.</mark> Here are some of the features of the&nbsp;library.</p>

  856. <p><cite><em><a data-link-domain="drab.robino.dev" href="https://drab.robino.dev/" hreflang="en"

  857.             title="Consultation de l’article (anglais)">drab - A Headless Custom Element Library</a>

  858.             <a href="/david/cache/2024/2a1235215c277ebb8a0e9acb7ffd91e0/" hreflang="en"

  859.                 data-tippy data-description="A headless custom element library."

  860.                 data-source="https://drab.robino.dev/"

  861.                 data-date="2024-02-03"

  862.                 data-favicon="https://drab.robino.dev/favicon.svg"

  863.                 data-domain="drab.robino.dev"

  864.                 ><svg xmlns="http://www.w3.org/2000/svg"

  865.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  866.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  867.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  868.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  869.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  870.                 </svg>

  871.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  872. </blockquote>

  873. <p>Le futur qui se dessine à ce sujet est <em>très</em> stimulant. Cela fait 15&nbsp;ans qu’il y a une production de masse de code JS qui n’est ni réutilisable, ni interopérable. J’ai bon espoir que ce soit en train de&nbsp;changer.</p>

  874. <a href="#hr-64" title="Lien vers cette section de la page"><hr id="hr-64" /></a>

  875. 

  876. <blockquote lang="en">

  877. <p>When trying to defend this, economists typically claim that we have unlimited desire for new stuff. Apparently, rather than dedicating the time gains from technology to leisure, we pour it into making more stuff for ourselves. This is bogus. People do have a limited desire for new things, because dedicating yourself to endless production (and consumption) comes at the expense of hanging out with your family, friends and pets, or doing stuff like walking in the wilderness or surfing the waves. What people actually desire is a balance of many things, but <mark>the system we’re stuck in has unlimited desire for one direction only.</mark> That’s because it’s a vortex unleashed by humans who no longer know how to stop&nbsp;it.</p>

  878. <p><cite><em><a data-link-domain="brettscott.substack.com" href="https://brettscott.substack.com/p/tech-doesnt-make-our-lives-easier" hreflang="en"

  879.             title="Consultation de l’article (anglais)">Tech doesn’t make our lives easier. It makes them faster</a>

  880.             <a href="/david/cache/2024/9750840b448f07a2f2594bb25da23836/" hreflang="en"

  881.                 data-tippy data-description="Supposedly technologies like AI and digital payments make our lives easier. In reality convenience is an illusion used to sell us automation-driven acceleration"

  882.                 data-source="https://brettscott.substack.com/p/tech-doesnt-make-our-lives-easier"

  883.                 data-date="2024-02-03"

  884.                 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%2Fd3d5b3dd-9c2b-4f8c-a2b7-f39933be1d53%2Ffavicon-16x16.png"

  885.                 data-domain="brettscott.substack.com"

  886.                 ><svg xmlns="http://www.w3.org/2000/svg"

  887.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  888.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  889.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  890.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  891.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  892.                 </svg>

  893.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  894. </blockquote>

  895. <p>Un bon article à lire après 24h de galères&nbsp;techniques&nbsp;😅.</p>

  896. 

  897.     

  898.       <nav>

  899.         <p>

  900.           

  901.             <a href="/david/2024/dependance/"

  902.                title="Liste de tous les articles 2024 associés à cette étiquette"

  903.                rel="tag">#dépendance</a>

  904.           

  905.             <a href="/david/2024/opensource/"

  906.                title="Liste de tous les articles 2024 associés à cette étiquette"

  907.                rel="tag">#opensource</a>

  908.           

  909.             <a href="/david/2024/technique/"

  910.                title="Liste de tous les articles 2024 associés à cette étiquette"

  911.                rel="tag">#technique</a>

  912.           

  913.           <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>

  914.         </p>

  915.       </nav>

  916.     

  917.   

  918.     <h2>

  919.       <a href="/david/2024/01/20/" title="Lien permanent vers cet article">Extinction</a> <time datetime="2024-01-20">20 janvier 2024</time>

  920.     </h2>

  921.     

  922. 

  923. <blockquote lang="en">

  924. <p>So where have all the websites gone? Well, the people who make them have all gone to war for the capitalist machine. They grew up and got jobs. A natural part of growing up. Silos came and plucked their voices. Invasive memes and short form content grew in their place. Hustle overtook leisure. Harassment overtook openness. Influence overtook creativity. An economy of interestingness replaced by one of followers, likes, and engagement&nbsp;metrics.</p>

  925. <p>One important thing to note; <mark>websites aren’t extinct.</mark> In fact, you’re on one now! Uploading your own words is ancient technology but still&nbsp;works.</p>

  926. <p><cite><em><a data-link-domain="daverupert.com" href="https://daverupert.com/2024/01/where-have-all-the-websites-gone/" hreflang="en"

  927.             title="Consultation de l’article (anglais)">Where have all the flowers gone?</a>

  928.             <a href="/david/cache/2024/7136e0810bfa42c4a9ca798a55cd2d53/" hreflang="en"

  929.                 data-tippy data-description="A post from Jason Velazquez called “Where have all the websites gone?” crossed my socials. It’s a good lament about the dearth of interesting content on the internet and how we’re stuck in the same boring content silos."

  930.                 data-source="https://daverupert.com/2024/01/where-have-all-the-websites-gone/"

  931.                 data-date="2024-01-19"

  932.                 data-favicon="https://daverupert.com/favicon.ico"

  933.                 data-domain="daverupert.com"

  934.                 ><svg xmlns="http://www.w3.org/2000/svg"

  935.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  936.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  937.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  938.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  939.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  940.                 </svg>

  941.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  942. </blockquote>

  943. <p>En réponse à <q lang="en"><a data-link-domain="fromjason.xyz" href="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/" hreflang="en"

  944.             title="Consultation de l’article (anglais)">Where have all the websites gone?</a>

  945.             <a href="/david/cache/2024/c3272392d462da90874d32841e5caac8/" hreflang="en"

  946.                 data-tippy data-description="It feels like all the cool websites from the late 2000s are gone. But maybe we are looking at this the wrong way. Maybe it is us who vanished."

  947.                 data-source="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/"

  948.                 data-date="2024-01-09"

  949.                 data-favicon="https://www.fromjason.xyz/img/favicon.png"

  950.                 data-domain="fromjason.xyz"

  951.                 ><svg xmlns="http://www.w3.org/2000/svg"

  952.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  953.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  954.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  955.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  956.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  957.                 </svg>

  958.                 <span class="sr-only">[archive]</span></a></q> que j’ai <a href="/david/2024/01/10/#hr-24">déjà cité</a>. Peut-être que la capacité à publier est toujours là mais que nous avons <a href="/david/2024/01/12/#hr-27">trop changé</a> pour être capables de perdurer dans cette pratique. 2024&nbsp;pourrait me faire mentir car je vois une certaine effervescence dans mon agrégateur. On va bien voir si ça dure. On va bien voir si <em>je</em>&nbsp;dure.</p>

  959. <p><em>Guidé par le besoin, je suis en train d’automatiser des ancres sur mes <code>&lt;hr&gt;</code>, fausse bonne idée&#8239;? En affinant un peu le style ça me convient pour&nbsp;l’instant.</em></p>

  960. <a href="#hr-40" title="Lien vers cette section de la page"><hr id="hr-40" /></a>

  961. 

  962. <blockquote>

  963. <p>public-inbox implements the sharing of an email inbox via git to complement or replace traditional mailing lists.  Readers may read via NNTP, IMAP, POP3, Atom feeds or HTML&nbsp;archives.</p>

  964. <p>public-inbox spawned around three main&nbsp;ideas:</p>

  965. <ul>

  966. <li>Publicly accessible and archived communication is essential to Free Software&nbsp;development.</li>

  967. <li>Contributing to Free Software projects should not require the use of non-Free services or&nbsp;software.</li>

  968. <li><mark>Graphical user interfaces should not be required for text-based communication.</mark>  Users may have broken graphics drivers, limited eyesight, or be unable to afford modern&nbsp;hardware.</li>

  969. </ul>

  970. <p>public-inbox aims to be easy-to-deploy and manage; encouraging projects to run their own instances with minimal&nbsp;overhead.</p>

  971. <p><cite><em><a data-link-domain="public-inbox.org" href="https://public-inbox.org/README.html" hreflang="en"

  972.             title="Consultation de l’article (anglais)">public-inbox - an &quot;archives first&quot; approach to mailing lists</a>

  973.             <a href="/david/cache/2024/30b40ff8034212e070dc7daf2b9406e9/" hreflang="en"

  974.                 data-tippy data-description="public-inbox implements the sharing of an email inbox via git to complement or replace traditional mailing lists. Readers may read via NNTP, IMAP, POP3, Atom feeds or HTML archives."

  975.                 data-source="https://public-inbox.org/README.html"

  976.                 data-date="2024-01-19"

  977.                 data-favicon="https://public-inbox.org/favicon.ico"

  978.                 data-domain="public-inbox.org"

  979.                 ><svg xmlns="http://www.w3.org/2000/svg"

  980.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  981.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  982.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  983.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  984.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  985.                 </svg>

  986.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  987. </blockquote>

  988. <p>D’une certaine manière, l’<a data-link-domain="github.com" href="https://github.com/jgm/pandoc/issues/9250">extinction de voix des un·es</a> fait mon bonheur de découverte aujourd’hui. J’espère que le réflexe ne sera pas de passer de <em>Google Groups</em> à <em>Microsoft Github Discussions</em> par&nbsp;commodité.</p>

  989. <a href="#hr-41" title="Lien vers cette section de la page"><hr id="hr-41" /></a>

  990. 

  991. <blockquote>

  992. <p>… ça veut dire qu’en vrai, les droits humains, tu t’en fiches pas&nbsp;mal.</p>

  993. <p>Et que tu es juste <mark>un peu raciste</mark>.</p>

  994. <p><cite><em><a data-link-domain="emmaclit.com" href="https://emmaclit.com/2024/01/19/culture-froncaise/">Culture&nbsp;fronçaise</a></em></cite></p>

  995. </blockquote>

  996. <p>Voilà.</p>

  997. <a href="#hr-42" title="Lien vers cette section de la page"><hr id="hr-42" /></a>

  998. <figure>

  999.     <a href="/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg"

  1000.         title="Cliquer pour une version haute résolution">

  1001.         <img

  1002.             src="/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg"

  1003.             width="3024" height="3024"

  1004.             srcset="/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg 3024w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_660x440.jpg 660w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_990x660.jpg 990w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_1320x880.jpg 1320w"

  1005.             sizes="min(100vw, calc(100vh * 3024 / 3024))"

  1006.             loading="lazy"

  1007.             decoding="async"

  1008.             alt="Un enfant de dos dans des traces de ski de fond classique à la tombée du jour">

  1009.     </a>

  1010.     <figcaption>-16°C, rien de mieux pour démarrer une fin de semaine qu’une sortie ski dans notre jardin après&nbsp;l’école.</figcaption>

  1011. </figure>

  1012. <p>Cette photo est floue, c’est devenu tellement rare avec un téléphone (<em>OK&nbsp;Boomer</em>&nbsp;:p). Les couleurs étaient superbes et une fois les mains réchauffées c’était une ambiance très agréable. On n’a pas croisé grand monde. La rééducation active continue tranquillement son&nbsp;chemin.</p>

  1013. 

  1014.     

  1015.       <nav>

  1016.         <p>

  1017.           

  1018.             <a href="/david/2024/dependance/"

  1019.                title="Liste de tous les articles 2024 associés à cette étiquette"

  1020.                rel="tag">#dépendance</a>

  1021.           

  1022.             <a href="/david/2024/evolution/"

  1023.                title="Liste de tous les articles 2024 associés à cette étiquette"

  1024.                rel="tag">#évolution</a>

  1025.           

  1026.             <a href="/david/2024/parentalite/"

  1027.                title="Liste de tous les articles 2024 associés à cette étiquette"

  1028.                rel="tag">#parentalité</a>

  1029.           

  1030.           <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>

  1031.         </p>

  1032.       </nav>

  1033.     

  1034.   

  1035. 

  1036.       

  1037.         <form action="/david/recherche/" method="get">

  1038.           <fieldset>

  1039.             <legend>Recherche</legend>

  1040.             <label for="input-search">Termes de votre recherche :</label>

  1041.             <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>

  1042.             <input type="submit" value="Chercher">

  1043.             <p id="indexation-infos">

  1044.               <small>

  1045.                 Seuls les contenus de ces 8 dernières années sont indexés.

  1046.               </small>

  1047.             </p>

  1048.           </fieldset>

  1049.         </form>

  1050.       

  1051.       <aside>

  1052.         <theme-toggle></theme-toggle>

  1053.       </aside>

  1054.     </article>

  1055.     <hr>

  1056.     <footer>

  1057.       <p>

  1058.         <a href="/david/" title="Aller à l’accueil">Accueil</a>

  1059.         •

  1060.         <a href="/david/log/" title="Accès au flux RSS">Suivre</a>

  1061.         •

  1062.         <a href="http://larlet.com"

  1063.            title="Go to my English profile"

  1064.            data-instant>Pro</a>

  1065.         •

  1066.         <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>

  1067.         •

  1068.         <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>

  1069.       </p>

  1070.       <template id="theme-selector">

  1071.         <form>

  1072.           <style type="text/css">

  1073.             fieldset div {

  1074.               text-align: center;

  1075.             }

  1076.           </style>

  1077.           <fieldset>

  1078.             <legend>Thème</legend>

  1079.             <div>

  1080.               <label>

  1081.                 <input type="radio" value="auto" name="chosen-color-scheme" checked>

  1082.                 Auto

  1083.               </label>

  1084.               <label>

  1085.                 <input type="radio" value="dark" name="chosen-color-scheme">

  1086.                 Foncé

  1087.               </label>

  1088.               <label>

  1089.                 <input type="radio" value="light" name="chosen-color-scheme">

  1090.                 Clair

  1091.               </label>

  1092.             </div>

  1093.           </fieldset>

  1094.         </form>

  1095.       </template>

  1096.     </footer>

  1097.     <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>

  1098.     <script>

  1099.       class ThemeToggle extends HTMLElement {

  1100.         constructor() {

  1101.           super()

  1102.           const themeSelectorTemplate = document.querySelector('#theme-selector')

  1103.           const form = themeSelectorTemplate.content.firstElementChild

  1104.           this.attachShadow({ mode: 'open' })

  1105.           this.shadowRoot.appendChild(form.cloneNode(true))

  1106.         }

  1107. 

  1108.         connectedCallback() {

  1109.           const form = this.shadowRoot.querySelector('form')

  1110.           form.addEventListener('change', (e) => {

  1111.             const chosenColorScheme = e.target.value

  1112.             localStorage.setItem('theme', chosenColorScheme)

  1113.             toggleTheme(chosenColorScheme)

  1114.           })

  1115. 

  1116.           const selectedTheme = localStorage.getItem('theme')

  1117.           if (selectedTheme && selectedTheme !== 'undefined') {

  1118.             form.querySelector(`[value="${selectedTheme}"]`).checked = true

  1119.           }

  1120.         }

  1121.       }

  1122. 

  1123.       const prefersColorSchemeDark = '(prefers-color-scheme: dark)'

  1124.       window.addEventListener('load', () => {

  1125.         let colorsLayer = undefined

  1126.         let hasDarkRules = false

  1127.         for (const styleSheet of Array.from(document.styleSheets)) {

  1128.           let mediaRules = []

  1129.           for (const layerRule of styleSheet.cssRules) {

  1130.             if (!(layerRule instanceof CSSLayerBlockRule)) {

  1131.               continue

  1132.             }

  1133.             if (layerRule.name === 'colors') {

  1134.               colorsLayer = layerRule

  1135.             }

  1136.             for (const cssRule of layerRule.cssRules) {

  1137.               if (cssRule.type !== CSSRule.MEDIA_RULE) {

  1138.                 continue

  1139.               }

  1140.               // WARNING: Safari does not have/supports `conditionText`.

  1141.               if (cssRule.conditionText) {

  1142.                 if (cssRule.conditionText !== prefersColorSchemeDark) {

  1143.                   continue

  1144.                 }

  1145.               } else {

  1146.                 if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {

  1147.                   continue

  1148.                 }

  1149.               }

  1150.               mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))

  1151.             }

  1152.           }

  1153. 

  1154.           // WARNING: do not try to insert a Rule to a styleSheet you are

  1155.           // currently iterating on, otherwise the browser will be stuck

  1156.           // in a infinite loop…

  1157.           for (const mediaRule of mediaRules) {

  1158.             // Safari requires the `0` second parameter (even if default).

  1159.             colorsLayer.insertRule(mediaRule.cssText, 0)

  1160.             hasDarkRules = true

  1161.           }

  1162.         }

  1163. 

  1164.         if (hasDarkRules) {

  1165.           if ('customElements' in window && !customElements.get('theme-toggle')) {

  1166.             customElements.define('theme-toggle', ThemeToggle)

  1167.           }

  1168.         }

  1169.       })

  1170.     </script>

  1171.     

  1172.   </body>

  1173. </html>