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 #sport
  — David Larlet</title>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <meta name="description" content="Publications relatives au tag #sport">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  
  <style type="text/css">
    details[open] summary {
      display: none;
    }
  </style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>#sport</h1>
      <p>Publications relatives à cette étiquette</p>
    </hgroup>
  </header>
  <nav>
    <p>
      <a href="/david/" title="Aller à l’accueil">
        Accueil</a>
      •
      <a rel="tags"
        href="/david/2024/#tags"
        title="Liste de toutes les étiquettes">
        Étiquettes</a>
      •
      <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
      •
      <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/03/14/" title="Lien permanent vers cet article">Montre 2</a> <time datetime="2024-03-14">14 mars 2024</time>
    </h2>
    
<p>J’ai reçu un <a href="/david/2024/03/02/" title="Montre">nouveau jouet</a> aujourd’hui. Alors je me suis amusé. Il me reste beaucoup de données et fonctionnalités à&nbsp;explorer.</p>
<p>J’ai finalement opté pour la version non-Pro afin de privilégier un format qui me convient mieux (taille / poids), j’ai pu tester en magasin les deux&nbsp;auparavant.</p>
<p>Il faut que j’apprenne à ne pas courir <em>contre</em> mais <em>avec</em> la montre. J’ai trop tendance à pousser alors qu’elle sait bien à mon poignet que mon cœur ne va pas&nbsp;suivre.</p>
<p>Il y a du travail à faire pour transformer un jugement en&nbsp;allié.</p>

<blockquote>
<p>Tu peux parler fort, exhiber ton savoir, assener tes arguments, brandir ta culture…<br />
… mais la conversation est à sens unique et totalement stérile.<br />
Au terme de l’échange tu demeures exactement le même, tu n’as pas évolué d’un&nbsp;pouce.</p>
<p>La rencontre n’a pas eu&nbsp;lieu.</p>
<p>Ou bien, tu peux laisser l’autre s’exprimer, l’écouter. Et alors te hisser sur la marche qu’il érige puis en poser une à ton tour.<br />
Vois ta balle de tennis comme le lien qui te rattache aux autres. Cultive-le tant que tu peux.<br />
Ne cherche plus à lutter contre les autres pour être meilleur, Max, mais deviens meilleur grâce à&nbsp;eux.</p>
<p>Le tennis est un art. L’art de&nbsp;l’échange.</p>
<p><cite><em>Max Winson</em>, Jérémie&nbsp;Moreau</cite></p>
</blockquote>

    
      <nav>
        <p>
          
            <a href="/david/2024/deception/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#déception</a>
          
            <a href="/david/2024/enthousiasme/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#enthousiasme</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/03/02/" title="Lien permanent vers cet article">Montre</a> <time datetime="2024-03-02">2 mars 2024</time>
    </h2>
    
<p>J’ai une <a data-link-domain="suunto.com" href="https://www.suunto.com/fr-ca/Produits/Montres-de-sport/Suunto-Ambit/Suunto-Ambit-Black/" hreflang="fr"
            title="Consultation de l’article">Suunto Ambit Black</a>
            <a href="/david/cache/2024/4050651a19400713c8563166e2a9abd5/" hreflang="fr"
                data-tippy data-description="La qualifier de simple montre serait un peu réducteur."
                data-source="https://www.suunto.com/fr-ca/Produits/Montres-de-sport/Suunto-Ambit/Suunto-Ambit-Black/"
                data-date="2024-03-02"
                data-favicon="https://www.suunto.com/favicon-16x16.png"
                data-domain="suunto.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a> achetée il y a une douzaine d’années. (Merci à Suunto de garder une page avec les caractéristiques d’un produit qui n’est plus construit / vendu&#8239;! C’est notamment utile pour comparer les spécifications de taille et poids.) Je me demandais si les montres actuelles allaient pouvoir résister à une <a href="/david/2024/02/24/" title="Jour 1">température inférieure à -20°C</a> et il semblerait que ce ne soit pas le cas, tous les modèles que j’ai consulté spécifient clairement que c’est la limite&nbsp;basse.</p>
<figure>
    <a href="/static/david/2024/2024-03-02-coros-apex-2-temperatures.png"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-03-02-coros-apex-2-temperatures.png"
            width="2390" height="1306"
            srcset="/static/david/2024/2024-03-02-coros-apex-2-temperatures.png 2390w, /static/david/2024/2024-03-02-coros-apex-2-temperatures.png 660w, /static/david/2024/2024-03-02-coros-apex-2-temperatures.png 990w, /static/david/2024/2024-03-02-coros-apex-2-temperatures.png 1320w"
            sizes="min(100vw, calc(100vh * 2390 / 1306))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran pour la Coros Apex 2&nbsp;qui va de -20°C à 50°C.">
    </a>
    <figcaption>Même Kiki a du mal par -20°C&nbsp;!</figcaption>
