davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
							<!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 #dystopie
  — 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 #dystopie">
  <!-- 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>#dystopie</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/04/" title="Lien permanent vers cet article">Jour&nbsp;1</a> <time datetime="2024-03-04">4 mars 2024</time>
    </h2>
    
<p>Une réservation de longue date qui s’est transformée en sortie familiale (!), malheureusement nous n’avons pas pu rejoindre le refuge à ski faute de neige suffisante. C’était problématique car j’avais prévu de traîner une bonne partie de l’équipement, ce qui se révélait être un peu plus lourd sur le dos. Bon, aussi, on était partis sur une raclette, ça n’aide&nbsp;pas&nbsp;😅.</p>
<p>J’avais très peur que le sentier soit peu praticable sans percer à chaque pas, ce qui m’était déjà arrivé dans un tel contexte. Vu le poids du sac, je craignais notamment que ma cheville en cours de réparation refasse le même mouvement en descente… mais nous étions à une poignée de degrés de cet état de la neige pour notre plus grand&nbsp;bonheur.</p>
<p>Ce n’était pas non plus de tout repos et la récompense d’une lac dégelant à l’arrivée était bien méritée. Il est rare d’avoir ces conditions très douces dans un contexte hivernal, on en avait même oublié de prendre nos&nbsp;tuques&#8239;!</p>
<p><em>Tests du jour&nbsp;: les barquettes en aluminium pour faire réflecteur de bougies. Efficace. Les bougies longues durées d’Ikea pour faire fondre du fromage. Pas&nbsp;efficace.</em></p>
<figure>
    <a href="/static/david/2024/2024-03-04-lac-corbeau.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-03-04-lac-corbeau.jpg"
            width="3024" height="4032"
            srcset="/static/david/2024/2024-03-04-lac-corbeau.jpg 3024w, /static/david/2024/2024-03-04-lac-corbeau_660x440.jpg 660w, /static/david/2024/2024-03-04-lac-corbeau_990x660.jpg 990w, /static/david/2024/2024-03-04-lac-corbeau_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3024 / 4032))"
            loading="lazy"
            decoding="async"
            alt="Lac corbeau avec des boulots au premier plan.">
    </a>
    <figcaption>Un décor très minecrafteux&nbsp;(sic).</figcaption>
</figure>

    
      <nav>
        <p>
          
            <a href="/david/2024/dystopie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dystopie</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/solastalgia/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#solastalgia</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/21/" title="Lien permanent vers cet article">Cinéma</a> <time datetime="2024-02-21">21 février 2024</time>
    </h2>
    

<blockquote lang="en">
<p>Software is a creative industry with more in common with media production industries than&nbsp;housebuilding.</p>
<p><cite><em><a data-link-domain="baldurbjarnason.com" href="https://www.baldurbjarnason.com/2024/software-is-a-medium-of-setbacks/" hreflang="en"
            title="Consultation de l’article (anglais)">Software is a medium of setbacks, but a medium’s limitations don’t define the artist</a>
            <a href="/david/cache/2024/d133365d1dec62b9ad7ab4c911db863a/" hreflang="en"
                data-tippy data-description="Much of the time, progress in software development comes coupled with a matching regression.“We’ve made it better.”(Whispered) “But we’ve also made it worse. The evolution of Apple’s computing devices makes for a decent example."
                data-source="https://www.baldurbjarnason.com/2024/software-is-a-medium-of-setbacks/"
                data-date="2024-02-21"
                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>Pour filer la métaphore, je me demande si les assistants à base de <a data-link-domain="vitrinelinguistique.oqlf.gouv.qc.ca" href="https://vitrinelinguistique.oqlf.gouv.qc.ca/fiche-gdt/fiche/26570880/grand-modele-de-langage">grands modèles de langage</a> seraient l’équivalent des environnements verts dans lesquels évoluent les acteur·ices aujourd’hui. Leur métier a changé avec la technologie, leur jeu a dû s’adapter pour transmettre des émotions dans un contexte où iels ne maîtrisent plus du tout la chaîne de représentation de leur travail. J’imagine que même la vérification de leur prise nécessite une bonne dose&nbsp;d’imaginaire.</p>
<p>Quel est leur sentiment à la fin d’une journée de tournage&#8239;? Quel sera le&nbsp;mien&#8239;?</p>

