davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725
							<!DOCTYPE html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
  <!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  <meta charset="utf-8">
  <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  <!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- Required to make a valid HTML5 document. -->
  <title>
    Étiquette #technique
  — David Larlet</title>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <meta name="description" content="Publications relatives au tag #technique">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  
  <style type="text/css">
    details[open] summary {
      display: none;
    }
  </style>

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

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

<blockquote>
<p>Ce qu’Hashbang propose est de créer un registrar sous forme de SCIC avec en plus un processus participatif pour définir les services et leurs tarifs. Le premier service proposé sera certainement le nom de domaine, mais personne ne peut actuellement définir quel tarif sera proposé. <mark>Ce sera issu d’un processus participatif en fonction des participant·e·s au&nbsp;départ.</mark></p>
<p>Chez Hashbang, nous portons un regard attentif aux enjeux environnementaux et nous proposons donc de mesurer et limiter l’impact environnemental des activités du&nbsp;registrar.</p>
<p>Nous souhaitons également s’assurer qu’il n’y ait pas de discriminations et que les personnes minorisé·e·s puissent s’emparer de cet espace. Il faut donc s’attendre à ce qu’il y ait des événements en mixité choisie et du langage&nbsp;inclusif.</p>
<p><cite><em><a data-link-domain="hashbang.coop" href="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/" hreflang="fr"
            title="Consultation de l’article">Appel à intérêt pour un bureau d’enregistrement coopératif</a>
            <a href="/david/cache/2024/2c027efb3689a1067c7f32a659fd4092/" hreflang="fr"
                data-tippy data-description="Nous lançons un projet pour gérer des noms de domaines dans une nouvelle coopérative"
                data-source="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/"
                data-date="2024-03-12"
                data-favicon="https://hashbang.coop/static/images/favicon.1d2088a755c9.ico"
                data-domain="hashbang.coop"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Superbe initiative, coopératives pour&nbsp;tou·tes&#8239;!</p>
<a href="#hr-111" title="Lien vers cette section de la page"><hr id="hr-111" /></a>

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

    
      <nav>
        <p>
          
            <a href="/david/2024/partage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#partage</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
            <a href="/david/2024/web/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#web</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/03/08/" title="Lien permanent vers cet article">Flow</a> <time datetime="2024-03-08">8 mars 2024</time>
    </h2>
    