</figure>
<p><em>Détail marrant&nbsp;: Kilian Jornet était déjà sur les photos de promotion de la Suunto Ambit Black et on le retrouve sur la Coros Apex 2&nbsp;Pro&nbsp;d’aujourd’hui.</em></p>
<p>Au-delà de l’aspect scientifique d’envisager une montre qui résiste aux températures locales, il y a une <a href="/david/2024/01/27/" title="Jour 1">situation récente</a> qui me reste en tête aussi (ce n’est <a href="/david/2020/12/18/">pas la première fois</a>, et ce ne sera certainement pas la dernière). Une position GPS précise aurait certainement pu m’aider dans ce cas là, si je n’avais pas été trop entêté pour ne pas la consulter. J’envisage aussi des <a href="/david/2024/01/06/" title="Objectif">objectifs</a> sur lesquels j’ai besoin de me rassurer / entraîner spécifiquement en ayant une idée des distances que je pourrais parcourir dans un contexte donné que j’envisage plus rapide que ce que j’ai l’habitude de&nbsp;faire.</p>
<p>Je cherche en priorité une montre qui affiche un fond de carte, ce n’est pas tant ma trace programmée que ce qu’il y a autour qui m’intéresse dans d’autres contextes exploratoires. Sur ma montre actuelle, je ne pouvais qu’enregistrer une trace à suivre qui m’indiquait les déviations mais <em>pour ma pratique</em> ce n’était pas très intéressant. Savoir qu’il y a un lac / chemin forestier à proximité peut changer ma sortie. Difficile de savoir <em>a priori</em> si les données pour mes lieux de balade seront à jour ou suffisamment&nbsp;détaillées.</p>
<p>J’ai regardé l’Apple Watch Ultra 2, la Suunto Vertical Titanium Solar, des Garmin d’«&nbsp;aventure&nbsp;» et finalement la Coros Apex 2 (Pro). Dans tous les cas, ce sont de grosses montres et j’ai un poignet fin. Dans tous les cas, le <em>marketing</em> est complètement délirant&nbsp;🙃. Sans compter le prix. La Coros semble être la moins chère (!) qui réponde à l’ensemble de mes attentes, la version Pro ayant une meilleure précision GPS et autonomie, ce qui m’importe&nbsp;beaucoup.</p>
<p>Ah, <a href="/david/2024/02/07/#hr-69">aussi</a>. Difficile à justifier, même amortie sur la prochaine décennie… et c’est d’ailleurs là où j’ai de sérieux doutes en terme d’obsolescence programmée, ce qui a duré 10&nbsp;ans ne durera probablement plus 10&nbsp;ans. Triste réalité. J’essaye de ne pas trop me demande si <em>je</em> vais être capable de passer encore une décennie à arpenter la&nbsp;forêt.</p>
<p><strong>Montre</strong> moi tes peurs et je te dirai comment les&nbsp;acheter.</p>
<p><em>P.S.&nbsp;: j’ai un petit truc qui me gratte aussi dans le fait de ne pas être utilisateur régulier de <a data-link-domain="umap-project.org" href="https://umap-project.org/fr/">uMap</a>, ce qui est un manque à différents niveaux. Avoir davantage de données me motiverait certainement à jouer avec. Il y a des lieux que je veux garder intimes et d’autres qui sont déjà bien publics. J’ai une vieille envie de pouvoir raconter mes sorties sur un fond de carte à la <a data-link-domain="storymap.knightlab.com" href="https://storymap.knightlab.com/">StoryMap</a> (<a data-link-domain="github.com" href="https://github.com/slead/leaflet-storymap">avec Leaflet&#8239;?</a>) pour agrémenter les récits de sons et images correspondants aux lieux&nbsp;parcourus.</em></p>

    
      <nav>
        <p>
          
            <a href="/david/2024/dependance/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dépendance</a>
          
            <a href="/david/2024/sport/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#sport</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/24/" title="Lien permanent vers cet article">Jour 1</a> <time datetime="2024-02-24">24 février 2024</time>
    </h2>
    
<p>Arrivée en fin de matinée. La voiture affiche -12°C et je sais que je ne vais probablement pas avoir plus ces 30&nbsp;prochaines heures dans la forêt. Depuis que j’ai appris la connaissance de la Grande Boucle de la forêt de Ouareau, j’ai eu envie de la faire, à mon rythme, avec une nuit à l’autre bout du parc. Ma pulka est énorme, ils annoncent une nuit fraîche et avec du vent. Je me lance dans la première descente alors que la neige est dure comme de la roche. J’apprends à mes dépens que les écailles des skis ne sont pas adaptées lorsque je repars en arrière à la première montée. Première chute, ça commence&nbsp;bien.</p>
<p>Avec les demi-peaux, ça passe déjà mieux mais ça demande de beaucoup forcer sur les bras. Les quelques personnes que je croise en skis de fond n’en mènent pas large non plus, les conditions sont atroces quel que soit l’équipement on dirait. Certains choisissent de tirer 40&#8239;kg en plus pour le fun. Après quelques heures, j’arrive enfin au lac tant espéré, le soleil me gratifie de ses derniers rayons pour monter le camp et préparer de quoi me réchauffer pour la&nbsp;soirée.</p>
<figure>
    <a href="/static/david/2024/2024-02-24-pulka-lac-boeuf.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-24-pulka-lac-boeuf.jpg"
            width="4032" height="3024"
            srcset="/static/david/2024/2024-02-24-pulka-lac-boeuf.jpg 4032w, /static/david/2024/2024-02-24-pulka-lac-boeuf_660x440.jpg 660w, /static/david/2024/2024-02-24-pulka-lac-boeuf_990x660.jpg 990w, /static/david/2024/2024-02-24-pulka-lac-boeuf_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 4032 / 3024))"
            loading="lazy"
            decoding="async"
            alt="La pulka devant le lac bœuf.">
    </a>
    <figcaption>La joie d’arriver au lieu de campement avec mes deux&nbsp;chevilles.</figcaption>
</figure>
<p>Il fait déjà -16°C et j’ai choisi de prendre une tente cette fois-ci par crainte du vent annoncé mais il n’y a pas de soucis à se faire pour l’instant. C’est même très agréable s’il n’y avait pas le ronron des motoneiges dans le lointain qui vient casser un peu l’ambiance. Le son porte très loin en&nbsp;hiver.</p>
<p>Je suis pas mal déshydraté mais j’essaye de gérer stratégiquement cela, je sais qu’il va falloir passer le plus longtemps possible dans le duvet. Les courbatures attendront. Je passe une bonne soirée au coin du feu car il y a finalement très peu de vent et la voûte céleste est superbe par ces températures. J’aurais bien dormi à la belle&nbsp;étoile.</p>
<figure>
    <a href="/static/david/2024/2024-02-24-tente-ouverte.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-24-tente-ouverte.jpg"
            width="4032" height="3024"
            srcset="/static/david/2024/2024-02-24-tente-ouverte.jpg 4032w, /static/david/2024/2024-02-24-tente-ouverte_660x440.jpg 660w, /static/david/2024/2024-02-24-tente-ouverte_990x660.jpg 990w, /static/david/2024/2024-02-24-tente-ouverte_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 4032 / 3024))"
            loading="lazy"
            decoding="async"
            alt="Une tente ouverte avec un duvet à l’intérieur.">
    </a>
    <figcaption>Chambre avec&nbsp;vue.</figcaption>
</figure>
<p>Je suis bien content d’avoir pris mon plus gros duvet car j’apprends que le thermomètre de ma montre s’arrête de fonctionner à partir de -20°C. Et il n’est que 7&#8239;h du soir. Le passage du foyer au duvet est toujours un moment assez critique. Je découvre que les chaufferettes permettent de récupérer des pieds gelés plus rapidement (j’avais fait l’erreur de ne prendre que des bouteilles isotherme). Je prends soin de donner une forme enfilable à mes chaussures avec la bonne position des lacets qui vont geler&nbsp;aussi.</p>
<p>Je m’endors en écoutant le silence, seulement brisé par les arbres qui craquent de froid. L’hiver tire ses dernières balles et certains resteront couchés&nbsp;demain.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/aventure/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#aventure</a>
          
            <a href="/david/2024/foret/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#forêt</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/15/" title="Lien permanent vers cet article">Rééducation</a> <time datetime="2024-01-15">15 janvier 2024</time>
    </h2>
    
<p>J’ai réussi à marcher 6&#8239;km dans la neige avec des bottes de neige assez hautes. Pas pire. On va voir si ça ne tire pas trop dans la nuit. J’ai appris à mettre des bandes de kynésiologie aussi pour un léger soutien sur la rotation interne. Ce n’est pas une entorse classique car généralement deux arbres ne sont pas impliqués donc la torsion est différente. Du moins, c’est ce que mon doctorat express en médecine me laisse à penser… et mes sensations&nbsp;surtout&#8239;!</p>
<p>Récupération active ou&nbsp;impatience&#8239;?</p>
<a href="#hr-32" title="Lien vers cette section de la page"><hr id="hr-32" /></a>

<blockquote lang="en">
<p>The front-end to your dev&nbsp;env.</p>
<p><cite><em><a data-link-domain="mise.jdx.dev" href="https://mise.jdx.dev/">mise-en-place</a></em></cite></p>
</blockquote>
<p>Ironiquement, j’ai toujours la crainte que ces outils viennent davantage polluer mon environnement actuel. Je ne suis pas sur assez de produits pour rencontrer des limites à ce niveau. Je m’en sors plutôt bien avec <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/shell/#alias">quelques alias</a> et un <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/shell/#auto-deactivation-des-virtualenvs">environnement virtuel dé·monté</a> à l’entrée dans un&nbsp;dossier.</p>
<p>Je compare un peu des carottes et des patates mais ça donne une direction en terme de frugalité sur ce plan là. On simplifie rarement un environnement en ajoutant une couche (coucou Docker), au mieux on masque une incompétence. Ce qui n’est pas toujours une <a href="/david/2024/01/05/" title="Vocabulaire">tension</a> en fonction du&nbsp;contexte&#8239;!</p>

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

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

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

    
      <nav>
        <p>
          
            <a href="/david/2024/accessibilite/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#accessibilité</a>
          
            <a href="/david/2024/sport/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#sport</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/06/" title="Lien permanent vers cet article">Objectif</a> <time datetime="2024-01-06">6 janvier 2024</time>
    </h2>
    
<p>C’est fou comme le fait de se donner un objectif (sportif) change la donne en terme de motivation. Pour cette année, ce sera la <em>Traversée de Charlevoix</em>. Je vais essayer de documenter le processus de&nbsp;préparation.</p>
<a href="#hr-10" title="Lien vers cette section de la page"><hr id="hr-10" /></a>
<p>Au détour d’un vieux&nbsp;chalet&nbsp;:</p>
<figure>
    <a href="/static/david/2024/2024-01-05-la-recherche-sida.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-01-05-la-recherche-sida.jpg"
            width="4032" height="3024"
            srcset="/static/david/2024/2024-01-05-la-recherche-sida.jpg 4032w, /static/david/2024/2024-01-05-la-recherche-sida_660x440.jpg 660w, /static/david/2024/2024-01-05-la-recherche-sida_990x660.jpg 990w, /static/david/2024/2024-01-05-la-recherche-sida_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 4032 / 3024))"
            loading="lazy"
            decoding="async"
            alt="Photo du Magazine «&nbsp;La Recherche&nbsp;» (couverture)">
    </a>
    <figcaption>La Recherche, juin 1985. Les mécanismes biologiques autour du SIDA étaient en cours de&nbsp;découverte.</figcaption>
</figure>
<p>D’autres temps, d’autres&nbsp;démons.</p>
<a href="#hr-11" title="Lien vers cette section de la page"><hr id="hr-11" /></a>
<p>Le dossier spécial sur la voiture électrique se terminait&nbsp;ainsi&nbsp;:</p>

<blockquote>
<p>Nous sommes loin des anticipations du début des années 1970&nbsp;qui attribuaient au véhicule électrique 7&nbsp;à 10&#8239;% du parc automobile à l’horizon 1990-1995. L’avenir même du véhicule, du moins en ce qui concerne l’étendue de son champ d’utilisation, demeure incertain. Celle-ci sera fonction des progrès qui seront réalisés sur les générateurs électrochimiques. Les filières potentiellement les plus performantes (filières chaudes, filières organiques, piles à combustibles) n’en sont encore qu’au stade de la recherche appliquée ou du développement et quelques-unes au stade de la recherche fondamentale. Mais des progrès sont enregistrés et les raisons profondes de poursuivre l’effort demeurent. <mark>Si une volonté politique s’affirme et parvient à motiver les premiers utilisateurs potentiels</mark> (administrations et grands organismes publics), on peut espérer voir sortir les premières séries industrielles de véhicules au début de la prochaine&nbsp;décennie.</p>
</blockquote>
<p>D’autres époques, mêmes utopies. Je vois de plus en plus de gros véhicules électriques, j’ai même croisé une JEEP l’autre fois. Tristesse du rêve&nbsp;américain.</p>
<a href="#hr-12" title="Lien vers cette section de la page"><hr id="hr-12" /></a>

<blockquote>
<p>J’aime bien l’expression «&nbsp;sans nom&nbsp;» (genre une galère sans nom, une injustice sans nom)<br />
Ça fait un peu eldritchien pour moi, genre quelque chose de si terrible qu’on ne peut pas le nommer, qu’on ne peut pas concevoir&nbsp;entièrement</p>
<p>Mais aussi ça me donne l’impression que si je nomme les choses ça va régler une partie du problème c’est&nbsp;fun</p>
<p>«&nbsp;ma vie était une galère sans nom c’était terrible. Bha je l’ai appelé bob et du coup depuis ça&nbsp;va&nbsp;»</p>
<p><cite><a data-link-domain="pipou.academy" href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p>
</blockquote>

    
      <nav>
        <p>
          
            <a href="/david/2024/addiction/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#addiction</a>
          
            <a href="/david/2024/processus/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#processus</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/#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>