<blockquote lang="en">
<p>Dear Mr. Architect!</p>
<p>Please design and build me a house. I am not quite sure of what I need, so you should use your discretion. My house should have between two and forty-five bedrooms. Just make sure the plans are such that the bedrooms can be easily added or deleted. When you bring the blueprints to me, I will make the final decision of what I want. Also, bring me the cost breakdown for each configuration so that I can arbitrarily pick&nbsp;one.</p>
<p><cite><em><a data-link-domain="gksoft.com" href="http://www.gksoft.com/a/fun/architects.html" hreflang="en"
            title="Consultation de l’article (anglais)">If Architects had to work like Programmers</a>
            <a href="/david/cache/2024/2ad967b8fc35e160fa8e6c1d2a3b4734/" hreflang="en"
                data-tippy data-description="You must be thrilled to be working on an interesting project as this!"
                data-source="http://www.gksoft.com/a/fun/architects.html"
                data-date="2024-02-21"
                data-favicon=""
                data-domain="gksoft.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>, 1995</cite></p>
</blockquote>
<a href="#hr-83" title="Lien vers cette section de la page"><hr id="hr-83" /></a>

<blockquote>
<p>Fracas est un collectif queer et féministe d’aide à la gestion de conflits interpersonnels, de violences et d’agressions au sein de&nbsp;collectifs.</p>
<p><cite><em><a data-link-domain="collectif-fracas.com" href="https://www.collectif-fracas.com/" hreflang="fr"
            title="Consultation de l’article">Fracas, collectif queer et féministe d’aide à la gestion de conflits</a>
            <a href="/david/cache/2024/f1041ff1c0dfabc719d64a4a5bcb0c10/" hreflang="fr"
                data-tippy data-description="Fracas est un collectif queer et féministe d’aide à la gestion de conflits interpersonnels, de violences et d’agressions au sein de collectifs."
                data-source="https://www.collectif-fracas.com/"
                data-date="2024-02-21"
                data-favicon="https://assets-global.website-files.com/60339ece26e0011279a8b071/614c50304051ad041149ae60_favicon.png"
                data-domain="collectif-fracas.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>Si peu de temps et tellement à&nbsp;explorer.</p>