<p>Le <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Flow_(psychologie)">flow</a> n’est pas seulement un état où j’ai besoin de calme, il s’agit d’un contexte à part entière. Il me faut une problématique connue, qui est définie avec des contours relativement flous, davantage une intention qu’une direction. Si j’ai déjà eu l’occasion d’être précédemment frustré par l’implémentation en cours, cela me donne beaucoup de motivation pour plonger. Parfois la zone est atteinte en n’étant pas devant un écran (en courant, sous la douche, etc), une forme d’<em>Eurêka&#8239;!</em> qui annonce la libération du <em>flow</em> à&nbsp;venir.</p>
<p>La crue monte et butte contre des digues techniques, plusieurs fois, avant de créer la brèche qui va tout libérer d’un coup et se répandre dans l’ensemble du code. Reste la tâche de <em>ressuyage</em>&nbsp;: <q lang="fr">l’évacuation des eaux qui se sont déversées dans les terres après une inondation et ainsi de diminuer le temps de submersion</q> nous dit le <a data-link-domain="symadrem.fr" href="https://www.symadrem.fr/anticiper-intervenir/evacuation-des-eaux-post-crue/quest-ce-que-le-ressuyage/">Symadrem</a>. Ce n’est pas une tâche ingrate car c’est celle qui rend le code pérenne et compréhensible, l’objet du <em>flow</em> accessible au plus grand nombre. Le temps de la décrue permet d’identifier les cas aux limites&nbsp;également.</p>
<p>Ce contexte ne m’est atteignable que 3&nbsp;ou 4&nbsp;fois par an en moyenne. Et heureusement, car il est vraiment peu soutenable (mais tellement&nbsp;satisfaisant&#8239;!).</p>
<a href="#hr-104" title="Lien vers cette section de la page"><hr id="hr-104" /></a>

<blockquote lang="en">
<p>CSS is a programming language because that’s what you’re doing when you write it; you’re <em>programming</em> the application’s presentation logic. And that’s important, because CSS has power enough to either maximize the useability of software, or to ruin it beyond all utility. (Really; you’d probably be astounded how many ways there are to utterly destroy anything on the web with hardly any&nbsp;CSS.)</p>
<p>In many ways, <mark>CSS has greater impact than any other language</mark> on a user’s experience, which often directly influences success. Why, then, is its role so&nbsp;belittled?</p>
<p><cite><em><a data-link-domain="joshcollinsworth.com" href="https://joshcollinsworth.com/blog/devaluing-frontend" hreflang="en"
            title="Consultation de l’article (anglais)">The quiet, pervasive devaluation of frontend</a>
            <a href="/david/cache/2024/64ec164fc6c5c23ede3fba6006a47f36/" hreflang="en"
                data-tippy data-description="I keep noticing those of us in the frontend field being treated much the same as nurses, paralegals, and executive assistants. Our work is seen as important, certainly, but just not the same as, or as important as, the “real” work."
                data-source="https://joshcollinsworth.com/blog/devaluing-frontend"
                data-date="2024-03-09"
                data-favicon="https://joshcollinsworth.com/favicon.png"
                data-domain="joshcollinsworth.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>J’aurais pu citer beaucoup de parties de cet article. Je choisis celle vraiment centrée sur CSS car les avancées récentes en font encore davantage un outil qui demande une grande connaissance du domaine, une veille active et une réflexion importante. Ce langage exprime la complexité de nos interfaces et de notre évolution collective en terme d’exploration d’affordances. Les <em>patterns</em>, ces façons de résoudre des problèmes similaires, évoluent et les personnes qui arrivent à suivre ces évolutions vont être de plus en plus sollicitées (j’en parlais <a href="/david/2024/02/28/#hr-94">par ici</a>) — notamment lorsqu’il va falloir nettoyer 10&nbsp;ans de&nbsp;CSS-in-JS/Tailwind/YouNameIt.</p>
<p>Je n’ai pas la même considération pour ces personnes, <strong>j’en ai bien davantage</strong>.</p>
<a href="#hr-105" title="Lien vers cette section de la page"><hr id="hr-105" /></a>

<blockquote lang="en">
<p>So far we have designed our component to be a function of the host. We can go further and ensure that the rendering routine is actually private to the host, so that the rendering code is encapsulated inside along with any potential behaviour enhancements (the <code>countClickable</code> mixin for example), while both remain&nbsp;reusable.</p>
<p><cite><em><a data-link-domain="lorenzofox.dev" href="https://lorenzofox.dev/posts/component-as-infinite-loop/" hreflang="en"
            title="Consultation de l’article (anglais)">Coroutines and web components</a>
            <a href="/david/cache/2024/6f3cb3c0c6c580407b1cfaa2d7d9005b/" hreflang="en"
                data-tippy data-description="Custom elements (web components) modelling with coroutines"
                data-source="https://lorenzofox.dev/posts/component-as-infinite-loop/"
                data-date="2024-03-09"
                data-favicon="https://lorenzofox.dev/posts/component-as-infinite-loop/public/favicon.ico"
                data-domain="lorenzofox.dev"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Je n’ai pas tout compris (et j’en suis à la seconde lecture) mais ça a l’air&nbsp;fun&#8239;!&nbsp;😜</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/experience/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#expérience</a>
          
            <a href="/david/2024/psychologie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#psychologie</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/03/02/" title="Lien permanent vers cet article">Montre</a> <time datetime="2024-03-02">2 mars 2024</time>
    </h2>
    
<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"
            title="Consultation de l’article">Suunto Ambit Black</a>
            <a href="/david/cache/2024/4050651a19400713c8563166e2a9abd5/" hreflang="fr"
                data-tippy data-description="La qualifier de simple montre serait un peu réducteur."
                data-source="https://www.suunto.com/fr-ca/Produits/Montres-de-sport/Suunto-Ambit/Suunto-Ambit-Black/"
                data-date="2024-03-02"
                data-favicon="https://www.suunto.com/favicon-16x16.png"
                data-domain="suunto.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a> 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>
<figure>
    <a href="/static/david/2024/2024-03-02-coros-apex-2-temperatures.png"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-03-02-coros-apex-2-temperatures.png"
            width="2390" height="1306"
            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"
            sizes="min(100vw, calc(100vh * 2390 / 1306))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran pour la Coros Apex 2&nbsp;qui va de -20°C à 50°C.">
    </a>
    <figcaption>Même Kiki a du mal par -20°C&nbsp;!</figcaption>
</figure>
<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>
<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>
<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>
<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>
<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>
<p><strong>Montre</strong> moi tes peurs et je te dirai comment les&nbsp;acheter.</p>
<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>

    
      <nav>
        <p>
          
            <a href="/david/2024/dependance/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dépendance</a>
          
            <a href="/david/2024/sport/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#sport</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/18/" title="Lien permanent vers cet article">In·directions</a> <time datetime="2024-02-18">18 février 2024</time>
    </h2>
    

<blockquote lang="en">
<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>
<p><cite><em><a data-link-domain="jwdallas.com" href="https://jwdallas.com/posts/namingcssvariables/" hreflang="en"
            title="Consultation de l’article (anglais)">Naming Variables In CSS</a>
            <a href="/david/cache/2024/d0ffe1891c332b6fc6e7d7826d8489da/" hreflang="en"
                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."
                data-source="https://jwdallas.com/posts/namingcssvariables/"
                data-date="2024-02-18"
                data-favicon="https://jwdallas.com/icons/favicon.ico"
                data-domain="jwdallas.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Je 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>
<pre><code>:root {
  --umap-color-darkBlue: #263B58;
}
button {
  --color-primary: var(--umap-color-darkBlue);
}
button.primary {
  background-color: var(--color-primary);
}
</code></pre>
<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>
<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>
<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>
<p>Ce qui est certain, c’est que l’approche de Tailwind ne me convient pas du&nbsp;tout.</p>

<blockquote lang="en">
<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>
<p><cite><em><a data-link-domain="nuejs.org" href="https://nuejs.org/blog/tailwind-misinformation-engine/" hreflang=""
            title="Consultation de l’article">Tailwind marketing and misinformation engine</a>
            <a href="/david/cache/2024/44c12c8fbb59c7239f0f3b04bae189b7/" hreflang=""
                data-tippy data-description="The origins of Tailwind and how it is framed against semantic CSS"
                data-source="https://nuejs.org/blog/tailwind-misinformation-engine/"
                data-date="2024-02-18"
                data-favicon="https://nuejs.org/img/favicon.svg"
                data-domain="nuejs.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<a href="#hr-77" title="Lien vers cette section de la page"><hr id="hr-77" /></a>

<blockquote lang="en">
<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>
<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>
<p><cite><em><a data-link-domain="stephango.com" href="https://stephango.com/file-over-app" hreflang="en"
            title="Consultation de l’article (anglais)">File over app - Steph Ango</a>
            <a href="/david/cache/2024/20d288eb47779c4f1b3f36fb86aa7108/" hreflang="en"
                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..."
                data-source="https://stephango.com/file-over-app"
                data-date="2024-02-18"
                data-favicon="https://stephango.com/icon.svg"
                data-domain="stephango.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<a href="#hr-78" title="Lien vers cette section de la page"><hr id="hr-78" /></a>

<blockquote lang="en">
<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>
<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>
<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>
<p><cite><em><a data-link-domain="commandcenter.blogspot.com" href="https://commandcenter.blogspot.com/2023/12/simplicity.html" hreflang="en"
            title="Consultation de l’article (anglais)">command center: Simplicity</a>
            <a href="/david/cache/2024/6b26bff7f4772cf8fb78878ff4f9594f/" hreflang="en"
                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..."
                data-source="https://commandcenter.blogspot.com/2023/12/simplicity.html"
                data-date="2024-02-18"
                data-favicon="https://commandcenter.blogspot.com/favicon.ico"
                data-domain="commandcenter.blogspot.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>

    
      <nav>
        <p>
          
            <a href="/david/2024/commun/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#commun</a>
          
            <a href="/david/2024/dependance/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dépendance</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/14/" title="Lien permanent vers cet article">GéoCodage</a> <time datetime="2024-02-14">14 février 2024</time>
    </h2>
    
<p>Dans le cadre de mon travail avec le <a data-link-domain="labrri.net" href="https://labrri.net/">LABRRI</a>, j’avais besoin de pouvoir laisser l’utilisateur·ice choisir une localité parmi les villes et arrondissements au Québec. Je me suis dit que c’était une bonne occasion d’explorer les données ouvertes&nbsp;locales.</p>
<p>Je tombe rapidement sur le <a data-link-domain="donneesquebec.ca" href="https://www.donneesquebec.ca/recherche/dataset/repertoire-des-municipalites-du-quebec">Répertoire des municipalités du Québec</a> qui dispose des communes et arrondissements au format CSV. Il me manque tout de même les coordonnées pour pouvoir ensuite les afficher sur une carte. Je creuse un peu et il existe des services de géocodage locaux comme <a data-link-domain="geocoder.ca" href="https://geocoder.ca/">geocoder.ca</a> mais je suis persuadé que ça doit être accessible librement quelque part. Je finis par trouver les <a data-link-domain="statistique.quebec.ca" href="https://statistique.quebec.ca/statistiques/divisions-territoriales/fichiers_code_geo/code-geographique-quebec.html">Fichiers du code géographique du Québec</a> qui comportent des coordonnées pour chaque localité, le tout en XML. Elles sont au format <code>47° 22' 34&quot; N</code> ce qui ne m’arrange pas et je me fais surtout avoir par la longitude un moment car elle est en français(!) <code>61° 52' 05&quot; O</code> — <code>O(uest)</code> vs. <code>W(est)</code>. Avec un petit coup de <code>ElementTree</code> + <a data-link-domain="pypi.org" href="https://pypi.org/project/latlon3/">latlon3</a>, j’arrive enfin à des coordonnées utilisables par <a data-link-domain="leafletjs.com" href="https://leafletjs.com/">Leaflet</a> qui me serviront à afficher les situations sur une&nbsp;carte.</p>
<p>Il me manque les coordonnées pour les arrondissements mais j’ai déjà fait la moitié à la main précédemment et il n’y en a qu’une quarantaine. Jouable, ne jamais oublier <a data-link-domain="xkcd.com" href="https://xkcd.com/1319/">ce XKCD</a> lorsqu’on&nbsp;développe.</p>
<p>Je passe maintenant à l’interface et je me dis que cette problématique est une bonne candidate pour <code>&lt;datalist&gt;</code> surtout qu’il y a deux champs du formulaire où il faut saisir le lieu&nbsp;: il est possible de référencer la même liste de données pour deux champs distincts ce qui est élégant. Ce qui l’est moins par contre, c’est que pour rendre ces choix non modifiables, il faut définir un <code>pattern</code> avec l’ensemble des localité, pour chaque champ concerné, donc en double. Je me retrouve avec 3&nbsp;fois les mêmes données… mais cela donne lieu à une <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/html/#forcer-un-element-parmi-une-datalist">nouvelle entrée dans ma mémoire technique</a>. Le formulaire complet faisant au final moins de 110Ko, je considère que c’est suffisant pour ne pas affaiblir l’interface avec du JavaScript qui factoriserait ces&nbsp;données.</p>
<figure>
    <a href="/static/david/2024/2024-02-14-input-datalist.png"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-14-input-datalist.png"
            width="1634" height="408"
            srcset="/static/david/2024/2024-02-14-input-datalist.png 1634w, /static/david/2024/2024-02-14-input-datalist.png 660w, /static/david/2024/2024-02-14-input-datalist.png 990w, /static/david/2024/2024-02-14-input-datalist.png 1320w"
            sizes="min(100vw, calc(100vh * 1634 / 408))"
            loading="lazy"
            decoding="async"
            alt="Un champ de saisie dans lequel j’ai écrit «&nbsp;baie&nbsp;» et qui affiche des suggestions de villes québécoises.">
    </a>
    <figcaption>Et&nbsp;voilà!</figcaption>
</figure>
<p>Si jamais vous avez besoin des données générées, <a href="/static/david/2024/municipalites_quebec_geocodees.csv">voici un CSV</a> (67Ko) qui est originellement sous licence <a data-link-domain="creativecommons.org" href="https://creativecommons.org/licenses/by/4.0/legalcode.fr">Creative Commons 4.0 – Attribution CC BY</a> l’«&nbsp;Institut de la statistique du Québec, Fichiers du code géographique du Québec&nbsp;» même si je ne sais pas trop ce que ça signifie après une telle transformation… qui devient vraiment le «&nbsp;BY&nbsp;»&#8239;? 🤔</p>
<p><em>Note&nbsp;: l’interface proposée sous iOS pour les choix de datalist est assez déroutante car les suggestions se retrouvent dans la partie d’auto-completion du&nbsp;clavier&#8239;!</em></p>

    
      <nav>
        <p>
          
            <a href="/david/2024/commun/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#commun</a>
          
            <a href="/david/2024/opendata/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#opendata</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/05/" title="Lien permanent vers cet article">Jeu</a> <time datetime="2024-02-05">5 février 2024</time>
    </h2>
    
<p>Dans la même&nbsp;journée&nbsp;:</p>

<blockquote lang="en">
<p><mark>Built like a video&nbsp;game</mark></p>
<p>Designed to perform smoothly at 60&nbsp;frames per second, our tool disappears and you can focus on what matters: working with your&nbsp;data.</p>
<p><cite><em><a data-link-domain="quadratichq.com" href="https://www.quadratichq.com/">quadratic</a></em></cite></p>
</blockquote>
<p>Puis&nbsp;:</p>

<blockquote lang="en">
<p><mark>Built like a video&nbsp;game</mark></p>
<p>Zed’s breakthrough performance starts with our GPUI framework, a new way to build 2D user interfaces. GPUI rasterizes the entire window on the GPU, just like a 3D video game. The result? Fast, reliable, and smooth delivery of pixels on every&nbsp;frame.</p>
<p><cite><em><a data-link-domain="zed.dev" href="https://zed.dev/">Zed</a></em></cite></p>
</blockquote>
<p>Intéressant comme coïncidence&nbsp;commerciale.</p>
<a href="#hr-67" title="Lien vers cette section de la page"><hr id="hr-67" /></a>
<p>J’ai réussi à trottiner 3&#8239;km aujourd’hui, à vitesse très réduite et en étant strapé. C’est une première après 4&nbsp;semaines <a href="/david/2024/01/09/" title="Blessure">de repos</a>. Il s’agit de reculer maintenant au maximum le moment où je vais me retordre cette cheville. Afin de réduire ce risque, j’hésite à repartir sur du <em>barefoot</em> car le mollet a aussi souffert pendant la torsion. Puis bon, il fait encore un peu&nbsp;frais…</p>
<p>Il y a cette nostalgie des sorties longues à Tokyo, en étant <a href="/david/thoughts/#barefoot">quasiment pieds nus</a>. Si j’étais joueur, j’appellerais ça <em>bearfoot</em> dans mon contexte&nbsp;actuel.</p>

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

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

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

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

<blockquote lang="en">
<p>If we want a system that is consistent with the flourishing of life on earth, we will need a system that mimics nature. Our current economic model doesn’t - for many reasons - and needs to change. Looking at nature, including our own human nature in our private lives, gives us many ideas for what this new, harmonious system could look&nbsp;like.</p>
<p><cite><em><a data-link-domain="erinremblance.substack.com" href="https://erinremblance.substack.com/p/we-are-all-socialists-in-our-private" hreflang="en"
            title="Consultation de l’article (anglais)">“We Are All Socialists in Our Private Lives”</a>
            <a href="/david/cache/2024/f5b5c3dff862cc55318684cf434b8d74/" hreflang="en"
                data-tippy data-description="David Graeber gets to the heart of human (and more than human) nature."
                data-source="https://erinremblance.substack.com/p/we-are-all-socialists-in-our-private"
                data-date="2024-02-03"
                data-favicon="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F79e3e832-517f-4ca3-989b-41eb1c8249d7%2Ffavicon-16x16.png"
                data-domain="erinremblance.substack.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Il n’y a que les classes moyennes qui peuvent être socialistes. C’était tout l’enjeu de leur destruction pour n’avoir plus que des personnes qui aient peur de perdre le <em>trop peu</em> ou le <em>vraiment beaucoup</em> qu’elles ont. Et la peur rend la manipulation tellement plus&nbsp;facile…</p>

<blockquote lang="en">
<p>If a monkey hoarded more bananas than it could eat, while most of the other monkeys starved, scientists would study that monkey to figure out what the heck was wrong with it. When humans do it, we put them on the cover of&nbsp;Forbes.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>🙈</p>

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

<blockquote lang="en">
<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>
<p><cite><em><a data-link-domain="arstechnica.com" href="https://arstechnica.com/gadgets/2024/02/google-search-kills-off-cached-webpages/" hreflang="en"
            title="Consultation de l’article (anglais)">Google will no longer back up the Internet: Cached webpages are dead</a>
            <a href="/david/cache/2024/75c7b6350ba18a5a11ee3bbf8b3b64be/" hreflang="en"
                data-tippy data-description="Google Search will no longer make site backups while crawling the web."
                data-source="https://arstechnica.com/gadgets/2024/02/google-search-kills-off-cached-webpages/"
                data-date="2024-02-03"
                data-favicon="https://cdn.arstechnica.net/wp-content/themes/ars/assets/img/material-ars-db41652381.png"
                data-domain="arstechnica.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p><em>(rires)</em></p>
<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>
<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>
<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>
<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>
<a href="#hr-62" title="Lien vers cette section de la page"><hr id="hr-62" /></a>
<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>
<p>J’arrive à la solution&nbsp;suivante&nbsp;:</p>
<pre><code>on run {input, parameters}
    tell application &quot;Terminal&quot;
        do script &quot;cd ~/sonos &amp;&amp; sonos Chambre play_dir '&quot; &amp; (POSIX path of input) &amp; &quot;'&quot;
    end tell
    return input
end run
</code></pre>
<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>
<a href="#hr-63" title="Lien vers cette section de la page"><hr id="hr-63" /></a>

<blockquote lang="en">
<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>
<p><cite><em><a data-link-domain="drab.robino.dev" href="https://drab.robino.dev/" hreflang="en"
            title="Consultation de l’article (anglais)">drab - A Headless Custom Element Library</a>
            <a href="/david/cache/2024/2a1235215c277ebb8a0e9acb7ffd91e0/" hreflang="en"
                data-tippy data-description="A headless custom element library."
                data-source="https://drab.robino.dev/"
                data-date="2024-02-03"
                data-favicon="https://drab.robino.dev/favicon.svg"
                data-domain="drab.robino.dev"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>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>
<a href="#hr-64" title="Lien vers cette section de la page"><hr id="hr-64" /></a>

<blockquote lang="en">
<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>
<p><cite><em><a data-link-domain="brettscott.substack.com" href="https://brettscott.substack.com/p/tech-doesnt-make-our-lives-easier" hreflang="en"
            title="Consultation de l’article (anglais)">Tech doesn’t make our lives easier. It makes them faster</a>
            <a href="/david/cache/2024/9750840b448f07a2f2594bb25da23836/" hreflang="en"
                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"
                data-source="https://brettscott.substack.com/p/tech-doesnt-make-our-lives-easier"
                data-date="2024-02-03"
                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"
                data-domain="brettscott.substack.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Un bon article à lire après 24h de galères&nbsp;techniques&nbsp;😅.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/dependance/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dépendance</a>
          
            <a href="/david/2024/opensource/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#opensource</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/29/" title="Lien permanent vers cet article">Déploiement</a> <time datetime="2024-01-29">29 janvier 2024</time>
    </h2>
    

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

<blockquote lang="en">
<p>I therefore officially announce 2024&nbsp;to be the year when the square checkbox has finally&nbsp;died.</p>
<p><cite><em><a data-link-domain="tonsky.me" href="https://tonsky.me/blog/checkbox/" hreflang="en"
            title="Consultation de l’article (anglais)">In Loving Memory of Square Checkbox</a>
            <a href="/david/cache/2024/ff566a58892db07815a327802fea66d3/" hreflang="en"
                data-tippy data-description="History of checkboxes and radio buttons in user interfaces"
                data-source="https://tonsky.me/blog/checkbox/"
                data-date="2024-01-28"
                data-favicon="https://tonsky.me/i/favicon.png"
                data-domain="tonsky.me"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>À quand une petite coche sur les <a data-link-domain="alvaromontoro.com" href="https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari" hreflang="en"
            title="Consultation de l’article (anglais)">futurs toggle/switch natifs</a>
            <a href="/david/cache/2024/b351cda8d2ccd73362ca1729845b7e79/" hreflang="en"
                data-tippy data-description="Toggle switches are a common request by Designers and Developers. Safari proposed a native way to create switches in HTML without the hassle of dealing with CSS or unnecessary control states."
                data-source="https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari"
                data-date="2024-01-28"
                data-favicon="https://alvaromontoro.com/fav.ico"
                data-domain="alvaromontoro.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a>&#8239;? Ou <a data-link-domain="grumpy.website" href="https://grumpy.website/1457">pire</a>&#8239;? 🙈</p>
<p>R.I.P. <a data-link-domain="nubero.ch" href="https://www.nubero.ch/blog/009/" hreflang="de"
            title="Consultation de l’article">les boutons</a>
            <a href="/david/cache/2024/a3ccfb51f65cd59f375d5424d243e012/" hreflang="de"
                data-tippy data-description="Nuberodesign: Agentur fÃ¼r Grafikdesign, Animation, Videoproduktion und Usability in Winterthur"
                data-source="https://www.nubero.ch/blog/009/"
                data-date="2024-01-28"
                data-favicon="https://www.nubero.ch/favicon.svg"
                data-domain="nubero.ch"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a>&nbsp;aussi…</p>
<a href="#hr-54" title="Lien vers cette section de la page"><hr id="hr-54" /></a>

<blockquote>
<p>Les poètes et écrivains évitaient tous la colère des rois et des puissants par l’utilisation de métaphores. Mais c’est justement par cette analogie que cela devient&nbsp;intéressant.</p>
<p><mark>Les empires informatiques d’aujourd’hui comme exemples de l’absolutisme du pouvoir des siècles précédents posent la question plus qu’intéressantes sur la liberté d’expression.</mark> Quand tout l’espace de notre expression transite par un domaine privé et commercial, nous ne sommes plus dans l’espace public de notre expression mais bien dans cet espace contrôlé. Que devient le sens de notre communication si dès que nous sommes sur ces espaces, l’expression devient plus limitée que celle que l’espace public&nbsp;permet.</p>
<p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/26/fraichement" hreflang="fr"
            title="Consultation de l’article">fraîchement</a>
            <a href="/david/cache/2024/b692faaa55fd2775e957b20e833e9e5e/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://www.la-grange.net/2024/01/26/fraichement"
                data-date="2024-01-28"
                data-favicon="https://www.la-grange.net/favicon.ico"
                data-domain="la-grange.net"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Il est interdit de parler anglais dans les écoles québécoises. Il n’en fallait pas beaucoup plus pour que les élèves aient envie de l’apprendre et d’échanger entre eux dans cette langue. <em>Oppression + contre-pouvoir = culture&nbsp;commune.</em></p>
<p>Aussi, l’enseignement de l’anglais est relativement médiocre pour une province qui insiste sur le bilinguisme. Difficile d’en mesurer&nbsp;l’intention.</p>
<a href="#hr-55" title="Lien vers cette section de la page"><hr id="hr-55" /></a>

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

    
      <nav>
        <p>
          
            <a href="/david/2024/echanges/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#échanges</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
            <a href="/david/2024/web/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#web</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/17/" title="Lien permanent vers cet article">Vieillesse</a> <time datetime="2024-01-17">17 janvier 2024</time>
    </h2>
    

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

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

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

    
      <nav>
        <p>
          
            <a href="/david/2024/experience/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#expérience</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
            <a href="/david/2024/web/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#web</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/16/" title="Lien permanent vers cet article">Endorphines</a> <time datetime="2024-01-16">16 janvier 2024</time>
    </h2>
    
<p>J’ai remis les pieds sur des skis (de fond). J’ai une piste à 150&nbsp;mètres de chez moi et c’était probablement les plus critiques. Je me suis déjà tordu la cheville plusieurs fois sur ce trajet. Mais une fois dans les traces les sensations étaient bonnes et l’entorse (<em>tape</em>ée) n’a pas couiné. Le mollet un peu plus mais je me demande si ce n’est pas à force de compenser en&nbsp;boitant.</p>
<p>Cela conclus peut-être mon journal de&nbsp;chialage.</p>
<a href="#hr-33" title="Lien vers cette section de la page"><hr id="hr-33" /></a>
<p>Hier soir, je travaillais sur la <a href="/david/">page d’accueil</a> en voulant donner davantage d’espace à la recherche qui passe également en pied de page (qui est un&nbsp;chantier).</p>
<p>Et puis ce matin <a data-link-domain="nicolas-hoizey.com" href="https://nicolas-hoizey.com/">Nicolas H.</a> m’indique que mon flux est cassé. Je répare cette histoire de caractère invisible qui casse le <em>parsing</em> du contenu HTML (intégrer une <a data-link-domain="validator.w3.org" href="https://validator.w3.org/feed/">validation</a> pourrait s’avérer être utile). Et je pousse les modifications qui contiennent la page d’accueil en chantier. Tant pis, au moins c’est&nbsp;fait.</p>
<p>Il y a dorénavant 54&nbsp;liens sur cette page, j’ai besoin de revoir des choses mais au moins il commence à y avoir une cohérence sur le thème de l’année et ses pages générées. Le chemin continue de me donner le&nbsp;sourire.</p>
<p>Je constate au passage que la <a href="/david/recherche/">page de recherche</a> fait 2&#8239;Mo (700&#8239;Ko à télécharger), désindexer des années ou explorer des <a data-link-domain="pagefind.app" href="https://pagefind.app/">alternatives</a>&#8239;? J’aime bien me dire que mes écrits de ces 8&nbsp;dernières années tiennent sur&nbsp;2&nbsp;disquettes.</p>
<a href="#hr-34" title="Lien vers cette section de la page"><hr id="hr-34" /></a>
<p>Vidéo du jour&nbsp;: <a data-link-domain="video.blast-info.fr" href="https://video.blast-info.fr/w/9885ed4e-386b-4b3b-bcb5-dc2e454939e6">DRY JANUARY, ÉCOLOGIE&nbsp;: POURQUOI LE POUVOIR A-T-IL SI PEUR DE LA SOBRIÉTÉ&#8239;?</a> (désolé pour les cris, ça semble être le style de&nbsp;BLAST&nbsp;🙃).</p>
<a href="#hr-35" title="Lien vers cette section de la page"><hr id="hr-35" /></a>
<p>On creuse les <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap"><code>importmap</code></a> pour <a data-link-domain="umap-project.org" href="https://umap-project.org/fr/">uMap</a> en ce moment. Un peu contraints par un passage aux modules JS qui supporte mal la minification + invalidation du cache. Il y a des choses intéressantes dans les possibilités que ça offre mais c’est du&nbsp;Baseline™2023.</p>
<p>Si un produit accueille moins de personnes lors de mon départ que lors de mon arrivée, j’ai probablement mal fait mon travail&#8239;? <em>À&nbsp;méditer.</em></p>

<blockquote lang="en">
<p>If the new software no longer runs on old hardware, it is <mark>worse</mark> than the old&nbsp;software.</p>
<p><cite><em><a data-link-domain="blog.jim-nielsen.com" href="https://blog.jim-nielsen.com/2024/notes-from-computing-sustainably/" hreflang="en"
            title="Consultation de l’article (anglais)">Notes from “An approach to computing and sustainability inspired from permaculture” by Devine LuLinvega</a>
            <a href="/david/cache/2024/1f40a33f9c57a16d420eb0868a129e96/" hreflang="en"
                data-tippy data-description="Writing about the big beautiful mess that is making things for the world wide web."
                data-source="https://blog.jim-nielsen.com/2024/notes-from-computing-sustainably/"
                data-date="2024-01-15"
                data-favicon="https://blog.jim-nielsen.com/favicon.ico"
                data-domain="blog.jim-nielsen.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>

    
      <nav>
        <p>
          
            <a href="/david/2024/addiction/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#addiction</a>
          
            <a href="/david/2024/evolution/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#évolution</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/11/" title="Lien permanent vers cet article">Impact</a> <time datetime="2024-01-11">11 janvier 2024</time>
    </h2>
    

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

<blockquote lang="en">
<p>At most software startups, customers typically don’t care if your product runs on Heroku, Kubernetes, or a really brittle singly-homed machine in Joe’s closet. No purchasing decisions hinge on your commitment to write servers in Rust or use Nix for hermetic everything. And although they might exist, I have sadly never had a customer write a testimonial for the elegant collection of internal services involved in responding to that single HTTP&nbsp;request.</p>
<p>No; customers are not paying for, nor give a shit about, these things. Sorry. It’s still cool stuff. It’s just not what you’re&nbsp;selling.</p>
<p><mark>Customers want software that delivers problem-solving <em>impact</em>.</mark> And at the early stage, which is all the way until you’ve reached product-market fit, they’re almost certainly not getting enough, fast enough. You should be spending as much time as you can at this level of the stack, The Product: thinking, building, learning.</p>
<p><cite><em><a data-link-domain="hoho.com" href="https://hoho.com/posts/your-stack-is-not-the-product/" hreflang="en"
            title="Consultation de l’article (anglais)">Your tech stack is not the product</a>
            <a href="/david/cache/2024/877b1e29328f6ad1b6fef26d7407ec5f/" hreflang="en"
                data-tippy data-description="Early stage technology decisions must be, uncomfortably, a means to an end."
                data-source="https://hoho.com/posts/your-stack-is-not-the-product/"
                data-date="2024-01-09"
                data-favicon="https://hoho.com/favicon-16x16.png"
                data-domain="hoho.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<a href="#hr-25" title="Lien vers cette section de la page"><hr id="hr-25" /></a>

<blockquote lang="en">
<p>You can’t make an article on a UX topic without showcasing a practical example. Let’s explore examples that I spotted on the web and how to fix&nbsp;them.</p>
<p><cite><em><a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size" hreflang="en"
            title="Consultation de l’article (anglais)">Designing better target sizes</a>
            <a href="/david/cache/2024/c98206d38897264005bcd5b453d032b1/" hreflang="en"
                data-tippy data-description="An interactive guide on designing better target sizes on the web."
                data-source="https://ishadeed.com/article/target-size"
                data-date="2024-01-10"
                data-favicon="https://ishadeed.com/assets/favicon-32x32.png"
                data-domain="ishadeed.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Superbe article de Ahmad Shadeed. En résumé, il faut soigner ses <em>paddings</em> mais il y a pas mal d’astuces CSS pour y arriver dans certaines conditions. Je retiens notamment l’usage d’un <code>:after</code> pour ça <a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size#mobile-menu">lorsqu’il s’agit d’icônes</a>&nbsp;notamment&nbsp;:</p>
<pre><code>.search__filter:after {
  content: &quot;&quot;;
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scale(2);
}
</code></pre>
<p>Je découvre au passage qu’il y a pas mal d’options d’accessibilité dans <a data-link-domain="polypane.app" href="https://polypane.app/">Polypane</a> que j’utilise depuis peu et que je n’ai pas pleinement&nbsp;exploré.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/evolution/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#évolution</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
            <a href="/david/2024/web/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#web</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/09/" title="Lien permanent vers cet article">Blessure</a> <time datetime="2024-01-09">9 janvier 2024</time>
    </h2>
    
<p>Avec les amis, on profite des premières chutes de neige sur Montréal pour aller s’amuser sur le Mont Royal et vérifier que les skis de rando sont encore en bon état. Cinq minutes avant, je tirais l’enfant avec son baudrier en mode remontée musculaire, en pleine forme. Une descente entre les arbres même pas tant engagée et au moment de rejoindre le groupe, légère perte de contrôle dans un endroit très boisé. Mon ski se coince entre deux arbres assez fins mais suffisamment solides pour que ma cheville doive tourner dans le mauvais sens vu que mon corps a choisi de continuer sa course. <em>Ouille.</em></p>
<p>La tristesse de se faire mal au tout début de la saison. Aussi, c’est la pire chose à expérimenter lorsqu’on prépare un <a href="/david/2024/01/06/" title="Objectif">défi sportif</a>…</p>
<p>Youtube est le plus proche du célèbre <q lang="en">I know kung-fu</q> de Neo, j’ai appris à straper une cheville et j’ai l’espoir de pouvoir aller jusqu’au refuge avec l’enfant dans 2&nbsp;semaines vu que j’ai déjà réservé. Une cheville <em>tape</em>ée devrait pouvoir tenir les 5&#8239;km à skis si j’en prends suffisamment soin d’ici&nbsp;là&nbsp;🤞.</p>
<p>Ce soir, j’ai besoin d’y&nbsp;croire.</p>
<a href="#hr-19" title="Lien vers cette section de la page"><hr id="hr-19" /></a>
<p>Copsaé publie un <a data-link-domain="copsae.fr" href="https://www.copsae.fr/">nouveau site web</a> qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour <a data-link-domain="access42.net" href="https://access42.net/">le sien</a>. Ne pas oublier <a data-link-domain="koena.net" href="https://koena.net/">Koena</a> aussi&#8239;! J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des&nbsp;contre-exemples.</p>
<a href="#hr-20" title="Lien vers cette section de la page"><hr id="hr-20" /></a>

<blockquote lang="en">
<p>In short, building with accessible semantics from the get-go can give you expressive, meaningful style hooks for free. Leaning on those style hooks in your CSS selectors lets you reduce the number of moving parts in your site or application, and it can prevent accessibility bugs from creeping in down the&nbsp;road.</p>
<p><cite><em><a data-link-domain="benmyers.dev" href="https://benmyers.dev/blog/semantic-selectors/" hreflang="en"
            title="Consultation de l’article (anglais)">Style with Stateful, Semantic Selectors</a>
            <a href="/david/cache/2024/99e7d2ba7e4adc69dbf0f1b2858a5248/" hreflang="en"
                data-tippy data-description="See how building with accessible semantics from the get-go can give you expressive, meaningful style hooks for free."
                data-source="https://benmyers.dev/blog/semantic-selectors/"
                data-date="2024-01-08"
                data-favicon="https://benmyers.dev/favicon-32x32.png"
                data-domain="benmyers.dev"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>C’est ce que j’essaye de faire depuis plusieurs années déjà et non seulement ça me permet d’améliorer le couple sémantique HTML/CSS mais ça rend mon JS plus résilient&nbsp;aussi&#8239;!</p>

<blockquote lang="en">
<p>Recently I decided to stop using the word <em>semantics</em>. Instead I talk about the <abbr title="User eXperience">UX</abbr> of <abbr title="HyperText Markup Language">HTML</abbr>. And all of a sudden my students are not allergic to <abbr>HTML</abbr> anymore but really interested. Instead of explaining the meaning of a certain element, I show them <em>what it does</em>. So we look at <em>what happens</em> when you add a label to an input: The input and the label now form a pair. You can now click on the label to interact with a checkbox. The label will be read out loud when you focus on an input with a screenreader. When you hover over a <em>label</em>, the hover state of the connected <em>input</em> is shown. My students <em>love</em> stuff like that. They care about <abbr>UX</abbr>.</p>
<p><cite><em><a data-link-domain="vasilis.nl" href="https://vasilis.nl/nerd/the-ux-of-html/" hreflang="en"
            title="Consultation de l’article (anglais)">The UX of HTML</a>
            <a href="/david/cache/2024/e5056f8e0e6acf87c5777ba5b3a2ba92/" hreflang="en"
                data-tippy data-description=""
                data-source="https://vasilis.nl/nerd/the-ux-of-html/"
                data-date="2024-01-08"
                data-favicon="https://vasilis.nl/favicon.ico"
                data-domain="vasilis.nl"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>

    
      <nav>
        <p>
          
            <a href="/david/2024/accessibilite/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#accessibilité</a>
          
            <a href="/david/2024/sport/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#sport</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/08/" title="Lien permanent vers cet article">Liens</a> <time datetime="2024-01-08">8 janvier 2024</time>
    </h2>
    
<p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/">mistune</a> et je m’en sers ensuite en CSS pour l’afficher&nbsp;dynamiquement&nbsp;:</p>
<pre><code>a[data-link-domain]::after {
  content: &quot; [&quot; attr(data-link-domain) &quot;]&quot;;
  font-size: smaller;
  color: var(--link-color-domain);
}
</code></pre>
<p>Je fais aussi des tests de soulignement avec un gradient qui irait de la couleur du lien principal à celle du&nbsp;domaine&nbsp;:</p>
<pre><code>a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: calc(var(--fluid-0) / 10);
  position: relative;
}
a::before {
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -1px;
  height: calc(var(--fluid-0) / 10);
  background: linear-gradient(
    to right, 
    var(--link-color), 
    var(--link-color-domain)
  );
}
</code></pre>
<p>Mais au final je jette car je perds la partie <code>skip-ink</code> que je trouve chouette comme évolution de rendu possible. Toujours cet équilibre complexité / expérience /&nbsp;accessibilité.</p>
<p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111703611010197838">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus&nbsp;tard.</p>
<p>Il faut que j’améliore cette automatisation car c’est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi réduire le nombre de liens que j’archive, les sources techniques ont probablement moins d’intérêt dans la&nbsp;durée.</p>
<p>Chaque lien distant prend une longueur non négligeable suite à ces deux&nbsp;ajouts&nbsp;🤔.</p>
<a href="#hr-17" title="Lien vers cette section de la page"><hr id="hr-17" /></a>

