davidbgk
/
larlet-fr-david

<!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>
  <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">
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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>#technique</h1>
      <p>Publications relatives à cette étiquette</p>
    </hgroup>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">
        Accueil</a>
      •
      <a rel="tags"
        href="/david/#tags-2024"
        title="Liste de toutes les étiquettes">
        Étiquettes</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">Part 5: Clues to Fix the Front Web</a> <a href="/david/cache/2024/40aada3cc8d6897fda5a277c4299c1fd/" title="Copie locale au 2024-01-09">[archive]</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/">les démo</a> <a href="/david/cache/2024/9f8c0e75066c1882a3b4ce084e3223ed/" title="Copie locale au 2024-01-09">[archive]</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/">Your tech stack is not the product</a> <a href="/david/cache/2024/877b1e29328f6ad1b6fef26d7407ec5f/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
</blockquote>
<hr />

<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">Designing better target sizes</a> <a href="/david/cache/2024/c98206d38897264005bcd5b453d032b1/" title="Copie locale au 2024-01-10">[archive]</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/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
    <hr>
  
    <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>
<hr />
<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>
<hr />

<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/">Style with Stateful, Semantic Selectors</a> <a href="/david/cache/2024/99e7d2ba7e4adc69dbf0f1b2858a5248/" title="Copie locale au 2024-01-08">[archive]</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/">The UX of HTML</a> <a href="/david/cache/2024/e5056f8e0e6acf87c5777ba5b3a2ba92/" title="Copie locale au 2024-01-08">[archive]</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/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
    <hr>
  
    <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>
<hr />

<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">Ma page /now (ou plutôt /en-ce-moment)</a> <a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">[archive]</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/">Opening Mail</a> <a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">[archive]</a></em></cite></p>
</blockquote>
<p>Note&nbsp;: cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes&nbsp;articles.</p>
<hr />
<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/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
    <hr>
  
    <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/">coucou Antoine</a> <a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">[archive]</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>
<hr />

<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">notes</a> <a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">[archive]</a></em>, Karl</cite></p>
</blockquote>
<p>🧡</p>
<hr />
<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/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
    <hr>
  
</article>

    <hr>
    <footer>
      <p>
        <nobr>
          <a href="/david/" title="Aller à l’accueil">Accueil</a>
        </nobr>
        •
        <nobr>
          <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
        </nobr>
        •
        <nobr>
          <a href="http://larlet.com"
             title="Go to my English profile"
             data-instant>Pro</a>
        </nobr>
        •
        <nobr>
          <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
        </nobr>
        •
        <nobr>
          <abbr class="nowrap"
                title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
        </nobr>
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème
            </legend>
            <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>
          </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>