<p>(<a data-link-domain="cqfd-journal.org" href="https://cqfd-journal.org/Se-reapproprier-nos-conflits" hreflang="fr"
            title="Consultation de l’article">Via CQFD</a>
            <a href="/david/cache/2024/81e8bd49021e320b84e5d4fbd4c7f587/" hreflang="fr"
                data-tippy data-description="En se penchant sur les manières dont sont prises en charge les violences (notamment sexistes et sexuelles) dans les milieux militants, l’ouvrage (...)"
                data-source="https://cqfd-journal.org/Se-reapproprier-nos-conflits"
                data-date="2024-02-21"
                data-favicon="https://cqfd-journal.org/squelettes/favicon.ico"
                data-domain="cqfd-journal.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> qui arrive à ne faire aucun lien vers le site en question, ça me rend&nbsp;fou…)</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/dystopie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dystopie</a>
          
            <a href="/david/2024/ia/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#IA</a>
          
            <a href="/david/2024/psychologie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#psychologie</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/01/" title="Lien permanent vers cet article">Vision</a> <time datetime="2024-02-01">1 février 2024</time>
    </h2>
    

<blockquote lang="en">
<p>But if you were to try just one thing using Vision Pro — just one thing — it has to be <mark>watching a movie</mark> in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your&nbsp;wallet.</p>
<p><cite><em><a data-link-domain="daringfireball.net" href="https://daringfireball.net/2024/01/the_vision_pro" hreflang="en"
            title="Consultation de l’article (anglais)">Daring Fireball: The Vision Pro</a>
            <a href="/david/cache/2024/cd9184008ba5d9e4c9be4d0a0eea4f60/" hreflang="en"
                data-tippy data-description="A headset, a spatial productivity platform, and a personal entertainment device."
                data-source="https://daringfireball.net/2024/01/the_vision_pro"
                data-date="2024-01-31"
                data-favicon="https://daringfireball.net/graphics/favicon.ico?v=005"
                data-domain="daringfireball.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>Ce jouet est bien trop cher… et c’est une bonne chose. D’une certaine manière, c’est la seule innovation de 2023&nbsp;qui ne comporte pas IA dans le premier écran marketing, c’est déjà pas mal. Je n’ai pas la naïveté de penser que la version 2&nbsp;ne nous amènera pas vers le <em>SpatIAl Computing</em> pour autant, restons&nbsp;sérieux.</p>
<p>Je peux imaginer des des <a data-link-domain="theinfiniteexperience.world" href="https://theinfiniteexperience.world">expériences immersives</a> dans des endroits dédiés, de la location comme on pouvait louer un DVD il y a des années, des salles dédiées en bibliothèques (ambiance dystopie cyberpunk assurée), à un moment il pourrait même y avoir un espace pour ça (payant&#8239;?) dans les <em>Apple Store</em>. Si le son est aussi bon que ce que peut décrire <em>Daring Fanboy</em>, j’aurais vraiment envie de me retrouver au milieu d’un concert, d’avoir le choix entre plusieurs points de vues et&nbsp;acoustiques.</p>
<p>Le côté immersif aurait aussi sa place en terme d’apprentissage / transmission. Être au premier rang d’une conférence ou d’un cours pourrait permettre de redéfinir son attention&nbsp;(?) et sachant que la dernière version de l’iPhone permet de capter de telles vidéos, c’est peut-être un moyen de faire entrer quelqu’un dans son salon ce qui produirait un autre type&nbsp;d’intimité.</p>
<p>En parlant de captation et d’intimité, avec les <em>deepfakes</em> il devient possible de se retrouver dans un salon mais dans une autre tenue. Toute prise de vidéo devient une menace potentielle. Impossible de ne pas penser à des objets connectés / synchronisés autour de la&nbsp;pornographie…</p>
<a href="#hr-59" title="Lien vers cette section de la page"><hr id="hr-59" /></a>

<blockquote lang="en">
<p>The “i” in iPhone stands for “inequality”. […]</p>
<p><mark>iPhone owners live in a different world</mark> than high-end Android buyers, and light-years away what the bulk of the market experiences. No matter how you slice it, the performance inequality gap is growing for CPU-bound workloads like JavaScript-heavy web&nbsp;apps.</p>
<p><cite><em><a data-link-domain="infrequently.org" href="https://infrequently.org/2024/01/performance-inequality-gap-2024/" hreflang="en"
            title="Consultation de l’article (anglais)">The Performance Inequality Gap, 2024</a>
            <a href="/david/cache/2024/0676c7ccf1ab2b380641866789366d26/" hreflang="en"
                data-tippy data-description="How much HTML, CSS, and JavaScript can we afford? More than in years past, but much less than frontend developers are burdening users with."
                data-source="https://infrequently.org/2024/01/performance-inequality-gap-2024/"
                data-date="2024-01-31"
                data-favicon="https://infrequently.org/assets/images/favicons/ino-dark-opt-192x192.png"
                data-domain="infrequently.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>Ce rapport me rappelle que la notion d’accessibilité est très vaste. Et je suis mal placé pour donner des leçons en vous faisant charger 5&nbsp;polices de caractères pour vous afficher une page… je n’ai pas encore travaillé les performances du thème de l’année et c’est une&nbsp;erreur.</p>

<blockquote lang="en">
<p>We got to a place where performance has been a constant problem in large part because a tribe of programmers convinced themselves that it <em>wasn’t</em> and <em>wouldn’t be</em>. […]</p>
<p>But tribalism-boosted confirmation bias mixed with JavaScript’s toxic positivity culture to precipitate out a Silicon Prosperity Gospel; all resources would go infinite if you just <em>believed</em>. […]</p>
<p>The solutions are social, not technical, because <mark>the delusions are social,</mark> rather than&nbsp;technical.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>Ça&nbsp;pique.</p>
<a href="#hr-60" title="Lien vers cette section de la page"><hr id="hr-60" /></a>

<blockquote lang="en">
<p>Rather, the biggest benefits I see are <em>collective</em>, cutting across the industry as a whole. I think web components can make the entire web more accessible. They have the potential to unify currently fragmented communities, including various JavaScript frameworks <em>and</em> <mark>those who avoid them</mark>.</p>
<p>[…] Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks. We probably won’t even all learn how to write&nbsp;them!</p>
<p><cite><em><a data-link-domain="jakelazaroff.com" href="https://jakelazaroff.com/words/the-web-component-success-story/" hreflang="en"
            title="Consultation de l’article (anglais)">The Web Component Success Story</a>
            <a href="/david/cache/2024/f4d2d42eba58062be910407690ae447c/" hreflang="en"
                data-tippy data-description="Web components won't take web development by storm, or show us the One True Way to build websites. What they will do is let us collectively build a rich ecosystem of dynamic components that work with any web stack."
                data-source="https://jakelazaroff.com/words/the-web-component-success-story/"
                data-date="2024-01-31"
                data-favicon="https://jakelazaroff.com/favicon.ico"
                data-domain="jakelazaroff.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>Très bon article et la boite de prévisualisation au survol de chaque lien ressemble beaucoup à ce que j’avais l’intention de faire pour régler mes soucis d’accès à la version archivée tout en affichant le domaine. Actuellement chaque lien devient trop long et hache le texte lorsque ça n’est pas en pied de citation (et encore). Il faut que je creuse comment cela est fait, via un <em>web component</em> réutilisable&nbsp;j’imagine&nbsp;:-).</p>
<p>PS&nbsp;: si vous minifiez votre JavaScript, les <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap">SourceMap</a> sont un moyen de partager votre expérience. Sinon l’aspect <q lang="en">collective</q> est beaucoup moins&nbsp;pertinent.</p>

    
      <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/dystopie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dystopie</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/#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>