<blockquote>
<p>Ce billet illustre la loi qui dit “Moins un blog est mis à jour, plus il y a de probabilité que ce qui y est publié a pour sujet les aspects techniques dudit&nbsp;blog”.</p>
<p><cite><em><a data-link-domain="blog.professeurjoachim.com" href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment" hreflang="fr"
            title="Consultation de l’article">Ma page /now (ou plutôt /en-ce-moment)</a>
            <a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" hreflang="fr"
                data-tippy data-description="La page /now a été proposée par Derek Sivers pour spécifier de manière très flexible un format de page web sur laquelle on peut en apprendre plus sur …"
                data-source="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment"
                data-date="2024-01-07"
                data-favicon="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 filter=%22hue-rotate(82deg)%22>🌿</text></svg>"
                data-domain="blog.professeurjoachim.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com" href="https://larlet.com/">profil pro</a>.</p>

<blockquote lang="en">
<p>I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but <mark>they like building their own blog engine to make blogging more pleasant</mark> (I’m very guilty of this&nbsp;too).</p>
<p>Kent Beck nailed it: “for each desired change, make the change easy (warning: this may be hard), then make the easy&nbsp;change”.</p>
<p><cite><em><a data-link-domain="frantic.im" href="https://frantic.im/opening-mail/" hreflang="en"
            title="Consultation de l’article (anglais)">Opening Mail</a>
            <a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" hreflang="en"
                data-tippy data-description="First make the change easy, then make the easy change."
                data-source="https://frantic.im/opening-mail/"
                data-date="2024-01-07"
                data-favicon="https://frantic.im/favicon.png"
                data-domain="frantic.im"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Note&nbsp;: cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes&nbsp;articles.</p>
