|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498 |
- <!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 #dépendance
- — David Larlet</title>
- <meta name="description" content="Publications relatives au tag #dépendance">
- <!-- That good ol' feed, subscribe :). -->
- <link rel="alternate"
- type="application/atom+xml"
- title="Feed"
- href="/david/log/">
- <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
- <link rel="apple-touch-icon"
- sizes="180x180"
- href="/static/david/icons2/apple-touch-icon.png">
- <link rel="icon"
- type="image/png"
- sizes="32x32"
- href="/static/david/icons2/favicon-32x32.png">
- <link rel="icon"
- type="image/png"
- sizes="16x16"
- href="/static/david/icons2/favicon-16x16.png">
- <link rel="manifest" href="/static/david/icons2/site.webmanifest">
- <link rel="mask-icon"
- href="/static/david/icons2/safari-pinned-tab.svg"
- color="#07486c">
- <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
- <meta name="msapplication-TileColor" content="#f7f7f7">
- <meta name="msapplication-config"
- content="/static/david/icons2/browserconfig.xml">
- <meta name="theme-color"
- content="#f7f7f7"
- media="(prefers-color-scheme: light)">
- <meta name="theme-color"
- content="#272727"
- media="(prefers-color-scheme: dark)">
- <!-- Is that even respected? Retrospectively? What a shAItshow…
- https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
- <meta name="robots" content="noai, noimageai">
- <!-- Documented, feel free to shoot an email. -->
- <link rel="stylesheet" href="/static/david/css/style_2024-02-03.css">
- <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
- crossorigin>
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
- crossorigin>
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
- crossorigin>
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: dark)"
- crossorigin>
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: dark)"
- crossorigin>
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: dark)"
- crossorigin>
- <script>
- function toggleTheme(themeName) {
- document.documentElement.classList.toggle(
- 'forced-dark',
- themeName === 'dark'
- )
- document.documentElement.classList.toggle(
- 'forced-light',
- themeName === 'light'
- )
- }
- const selectedTheme = localStorage.getItem('theme')
- if (selectedTheme !== 'undefined') {
- toggleTheme(selectedTheme)
- }
- </script>
-
- <style type="text/css">
- details[open] summary {
- display: none;
- }
- </style>
-
- <body data-instant-intensity="viewport-all">
- <article>
-
- <header>
- <hgroup>
- <h1>#dépendance</h1>
- <p>Publications relatives à cette étiquette</p>
- </hgroup>
- </header>
- <nav>
- <p>
- <a href="/david/" title="Aller à l’accueil">
- Accueil</a>
- •
- <a rel="tags"
- href="/david/2024/#tags"
- title="Liste de toutes les étiquettes">
- Étiquettes</a>
- •
- <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
- •
- <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
- </p>
- </nav>
-
- <h2>
- <a href="/david/2024/02/03/" title="Lien permanent vers cet article">Archives</a> <time datetime="2024-02-03">3 février 2024</time>
- </h2>
-
-
- <blockquote lang="en">
- <p>Google will no longer be keeping a backup of the entire Internet. Google Search’s “cached” links have long been an alternative way to load a website that was down or had changed, but now the company is killing them off. Google “Search Liaison” Danny Sullivan confirmed the feature removal in an X post, saying the feature “was meant for helping people access pages when way back, you often couldn’t depend on a page loading. These days, <mark>things have greatly improved.</mark> So, it was decided to retire it.”</p>
- <p><cite><em><a data-link-domain="arstechnica.com" href="https://arstechnica.com/gadgets/2024/02/google-search-kills-off-cached-webpages/" hreflang="en"
- title="Consultation de l’article (anglais)">Google will no longer back up the Internet: Cached webpages are dead</a>
- <a href="/david/cache/2024/75c7b6350ba18a5a11ee3bbf8b3b64be/" hreflang="en"
- data-tippy data-description="Google Search will no longer make site backups while crawling the web."
- data-source="https://arstechnica.com/gadgets/2024/02/google-search-kills-off-cached-webpages/"
- data-date="2024-02-03"
- data-favicon="https://cdn.arstechnica.net/wp-content/themes/ars/assets/img/material-ars-db41652381.png"
- data-domain="arstechnica.com"
- ><svg xmlns="http://www.w3.org/2000/svg"
- width="24" height="24" viewBox="0 0 24 24" fill="none"
- stroke="currentColor" stroke-width="2" stroke-linecap="square"
- stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
- <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
- <line x1="12" y1="17" x2="12.01" y2="17"></line>
- </svg>
- <span class="sr-only">[archive]</span></a></em></cite></p>
- </blockquote>
- <p><em>(rires)</em></p>
- <p>Forcément en lisant ça un samedi matin, j’étais immédiatement motivé pour améliorer la façon dont j’archive les liens par ici. À commencer par des méta-données qui permettraient d’avoir une prévisualisation des liens un peu enrichie.</p>
- <p>Je me dis que je ne dois pas être le seul à essayer d’extraire des informations des pages. Et j’en trouve pas mal : <a data-link-domain="github.com" href="https://github.com/gri38/hyperlink_preview">hyperlink_preview</a>, <a data-link-domain="github.com" href="https://github.com/scrapinghub/extruct">extruct</a> ou <a data-link-domain="github.com" href="https://github.com/seanbreckenridge/url_cache">url_cache</a> pour ne citer qu’eux. Cela me met sur la piste de <a data-link-domain="github.com" href="https://github.com/michaelhelmick/lassie">Lassie</a> qui semble extraire ce que j’aimerais avoir : une image ou favicon, potentiellement une description, ainsi qu’une langue. Jake Lazaroff m’avait <a href="/david/2024/02/01/#hr-60">depuis répondu</a> qu’il génère en fait ses vignettes au moment de la <a data-link-domain="gist.github.com" href="https://gist.github.com/jakelazaroff/36b9665efe02870576acfc033171d6bf">construction du site</a>. Je ne veux pas totalement suivre cette approche car je ne veux pas stocker d’images additionnelles mais je vais essayer d’avoir une solution hybride.</p>
- <p>Cela m’embête de plus en plus de coupler le générateur de site aux (méta-)données des archives. <em>À méditer.</em></p>
- <p>Pour ce qui est de l’interface, ça attendra un autre jour. J’ai tout de même ajouté des attributs <code>hreflang</code> et la bonne langue dans les pages d’archives, un truc qui me grattait depuis un bout de temps.</p>
- <a href="#hr-62" title="Lien vers cette section de la page"><hr id="hr-62" /></a>
- <p>Cela fait <a href="/david/2020/02/07/#sonos">bien longtemps</a> que je regrette d’avoir acheté des enceintes Sonos. Hier — encore une fois frustré par l’application proposée par défaut — je découvre <a data-link-domain="github.com" href="https://github.com/SoCo/SoCo">SoCo</a> ainsi que <a data-link-domain="github.com" href="https://github.com/avantrec/soco-cli">soco-cli</a> après quelques recherches. Je passe ensuite la soirée à batailler avec Automator pour pouvoir faire un clic-droit sur un dossier local et que ça me lise les fichiers FLAC qui sont dedans.</p>
- <p>J’arrive à la solution suivante :</p>
- <pre><code>on run {input, parameters}
- tell application "Terminal"
- do script "cd ~/sonos && sonos Chambre play_dir '" & (POSIX path of input) & "'"
- end tell
- return input
- end run
- </code></pre>
- <p>Ce n’est pas très élégant et je n’ai pas réussi à faire en sorte que ça se lance dans iTerm mais au moins ça joue de la musique.</p>
- <a href="#hr-63" title="Lien vers cette section de la page"><hr id="hr-63" /></a>
-
- <blockquote lang="en">
- <p><strong>drab</strong> focuses on providing JavaScript functionality where it’s most useful. Many of the elements are helpful wrappers <mark>around browser APIs.</mark> Here are some of the features of the library.</p>
- <p><cite><em><a data-link-domain="drab.robino.dev" href="https://drab.robino.dev/" hreflang="en"
- title="Consultation de l’article (anglais)">drab - A Headless Custom Element Library</a>
- <a href="/david/cache/2024/2a1235215c277ebb8a0e9acb7ffd91e0/" hreflang="en"
- data-tippy data-description="A headless custom element library."
- data-source="https://drab.robino.dev/"
- data-date="2024-02-03"
- data-favicon="https://drab.robino.dev/favicon.svg"
- data-domain="drab.robino.dev"
- ><svg xmlns="http://www.w3.org/2000/svg"
- width="24" height="24" viewBox="0 0 24 24" fill="none"
- stroke="currentColor" stroke-width="2" stroke-linecap="square"
- stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
- <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
- <line x1="12" y1="17" x2="12.01" y2="17"></line>
- </svg>
- <span class="sr-only">[archive]</span></a></em></cite></p>
- </blockquote>
- <p>Le futur qui se dessine à ce sujet est <em>très</em> stimulant. Cela fait 15 ans qu’il y a une production de masse de code JS qui n’est ni réutilisable, ni interopérable. J’ai bon espoir que ce soit en train de changer.</p>
- <a href="#hr-64" title="Lien vers cette section de la page"><hr id="hr-64" /></a>
-
- <blockquote lang="en">
- <p>When trying to defend this, economists typically claim that we have unlimited desire for new stuff. Apparently, rather than dedicating the time gains from technology to leisure, we pour it into making more stuff for ourselves. This is bogus. People do have a limited desire for new things, because dedicating yourself to endless production (and consumption) comes at the expense of hanging out with your family, friends and pets, or doing stuff like walking in the wilderness or surfing the waves. What people actually desire is a balance of many things, but <mark>the system we’re stuck in has unlimited desire for one direction only.</mark> That’s because it’s a vortex unleashed by humans who no longer know how to stop it.</p>
- <p><cite><em><a data-link-domain="brettscott.substack.com" href="https://brettscott.substack.com/p/tech-doesnt-make-our-lives-easier" hreflang="en"
- title="Consultation de l’article (anglais)">Tech doesn’t make our lives easier. It makes them faster</a>
- <a href="/david/cache/2024/9750840b448f07a2f2594bb25da23836/" hreflang="en"
- data-tippy data-description="Supposedly technologies like AI and digital payments make our lives easier. In reality convenience is an illusion used to sell us automation-driven acceleration"
- data-source="https://brettscott.substack.com/p/tech-doesnt-make-our-lives-easier"
- data-date="2024-02-03"
- data-favicon="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fd3d5b3dd-9c2b-4f8c-a2b7-f39933be1d53%2Ffavicon-16x16.png"
- data-domain="brettscott.substack.com"
- ><svg xmlns="http://www.w3.org/2000/svg"
- width="24" height="24" viewBox="0 0 24 24" fill="none"
- stroke="currentColor" stroke-width="2" stroke-linecap="square"
- stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
- <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
- <line x1="12" y1="17" x2="12.01" y2="17"></line>
- </svg>
- <span class="sr-only">[archive]</span></a></em></cite></p>
- </blockquote>
- <p>Un bon article à lire après 24h de galères techniques 😅.</p>
-
-
- <nav>
- <p>
-
- <a href="/david/2024/dependance/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#dépendance</a>
-
- <a href="/david/2024/opensource/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#opensource</a>
-
- <a href="/david/2024/technique/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#technique</a>
-
- <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
- </p>
- </nav>
-
-
- <h2>
- <a href="/david/2024/01/20/" title="Lien permanent vers cet article">Extinction</a> <time datetime="2024-01-20">20 janvier 2024</time>
- </h2>
-
-
- <blockquote lang="en">
- <p>So where have all the websites gone? Well, the people who make them have all gone to war for the capitalist machine. They grew up and got jobs. A natural part of growing up. Silos came and plucked their voices. Invasive memes and short form content grew in their place. Hustle overtook leisure. Harassment overtook openness. Influence overtook creativity. An economy of interestingness replaced by one of followers, likes, and engagement metrics.</p>
- <p>One important thing to note; <mark>websites aren’t extinct.</mark> In fact, you’re on one now! Uploading your own words is ancient technology but still works.</p>
- <p><cite><em><a data-link-domain="daverupert.com" href="https://daverupert.com/2024/01/where-have-all-the-websites-gone/" hreflang="en"
- title="Consultation de l’article (anglais)">Where have all the flowers gone?</a>
- <a href="/david/cache/2024/7136e0810bfa42c4a9ca798a55cd2d53/" hreflang="en"
- data-tippy data-description="A post from Jason Velazquez called “Where have all the websites gone?” crossed my socials. It’s a good lament about the dearth of interesting content on the internet and how we’re stuck in the same boring content silos."
- data-source="https://daverupert.com/2024/01/where-have-all-the-websites-gone/"
- data-date="2024-01-19"
- data-favicon="https://daverupert.com/favicon.ico"
- data-domain="daverupert.com"
- ><svg xmlns="http://www.w3.org/2000/svg"
- width="24" height="24" viewBox="0 0 24 24" fill="none"
- stroke="currentColor" stroke-width="2" stroke-linecap="square"
- stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
- <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
- <line x1="12" y1="17" x2="12.01" y2="17"></line>
- </svg>
- <span class="sr-only">[archive]</span></a></em></cite></p>
- </blockquote>
- <p>En réponse à <q lang="en"><a data-link-domain="fromjason.xyz" href="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/" hreflang="en"
- title="Consultation de l’article (anglais)">Where have all the websites gone?</a>
- <a href="/david/cache/2024/c3272392d462da90874d32841e5caac8/" hreflang="en"
- data-tippy data-description="It feels like all the cool websites from the late 2000s are gone. But maybe we are looking at this the wrong way. Maybe it is us who vanished."
- data-source="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/"
- data-date="2024-01-09"
- data-favicon="https://www.fromjason.xyz/img/favicon.png"
- data-domain="fromjason.xyz"
- ><svg xmlns="http://www.w3.org/2000/svg"
- width="24" height="24" viewBox="0 0 24 24" fill="none"
- stroke="currentColor" stroke-width="2" stroke-linecap="square"
- stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
- <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
- <line x1="12" y1="17" x2="12.01" y2="17"></line>
- </svg>
- <span class="sr-only">[archive]</span></a></q> que j’ai <a href="/david/2024/01/10/#hr-24">déjà cité</a>. Peut-être que la capacité à publier est toujours là mais que nous avons <a href="/david/2024/01/12/#hr-27">trop changé</a> pour être capables de perdurer dans cette pratique. 2024 pourrait me faire mentir car je vois une certaine effervescence dans mon agrégateur. On va bien voir si ça dure. On va bien voir si <em>je</em> dure.</p>
- <p><em>Guidé par le besoin, je suis en train d’automatiser des ancres sur mes <code><hr></code>, fausse bonne idée ? En affinant un peu le style ça me convient pour l’instant.</em></p>
- <a href="#hr-40" title="Lien vers cette section de la page"><hr id="hr-40" /></a>
-
- <blockquote>
- <p>public-inbox implements the sharing of an email inbox via git to complement or replace traditional mailing lists. Readers may read via NNTP, IMAP, POP3, Atom feeds or HTML archives.</p>
- <p>public-inbox spawned around three main ideas:</p>
- <ul>
- <li>Publicly accessible and archived communication is essential to Free Software development.</li>
- <li>Contributing to Free Software projects should not require the use of non-Free services or software.</li>
- <li><mark>Graphical user interfaces should not be required for text-based communication.</mark> Users may have broken graphics drivers, limited eyesight, or be unable to afford modern hardware.</li>
- </ul>
- <p>public-inbox aims to be easy-to-deploy and manage; encouraging projects to run their own instances with minimal overhead.</p>
- <p><cite><em><a data-link-domain="public-inbox.org" href="https://public-inbox.org/README.html" hreflang="en"
- title="Consultation de l’article (anglais)">public-inbox - an "archives first" approach to mailing lists</a>
- <a href="/david/cache/2024/30b40ff8034212e070dc7daf2b9406e9/" hreflang="en"
- data-tippy data-description="public-inbox implements the sharing of an email inbox via git to complement or replace traditional mailing lists. Readers may read via NNTP, IMAP, POP3, Atom feeds or HTML archives."
- data-source="https://public-inbox.org/README.html"
- data-date="2024-01-19"
- data-favicon="https://public-inbox.org/favicon.ico"
- data-domain="public-inbox.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>D’une certaine manière, l’<a data-link-domain="github.com" href="https://github.com/jgm/pandoc/issues/9250">extinction de voix des un·es</a> fait mon bonheur de découverte aujourd’hui. J’espère que le réflexe ne sera pas de passer de <em>Google Groups</em> à <em>Microsoft Github Discussions</em> par commodité.</p>
- <a href="#hr-41" title="Lien vers cette section de la page"><hr id="hr-41" /></a>
-
- <blockquote>
- <p>… ça veut dire qu’en vrai, les droits humains, tu t’en fiches pas mal.</p>
- <p>Et que tu es juste <mark>un peu raciste</mark>.</p>
- <p><cite><em><a data-link-domain="emmaclit.com" href="https://emmaclit.com/2024/01/19/culture-froncaise/">Culture fronçaise</a></em></cite></p>
- </blockquote>
- <p>Voilà.</p>
- <a href="#hr-42" title="Lien vers cette section de la page"><hr id="hr-42" /></a>
- <figure>
- <a href="/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg"
- title="Cliquer pour une version haute résolution">
- <img
- src="/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg"
- width="3024" height="3024"
- srcset="/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg 3024w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_660x440.jpg 660w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_990x660.jpg 990w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_1320x880.jpg 1320w"
- sizes="min(100vw, calc(100vh * 3024 / 3024))"
- loading="lazy"
- decoding="async"
- alt="Un enfant de dos dans des traces de ski de fond classique à la tombée du jour">
- </a>
- <figcaption>-16°C, rien de mieux pour démarrer une fin de semaine qu’une sortie ski dans notre jardin après l’école.</figcaption>
- </figure>
- <p>Cette photo est floue, c’est devenu tellement rare avec un téléphone (<em>OK Boomer</em> :p). Les couleurs étaient superbes et une fois les mains réchauffées c’était une ambiance très agréable. On n’a pas croisé grand monde. La rééducation active continue tranquillement son chemin.</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/evolution/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#évolution</a>
-
- <a href="/david/2024/parentalite/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#parentalité</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>
|