davidbgk
/
larlet-fr-david


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
      <nav>
        <p>
          
            <a href="/david/2024/evolution/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#évolution</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
            <a href="/david/2024/web/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#web</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/03/" title="Lien permanent vers cet article">Appariement</a> <time datetime="2024-01-03">3 janvier 2024</time>
    </h2>
    
<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi" href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
<p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS&nbsp;layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes&nbsp;sections.</p>
<p>Je m’amuse comme un petit fou même si la CSS fait subitement&nbsp;350&nbsp;lignes.</p>
<a href="#hr-4" title="Lien vers cette section de la page"><hr id="hr-4" /></a>

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

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

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

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

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

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

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

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

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

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