<a href="#hr-18" title="Lien vers cette section de la page"><hr id="hr-18" /></a>
<p>L’hiver commence maintenant le 7&nbsp;janvier à Montréal. Phénomène météorologique exceptionnel <em>et</em> tendance&nbsp;climatique.</p>

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

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

    
      <nav>
        <p>
          
            <a href="/david/2024/experience/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#expérience</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
            <a href="/david/2024/web/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#web</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  

      
        <form action="/david/recherche/" method="get">
          <fieldset>
            <legend>Recherche</legend>
            <label for="input-search">Termes de votre recherche :</label>
            <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
            <input type="submit" value="Chercher">
            <p id="indexation-infos">
              <small>
                Seuls les contenus de ces 8 dernières années sont indexés.
              </small>
            </p>
          </fieldset>
        </form>
      
      <aside>
        <theme-toggle></theme-toggle>
      </aside>
    </article>
    <hr>
    <footer>
      <p>
        <a href="/david/" title="Aller à l’accueil">Accueil</a>
        •
        <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
        •
        <a href="http://larlet.com"
           title="Go to my English profile"
           data-instant>Pro</a>
        •
        <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
        •
        <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset div {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème</legend>
            <div>
              <label>
                <input type="radio" value="auto" name="chosen-color-scheme" checked>
                Auto
              </label>
              <label>
                <input type="radio" value="dark" name="chosen-color-scheme">
                Foncé
              </label>
              <label>
                <input type="radio" value="light" name="chosen-color-scheme">
                Clair
              </label>
            </div>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      class ThemeToggle extends HTMLElement {
        constructor() {
          super()
          const themeSelectorTemplate = document.querySelector('#theme-selector')
          const form = themeSelectorTemplate.content.firstElementChild
          this.attachShadow({ mode: 'open' })
          this.shadowRoot.appendChild(form.cloneNode(true))
        }

        connectedCallback() {
          const form = this.shadowRoot.querySelector('form')
          form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
          })

          const selectedTheme = localStorage.getItem('theme')
          if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
          }
        }
      }

      const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
      window.addEventListener('load', () => {
        let colorsLayer = undefined
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
          let mediaRules = []
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.cssRules) {
              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                continue
              }
              // WARNING: Safari does not have/supports `conditionText`.
              if (cssRule.conditionText) {
                if (cssRule.conditionText !== prefersColorSchemeDark) {
                  continue
                }
              } else {
                if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                  continue
                }
              }
              mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }
          }

          // WARNING: do not try to insert a Rule to a styleSheet you are
          // currently iterating on, otherwise the browser will be stuck
          // in a infinite loop…
          for (const mediaRule of mediaRules) {
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
    
  </body>
</html>