Implement dark theme for cached articles too

cache/2020/02b1967f7086ab2d3eb84d2ce8129e95/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Être libres à l’époque du numérique</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="http://blog.sens-public.org/marcellovitalirosati/tre-libres-lpoque-du-numrique/">Source originale du contenu</a></h2>
 <p><img src="https://mpng.pngfly.com/20190123/bst/kisspng-linux-libre-free-software-foundation-latin-america-download-freedo-svg-clipart-1-432-free-freedo-p-5c49402ceb6da7.6071370315483044289643.jpg"/>
 <p>Nous parlons de plus en plus de « numérique » en substantivant un adjectif qui – initialement – comporte une signification technique précise et qui devient désormais davantage un phénomène culturel qu’une notion liée à des outils technologiques particuliers. Cette universalisation du numérique nous permet de comprendre des changements qui affectent l’ensemble de notre société et notre façon de penser, comme l’a bien expliqué notamment Milad Doueihi par son concept de <a href="https://via.hypothes.is/http://www.hup.harvard.edu/catalog.php?isbn=9780674055247">« culture numérique »</a>.</p>
@@ -119,7 +141,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/02c4fd680fe2704b27f59a71a269b3db/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>COVID-19, l’ami des dominants</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="http://www.ardeur.net/2020/04/covid-19-lami-des-dominants/">Source originale du contenu</a></h2>
 <p align="JUSTIFY"><strong>COVID-19, l’ami des dominants : un texte écrit par <a href="http://www.ardeur.net/nos-coordonnees/" target="_blank" rel="noopener noreferrer">l’équipe de L’ardeur</a>, association d’éducation populaire politique</strong></p>
 
@@ -178,7 +200,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/032142ee0df638618a8b145cb7ea9ebc/index.html

@@ -0,0 +1,210 @@
+<!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>
+  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>Datasette: A Developer, a Shower and a Data-Inspired Moment (archive) — David Larlet</title>
+<!-- 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="#f0f0ea">
+<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
+<meta name="theme-color" content="#f0f0ea">
+<!-- Documented, feel free to shoot an email. -->
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
+<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
+<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_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/triplicate_t4_poly_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/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
+
+  <meta name="robots" content="noindex, nofollow">
+  <meta content="origin-when-cross-origin" name="referrer">
+  <!-- Canonical URL for SEO purposes -->
+  <link rel="canonical" href="https://thenewstack.io/datasette-a-developer-a-shower-and-a-data-inspired-moment/">
+
+<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
+
+<article>
+<h1>Datasette: A Developer, a Shower and a Data-Inspired Moment</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
+<h2><a href="https://thenewstack.io/datasette-a-developer-a-shower-and-a-data-inspired-moment/">Source originale du contenu</a></h2>
+<p>We tend to think of open source as a community, even as an altruistic endeavor. But sometimes a project can be “aggressively open source,” as <a href="https://datasette.readthedocs.io/en/stable/" class="ext-link" rel="external ">Datasette</a> founder <a href="https://twitter.com/simonw" class="ext-link" rel="external ">Simon Willison</a> puts it, for a bunch of “very selfish reasons.” Willison has written a great deal of open source (e.g., co-creator of <a href="https://www.djangoproject.com/" class="ext-link" rel="external ">Django</a>) and proprietary (e.g., co-founder of <a href="https://en.wikipedia.org/wiki/Lanyrd" class="ext-link" rel="external ">Lanyrd</a>) software in his career, but says he turns to open source as a “creative outlet” that lets him retain a measure of independence, even as full-time employment may constrain it.</p>
+
+<p>You heard that right: Open source doesn’t always need to save the world. It’s enough if it saves an individual developer’s sanity.</p>
+
+<p>Of course, many others do benefit from Willison’s open source contributions. But even if they didn’t, Willison would continue to open source his code. Why? Because it pushes him to write better software even as it helps him keep current with the wide variety of projects — <a href="https://github.com/simonw" class="ext-link" rel="external ">285 repositories and counting </a>— to which he contributes. It’s an incredibly <a href="https://twitter.com/simonw/status/1259180306038308865" class="ext-link" rel="external ">efficient</a> way to build. Willison says that something he enjoys about open source is that for every problem he solves, he’ll never have to solve it again. “The code will be out there forever,” he says.</p>
+
+<p>Indeed, Willison’s approach to open source offers deep insights into how to set up a project for maximum community benefit — even when it’s a community of one.</p>
+
+<h2>Of Showers and Steam</h2>
+
+<p>As Willison explained in an interview, his need for Datasette, a tool for exploring and publishing data, was clear to him in 2009 while working at The Guardian, a UK newspaper. There he helped start <a href="https://www.theguardian.com/news/datablog+technology/data-visualisation" class="ext-link" rel="external ">the data blog</a>, a place to publish the data behind The Guardian’s stories. Though Willison ended up using Google Sheets as a way to publish the underlying static data sets, he longed for a better way to publish and query that data.</p>
+
+<p>Years later, he had his Datasette “shower moment.”</p>
+
+<p>“It was literally a moment and I was literally in the shower,” he says.</p>
+
+<p>First, he reasoned, cloud providers were making hosting dynamic code cheap and easy. Second, he could insert <a href="https://www.sqlite.org/index.html" class="ext-link" rel="external ">SQLite</a>, a widely used, public domain, relational database, into places normally uninhabited by databases.</p>
+
+<p>“If I get SQLite, then export the data, and I bundle it in with a Docker container with a little app that can give you an interface and stuff … Maybe that’s a really interesting space to be exploring,” he says.</p>
+
+<p>And it was. Datasette was born.</p>
+
+<p>But Datasette wasn’t merely a matter of tackling a technical problem. It was also a way for Willison to express himself and to maintain independence. Throughout his career, Willison had found himself within larger organizations. Such employment brings privilege, but it also imposes a restraint on a developer’s ability to build. He says part of his reason for starting Datasette was to have a creative outlet.</p>
+
+<p>“It was an opportunity for me to get really deep into technology again,” he explains. “I wanted a project where I got to decide what to build and have that as my own personal place. It was almost a way of blowing off steam.”</p>
+
+<h2>Open Source Maintenance Group with a Population of One</h2>
+
+<p>Today Datasette has roughly 30 contributors, but most of the work is done by Willison. He’s OK with that. In fact, it’s great, he says, because outside contributions aren’t an unalloyed good.</p>
+
+<p>“There’s a dream that you wake up one morning and there’s a beautiful, shining pull request with a new feature, but actually, if that happens, it’s kind of stressful,” Willison says. “Because you then have to go through the code and review it to make sure it fits the wider model of what you’re trying to build.”</p>
+
+<p>One alternative, he says, is a plug-in architecture, which he incorporated into Datasette almost from the start.</p>
+
+<p>“The beautiful thing about plugins is that I don’t have to give anyone permission to load your plugin, and they don’t even have to talk to me,” Willison explains. He says he could wake up one morning, and Datasette will have a brand new feature, without him doing anything. “And it doesn’t cause any harm to the core if it’s low quality or if it doesn’t quite work,” he says.</p>
+
+<p>Not only does this plug-in architecture protect the Datasette core from <em>others’</em> bad code, but it also protects the core from <em>Willison’s</em> bad code. “I have a lot of crazy ideas, and I don’t want to put those into the core because maybe they’re terrible ideas, but there’s no harm at all in me putting them into a plugin,” he says.</p>
+
+<p>The dream is to become a bit like WordPress, whose plug-in architecture he modeled for Datasette. “WordPress is a very decent CMS with 7,000 plugins that mean it can do anything. I want Datasette to be a ‘decent sort of engine’ for data analysis and exploration with 7,000 plugins that mean that if you want a map or chart or all of these different things, it’s all available to you,” Willison says.</p>
+
+<h2>Open Source for ‘Very Selfish Reasons’</h2>
+
+<p>If Willison’s plug-in approach protects himself and others from bad code, his embrace of open source is perhaps the best way he’s found to ensure he writes good code in the first place.</p>
+
+<p>“Datasette is aggressively open source for a bunch of reasons,” Willison says. “Most of them are very selfish reasons.”</p>
+
+<p>For starters, he explains, he’s written a lot of closed source in his career, including while at Lanyrd, which he and his co-founder/wife Natalie Downe <a href="https://blog.natbat.net/post/61658401806/lanyrd-from-idea-to-exit-the-story-of-our" class="ext-link" rel="external ">sold to Eventbrite</a>. Once you leave that employer, however, you don’t get to use that software again in the future, Willison says.</p>
+
+<p>He points out that even if you’re writing software on your own and not for your employer, if it’s not open source you don’t really build it with a mind to having other people use it, which means it can go stale. When working in the open, by contrast, Willison says, “It forces me to write good code. It forces me to write really good documentation.” Not to mention great unit tests.</p>
+
+<p>That documentation, including associated comments, helps to tell the story of his code. While that may prove useful for outside contributors, docs also helps Willison to pick up where he leaves off. Willison maintains 73 open source projects, and he says the only way you can maintain 73 projects is if you treat every single one of them as if you’re not a core maintainer. Each must have a ReadMe and tests and detailed issue threads discussing what he was working on. “Because then you can drop back into them after a six-month gap and be productive with them,” he says.</p>
+
+<p>“I’m an open source maintenance group with a population of one,” Willison says. “I’m taking the lessons I learned [at Eventbrite], a 600-engineer organization, and applying them to a one-engineer organization.”</p>
+
+<p>A moment of truth now looms for Willison. For the past year, he’s been a <a href="https://jsk.stanford.edu/" class="ext-link" rel="external ">John S. Knight Journalism Fellow</a> at Stanford University, getting paid to tinker with his Datasette dream. His current thought is to do freelance development using Datasette to solve interesting problems related to data journalism for a variety of organizations, which he says could be a great way to figure out what the software should do.</p>
+
+<p>Are you interested in helping Willison shape the future of data journalism? Visit the <a href="https://datasette.readthedocs.io/en/stable/" class="ext-link" rel="external ">Datasette page</a> to contribute code, thoughts, documentation, and more.</p>
+</article>
+
+
+<hr>
+
+<footer>
+  <p>
+    <a href="/david/" title="Aller à l’accueil">🏠</a> •
+    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
+    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
+    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
+    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
+  </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
+</footer>
+<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
+</body>
+</html>

cache/2020/032142ee0df638618a8b145cb7ea9ebc/index.md

@@ -0,0 +1,37 @@
+title: Datasette: A Developer, a Shower and a Data-Inspired Moment
+url: https://thenewstack.io/datasette-a-developer-a-shower-and-a-data-inspired-moment/
+hash_url: 032142ee0df638618a8b145cb7ea9ebc
+
+<p>We tend to think of open source as a community, even as an altruistic endeavor. But sometimes a project can be “aggressively open source,” as <a href="https://datasette.readthedocs.io/en/stable/" class="ext-link" rel="external ">Datasette</a> founder <a href="https://twitter.com/simonw" class="ext-link" rel="external ">Simon Willison</a> puts it, for a bunch of “very selfish reasons.” Willison has written a great deal of open source (e.g., co-creator of <a href="https://www.djangoproject.com/" class="ext-link" rel="external ">Django</a>) and proprietary (e.g., co-founder of <a href="https://en.wikipedia.org/wiki/Lanyrd" class="ext-link" rel="external ">Lanyrd</a>) software in his career, but says he turns to open source as a “creative outlet” that lets him retain a measure of independence, even as full-time employment may constrain it.</p>
+<p>You heard that right: Open source doesn’t always need to save the world. It’s enough if it saves an individual developer’s sanity.</p>
+<p>Of course, many others do benefit from Willison’s open source contributions. But even if they didn’t, Willison would continue to open source his code. Why? Because it pushes him to write better software even as it helps him keep current with the wide variety of projects — <a href="https://github.com/simonw" class="ext-link" rel="external ">285 repositories and counting </a>— to which he contributes. It’s an incredibly <a href="https://twitter.com/simonw/status/1259180306038308865" class="ext-link" rel="external ">efficient</a> way to build. Willison says that something he enjoys about open source is that for every problem he solves, he’ll never have to solve it again. “The code will be out there forever,” he says.</p>
+<p>Indeed, Willison’s approach to open source offers deep insights into how to set up a project for maximum community benefit — even when it’s a community of one.</p>
+<h2>Of Showers and Steam</h2>
+<p>As Willison explained in an interview, his need for Datasette, a tool for exploring and publishing data, was clear to him in 2009 while working at The Guardian, a UK newspaper. There he helped start <a href="https://www.theguardian.com/news/datablog+technology/data-visualisation" class="ext-link" rel="external ">the data blog</a>, a place to publish the data behind The Guardian’s stories. Though Willison ended up using Google Sheets as a way to publish the underlying static data sets, he longed for a better way to publish and query that data.</p>
+<p>Years later, he had his Datasette “shower moment.”</p>
+<p>“It was literally a moment and I was literally in the shower,” he says.</p>
+<p>First, he reasoned, cloud providers were making hosting dynamic code cheap and easy. Second, he could insert <a href="https://www.sqlite.org/index.html" class="ext-link" rel="external ">SQLite</a>, a widely used, public domain, relational database, into places normally uninhabited by databases.</p>
+
+	
+
+
+<p>“If I get SQLite, then export the data, and I bundle it in with a Docker container with a little app that can give you an interface and stuff … Maybe that’s a really interesting space to be exploring,” he says.</p>
+<p>And it was. Datasette was born.</p>
+<p>But Datasette wasn’t merely a matter of tackling a technical problem. It was also a way for Willison to express himself and to maintain independence. Throughout his career, Willison had found himself within larger organizations. Such employment brings privilege, but it also imposes a restraint on a developer’s ability to build. He says part of his reason for starting Datasette was to have a creative outlet.</p>
+<p>“It was an opportunity for me to get really deep into technology again,” he explains. “I wanted a project where I got to decide what to build and have that as my own personal place. It was almost a way of blowing off steam.”</p>
+<h2>Open Source Maintenance Group with a Population of One</h2>
+<p>Today Datasette has roughly 30 contributors, but most of the work is done by Willison. He’s OK with that. In fact, it’s great, he says, because outside contributions aren’t an unalloyed good.</p>
+<p>“There’s a dream that you wake up one morning and there’s a beautiful, shining pull request with a new feature, but actually, if that happens, it’s kind of stressful,” Willison says. “Because you then have to go through the code and review it to make sure it fits the wider model of what you’re trying to build.”</p>
+<p>One alternative, he says, is a plug-in architecture, which he incorporated into Datasette almost from the start.</p>
+<p>“The beautiful thing about plugins is that I don’t have to give anyone permission to load your plugin, and they don’t even have to talk to me,” Willison explains. He says he could wake up one morning, and Datasette will have a brand new feature, without him doing anything. “And it doesn’t cause any harm to the core if it’s low quality or if it doesn’t quite work,” he says.</p>
+<p>Not only does this plug-in architecture protect the Datasette core from <em>others’</em> bad code, but it also protects the core from <em>Willison’s</em> bad code. “I have a lot of crazy ideas, and I don’t want to put those into the core because maybe they’re terrible ideas, but there’s no harm at all in me putting them into a plugin,” he says.</p>
+<p>The dream is to become a bit like WordPress, whose plug-in architecture he modeled for Datasette. “WordPress is a very decent CMS with 7,000 plugins that mean it can do anything. I want Datasette to be a ‘decent sort of engine’ for data analysis and exploration with 7,000 plugins that mean that if you want a map or chart or all of these different things, it’s all available to you,” Willison says.</p>
+<h2>Open Source for ‘Very Selfish Reasons’</h2>
+<p>If Willison’s plug-in approach protects himself and others from bad code, his embrace of open source is perhaps the best way he’s found to ensure he writes good code in the first place.</p>
+<p>“Datasette is aggressively open source for a bunch of reasons,” Willison says. “Most of them are very selfish reasons.”</p>
+<p>For starters, he explains, he’s written a lot of closed source in his career, including while at Lanyrd, which he and his co-founder/wife Natalie Downe <a href="https://blog.natbat.net/post/61658401806/lanyrd-from-idea-to-exit-the-story-of-our" class="ext-link" rel="external ">sold to Eventbrite</a>. Once you leave that employer, however, you don’t get to use that software again in the future, Willison says.</p>
+<p>He points out that even if you’re writing software on your own and not for your employer, if it’s not open source you don’t really build it with a mind to having other people use it, which means it can go stale. When working in the open, by contrast, Willison says, “It forces me to write good code. It forces me to write really good documentation.” Not to mention great unit tests.</p>
+<p>That documentation, including associated comments, helps to tell the story of his code. While that may prove useful for outside contributors, docs also helps Willison to pick up where he leaves off. Willison maintains 73 open source projects, and he says the only way you can maintain 73 projects is if you treat every single one of them as if you’re not a core maintainer. Each must have a ReadMe and tests and detailed issue threads discussing what he was working on. “Because then you can drop back into them after a six-month gap and be productive with them,” he says.</p>
+<p>“I’m an open source maintenance group with a population of one,” Willison says. “I’m taking the lessons I learned [at Eventbrite], a 600-engineer organization, and applying them to a one-engineer organization.”</p>
+<p>A moment of truth now looms for Willison. For the past year, he’s been a <a href="https://jsk.stanford.edu/" class="ext-link" rel="external ">John S. Knight Journalism Fellow</a> at Stanford University, getting paid to tinker with his Datasette dream. His current thought is to do freelance development using Datasette to solve interesting problems related to data journalism for a variety of organizations, which he says could be a great way to figure out what the software should do.</p>
+<p>Are you interested in helping Willison shape the future of data journalism? Visit the <a href="https://datasette.readthedocs.io/en/stable/" class="ext-link" rel="external ">Datasette page</a> to contribute code, thoughts, documentation, and more.</p>

cache/2020/0fd34b15eca024dc3997303386b7476e/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Coronavirus : l’étonnante politique de la Suède</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.contrepoints.org/2020/04/28/370150-coronavirus-letonnante-politique-de-la-suede">Source originale du contenu</a></h2>
 <p><strong>Par Johan Norberg, depuis la Suède.</strong></p>
 
@@ -158,7 +180,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/10a0e890ada0487e0adf4548960f056f/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>How To Keep Believing in the Internet</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://jenmyers.net/daily/how-to-keep-believing-in-the-internet.html">Source originale du contenu</a></h2>
 <p>About three weeks into the new year, I figured out that my personal internet was too loud. By “personal internet,” I mean my regular round of Twitter, websites and other social media. I don’t consume as much online as some people do, or even as much as I used to myself, and for a long time, this had me convinced that my time on the internet was harmless and not worth examining. Until I did examine it. And ended up taking a month’s vacation from much of it.</p>
 
@@ -70,7 +92,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/154a7a62b2eb5b0fbe17673fd7cbcf42/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Computers as I used to love them</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://tonsky.me/blog/syncthing/">Source originale du contenu</a></h2>
 <p>I’ve been struggling with file sync solutions <a href="https://tonsky.livejournal.com/323469.html">for years</a>. In the beginning, Dropbox was great, but in the last few years, they started to bloat up. I moved to iCloud, but it was even worse. Finally, a few days ago, after iCloud <a href="https://twitter.com/nikitonsky/status/1269741673715810304">cryptically broke again</a>, I decided it’s time to try something different.</p>
 
@@ -311,7 +333,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/17aa5580eb34f39f214e4a72458c535e/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Thinking about the past, present, and future of web development</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.baldurbjarnason.com/past-present-future-web/">Source originale du contenu</a></h2>
 <p class="decking">You're supposed to talk about the past, present, and future in the new year, right?</p>
 
@@ -141,7 +163,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/195a2ecd81fa25a7cf43248b809bf724/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Honesty is the best policy</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://hankchizljaw.com/wrote/honesty-is-the-best-policy/">Source originale du contenu</a></h2>
 <p><strong>Update - 6 February, 2020</strong>: Gatsby have now clarified their position by deleting <em>“a single image is often bigger than a JavaScript bundle”</em>, only with no explanation on why. As is increasingly the case, <code>trust--</code>.</p>
 
@@ -58,7 +80,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/1d190443e06aa99b44dd2a4d55b1b58e/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>The Secretive Company That Might End Privacy as We Know It</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.nytimes.com/2020/01/18/technology/clearview-privacy-facial-recognition.html">Source originale du contenu</a></h2>
 <p class="css-1npvhc5 e1wiw3jv0">A little-known start-up helps law enforcement match photos of unknown people to their online images — and “might lead to a dystopian future or something,” a backer says.</p>
 
@@ -122,7 +144,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/1f01bec376e6423e9ea08aef6af23a34/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Bill Gates' nuclear venture hits snag amid U.S. restrictions on China deals: WSJ</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.reuters.com/article/us-terrapower-china-idUSKCN1OV1S5">Source originale du contenu</a></h2>
 <p>NEW YORK (Reuters) - TerraPower LLC, a nuclear energy venture chaired by Microsoft Corp co-founder Bill Gates, is seeking a new partner for early-stage trials of its technology after new U.S. rules forced it to abandon an agreement with China, company officials told the Wall Street Journal.  </p>
 
@@ -66,7 +88,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/2343cdf9e5f75cc6bfba098799f0f2fd/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>A Future with No Future: Depression, the Left, and the Politics of Mental Health</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://lareviewofbooks.org/article/future-no-future-depression-left-politics-mental-health/">Source originale du contenu</a></h2>
 <p><em>[W]e find that we endogenously produce our incapacity to even try, grow sick and depressed and motionless under all the merciless and circulatory conditions of all the capitalist yes and just can’t, even if we thought we really wanted to.</em></p>
 
@@ -144,7 +166,77 @@ Together.</em></p>
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/2390380d879c04ee56baf320b6f7e681/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Twelve Million Phones, One Dataset, Zero Privacy</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.nytimes.com/interactive/2019/12/19/opinion/location-tracking-cell-phone.html">Source originale du contenu</a></h2>
 <p>
     <strong>Every minute of every day,</strong> everywhere on the planet, dozens of companies — largely unregulated, little scrutinized — are logging the movements of tens of millions of people with mobile phones and storing the information in gigantic data files. The Times <a href="https://www.nytimes.com/privacy-project">Privacy Project</a> obtained one such file, by far the largest and most sensitive ever to be reviewed by journalists. It holds more than 50 billion location pings from the phones of more than 12 million Americans as they moved through several major cities, including Washington, New York, San Francisco and Los Angeles.
@@ -411,7 +433,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/23b142e6e8edf164de61e003291e4619/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Unreal Engine 5 is meant to ridicule web developers</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.theolognion.com/unreal-engine-5-is-meant-to-ridicule-web-developers/">Source originale du contenu</a></h2>
 <p>Our sources report that the underlying reason behind the impressive tech demo for Unreal Engine 5  by Epic Games is to ridicule web developers. </p>
 
@@ -66,7 +88,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/24f52bba99b1423102f93cf86b948c5b/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Journal-Lightweight</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://adactio.com/journal/16797">Source originale du contenu</a></h2>
 <p>It’s been fascinating to see how television programmes have adapted to The Situation. It’s like there’s been a weird inversion with the YouTube asthetic. Instead of YouTubers doing their utmost to emulate the look of professional television, now everyone on professional television looks like a YouTuber.</p>
 
@@ -110,7 +132,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/25289703cb4dd3023c087715cddf6d55/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>What’s up with me?</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://helloanselm.com/writings/whats-up-with-me">Source originale du contenu</a></h2>
 <p>I’ve turned pretty silent over the past months here and on Twitter. And there’s a bunch of reasons for it that I now want to share.</p>
 
@@ -90,7 +112,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/2857bcda24e61cd80229ec230ee3d2b1/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Réforme des retraites : comment sont traités les milliers d'amendements déposés ?</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.rtl.fr/actu/politique/reforme-des-retraites-comment-sont-traites-les-milliers-d-amendements-deposes-7800107173">Source originale du contenu</a></h2>
 <p class="article-p mdl">Après l’écriture
 d’un projet de loi sur les retraites, vient le temps du débat au parlement. <br/>Les députés ont
@@ -140,7 +162,77 @@ les ministres, toutes les réponses aux députées, rédigées en amont par les
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/2c6ccd57b9f0f1c39706013d026de507/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>L’affaire de la Ligue du LOL, ou la fabrique de l’oubli</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://medium.com/@florence.porcel/laffaire-de-la-ligue-du-lol-ou-la-fabrique-de-l-oubli-df4ad3f5f2b5">Source originale du contenu</a></h2>
 <p id="7ad3" class="fj fk ct bk fl b fm fn fo fp fq fr fs ft fu fv fw cl"><strong class="fl fx">La fabrique de l’oubli</strong></p>
 
@@ -318,7 +340,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/2ebe3ac9e09d2d0ca91f9814d7b56c4d/index.html

@@ -9,7 +9,7 @@
   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>L'ombre d'une lampe (archive) — David Larlet</title>
+<title>L’ombre d’une lampe (archive) — David Larlet</title>
 <!-- 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. -->
@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -40,43 +56,49 @@
 <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
 
 <article>
-<h1>L'ombre d'une lampe</h1>
+<h1>L’ombre d’une lampe</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.la-grange.net/2020/04/18/ombre">Source originale du contenu</a></h2>
 <p><img src="https://www.la-grange.net/2020/01/11/6697-fenetre.jpg" alt="fenêtre et mur brisé" title="Fujisawa, Japon, 11 janvier 2020"/></p>
 
-<blockquote><p>Les vieilles villes de province ont des lisières délabrées. On voit s'y installer  des gens tout droits sortis de la nature. Voici qu'apparaît un homme au visage incisif, émacié jusqu'à la tristesse, qui peut tout réparer, tout ajuster, mais dont la vie, jusqu'ici, fut mal ajustée. Pas d'objet fabriqué, depuis la poêle jusqu'au réveille-matin, qui, en son temps, ait échappé aux mains de cet homme. — Tchevengour - Andreï Platonov, urn:isbn:978-2221081440</p>
+<blockquote><p>Les vieilles villes de province ont des lisières délabrées. On voit s’y installer  des gens tout droits sortis de la nature. Voici qu’apparaît un homme au visage incisif, émacié jusqu’à la tristesse, qui peut tout réparer, tout ajuster, mais dont la vie, jusqu’ici, fut mal ajustée. Pas d’objet fabriqué, depuis la poêle jusqu’au réveille-matin, qui, en son temps, ait échappé aux mains de cet homme. — Tchevengour - Andreï Platonov, urn:isbn:978-2221081440</p>
 </blockquote>
 
-<p>Hier soir, après avoir lu la préface, j'ai commencé la lecture de <a href="https://www.lisez.com/livre-grand-format/tchevengour/9782221081440">Tchevengour</a> par Andreï Platonov. Juste quelques lignes, le temps d'une infusion. Je vais aimer. Les premiers mots, je les répète plusieurs fois. Inlassable. La phrase prend sa place dans la diction. À voix haute, je me délecte. J'ai découvert l'auteur dans le livre <a href="https://editions-verdier.fr/livre/espace-et-labyrinthes/">Espace et labyrinthes</a> de Vassili Golovanov. Certains livres se révèlent par les lectures extasiées d'un roman, défilant la continuité d'histoires prises dans les lices d'une autre trame.</p>
+<p>Hier soir, après avoir lu la préface, j’ai commencé la lecture de <a href="https://www.lisez.com/livre-grand-format/tchevengour/9782221081440">Tchevengour</a> par Andreï Platonov. Juste quelques lignes, le temps d’une infusion. Je vais aimer. Les premiers mots, je les répète plusieurs fois. Inlassable. La phrase prend sa place dans la diction. À voix haute, je me délecte. J’ai découvert l’auteur dans le livre <a href="https://editions-verdier.fr/livre/espace-et-labyrinthes/">Espace et labyrinthes</a> de Vassili Golovanov. Certains livres se révèlent par les lectures extasiées d’un roman, défilant la continuité d’histoires prises dans les lices d’une autre trame.</p>
 
-<p>5h00. Ce matin la pluie opacifie le réveil dans de vagues mouvements, hordes équines au galop à la recherche d'une chute. Je prépare le café dans ce brouhaha. J'imagine que la journée se vivra profonde, de l'intérieur, patiente et sans le jardin.</p>
+<p>5h00. Ce matin la pluie opacifie le réveil dans de vagues mouvements, hordes équines au galop à la recherche d’une chute. Je prépare le café dans ce brouhaha. J’imagine que la journée se vivra profonde, de l’intérieur, patiente et sans le jardin.</p>
 
 <p><img src="https://www.la-grange.net/2020/04/18/meteo.png" alt="graphe de la météo" title="Tsujido, Japon, 18 avril 2020"/></p>
 
-<p>Je relis quelques lignes de Tchevengour ; le récit se noircit, très vite, la Révolution et la famine. L'averse et l'aube étouffée dressent la toile dramatique de la lecture.</p>
+<p>Je relis quelques lignes de Tchevengour ; le récit se noircit, très vite, la Révolution et la famine. L’averse et l’aube étouffée dressent la toile dramatique de la lecture.</p>
 
-<p>La maison dort encore. J'écris dans l'ombre de ma lampe.</p>
+<p>La maison dort encore. J’écris dans l’ombre de ma lampe.</p>
 
-<p>5h30. Le galop s'est interrompu. Probablement une pause au bord de la rivière, les sabots plantés dans la boue, pour se désaltérer avant de reprendre la chevauchée.</p>
+<p>5h30. Le galop s’est interrompu. Probablement une pause au bord de la rivière, les sabots plantés dans la boue, pour se désaltérer avant de reprendre la chevauchée.</p>
 
-<p>5h37. Quelques pas, elles ont redressé leurs têtes, alertes et rassasiées, l'onde reprend le chemin de la pente. Elles n'attendent plus que la bourrasque océane pour s'écheveler sur les terres grasses et noires. Là ! Je la perçois.</p>
+<p>5h37. Quelques pas, elles ont redressé leurs têtes, alertes et rassasiées, l’onde reprend le chemin de la pente. Elles n’attendent plus que la bourrasque océane pour s’écheveler sur les terres grasses et noires. Là ! Je la perçois.</p>
 
 <p>7h59. Les avalanches rocailleuses joignent la cavalcade. les pins submergés frissonnent à chaque roulement. Le tremblement du monde est aérien.</p>
 
 <h2>sur le bord du chemin</h2>
 
 <ul>
-<li><a href="https://ishadeed.com/article/viewport-units/">Viewport units</a>. voici un guide très utile sur la notion des unités de viewport, avec le rappel d'un élément essentiel sur leurs différences avec les pourcentages.  <blockquote><p><strong>Viewport units are based on the root element of the page</strong>, while the percentage is based on the container they are in. For that reason, they’re different from each other and each one has its use cases.</p>
+<li><a href="https://ishadeed.com/article/viewport-units/">Viewport units</a>. voici un guide très utile sur la notion des unités de viewport, avec le rappel d’un élément essentiel sur leurs différences avec les pourcentages.  <blockquote><p><strong>Viewport units are based on the root element of the page</strong>, while the percentage is based on the container they are in. For that reason, they’re different from each other and each one has its use cases.</p>
 </blockquote>
 </li>
 <li>Essentiel, <a href="https://htmldom.dev/">javascript simple et sans framework</a>.</li>
 <li>Bonne journée pluvieuse pour démarrer ces <a href="https://www.youtube.com/playlist?list=PLvahqwMqN4M0GRkZY8WkLZMb6Z-W7qbLA">séries documentaires par Netflix</a> en libre accès sur YouTube.</li>
-<li><p>De la <a href="https://larlet.fr/david/2020/04/18/">transmission d'un projet informatique</a>. Souvent une entreprise va concevoir un produit de façon à garder son client captif. alors que nous aurions tous intérêt à permettre, par la documentation, la flexibilité, la simplicité du projet, l'indépendance des projets.</p>
+<li><p>De la <a href="https://larlet.fr/david/2020/04/18/">transmission d’un projet informatique</a>. Souvent une entreprise va concevoir un produit de façon à garder son client captif. alors que nous aurions tous intérêt à permettre, par la documentation, la flexibilité, la simplicité du projet, l’indépendance des projets.</p>
 <blockquote><p>C’est du Python 3 annoté pour les types qui utilise Pyramid comme framework web. Rien de très exotique et c’est intentionnel considérant que nous souhaitions à un moment transmettre le produit.</p>
 </blockquote>
-<p>mais il y a peut-être aussi une responsabilité de la part du client à définir au départ de l'aventure. Sommes-nous là ensemble pour livrer un produit fini ou sommes-nous là ensemble pour définir un processus de création s'accompagnant d'outils et d'une philosophie de maintenance et de développement ? Ou pour reprendre la métaphore connue. Voulez-vous du poisson ? Ou apprenons-nous ensemble la technique de maille du filet, de la pêche et de la réparation de ce filet afin que les compétences partagées ne dépendent plus de la présence unique d'une personne dans le groupe.</p>
+<p>mais il y a peut-être aussi une responsabilité de la part du client à définir au départ de l’aventure. Sommes-nous là ensemble pour livrer un produit fini ou sommes-nous là ensemble pour définir un processus de création s’accompagnant d’outils et d’une philosophie de maintenance et de développement ? Ou pour reprendre la métaphore connue. Voulez-vous du poisson ? Ou apprenons-nous ensemble la technique de maille du filet, de la pêche et de la réparation de ce filet afin que les compétences partagées ne dépendent plus de la présence unique d’une personne dans le groupe.</p>
 <p>et comme le billet de David est ponctué de référence au kyūdō (弓道). Voici un passage de <cite>introduction à la culture japonaise</cite></p>
-<blockquote><p>« Comment dois-je tenir l'arc pour atteindre une telle distance ? » Et le maître de lui répondre : « Tirez comme d'habitude sans vous soucier de la cible. » Intrigué, il proteste : « Il faut bien viser tout de même ! » Mais le maître insiste encore pour qu'il ne vise pas, lui demandant de ne penser ni à la cible ni à l'atteindre, bref de ne penser à rien. « Vous n'avez qu'à tendre votre arc, lui dit-il, jusqu'à ce que la flèche parte. Il faut laisser la chose se faire. » — introduction à la culture japonaise, Hisayasu Nakagawa, urn:isbn:978-2130549529</p>
+<blockquote><p>« Comment dois-je tenir l’arc pour atteindre une telle distance ? » Et le maître de lui répondre : « Tirez comme d’habitude sans vous soucier de la cible. » Intrigué, il proteste : « Il faut bien viser tout de même ! » Mais le maître insiste encore pour qu’il ne vise pas, lui demandant de ne penser ni à la cible ni à l’atteindre, bref de ne penser à rien. « Vous n’avez qu’à tendre votre arc, lui dit-il, jusqu’à ce que la flèche parte. Il faut laisser la chose se faire. » — introduction à la culture japonaise, Hisayasu Nakagawa, urn:isbn:978-2130549529</p>
 </blockquote>
 </li>
 </ul>
@@ -95,7 +117,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/2ebe3ac9e09d2d0ca91f9814d7b56c4d/index.md

@@ -1,31 +1,31 @@
-title: L'ombre d'une lampe
+title: L’ombre d’une lampe
 url: https://www.la-grange.net/2020/04/18/ombre
 hash_url: 2ebe3ac9e09d2d0ca91f9814d7b56c4d
 
 <p><img src="https://www.la-grange.net/2020/01/11/6697-fenetre.jpg" alt="fenêtre et mur brisé" title="Fujisawa, Japon, 11 janvier 2020"/></p>
-<blockquote><p>Les vieilles villes de province ont des lisières délabrées. On voit s'y installer  des gens tout droits sortis de la nature. Voici qu'apparaît un homme au visage incisif, émacié jusqu'à la tristesse, qui peut tout réparer, tout ajuster, mais dont la vie, jusqu'ici, fut mal ajustée. Pas d'objet fabriqué, depuis la poêle jusqu'au réveille-matin, qui, en son temps, ait échappé aux mains de cet homme. — Tchevengour - Andreï Platonov, urn:isbn:978-2221081440</p>
+<blockquote><p>Les vieilles villes de province ont des lisières délabrées. On voit s’y installer  des gens tout droits sortis de la nature. Voici qu’apparaît un homme au visage incisif, émacié jusqu’à la tristesse, qui peut tout réparer, tout ajuster, mais dont la vie, jusqu’ici, fut mal ajustée. Pas d’objet fabriqué, depuis la poêle jusqu’au réveille-matin, qui, en son temps, ait échappé aux mains de cet homme. — Tchevengour - Andreï Platonov, urn:isbn:978-2221081440</p>
 </blockquote>
-<p>Hier soir, après avoir lu la préface, j'ai commencé la lecture de <a href="https://www.lisez.com/livre-grand-format/tchevengour/9782221081440">Tchevengour</a> par Andreï Platonov. Juste quelques lignes, le temps d'une infusion. Je vais aimer. Les premiers mots, je les répète plusieurs fois. Inlassable. La phrase prend sa place dans la diction. À voix haute, je me délecte. J'ai découvert l'auteur dans le livre <a href="https://editions-verdier.fr/livre/espace-et-labyrinthes/">Espace et labyrinthes</a> de Vassili Golovanov. Certains livres se révèlent par les lectures extasiées d'un roman, défilant la continuité d'histoires prises dans les lices d'une autre trame.</p>
-<p>5h00. Ce matin la pluie opacifie le réveil dans de vagues mouvements, hordes équines au galop à la recherche d'une chute. Je prépare le café dans ce brouhaha. J'imagine que la journée se vivra profonde, de l'intérieur, patiente et sans le jardin.</p>
+<p>Hier soir, après avoir lu la préface, j’ai commencé la lecture de <a href="https://www.lisez.com/livre-grand-format/tchevengour/9782221081440">Tchevengour</a> par Andreï Platonov. Juste quelques lignes, le temps d’une infusion. Je vais aimer. Les premiers mots, je les répète plusieurs fois. Inlassable. La phrase prend sa place dans la diction. À voix haute, je me délecte. J’ai découvert l’auteur dans le livre <a href="https://editions-verdier.fr/livre/espace-et-labyrinthes/">Espace et labyrinthes</a> de Vassili Golovanov. Certains livres se révèlent par les lectures extasiées d’un roman, défilant la continuité d’histoires prises dans les lices d’une autre trame.</p>
+<p>5h00. Ce matin la pluie opacifie le réveil dans de vagues mouvements, hordes équines au galop à la recherche d’une chute. Je prépare le café dans ce brouhaha. J’imagine que la journée se vivra profonde, de l’intérieur, patiente et sans le jardin.</p>
 <p><img src="https://www.la-grange.net/2020/04/18/meteo.png" alt="graphe de la météo" title="Tsujido, Japon, 18 avril 2020"/></p>
-<p>Je relis quelques lignes de Tchevengour ; le récit se noircit, très vite, la Révolution et la famine. L'averse et l'aube étouffée dressent la toile dramatique de la lecture.</p>
-<p>La maison dort encore. J'écris dans l'ombre de ma lampe.</p>
-<p>5h30. Le galop s'est interrompu. Probablement une pause au bord de la rivière, les sabots plantés dans la boue, pour se désaltérer avant de reprendre la chevauchée.</p>
-<p>5h37. Quelques pas, elles ont redressé leurs têtes, alertes et rassasiées, l'onde reprend le chemin de la pente. Elles n'attendent plus que la bourrasque océane pour s'écheveler sur les terres grasses et noires. Là ! Je la perçois.</p>
+<p>Je relis quelques lignes de Tchevengour ; le récit se noircit, très vite, la Révolution et la famine. L’averse et l’aube étouffée dressent la toile dramatique de la lecture.</p>
+<p>La maison dort encore. J’écris dans l’ombre de ma lampe.</p>
+<p>5h30. Le galop s’est interrompu. Probablement une pause au bord de la rivière, les sabots plantés dans la boue, pour se désaltérer avant de reprendre la chevauchée.</p>
+<p>5h37. Quelques pas, elles ont redressé leurs têtes, alertes et rassasiées, l’onde reprend le chemin de la pente. Elles n’attendent plus que la bourrasque océane pour s’écheveler sur les terres grasses et noires. Là ! Je la perçois.</p>
 <p>7h59. Les avalanches rocailleuses joignent la cavalcade. les pins submergés frissonnent à chaque roulement. Le tremblement du monde est aérien.</p>
 <h2>sur le bord du chemin</h2>
 <ul>
-<li><a href="https://ishadeed.com/article/viewport-units/">Viewport units</a>. voici un guide très utile sur la notion des unités de viewport, avec le rappel d'un élément essentiel sur leurs différences avec les pourcentages.  <blockquote><p><strong>Viewport units are based on the root element of the page</strong>, while the percentage is based on the container they are in. For that reason, they’re different from each other and each one has its use cases.</p>
+<li><a href="https://ishadeed.com/article/viewport-units/">Viewport units</a>. voici un guide très utile sur la notion des unités de viewport, avec le rappel d’un élément essentiel sur leurs différences avec les pourcentages.  <blockquote><p><strong>Viewport units are based on the root element of the page</strong>, while the percentage is based on the container they are in. For that reason, they’re different from each other and each one has its use cases.</p>
 </blockquote>
 </li>
 <li>Essentiel, <a href="https://htmldom.dev/">javascript simple et sans framework</a>.</li>
 <li>Bonne journée pluvieuse pour démarrer ces <a href="https://www.youtube.com/playlist?list=PLvahqwMqN4M0GRkZY8WkLZMb6Z-W7qbLA">séries documentaires par Netflix</a> en libre accès sur YouTube.</li>
-<li><p>De la <a href="https://larlet.fr/david/2020/04/18/">transmission d'un projet informatique</a>. Souvent une entreprise va concevoir un produit de façon à garder son client captif. alors que nous aurions tous intérêt à permettre, par la documentation, la flexibilité, la simplicité du projet, l'indépendance des projets.</p>
+<li><p>De la <a href="https://larlet.fr/david/2020/04/18/">transmission d’un projet informatique</a>. Souvent une entreprise va concevoir un produit de façon à garder son client captif. alors que nous aurions tous intérêt à permettre, par la documentation, la flexibilité, la simplicité du projet, l’indépendance des projets.</p>
 <blockquote><p>C’est du Python 3 annoté pour les types qui utilise Pyramid comme framework web. Rien de très exotique et c’est intentionnel considérant que nous souhaitions à un moment transmettre le produit.</p>
 </blockquote>
-<p>mais il y a peut-être aussi une responsabilité de la part du client à définir au départ de l'aventure. Sommes-nous là ensemble pour livrer un produit fini ou sommes-nous là ensemble pour définir un processus de création s'accompagnant d'outils et d'une philosophie de maintenance et de développement ? Ou pour reprendre la métaphore connue. Voulez-vous du poisson ? Ou apprenons-nous ensemble la technique de maille du filet, de la pêche et de la réparation de ce filet afin que les compétences partagées ne dépendent plus de la présence unique d'une personne dans le groupe.</p>
+<p>mais il y a peut-être aussi une responsabilité de la part du client à définir au départ de l’aventure. Sommes-nous là ensemble pour livrer un produit fini ou sommes-nous là ensemble pour définir un processus de création s’accompagnant d’outils et d’une philosophie de maintenance et de développement ? Ou pour reprendre la métaphore connue. Voulez-vous du poisson ? Ou apprenons-nous ensemble la technique de maille du filet, de la pêche et de la réparation de ce filet afin que les compétences partagées ne dépendent plus de la présence unique d’une personne dans le groupe.</p>
 <p>et comme le billet de David est ponctué de référence au kyūdō (弓道). Voici un passage de <cite>introduction à la culture japonaise</cite></p>
-<blockquote><p>« Comment dois-je tenir l'arc pour atteindre une telle distance ? » Et le maître de lui répondre : « Tirez comme d'habitude sans vous soucier de la cible. » Intrigué, il proteste : « Il faut bien viser tout de même ! » Mais le maître insiste encore pour qu'il ne vise pas, lui demandant de ne penser ni à la cible ni à l'atteindre, bref de ne penser à rien. « Vous n'avez qu'à tendre votre arc, lui dit-il, jusqu'à ce que la flèche parte. Il faut laisser la chose se faire. » — introduction à la culture japonaise, Hisayasu Nakagawa, urn:isbn:978-2130549529</p>
+<blockquote><p>« Comment dois-je tenir l’arc pour atteindre une telle distance ? » Et le maître de lui répondre : « Tirez comme d’habitude sans vous soucier de la cible. » Intrigué, il proteste : « Il faut bien viser tout de même ! » Mais le maître insiste encore pour qu’il ne vise pas, lui demandant de ne penser ni à la cible ni à l’atteindre, bref de ne penser à rien. « Vous n’avez qu’à tendre votre arc, lui dit-il, jusqu’à ce que la flèche parte. Il faut laisser la chose se faire. » — introduction à la culture japonaise, Hisayasu Nakagawa, urn:isbn:978-2130549529</p>
 </blockquote>
 </li>
 </ul>

cache/2020/3006691afcf79e8a0fa83b2f0f64e91a/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Redesign: Wants and Needs</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://frankchimero.com/blog/2020/wants-and-needs/">Source originale du contenu</a></h2>
 <p>Let’s oversimplify for a bit to help get down some goals for the site redesign.</p>
 
@@ -85,7 +107,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/3146f1a5743de3217adc3bc854897aaf/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Google: Oops, we may have sent your private Google Photos videos to strangers</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://mashable.com/article/google-photos-videos-glitch/">Source originale du contenu</a></h2>
 <p>Well, this is awkward. </p>
 
@@ -66,7 +88,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/31652af3fd4757154c51aadcbe9ffb39/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Web of Documents</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="http://blog.danieljanus.pl/2019/10/07/web-of-documents/">Source originale du contenu</a></h2>
 <p>In 1960, Ted Nelson envisioned a&nbsp;web of documents.</p>
 
@@ -94,7 +116,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/31d18361d64bd5e98d4199f2f40d2a4d/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Coup d’État sur la " loi haine "</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.laquadrature.net/2020/01/22/coup-detat-sur-la-loi-haine/">Source originale du contenu</a></h2>
 <p><b>La loi « contre la haine » s’est transformée en loi sécuritaire au nom de la lutte « anti-terroriste ». Ce bouleversement a été acté hier à 22h30, par un <a href="http://www.assemblee-nationale.fr/dyn/15/amendements/2583/AN/161">amendement</a> de dernière minute proposé par le gouvernement et adopté par les députés serviles de l’Assemblée nationale. Ce coup de force du gouvernement, imposé in extremis, est une nouvelle démonstration d’anti-parlementarisme. L’honneur des députés exige qu’ils rejettent la loi dans son ensemble</b>.</p>
 
@@ -86,7 +108,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/322e7a8997c732a5fdca0baaea7b9ede/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Guide to Internal Communication, the Basecamp Way</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://basecamp.com/guides/how-we-communicate">Source originale du contenu</a></h2>
 <h2>Rules of thumb, and general philosophy</h2>
 
@@ -151,7 +173,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/331eb17ffb3f4fbb5fdd8123c0dc1eeb/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Building with Friction</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://timkadlec.com/remembers/2020-03-18-building-with-friction/">Source originale du contenu</a></h2>
 <p>I <a href="https://timkadlec.com/remembers/2020-01-02-making-the-right-thing-easy/">recently wrote about how important it is to make the right thing easy</a>. The opposite is also true: it’s important to make the wrong things difficult. I did allude to it in that post a little bit, but I thought it was worth calling out explicitly. It’s important to introduce some friction in our workflow to help prevent the wrong actions.</p>
 
@@ -150,7 +172,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/384b330b3de6f4f2bac8c81f0f04c404/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Atlanta Asks Google Whether It Targeted Black Homeless People</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.nytimes.com/2019/10/04/technology/google-facial-recognition-atlanta-homeless.html">Source originale du contenu</a></h2>
 <p class="css-exrw3m evys1bk0">Atlanta officials are seeking answers from Google after a news report said that company contractors had sought out black homeless people in the city to scan their faces to improve Google’s facial-recognition technology.</p>
 
@@ -90,7 +112,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/395e363cffff4e9c6b33633bc726f1e2/index.html

@@ -0,0 +1,188 @@
+<!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>
+  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>Trump’s Executive Order Isn’t About Twitter (archive) — David Larlet</title>
+<!-- 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="#f0f0ea">
+<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
+<meta name="theme-color" content="#f0f0ea">
+<!-- Documented, feel free to shoot an email. -->
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
+<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
+<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_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/triplicate_t4_poly_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/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
+
+  <meta name="robots" content="noindex, nofollow">
+  <meta content="origin-when-cross-origin" name="referrer">
+  <!-- Canonical URL for SEO purposes -->
+  <link rel="canonical" href="https://www.theatlantic.com/technology/archive/2020/05/trumps-executive-order-isnt-about-twitter/612349/">
+
+<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
+
+<article>
+<h1>Trump’s Executive Order Isn’t About Twitter</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
+<h2><a href="https://www.theatlantic.com/technology/archive/2020/05/trumps-executive-order-isnt-about-twitter/612349/">Source originale du contenu</a></h2>
+<p>As the United States enters a pandemic summer, with more than 100,000 Americans already dead, and as tear gas engulfed Minneapolis last night, following protests after yet another killing of a black man by a police officer, the president tweeted that the “shooting starts” when the “looting starts.” The tweet echoed <a href="https://www.nbcnews.com/politics/congress/where-does-phrase-when-looting-starts-shooting-starts-come-n1217676">a historic line</a> uttered by a police chief in Miami in 1967 during the civil-rights unrest that was <a href="https://www.businessinsider.com/trump-quotes-cop-sparked-race-riot-tweet-2020-">also widely condemned </a>at the time. Twitter <a href="https://www.nytimes.com/2020/05/29/technology/trump-twitter-minneapolis-george-floyd.html">hid</a> that tweet behind a message saying that it was “glorifying violence”—a violation of the site’s terms of service—though users could still choose to view it by clicking through. All of this was an escalation of the seeming conflict between the president and Twitter: Just two days ago, the social-media company added a fact-check link to one of Donald Trump’s tweets for the first time. The president responded by issuing an <a href="https://www.whitehouse.gov/presidential-actions/executive-order-preventing-online-censorship/">executive order</a> that is getting a lot of attention, but not the right kind.</p>
+
+<p>The president’s order targets Section 230 of the Communications Decency Act, which confers immunity to internet companies for content they host but is generated by their users—something without which they could not operate as they now do. We’ve already seen a flood of lengthy commentaries and expert analyses of the legislative basis of the order. Legal experts have derided it as “<a href="https://www.law.com/nationallawjournal/2020/05/28/unlawful-and-unenforceable-legal-experts-deride-trumps-attempt-to-target-social-media-companies/?slreturn=20200429065824">unlawful and unenforceable</a>.” A <em>Vice News</em> headline worried that it could “<a href="https://www.vice.com/en_us/article/935yz3/donald-trump-executive-order-twitter-social-media?utm_content=1590674057">ruin the internet</a>.” And a senior legislative counsel at the ACLU <a href="https://www.nytimes.com/2020/05/28/us/politics/trump-jack-dorsey.html">pointed out that</a> “ironically, Donald Trump is a big beneficiary of Section 230”—because it gives him unfettered access to the public through social media. A <em>New York Times</em> analysis similarly said that the order could “<a href="https://www.nytimes.com/2020/05/28/us/politics/trump-jack-dorsey.html">harm one person in particular”</a>: the president.  </p>
+
+<p>In reality, Trump’s salvo on social-media companies has primarily an audience of one: Mark Zuckerberg. And it is already working. After the executive order was issued, Facebook’s CEO quickly gave an<a href="https://www.foxnews.com/media/facebook-mark-zuckerberg-twitter-fact-checking-trump"> interview to Fox News</a> in which he said, “I just believe strongly that Facebook shouldn’t be the arbiter of truth of everything that people say online.” He added, “Private companies probably shouldn’t be, especially these platform companies, shouldn’t be in the position of doing that.”</p>
+
+<p>It’s important to pay attention to what the president is doing, but not because the legal details of this order matter at all. Trump is unlikely to repeal Section 230 or take any real action to curb the power of the major social-media companies. Instead, he wants to keep things just the way they are and make sure that the red-carpet treatment he has received so far, especially at Facebook, continues without impediment. He definitely does not want substantial changes going into the 2020 election. The secondary aim is to rile up his base against yet another alleged enemy: this time Silicon Valley, because there needs to be an endless list of targets in the midst of multiple failures.</p>
+
+<p>Trump does very well on Facebook, as my colleagues Ian Bogost and Alexis Madrigal <a href="https://www.theatlantic.com/technology/archive/2020/04/how-facebooks-ad-technology-helps-trump-win/606403/">have written</a>, because “his campaign has been willing to cede control to Facebook’s ad-buying machinery”—both now, and in 2016. The relationship is so smooth that Trump said Zuckerberg congratulated the president for <a href="https://www.businessinsider.com/trump-mark-zuckerberg-dinner-number-one-facebook-2020-1">being “No. 1 on Facebook”</a> at a private dinner with him. Bloomberg has reported that Facebook’s own data-science team agreed, publishing an internal report concluding how much better Trump was in leveraging “<a href="https://www.bloomberg.com/news/articles/2018-04-03/trump-s-campaign-said-it-was-better-at-facebook-facebook-agrees">Facebook’s ability to optimize for outcomes</a>.” This isn’t an unusual move for Facebook and its clients. Bloomberg has reported that Facebook also offered its “<a href="https://www.bloomberg.com/news/features/2017-12-07/how-rodrigo-duterte-turned-facebook-into-a-weapon-with-a-little-help-from-facebook">white glove</a>” services to the Philippine strongman Rodrigo Duterte, to help him “maximize the platform’s potential and use best practices.” Duterte <a href="https://www.bloomberg.com/news/features/2017-12-07/how-rodrigo-duterte-turned-facebook-into-a-weapon-with-a-little-help-from-facebook">dominated political conversation</a> on the site the month before the Philippines’ May 2016 presidential election. And once elected, Duterte banned independent press from attending his inauguration, instead live-streaming it on Facebook—a win-win for the company, which could then collect data from and serve ads to the millions who had little choice but to turn to the site if they wanted to see their president take office. (Duterte has <a href="https://www.hrw.org/world-report/2019/country-chapters/philippines">since been accused</a> of extrajudicial killings, jailing political opponents, and targeting independent media.)</p>
+
+<p>Playing the refs by browbeating them has long been a key move in the right-wing playbook against traditional media. The method is simple: It involves badgering them with accusations of unfairness and bias so that they bend over backwards to accommodate a “<a href="https://www.cjr.org/the_media_today/both-sides-impeachment-trump.php">both sides</a>” narrative even when the sides were behaving <a href="https://pressthink.org/2016/09/asymmetry-between-the-major-parties-fries-the-circuits-of-the-mainstream-press/">very differently</a>, or when one side was not grounded in fact. Climate-change deniers funded by fossil-fuel companies <a href="https://journals.ametsoc.org/doi/pdf/10.1175/WCAS-D-19-0063.1">effectively used this strategy</a> for decades, relying on journalists’ training and instinct to equate objectivity with representing <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC1808044/">both sides</a> of a story. This way of operating persisted even when one of the sides was mostly bankrolled by the fossil-fuel industry while the other was a near-unanimous consensus of independent experts and academics.</p>
+
+<p>Some right-wing groups quickly adapted that strategy to social media, specifically Facebook and Twitter, which have become outsize gatekeepers in the public sphere, with enormous decision-making power over what gets amplified and what gets buried. For Facebook, that gatekeeper is a single person, Mark Zuckerberg. Facebook’s young CEO is an emperor of information who decides rules of amplification and access to speech for billions of people, simply <a href="https://www.vox.com/technology/2018/11/19/18099011/mark-zuckerberg-facebook-stock-nyt-wsj">due to the way ownership of Facebook shares are structured</a>: Zuckerberg personally controls 60 percent of the voting power. And just like the way people try to get on or advertise on the president’s seemingly favorite TV show, <a href="https://www.nytimes.com/2020/01/23/us/politics/donald-trump-ads-michael-bloomberg.html"><em>Fox &amp; Friends</em></a>, merely to reach him, Trump is clearly aiming to send a message to his one-person target.</p>
+
+<p>Perhaps the most successful application of this playbook occurred in the months leading up to the 2016 U.S. presidential election. That season of social-media browbeating began with the “trending topics” controversy in May of that year, when the tech-news site <em>Gizmodo</em> published an <a href="https://gizmodo.com/former-facebook-workers-we-routinely-suppressed-conser-1775461006">article</a>, based mainly on a single anonymous source inside the tiny team, asserting that Facebook “routinely suppressed conservative news.”</p>
+
+<p>In reality, that controversy was a tempest in a teapot in a year that was full of real ones. For one thing, the trending-topics module was a tiny box on the site, dwarfed in importance by the central Facebook News Feed, which is algorithmically sorted and over which the trending-topics team had no impact. The vetting team was tiny, and its job was to keep false or misinformation or inappropriate content (like obscenities) from appearing in the box, and while the vetting might have been biased, another plausible explanation was that there were more right-wing sites spewing misinformation than left-wing ones. For that matter, academic research has found <a href="https://science.sciencemag.org/content/363/6425/374.abstract">that conservative-leaning, older people were more likely to engage with “fake news</a>.” The whole trending-topics module was so trivial that it wasn’t even visible on Facebook’s mobile app, which in 2016 was already the key means by which billions accessed Facebook.</p>
+
+<p>In 2016, there was no sign that conservative pages did badly on Facebook. To the contrary, they were the pages that got the most engagement on Facebook. They still are. These sites include Fox News but also <em>Breitbart News</em>, which, according to <em>Vice News</em>, is “<a href="https://www.vice.com/en_us/article/jgeqe7/how-breitbart-is-crushing-mainstream-media-on-facebook">crushing mainstream media</a>,” garnering more views and engagement on Facebook than “The New York Times, Washington Post, Wall Street Journal, and USA Today combined” and outpacing “each of the broadcast news networks, MSNBC, and CNN.” However, <em>Breitbart News</em> isn’t just a right-wing version of <em>The New York Times</em>; it was described by Steve Bannon, its former executive chairman, as “<a href="https://www.nytimes.com/2017/08/16/magazine/breitbart-alt-right-steve-bannon.html">the platform for the alt-right</a>,” and white supremacy and misogyny routinely flavor its coverage.<a href="#2">*</a> Until recently, <em>Breitbart</em> had a “<a href="https://www.splcenter.org/20180614/biggest-lie-white-supremacist-propaganda-playbook-unraveling-truth-about-%E2%80%98black-white-crime">black crime</a>” section for its stories, and published made-up stories, such as one claiming that an undocumented immigrant had started <a href="https://www.buzzfeednews.com/article/briannasacks/no-an-undocumented-immigrant-did-not-start-the-deadly#.fhYVDKoOPn">the deadly Sonoma, California, wildfires</a>. (When Facebook launched a news tab, it <a href="https://www.theverge.com/2019/10/25/20932653/facebook-news-breitbart-mark-zuckerberg-statement-bias">included <em>Breitbart</em></a> among its “trusted” news sources).</p>
+
+<p>The claim that Facebook is biased against conservatives is so egregious that, in 2016, even the conservative media personality Glenn Beck took <a href="https://medium.com/@glennbeck/what-disturbed-me-about-the-facebook-meeting-3bbe0b96b87f#.qd6aysa9g">to lamenting the fake controversy</a>, pointing out that his own page, which sometimes includes conspiracy theories, did very well on Facebook. Still, the trending-topics brouhaha led to a flurry of news coverage, culminating <a href="https://www.commerce.senate.gov/services/files/fe5b7b75-8d53-44c3-8a20-6b2c12b0970d">in a letter from Senator John Thune</a>, who was then the chairman of the Senate Commerce Committee, demanding prompt attention and answers from Facebook regarding these allegations of bias. The letter, according to <em>Wired</em>, put Facebook on “<a href="https://www.wired.com/story/inside-facebook-mark-zuckerberg-2-years-of-hell/">high alert</a>.” Staffers were immediately dispatched to meet with the senator. Seventeen “conservative thought leaders” were quickly invited to the company’s headquarters, in Menlo Park, California. “The company wanted to make a show of apologizing for its sins, lifting up the back of its shirt, and asking for the lash,” which came swiftly as the trending-topics “controversy” swirled in news media across the political spectrum. In response to the pressure, <em>Wired</em> <a href="https://www.wired.com/story/inside-facebook-mark-zuckerberg-2-years-of-hell/">reported</a>, Zuckerberg <a href="https://www.wired.com/story/inside-facebook-mark-zuckerberg-2-years-of-hell/">decided</a> “to extend an olive branch to the entire American right wing.”</p>
+
+<p>As a consequence, Facebook became cautious of taking actions that would make it look like it was holding back right-wing information machinery. That was the environment in which the country headed into the 2016 election—five months during which all stripes of misinformation went easily viral on Facebook, <a href="https://www.buzzfeednews.com/article/craigsilverman/viral-fake-election-news-outperformed-real-news-on-facebook#.bp90yKJ1W">including stories</a> that falsely claimed that the pope had endorsed Donald Trump, or that Hillary Clinton had sold weapons to the Islamic State. These stories were viewed millions of times on the platform, many of them outperforming traditional news sources. The pressure to keep Facebook friendly to the Trump campaign continued unabated after the election. When Facebook appeared to be considering changes to its microtargeting rules in 2019—for example, <a href="https://www.washingtonpost.com/technology/2019/11/20/trump-campaign-assails-facebook-over-potential-changes-political-ad-rules/">not allowing political campaigns to use the same level of microtargeting tools</a> that product advertisers can, a potential strike at “<a href="https://www.washingtonpost.com/technology/2019/11/20/trump-campaign-assails-facebook-over-potential-changes-political-ad-rules/">a major Trump ad strategy</a>”—the Trump reelection campaign swiftly <a href="https://www.businessinsider.de/international/team-trump-2020-attacks-facebook-fears-ad-targeting-changes-2019-11/">attacked the platform</a>, and the rules were left unchanged.</p>
+
+<p>Silicon Valley engineers and employees may well be overwhelmingly liberal, but Facebook is run by the algorithms they program, which optimize for the way the site makes money, rather than sifting through posts one by one. This is probably why the trending-topics controversy seemed like such a big hit: It took the one tiny section where humans had some minor input and portrayed the whole platform as working the same way. The employees may be liberal, but the consequences <a href="https://www.nytimes.com/2016/05/19/opinion/the-real-bias-built-in-at-facebook.html">of how social-media companies operate are anything but</a>. In 2016, for example, Facebook, Twitter, and Google all “<a href="https://www.politico.com/story/2017/10/26/facebook-google-twitter-trump-244191">embedded</a>” staffers with both campaigns, without charge, helping them use the sites better and get more out of the many millions of dollars they spent on the platforms. However, <a href="https://www.theatlantic.com/magazine/archive/2020/03/the-2020-disinformation-war/605530/">this was especially helpful to the Trump campaign</a>, an upstart with a bare-bones staff. Unsurprisingly, the “<a href="https://www.politico.com/story/2017/10/26/facebook-google-twitter-trump-244191">bulk of Silicon Valley’s hands-on campaign support went to Trump rather than to Clinton.</a>”</p>
+
+<p>Trump and his campaign understood the power of Facebook better than the Clinton campaign, and formed a mutually beneficial relationship. Trump spent $44 million on the site, compared with the Clinton campaign’s $28 million, but ad money is only part of the story. A key role of Facebook is promoting organic content: posts, not ads, written by people who may range from partisans to campaign operatives to opportunists who just want the clicks. Some of the authors of these viral pages are motivated by promoting their ideology. Others are just grifters, using Facebook to maximize their spread so that they can collect ad money from their own webpage—which probably uses Google’s industry-dominating ad infrastructure. It’s a complete circle of back-scratching that is rarely commented on or known outside of a small number of experts and industry practitioners.</p>
+
+<p>The Trump campaign also made better use of Facebook’s own artificial-intelligence tools, like “<a href="https://thenextweb.com/facebook/2018/04/04/facebook-confirms-trumps-ads-bested-clintons-during-presidential-bid/">lookalike audiences</a>”—<a href="https://www.theatlantic.com/technology/archive/2020/04/how-facebooks-ad-technology-helps-trump-win/606403/">a crucial functionality</a> that lets advertisers find many new people that Facebook <em>predicts </em>will act similarly to a small “custom” audience uploaded to the site. In other words, if you upload a list of a few thousand people who are open to your message, whether it is interest in a harmless hobby or incendiary claims against a political opponent, Facebook’s vast surveillance machinery, giant databases, and top-of-the line artificial-intelligence tools can help you find many, many more similar targets—which you can reach as long as you’re willing to pay Facebook. These are the kinds of advanced functions that Facebook makes easy to use, and staffers embedded with the Trump campaign would be able to explain and help with.</p>
+
+<p>As long as Facebook and other social-media platforms make money by increasing engagement without much regard to the content they algorithmically amplify, it doesn’t matter whether every last employee is an avowed liberal. In 2016, <a href="https://www.wsj.com/articles/facebook-knows-it-encourages-division-top-executives-nixed-solutions-11590507499">Facebook’s own internal research</a> team found that “64% of all extremist group joins are due to our recommendation tools” and, if left unchecked, Facebook would feed users “more and more divisive content in an effort to gain user attention and increase time on the platform.” The same research team also found that fake news, spam, clickbait, and inauthentic users inevitably included “a larger infrastructure of accounts and publishers on the far right than on the far left.” This conclusion echoed academic findings that political polarization in the United States <a href="https://www.cambridge.org/core/books/solutions-to-political-polarization-in-america/confronting-asymmetric-polarization/3966003B2517E22BF288796AC4985F34">is not symmetric</a>, and that the right-wing ecology is more prone to misinformation of various kinds. Efforts to heavily combat such misinformation, which would necessarily affect right-wing sites more, <a href="https://www.wsj.com/articles/facebook-knows-it-encourages-division-top-executives-nixed-solutions-11590507499">were nixed by Facebook’s leadership</a>. <em>The Wall Street Journal </em>reported that Facebook’s vice president for global public policy, Joel Kaplan (who had earlier attracted attention by being <a href="https://thehill.com/policy/technology/410457-facebook-executive-hosted-kavanaugh-confirmation-celebration">a vocal supporter</a> for Supreme Court Justice Brett Kavanaugh, sitting behind him during his confirmation hearings and <a href="https://thehill.com/policy/technology/410457-facebook-executive-hosted-kavanaugh-confirmation-celebration">even hosting a party</a> after the vote), had played an important role in this nixing, pointing out that such a move would upset that side of the political spectrum.</p>
+
+<p>This is all a win for the president, who can dredge up old tweets by Silicon Valley engineers that express disdain for him or for his followers, and have us focused on whether Silicon Valley is biased against conservatives and the right-wing information ecology because of its employees without examining the business model and the financial basis that makes it extra-friendly to them.</p>
+
+<p>There are already widespread news reports of how Trump is trying to “<a href="https://www.washingtonpost.com/technology/2020/05/28/trump-social-media-executive-order/">punish</a>” Twitter or Facebook. In reality, the former has given him an unfettered megaphone with no friction for years—only recently adding an extra click to one of his tweets—and the latter surely welcomes the <a href="https://www.nytimes.com/interactive/2019/05/21/us/politics/trump-2020-facebook-ads.html">millions</a> his campaign will spend on the forthcoming election. Facebook is also likely to continue algorithmically amplifying divisive, polarizing, or dubious content. Again and again, people tend to underestimate this president, whose grammar and punctuation may leave something to be desired but whose political instincts are keen. What else can you call his ability—in the middle of this summer of pandemic and as a major American city erupts in anger against yet another police killing—to have so many newspapers, analysts, and nongovernmental organizations spend so much time doing close readings of an executive order to assess its legality, coherence, or potential for becoming a law, as if any of that matters an iota. In the meantime, Trump remains focused on the only thing that matters: keeping Facebook in line until November 3, 2020.</p>
+</article>
+
+
+<hr>
+
+<footer>
+  <p>
+    <a href="/david/" title="Aller à l’accueil">🏠</a> •
+    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
+    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
+    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
+    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
+  </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
+</footer>
+<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
+</body>
+</html>

cache/2020/395e363cffff4e9c6b33633bc726f1e2/index.md

@@ -0,0 +1,36 @@
+title: Trump’s Executive Order Isn’t About Twitter
+url: https://www.theatlantic.com/technology/archive/2020/05/trumps-executive-order-isnt-about-twitter/612349/
+hash_url: 395e363cffff4e9c6b33633bc726f1e2
+
+<p>As the United States enters a pandemic summer, with more than 100,000 Americans already dead, and as tear gas engulfed Minneapolis last night, following protests after yet another killing of a black man by a police officer, the president tweeted that the “shooting starts” when the “looting starts.” The tweet echoed <a href="https://www.nbcnews.com/politics/congress/where-does-phrase-when-looting-starts-shooting-starts-come-n1217676">a historic line</a> uttered by a police chief in Miami in 1967 during the civil-rights unrest that was <a href="https://www.businessinsider.com/trump-quotes-cop-sparked-race-riot-tweet-2020-">also widely condemned </a>at the time. Twitter <a href="https://www.nytimes.com/2020/05/29/technology/trump-twitter-minneapolis-george-floyd.html">hid</a> that tweet behind a message saying that it was “glorifying violence”—a violation of the site’s terms of service—though users could still choose to view it by clicking through. All of this was an escalation of the seeming conflict between the president and Twitter: Just two days ago, the social-media company added a fact-check link to one of Donald Trump’s tweets for the first time. The president responded by issuing an <a href="https://www.whitehouse.gov/presidential-actions/executive-order-preventing-online-censorship/">executive order</a> that is getting a lot of attention, but not the right kind.</p>
+
+<p>The president’s order targets Section 230 of the Communications Decency Act, which confers immunity to internet companies for content they host but is generated by their users—something without which they could not operate as they now do. We’ve already seen a flood of lengthy commentaries and expert analyses of the legislative basis of the order. Legal experts have derided it as “<a href="https://www.law.com/nationallawjournal/2020/05/28/unlawful-and-unenforceable-legal-experts-deride-trumps-attempt-to-target-social-media-companies/?slreturn=20200429065824">unlawful and unenforceable</a>.” A <em>Vice News</em> headline worried that it could “<a href="https://www.vice.com/en_us/article/935yz3/donald-trump-executive-order-twitter-social-media?utm_content=1590674057">ruin the internet</a>.” And a senior legislative counsel at the ACLU <a href="https://www.nytimes.com/2020/05/28/us/politics/trump-jack-dorsey.html">pointed out that</a> “ironically, Donald Trump is a big beneficiary of Section 230”—because it gives him unfettered access to the public through social media. A <em>New York Times</em> analysis similarly said that the order could “<a href="https://www.nytimes.com/2020/05/28/us/politics/trump-jack-dorsey.html">harm one person in particular”</a>: the president.  </p>
+
+<p>In reality, Trump’s salvo on social-media companies has primarily an audience of one: Mark Zuckerberg. And it is already working. After the executive order was issued, Facebook’s CEO quickly gave an<a href="https://www.foxnews.com/media/facebook-mark-zuckerberg-twitter-fact-checking-trump"> interview to Fox News</a> in which he said, “I just believe strongly that Facebook shouldn’t be the arbiter of truth of everything that people say online.” He added, “Private companies probably shouldn’t be, especially these platform companies, shouldn’t be in the position of doing that.”</p>
+
+<p>It’s important to pay attention to what the president is doing, but not because the legal details of this order matter at all. Trump is unlikely to repeal Section 230 or take any real action to curb the power of the major social-media companies. Instead, he wants to keep things just the way they are and make sure that the red-carpet treatment he has received so far, especially at Facebook, continues without impediment. He definitely does not want substantial changes going into the 2020 election. The secondary aim is to rile up his base against yet another alleged enemy: this time Silicon Valley, because there needs to be an endless list of targets in the midst of multiple failures.</p>
+
+<p>Trump does very well on Facebook, as my colleagues Ian Bogost and Alexis Madrigal <a href="https://www.theatlantic.com/technology/archive/2020/04/how-facebooks-ad-technology-helps-trump-win/606403/">have written</a>, because “his campaign has been willing to cede control to Facebook’s ad-buying machinery”—both now, and in 2016. The relationship is so smooth that Trump said Zuckerberg congratulated the president for <a href="https://www.businessinsider.com/trump-mark-zuckerberg-dinner-number-one-facebook-2020-1">being “No. 1 on Facebook”</a> at a private dinner with him. Bloomberg has reported that Facebook’s own data-science team agreed, publishing an internal report concluding how much better Trump was in leveraging “<a href="https://www.bloomberg.com/news/articles/2018-04-03/trump-s-campaign-said-it-was-better-at-facebook-facebook-agrees">Facebook’s ability to optimize for outcomes</a>.” This isn’t an unusual move for Facebook and its clients. Bloomberg has reported that Facebook also offered its “<a href="https://www.bloomberg.com/news/features/2017-12-07/how-rodrigo-duterte-turned-facebook-into-a-weapon-with-a-little-help-from-facebook">white glove</a>” services to the Philippine strongman Rodrigo Duterte, to help him “maximize the platform’s potential and use best practices.” Duterte <a href="https://www.bloomberg.com/news/features/2017-12-07/how-rodrigo-duterte-turned-facebook-into-a-weapon-with-a-little-help-from-facebook">dominated political conversation</a> on the site the month before the Philippines’ May 2016 presidential election. And once elected, Duterte banned independent press from attending his inauguration, instead live-streaming it on Facebook—a win-win for the company, which could then collect data from and serve ads to the millions who had little choice but to turn to the site if they wanted to see their president take office. (Duterte has <a href="https://www.hrw.org/world-report/2019/country-chapters/philippines">since been accused</a> of extrajudicial killings, jailing political opponents, and targeting independent media.)</p>
+
+<p>Playing the refs by browbeating them has long been a key move in the right-wing playbook against traditional media. The method is simple: It involves badgering them with accusations of unfairness and bias so that they bend over backwards to accommodate a “<a href="https://www.cjr.org/the_media_today/both-sides-impeachment-trump.php">both sides</a>” narrative even when the sides were behaving <a href="https://pressthink.org/2016/09/asymmetry-between-the-major-parties-fries-the-circuits-of-the-mainstream-press/">very differently</a>, or when one side was not grounded in fact. Climate-change deniers funded by fossil-fuel companies <a href="https://journals.ametsoc.org/doi/pdf/10.1175/WCAS-D-19-0063.1">effectively used this strategy</a> for decades, relying on journalists’ training and instinct to equate objectivity with representing <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC1808044/">both sides</a> of a story. This way of operating persisted even when one of the sides was mostly bankrolled by the fossil-fuel industry while the other was a near-unanimous consensus of independent experts and academics.</p>
+
+<p>Some right-wing groups quickly adapted that strategy to social media, specifically Facebook and Twitter, which have become outsize gatekeepers in the public sphere, with enormous decision-making power over what gets amplified and what gets buried. For Facebook, that gatekeeper is a single person, Mark Zuckerberg. Facebook’s young CEO is an emperor of information who decides rules of amplification and access to speech for billions of people, simply <a href="https://www.vox.com/technology/2018/11/19/18099011/mark-zuckerberg-facebook-stock-nyt-wsj">due to the way ownership of Facebook shares are structured</a>: Zuckerberg personally controls 60 percent of the voting power. And just like the way people try to get on or advertise on the president’s seemingly favorite TV show, <a href="https://www.nytimes.com/2020/01/23/us/politics/donald-trump-ads-michael-bloomberg.html"><em>Fox &amp; Friends</em></a>, merely to reach him, Trump is clearly aiming to send a message to his one-person target.</p>
+
+<p>Perhaps the most successful application of this playbook occurred in the months leading up to the 2016 U.S. presidential election. That season of social-media browbeating began with the “trending topics” controversy in May of that year, when the tech-news site <em>Gizmodo</em> published an <a href="https://gizmodo.com/former-facebook-workers-we-routinely-suppressed-conser-1775461006">article</a>, based mainly on a single anonymous source inside the tiny team, asserting that Facebook “routinely suppressed conservative news.”</p>
+<p>In reality, that controversy was a tempest in a teapot in a year that was full of real ones. For one thing, the trending-topics module was a tiny box on the site, dwarfed in importance by the central Facebook News Feed, which is algorithmically sorted and over which the trending-topics team had no impact. The vetting team was tiny, and its job was to keep false or misinformation or inappropriate content (like obscenities) from appearing in the box, and while the vetting might have been biased, another plausible explanation was that there were more right-wing sites spewing misinformation than left-wing ones. For that matter, academic research has found <a href="https://science.sciencemag.org/content/363/6425/374.abstract">that conservative-leaning, older people were more likely to engage with “fake news</a>.” The whole trending-topics module was so trivial that it wasn’t even visible on Facebook’s mobile app, which in 2016 was already the key means by which billions accessed Facebook.</p>
+
+<p>In 2016, there was no sign that conservative pages did badly on Facebook. To the contrary, they were the pages that got the most engagement on Facebook. They still are. These sites include Fox News but also <em>Breitbart News</em>, which, according to <em>Vice News</em>, is “<a href="https://www.vice.com/en_us/article/jgeqe7/how-breitbart-is-crushing-mainstream-media-on-facebook">crushing mainstream media</a>,” garnering more views and engagement on Facebook than “The New York Times, Washington Post, Wall Street Journal, and USA Today combined” and outpacing “each of the broadcast news networks, MSNBC, and CNN.” However, <em>Breitbart News</em> isn’t just a right-wing version of <em>The New York Times</em>; it was described by Steve Bannon, its former executive chairman, as “<a href="https://www.nytimes.com/2017/08/16/magazine/breitbart-alt-right-steve-bannon.html">the platform for the alt-right</a>,” and white supremacy and misogyny routinely flavor its coverage.<a href="#2">*</a> Until recently, <em>Breitbart</em> had a “<a href="https://www.splcenter.org/20180614/biggest-lie-white-supremacist-propaganda-playbook-unraveling-truth-about-%E2%80%98black-white-crime">black crime</a>” section for its stories, and published made-up stories, such as one claiming that an undocumented immigrant had started <a href="https://www.buzzfeednews.com/article/briannasacks/no-an-undocumented-immigrant-did-not-start-the-deadly#.fhYVDKoOPn">the deadly Sonoma, California, wildfires</a>. (When Facebook launched a news tab, it <a href="https://www.theverge.com/2019/10/25/20932653/facebook-news-breitbart-mark-zuckerberg-statement-bias">included <em>Breitbart</em></a> among its “trusted” news sources).</p>
+
+<p>The claim that Facebook is biased against conservatives is so egregious that, in 2016, even the conservative media personality Glenn Beck took <a href="https://medium.com/@glennbeck/what-disturbed-me-about-the-facebook-meeting-3bbe0b96b87f#.qd6aysa9g">to lamenting the fake controversy</a>, pointing out that his own page, which sometimes includes conspiracy theories, did very well on Facebook. Still, the trending-topics brouhaha led to a flurry of news coverage, culminating <a href="https://www.commerce.senate.gov/services/files/fe5b7b75-8d53-44c3-8a20-6b2c12b0970d">in a letter from Senator John Thune</a>, who was then the chairman of the Senate Commerce Committee, demanding prompt attention and answers from Facebook regarding these allegations of bias. The letter, according to <em>Wired</em>, put Facebook on “<a href="https://www.wired.com/story/inside-facebook-mark-zuckerberg-2-years-of-hell/">high alert</a>.” Staffers were immediately dispatched to meet with the senator. Seventeen “conservative thought leaders” were quickly invited to the company’s headquarters, in Menlo Park, California. “The company wanted to make a show of apologizing for its sins, lifting up the back of its shirt, and asking for the lash,” which came swiftly as the trending-topics “controversy” swirled in news media across the political spectrum. In response to the pressure, <em>Wired</em> <a href="https://www.wired.com/story/inside-facebook-mark-zuckerberg-2-years-of-hell/">reported</a>, Zuckerberg <a href="https://www.wired.com/story/inside-facebook-mark-zuckerberg-2-years-of-hell/">decided</a> “to extend an olive branch to the entire American right wing.”</p>
+
+<p>As a consequence, Facebook became cautious of taking actions that would make it look like it was holding back right-wing information machinery. That was the environment in which the country headed into the 2016 election—five months during which all stripes of misinformation went easily viral on Facebook, <a href="https://www.buzzfeednews.com/article/craigsilverman/viral-fake-election-news-outperformed-real-news-on-facebook#.bp90yKJ1W">including stories</a> that falsely claimed that the pope had endorsed Donald Trump, or that Hillary Clinton had sold weapons to the Islamic State. These stories were viewed millions of times on the platform, many of them outperforming traditional news sources. The pressure to keep Facebook friendly to the Trump campaign continued unabated after the election. When Facebook appeared to be considering changes to its microtargeting rules in 2019—for example, <a href="https://www.washingtonpost.com/technology/2019/11/20/trump-campaign-assails-facebook-over-potential-changes-political-ad-rules/">not allowing political campaigns to use the same level of microtargeting tools</a> that product advertisers can, a potential strike at “<a href="https://www.washingtonpost.com/technology/2019/11/20/trump-campaign-assails-facebook-over-potential-changes-political-ad-rules/">a major Trump ad strategy</a>”—the Trump reelection campaign swiftly <a href="https://www.businessinsider.de/international/team-trump-2020-attacks-facebook-fears-ad-targeting-changes-2019-11/">attacked the platform</a>, and the rules were left unchanged.</p>
+
+<p>Silicon Valley engineers and employees may well be overwhelmingly liberal, but Facebook is run by the algorithms they program, which optimize for the way the site makes money, rather than sifting through posts one by one. This is probably why the trending-topics controversy seemed like such a big hit: It took the one tiny section where humans had some minor input and portrayed the whole platform as working the same way. The employees may be liberal, but the consequences <a href="https://www.nytimes.com/2016/05/19/opinion/the-real-bias-built-in-at-facebook.html">of how social-media companies operate are anything but</a>. In 2016, for example, Facebook, Twitter, and Google all “<a href="https://www.politico.com/story/2017/10/26/facebook-google-twitter-trump-244191">embedded</a>” staffers with both campaigns, without charge, helping them use the sites better and get more out of the many millions of dollars they spent on the platforms. However, <a href="https://www.theatlantic.com/magazine/archive/2020/03/the-2020-disinformation-war/605530/">this was especially helpful to the Trump campaign</a>, an upstart with a bare-bones staff. Unsurprisingly, the “<a href="https://www.politico.com/story/2017/10/26/facebook-google-twitter-trump-244191">bulk of Silicon Valley’s hands-on campaign support went to Trump rather than to Clinton.</a>”</p>
+
+<p>Trump and his campaign understood the power of Facebook better than the Clinton campaign, and formed a mutually beneficial relationship. Trump spent $44 million on the site, compared with the Clinton campaign’s $28 million, but ad money is only part of the story. A key role of Facebook is promoting organic content: posts, not ads, written by people who may range from partisans to campaign operatives to opportunists who just want the clicks. Some of the authors of these viral pages are motivated by promoting their ideology. Others are just grifters, using Facebook to maximize their spread so that they can collect ad money from their own webpage—which probably uses Google’s industry-dominating ad infrastructure. It’s a complete circle of back-scratching that is rarely commented on or known outside of a small number of experts and industry practitioners.</p>
+<p>The Trump campaign also made better use of Facebook’s own artificial-intelligence tools, like “<a href="https://thenextweb.com/facebook/2018/04/04/facebook-confirms-trumps-ads-bested-clintons-during-presidential-bid/">lookalike audiences</a>”—<a href="https://www.theatlantic.com/technology/archive/2020/04/how-facebooks-ad-technology-helps-trump-win/606403/">a crucial functionality</a> that lets advertisers find many new people that Facebook <em>predicts </em>will act similarly to a small “custom” audience uploaded to the site. In other words, if you upload a list of a few thousand people who are open to your message, whether it is interest in a harmless hobby or incendiary claims against a political opponent, Facebook’s vast surveillance machinery, giant databases, and top-of-the line artificial-intelligence tools can help you find many, many more similar targets—which you can reach as long as you’re willing to pay Facebook. These are the kinds of advanced functions that Facebook makes easy to use, and staffers embedded with the Trump campaign would be able to explain and help with.</p>
+
+<p>As long as Facebook and other social-media platforms make money by increasing engagement without much regard to the content they algorithmically amplify, it doesn’t matter whether every last employee is an avowed liberal. In 2016, <a href="https://www.wsj.com/articles/facebook-knows-it-encourages-division-top-executives-nixed-solutions-11590507499">Facebook’s own internal research</a> team found that “64% of all extremist group joins are due to our recommendation tools” and, if left unchecked, Facebook would feed users “more and more divisive content in an effort to gain user attention and increase time on the platform.” The same research team also found that fake news, spam, clickbait, and inauthentic users inevitably included “a larger infrastructure of accounts and publishers on the far right than on the far left.” This conclusion echoed academic findings that political polarization in the United States <a href="https://www.cambridge.org/core/books/solutions-to-political-polarization-in-america/confronting-asymmetric-polarization/3966003B2517E22BF288796AC4985F34">is not symmetric</a>, and that the right-wing ecology is more prone to misinformation of various kinds. Efforts to heavily combat such misinformation, which would necessarily affect right-wing sites more, <a href="https://www.wsj.com/articles/facebook-knows-it-encourages-division-top-executives-nixed-solutions-11590507499">were nixed by Facebook’s leadership</a>. <em>The Wall Street Journal </em>reported that Facebook’s vice president for global public policy, Joel Kaplan (who had earlier attracted attention by being <a href="https://thehill.com/policy/technology/410457-facebook-executive-hosted-kavanaugh-confirmation-celebration">a vocal supporter</a> for Supreme Court Justice Brett Kavanaugh, sitting behind him during his confirmation hearings and <a href="https://thehill.com/policy/technology/410457-facebook-executive-hosted-kavanaugh-confirmation-celebration">even hosting a party</a> after the vote), had played an important role in this nixing, pointing out that such a move would upset that side of the political spectrum.</p>
+
+<p>This is all a win for the president, who can dredge up old tweets by Silicon Valley engineers that express disdain for him or for his followers, and have us focused on whether Silicon Valley is biased against conservatives and the right-wing information ecology because of its employees without examining the business model and the financial basis that makes it extra-friendly to them.</p>
+<p>There are already widespread news reports of how Trump is trying to “<a href="https://www.washingtonpost.com/technology/2020/05/28/trump-social-media-executive-order/">punish</a>” Twitter or Facebook. In reality, the former has given him an unfettered megaphone with no friction for years—only recently adding an extra click to one of his tweets—and the latter surely welcomes the <a href="https://www.nytimes.com/interactive/2019/05/21/us/politics/trump-2020-facebook-ads.html">millions</a> his campaign will spend on the forthcoming election. Facebook is also likely to continue algorithmically amplifying divisive, polarizing, or dubious content. Again and again, people tend to underestimate this president, whose grammar and punctuation may leave something to be desired but whose political instincts are keen. What else can you call his ability—in the middle of this summer of pandemic and as a major American city erupts in anger against yet another police killing—to have so many newspapers, analysts, and nongovernmental organizations spend so much time doing close readings of an executive order to assess its legality, coherence, or potential for becoming a law, as if any of that matters an iota. In the meantime, Trump remains focused on the only thing that matters: keeping Facebook in line until November 3, 2020.</p>

cache/2020/3fc386b9b57aa937db0a1883502b9ab8/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Splendid isolation: how I stopped time by sitting in a forest for 24 hours</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.theguardian.com/news/2020/jan/24/wilderness-solo-splendid-isolation-stopped-time-sitting-in-a-forest-24-hours">Source originale du contenu</a></h2>
 <p><span class="drop-cap"><span class="drop-cap__inner">I</span></span>t was early summer, and I was on the verge of turning 40. I found myself entertaining a recurring daydream of escaping from time. I would be hustling my son out the door to get him to school, or walking briskly to work on the day of a deadline, or castigating myself for being online when I should have been methodically and efficiently putting words on paper, and I would have this vision of myself as a character in a video game discovering a secret level. This vision was informed by the platform games I loved as a child – Super Mario Bros, Sonic the Hedgehog and so on – in which the character you controlled moved across the screen from left to right through a scrolling landscape, encountering obstacles and adversaries as you progressed to the end of the level. In this daydream, I would see myself pushing against a wall or lowering myself down the yawning mouth of a pipe, and thereby discovering this secret level, this hidden chamber where I could exist for a time outside of time, where the clock was not forever running down to zero.</p>
 
@@ -127,7 +149,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/4218c8b3332d61d6702bb2bd73ea9944/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Setting Up Git Identities</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.micah.soy/posts/setting-up-git-identities/">Source originale du contenu</a></h2>
 <p>Working on many projects across multiple identities can be difficult to manage. This is a procedure for leveraging git aliases to set an identity at the project level for any project with support for GPG-based commit signing.</p>
 
@@ -138,7 +160,77 @@ github@example.com
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/42616669988094757bf9d4864ee4ab4f/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>App Assisted Contact Tracing</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://lucumr.pocoo.org/2020/4/3/contact-tracing/">Source originale du contenu</a></h2>
 <p class=date>written on Friday, April 3, 2020
 <p>I don't know how I thought the world would look like 10 years ago, but a
@@ -163,7 +185,77 @@ give this a fair chance.</p>
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/42b02cc81a7fface539dfb3397f0a464/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>How to Fake a Traffic Jam on Google Maps</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.vice.com/en_us/article/9393w7/this-man-created-traffic-jams-on-google-maps-using-a-red-wagon-full-of-phones">Source originale du contenu</a></h2>
 <p> Artist Simon Wreckert walked the streets of Berlin tugging a red wagon behind him. Wherever he went, Google Maps showed a congested traffic jam. People using Google Maps would see a thick red line indicating congestion on the road, even when there was no traffic at all. Each and every one of those 99 phones had Google Maps open, giving the virtual illusion that the roads were jam packed.</p>
 
@@ -65,7 +87,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/46bb95c9d128d4ca05d8b5746cf3f4e7/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Le coronavirus et le sort de la civilisation industrielle, par Paul Arbair</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.pauljorion.com/blog/2020/05/17/le-coronavirus-et-le-sort-de-la-civilisation-industrielle-par-paul-arbair/">Source originale du contenu</a></h2>
 <blockquote><p>Entretien accordé à Işın Eliçin du média indépendant turc <a href="https://medyascope.tv/" target="_blank" rel="noopener noreferrer">Medyascope.tv</a>. Sur le propre site de <a href="https://paularbair.wordpress.com/2020/05/17/le-coronavirus-et-le-sort-de-la-civilisation-industrielle/" rel="noopener noreferrer" target="_blank">Paul Arbair</a>. Ouvert aux commentaires.</p></blockquote>
 
@@ -168,7 +190,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/47f2c0c2984a00e8a6041232f4e87e1f/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>L’humain du futur</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.hypothermia.fr/2020/01/lhumain-du-futur/">Source originale du contenu</a></h2>
 <p>J’ai oublié le nom de ce mec dans ma promo de fac, mais je me souviens encore nettement de ce qu’il dégageait. J’avais du mal à ne pas m’arrêter au cliché qu’il incarnait : Cheveux gras, lunettes aux verres épais, toujours en t-shirt et totalement effacé au fond des amphis – et pourtant, il irradiait de lui une assurance paisible qui était presque dérangeante. Je me rappelle surtout d’un étrange déjeuner au restau U où, se retrouvant assis face à moi et le temps de vider son plateau, il m’a déversé dans un flux ininterrompu de parole (majoritairement la bouche pleine) l’entièreté de sa raison de vivre : le transhumanisme.</p>
 
@@ -122,7 +144,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/4bda6c744ffb55c0fc4f4bf1f740b4e3/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>The Prodigal Techbro</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://conversationalist.org/2020/03/05/the-prodigal-techbro/">Source originale du contenu</a></h2>
 <p><em>The tech executive turned data justice warrior is celebrated as a truth-telling hero, but there’s something a bit too smooth about this narrative arc.</em></p>
 
@@ -100,7 +122,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/4be675592f4f6dcf636812263e9e1233/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Home .git</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://martinovic.blog/post/home_git/">Source originale du contenu</a></h2>
 <p>Git is an incredibly useful tool for a programmer, you use it to version the work you do and distribute it easily on other computers.
 But over the years, I&rsquo;ve found that a lot of my workflow depends on various configurations and helper scripts I have in my path.
@@ -113,7 +135,77 @@ All in all, there are a bunch of ways to do this and a lot more resources are av
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/4bf3df418cd5d6e14bc6e1b2bda9b12d/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>How is computer programming different today than 20 years ago?</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://medium.com/swlh/how-is-computer-programming-different-today-than-20-years-ago-9d0154d1b6ce">Source originale du contenu</a></h2>
 <p id="4883">I saw a question on Quora asking this and I started to write an answer. But it got so long that I converted into a post here.</p>
 
@@ -99,7 +121,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/4c5cc5e59531ef04e068c883a1a0e166/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Running a Paid Membership Program</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://craigmod.com/essays/membership_programs/">Source originale du contenu</a></h2>
 <p>When I launched my <em>Explorers Club</em> <a href="https://craigmod.com/membership/">membership program</a> in January of 2019, I did so with crippling trepidation. So much trepidation that I never once announced it on Twitter or Instagram out of a certain shame. I only announced it in my newsletters, and even then, did so with considerable hemming and hawing.</p>
 
@@ -416,7 +438,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/4d81a301bbb7936312cd16e6674f3ff6/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>A Group Is Its Own Worst Enemy</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="http://shirky.com/writings/group_enemy.html">Source originale du contenu</a></h2>
 <p><em>A speech at ETech, April, 2003</em></p>
 <p>
@@ -801,7 +823,77 @@ Published June 30, 2003 on the “Networks, Economics, and Culture” mailing li
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/4f88ece170719f58ce09ba4b1818730a/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Get Static</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://meyerweb.com/eric/thoughts/2020/03/22/get-static/">Source originale du contenu</a></h2>
 <p>If you are in charge of a web site that provides even slightly important information, or important services, <strong>it’s time to get static</strong>.  I’m thinking here of sites for places like health departments (and pretty much all government services), hospitals and clinics, utility services, food delivery and ordering, and I’m sure there are more that haven’t occurred to me.  As much as you possibly can, get it down to static HTML and CSS and maybe a tiny bit of enhancing JS, and pare away every byte you can.</p>
 
@@ -79,7 +101,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/50cdcad7054aa6777687db43157b9f0f/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Intent</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://adactio.com/journal/16986">Source originale du contenu</a></h2>
 <p>There are intentions and there are outcomes. Sometimes bad outcomes are the result of good intentions. Less often, good outcomes can be the result of bad intentions. But generally we associate the two: we expect good outcomes to come from good intentions and we expect bad outcomes to come from bad intentions.</p>
 
@@ -82,7 +104,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/542585b2d85213911f91b498a643e010/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>The Tyranny of Stuctureless</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.jofreeman.com/joreen/tyranny.htm">Source originale du contenu</a></h2>
 <p><em>The
 earliest version of this article was given as a talk at a conference
@@ -705,7 +727,77 @@ has been accused.</p>
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/566b71b4e3a0217d7a224f71aa255a35/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Which tech companies are doing the most harm?</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://slate.com/technology/2020/01/evil-list-tech-companies-dangerous-amazon-facebook-google-palantir.html">Source originale du contenu</a></h2>
 <p class="slate-paragraph" data-editable="text" data-uri="slate.com/_components/slate-paragraph/instances/ck5edb2f2002dbdktovhv95hb@published" data-word-count="134">
 Maybe it was <a href="https://www.wired.com/2017/02/veles-macedonia-fake-news/">fake news</a>, Russian trolls, and <a href="https://slate.com/technology/2018/03/the-real-scandal-isnt-cambridge-analytica-its-facebooks-whole-business-model.html">Cambridge Analytica</a>. Or Travis Kalanick’s <a href="https://www.youtube.com/watch?v=gTEDYCkNqns">conniption in an Uber</a>. Or the <a href="https://slate.com/business/2018/06/elizabeth-holmes-deserves-prison-but-her-indictment-wont-make-silicon-valley-any-less-reckless.html">unmasking of Theranos</a>. Or <a href="https://www.vanityfair.com/news/2019/01/jack-dorsey-twitter-nazis-are-here-to-stay">all those Twitter Nazis</a>, and <a href="https://www.wired.com/story/google-autocomplete-vile-suggestions/">racist Google results</a>, and <a href="https://www.nytimes.com/2019/02/19/technology/youtube-conspiracy-stars.html">conspiracy theories</a> on YouTube. Though activists, academics, reporters, and regulators had sent up warning flares for years, it wasn’t until quite recently that the era of enchantment with Silicon Valley ended. The list of scandals—over user privacy and security, over corporate surveillance and data collection, over fraud and foreign propaganda and algorithmic bias, to name a few—was as unending as your Instagram feed. There were hearings, resignations, investigations, major new regulations in Europe, and calls for new laws at home. There was an industry that insisted it now <a href="https://www.washingtonpost.com/technology/2020/01/08/ces-apple-facebook-amazon-are-preaching-privacy-dont-believe-hype/">valued privacy</a> and safety but still acted otherwise. There was <a href="https://slate.com/business/2019/09/wework-adam-neumann-blew-it.html">WeWork</a>, whatever that was.
@@ -1104,7 +1126,77 @@ Amazon
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/58117f5865002118d6769cb0a7aa9786/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>L’épidémie n’a pas de vertus</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://perspectives-printanieres.info/index.php/2020/03/10/lepidemie-na-pas-de-vertus/">Source originale du contenu</a></h2>
 <p>Si l’on en croit la multiplication des analyses médiatiques allant dans ce sens dernièrement, l’épidémie de COVID-19 serait bonne pour la planète. Le principal bénéfice écologique évoqué se rapporte à la baisse d’1/4 des émissions chinoises de CO<sub>2</sub> sur les deux derniers mois<a href="#_ftn1" name="_ftnref1">[1]</a>, dont les effets positifs sont évidemment climatiques mais aussi sanitaires. L’intérêt autour de cette réduction de la pollution émise par la deuxième puissance mondiale a notamment été renforcé par des images satellites de la NASA illustrant très nettement le phénomène.  Quelques articles plus rares mentionnent quant à eux les effets positifs pour la biodiversité de la très récente interdiction par la Chine du commerce et de la consommation d’animaux sauvages<a href="#_ftn2" name="_ftnref2">[2]</a>. Malgré ces éléments qui semblent univoques, voir des bénéfices pour la planète dans l’épidémie en cours n’est en aucun cas un positionnement écologiste. Revenir aux conditions sociales de la production de l’épidémie ainsi qu’aux principales propositions écologistes permet de s’en convaincre. Il y a assurément une grande différence entre considérer que l’épidémie de coronavirus est en elle-même écologiquement positive et tirer (ou plutôt confirmer) des enseignements écologistes à partir des effets économiques de celle-ci.</p>
 
@@ -190,7 +212,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/58add7873e65625beba4c859d40a278b/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>TikTok and the coming of infinite media</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="http://www.roughtype.com/?p=8677">Source originale du contenu</a></h2>
 <figure class="wp-block-image"><img src="http://www.roughtype.com/wp/wp-content/plugins/jetpack/modules/lazy-images/images/1x1.trans.gif" alt="" class="wp-image-8691" data-lazy-src="https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?fit=625%2C294" data-lazy-srcset="https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?w=1656 1656w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=300%2C141 300w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=768%2C361 768w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=1024%2C481 1024w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=624%2C293 624w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?w=1250 1250w" data-lazy-sizes="(max-width: 625px) 100vw, 625px"/><noscript><img src="https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?fit=625%2C294" alt="" class="wp-image-8691" srcset="https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?w=1656 1656w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=300%2C141 300w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=768%2C361 768w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=1024%2C481 1024w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=624%2C293 624w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?w=1250 1250w" sizes="(max-width: 625px) 100vw, 625px"/></noscript></figure>
 
@@ -82,7 +104,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/59dac1925636ebf6358c3a598bf834f9/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Un pédophile est un client Apple comme les autres.</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.affordance.info/mon_weblog/2020/01/pedophile-client-apple.html">Source originale du contenu</a></h2>
 <p>Si Gabriel Matzneff ne sait plus où donner à lire le récit de ses ébats pédophiles suite à l'annonce du retrait de ses livres par deux de ses éditeurs historiques, il lui reste encore la possibilité de se créer un compte Apple. Je vous explique. </p>
 
@@ -142,7 +164,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/5a82172cc73bfc2050a2590b4d81e82d/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Digital Gardens</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://sentiers.media/dispatch-08-digital-gardens/">Source originale du contenu</a></h2>
 <div class="wp-block-columns alignwide">
 <div class="wp-block-column">
@@ -123,7 +145,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/5abb317f078fc9f585712bfa3f772504/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Exclusive: Apple dropped plan for encrypting backups after FBI complained - sources</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.reuters.com/article/us-apple-fbi-icloud-exclusive-idUSKBN1ZK1CT">Source originale du contenu</a></h2>
 <p>SAN FRANCISCO (Reuters) - Apple Inc (<span id="”symbol_AAPL.O_0”"><a href="//www.reuters.com/companies/AAPL.O">AAPL.O</a></span>) dropped plans to let iPhone users fully encrypt backups of their devices in the company’s iCloud service after the FBI complained that the move would harm investigations, six sources familiar with the matter told Reuters.  </p>
 
@@ -118,7 +140,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/5c374b4df521b1ef44c86cd9a3cc022f/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Working remotely builds organizational resiliency</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://m.signalvnoise.com/working-remotely-builds-organizational-resiliency/">Source originale du contenu</a></h2>
 <p>For many, moving from everyone’s-working-from-the-office to everyone’s-working-at-home isn’t so much a transition as it is a <em>scramble</em>. A very <em>how the fuck?</em> moment.</p>
 
@@ -66,7 +88,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/5db0711c2794aed3bf1433b48084064c/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Plus rien à craindre</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://nrkn.fr/blog/2020/06/13/plus-rien-a-craindre/">Source originale du contenu</a></h2>
 <p>Pour le week-end de la Pentecôte, j’étais retourné là-bas pour honorer un engagement. J’avais dit à ma chère complice que je comptais prendre quelques jours pour avancer — enfin — dans le tri de mes papiers et de mes quelques affaires qui hantent encore ses lieux. Au moins élaguer, à défaut d’en finir une bonne fois pour toutes. J’ai donc retrouvé ce vieux bureau, à l’arrière de la maison, au-delà de la petite cour intérieure. Le petit destructeur de documents sous un bras, quelques sacs-poubelles dans la main restée libre. À peine installé, je me mettais en quête d’un cendrier également. Vieille habitude du lieu, nous y fumions à l’intérieur à l’époque.</p>
 
@@ -70,7 +92,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/5ddeb776b27bade5f581d66e40de4c6c/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Big Mood Machine</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://thebaffler.com/downstream/big-mood-machine-pelly">Source originale du contenu</a></h2>
 <p><span class="first-selection">Music is emotional</span>, and so our listening often signals something deeply personal and private. Today, this means music streaming platforms are in a unique position within the greater platform economy: they have troves of data related to our emotional states, moods, and feelings. It’s a matter of unprecedented access to our interior lives, which is buffered by the flimsy illusion of privacy. When a user chooses, for example, a “private listening” session on Spotify, the effect is to make them feel that it’s a one-way relation between person and machine. Of course, that personalization process is Spotify’s way of selling users on its product. But, as it turns out, in a move that should not surprise anyone at this point, Spotify has been selling access to that listening data to multinational corporations.</p>
 
@@ -152,7 +174,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/5de73fee2ee649cb44f623c5d2b28a2f/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>10 prérequis pour l'évaluation d'applications de "suivi de contact Coronavirus"</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://blog.keiruaprod.fr/2020/04/08/prerequis-pour-appli-de-suivi-de-contacts.html">Source originale du contenu</a></h2>
 <p>Cet article est la traduction d’<a href="https://www.ccc.de/en/updates/2020/contact-tracing-requirements">un article du 6 avril 2020</a> écrit par le <a href="https://en.wikipedia.org/wiki/Chaos_Computer_Club">Chaos Computer Club</a> sur les conditions que devraient respecter une application de suivi de contact dans le cadre du Covid-19. Les experts de la surveillance − <a href="https://standblog.org/blog/post/2020/04/08/Covid-19-et-la-surveillance">Tristan Nitot</a>, <a href="https://twitter.com/oliviertesquet/status/1247823274597404672">Olivier Tesquet</a>, <a href="https://twitter.com/amaelle_g/status/1247928366621167616">Amaelle Guiton</a>… − constatent tous la même chose. Les idées évoluent vite dans l’esprit du public et du gouvernement dans ce qu’il est tolérable d’accepter de changer pour sortir au plus vite de la crise sanitaire, et les risques de dérive sont majeurs. Si nous devons aller dans la direction d’une telle application, il faudra être très vigilant pour ne pas avancer un grand coup et dans la durée vers une société où la surveillance est encore plus marquée qu’aujourd’hui.</p>
 
@@ -138,7 +160,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/618f913d970fee8feadadd15cf282e5a/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>How “Good Intent” Undermines Diversity and Inclusion</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://thebias.com/2017/09/26/how-good-intent-undermines-diversity-and-inclusion/">Source originale du contenu</a></h2>
 <p>A lot of codes of conduct, community guidelines, and company values statements ask people to “assume good intent” when in conflict with other members. Positive statements like this feel more pleasant and welcoming than lists of banned behavior. But asking people to “assume good intent” will actually undermine your code of conduct and make marginalized people feel less welcome and less safe in your community.</p>
 
@@ -148,7 +170,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/63396398249526e12072e828b8641030/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Coronavirus : les premiers désaccordés.</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.affordance.info/mon_weblog/2020/03/coronavirus-premier-cordee.html">Source originale du contenu</a></h2>
 <p>"<em>J’essaye de me dépêtrer de ce pays infernal, plein de peureux et de courageux, plus terribles les uns que les autres.</em>" <br/>Jean Giono. Le Hussard sur le toit.</p>
 
@@ -146,7 +168,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/662f4136a25b828f662a6e822d85575d/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Who Listens to the Listeners?</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://librarianshipwreck.wordpress.com/2019/12/06/who-listens-to-the-listeners/">Source originale du contenu</a></h2>
 <p>It can be kind of fun to look through the record collections of your friends. Whether this collection consists of actual records, cassette tapes, compact discs, or just a lengthy “library” list you scroll through – it presents an opportunity to discover new musicians, listen to cool songs you haven’t listened to in a while, and there is always a certain sense that you get to know a person a bit better by getting to know their musical taste. Granted, it has become progressively trickier to sift through your friend’s records as these collections have ceased being an accumulation of physical objects and have increasingly become an unseen database of their streaming preferences.</p>
 
@@ -76,7 +98,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/6723325d9229f986f6b77cc5ff6d3ef2/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Choose Boring Technology</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://mcfunley.com/choose-boring-technology">Source originale du contenu</a></h2>
 <p>Probably the single best thing to happen to me in my career was having had <a href="http://laughingmeme.org/">Kellan</a> placed in charge of me. I stuck around long enough to see Kellan’s technical decisionmaking start to bear fruit. I learned a great deal <em>from</em> this, but I also learned a great deal as a <em>result</em> of this. I would not have been free to become the engineer that wrote <a href="/data-driven-products-lean-startup-2014">Data Driven Products Now!</a> if Kellan had not been there to so thoroughly stick the landing on technology choices.</p>
 
@@ -266,7 +288,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/67c8c54b07137bcfc0069fccd8261b53/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Mercurial's Journey to and Reflections on Python 3</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://gregoryszorc.com/blog/2020/01/13/mercurial%27s-journey-to-and-reflections-on-python-3/">Source originale du contenu</a></h2>
 <p>Mercurial 5.2 was released on November 5, 2019. It is the first version
 of Mercurial that supports Python 3. This milestone comes nearly 11 years
@@ -710,7 +732,77 @@ taking the time to do so.</p>
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/685842ac9d1a3206af33dbd51d08cbf0/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>The modern web is becoming an unusable, user-hostile wasteland</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://omarabid.com/the-modern-web">Source originale du contenu</a></h2>
 <blockquote>
 <p>In one of Gerald Weinberg’s books, probably The Secrets of Consulting, there’s the apocryphal story of the giant multinational hamburger chain where some bright MBA figured out that eliminating just three sesame seeds from a sesame-seed bun would be completely unnoticeable by anyone yet would save the company $126,000 per year. So they do it, and time passes, and another bushy-tailed MBA comes along, and does another study, and concludes that removing another five sesame seeds wouldn’t hurt either, and would save even more money, and so on and so forth, every year or two, the new management trainee looking for ways to save money proposes removing a sesame seed or two, until eventually, they’re shipping hamburger buns with exactly three sesame seeds artfully arranged in a triangle, and nobody buys their hamburgers any more.</p>
@@ -176,7 +198,77 @@ Medium doesn’t accept advertising. Please don’t market yourself or other pro
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/73a689d4932b2952affd040014e9b85b/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>The empty promises of Marie Kondo and the craze for minimalism</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.theguardian.com/lifeandstyle/2020/jan/03/empty-promises-marie-kondo-craze-for-minimalism">Source originale du contenu</a></h2>
 <p><span class="drop-cap"><span class="drop-cap__inner">S</span></span>onrisa Andersen’s childhood home was a mess. Her parents split when she was eight years old and she moved to Colorado Springs with her mother. Then she realised she was living with a hoarder. It might have been grief over the lost marriage that caused it, or maybe it was a habit that had grown worse as her mother’s dependence on drugs and alcohol intensified. On the kitchen table there were piles of clothes stacked all the way to the ceiling, things they would get for free from churches or charities. Furniture that Andersen’s well-meaning grandmother found on the street accumulated. An avalanche of pots and pans spilled all over the kitchen counters and floor. Anything her mother could get for free or cheap, she would bring into the house and leave there.</p>
 
@@ -113,7 +135,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/73dc1ad4719144f3768002aa5cef60ef/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Indefinite leave to remain</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://colly.com/articles/indefinite-leave-to-remain">Source originale du contenu</a></h2>
 <p class="as-subtitle">After almost six years of marriage, three expensive and stressful visas, and much quiet worry, we finally have confirmation that Geri can stay as long as she wants.</p>
 
@@ -72,7 +94,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/73f93e0e8e7810a36d88555c2cbfa573/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>as days pass by</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.kryogenix.org/days/2020/05/06/hammer-and-nails/">Source originale du contenu</a></h2>
 <p>There is a Linux distribution called Gentoo, named after a type of penguin (of <em>course</em> it&#8217;s named after a penguin), where installing an app doesn&#8217;t mean that you download a working app. Instead, when you say &#8220;install this app&#8221;, it downloads the source code for that app and then compiles it on your computer. This apparently gives you the freedom to make changes to exactly how that app is built, even as it requires you to have a full set of build tools and compilers and linkers just to get a calculator. I think it&#8217;s clear that the world at large has decided that this is not the way to do things, as evidenced by how almost no other OSes take this approach &#8212; you download a compiled binary of an app and run it, no compiling involved &#8212; but it&#8217;s nice that it exists, so that the few people who really want to take this approach can choose to do&nbsp;so.</p>
 
@@ -75,7 +97,77 @@ alt="" style="display:inline;box-shadow:none;vertical-align:text-top"></p>
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/77c968588b2e605d5b3050c45af53603/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Driving surveillance: What does your car know about you? We hacked a 2017 Chevy to find out.</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.washingtonpost.com/technology/2019/12/17/what-does-your-car-know-about-you-we-hacked-chevy-find-out/">Source originale du contenu</a></h2>
 <p>Cars have become the most sophisticated computers many of us own, filled with hundreds of sensors. Even older models know an awful lot about you. Many copy over personal data as soon as you plug in a smartphone.</p>
 
@@ -144,7 +166,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/77db8cc6de2906f31a4d37d91a47a3aa/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Currying in CSS?</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.trysmudford.com/blog/currying-in-css/">Source originale du contenu</a></h2>
 <p>There were lots of interesting discoveries found whilst developing <a href="https://utopia.fyi/">Utopia</a>. This one came when declaring CSS custom properties.</p>
 
@@ -112,7 +134,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/7cdc8defab9f52baa06e657ffa9db057/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Fragments</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://nrkn.fr/blog/2020/01/19/fragments-9/">Source originale du contenu</a></h2>
 <h3>#1. Divide <span class="amp">&amp;</span> Conquer</h3>
 
@@ -98,7 +120,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/7e8f31c1021b2049977e3c92d3a3b356/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Il n'y aura pas de retour à la normale</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.terrestres.org/2020/03/24/il-ny-aura-pas-de-retour-a-la-normale/">Source originale du contenu</a></h2>
 <p class="td-post-sub-title">Nos vies reprendront-elles leur cours après le confinement ? S'appuyant sur les modélisations de la pandémie du rapport de l'Imperial College, Gideon Lichfield estime que nos vies confinées et contrôlées ne sont pas prêtes de disparaître. Le bouleversement sanitaire et sécuritaire de nos sociétés sera massif.</p>
 
@@ -124,7 +146,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/7f71531b565d7a8b0a99100786687cfd/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Temporary Contact Number based Contact Tracing</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://lucumr.pocoo.org/2020/4/9/tcn-contact-tracing/">Source originale du contenu</a></h2>
 <p class="date">written on Thursday, April 9, 2020
 
@@ -199,7 +221,77 @@ infrastructure from what I can tell.</p>
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/7f74e315811927454830814bcb659896/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Minimum</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://journal.loupbrun.ca/n/021/">Source originale du contenu</a></h2>
 <blockquote><p>Le Minimum <del>pourrait être défini comme la perfection atteinte par un artefact lorsqu’il ne peut plus être amélioré par soustraction. C’est la qualité que possède un objet lorsque chaque composante, chaque détail, et chaque jointure a été réduit ou condensé à l’essentiel. Il</del> résulte de l’omission de l’inessentiel.</p><p>— John Pawson<sup id="fnref:1"/></p></blockquote>
 </article>
@@ -56,7 +78,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/81585c1eca04b8e13fa1d096f70c96ec/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Rétro-confinement</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="http://www.aubryconseil.com/post/Retro-confinement">Source originale du contenu</a></h2>
 <div class="post-excerpt"><blockquote><p>Si on ne profite pas de cette situation incroyable pour changer, c’est gâcher une crise</p></blockquote>
 
@@ -117,7 +139,77 @@ Cela s'adresse à un large public. Avec <a href="https://twitter.com/jpboignard"
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/82e58e715a4ddb17b2f9e2a023005b1a/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Wordsmiths | Getting Real</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://basecamp.com/gettingreal/08.6-wordsmiths">Source originale du contenu</a></h2>
 <h2 id="hire-good-writers">Hire good writers</h2>
 
@@ -76,7 +98,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/85e0f968f6ac8dfdd76c7a76df6ef088/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Overcoming my panic towards accessibility</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://zellwk.com/blog/overcoming-panic-towards-accessibility/">Source originale du contenu</a></h2>
 <p>Accessibility is a big part of JavaScript. If you build anything with JavaScript, you need to make them accessible.</p>
 
@@ -219,7 +241,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/86939b13f2cea3d1ffbaa5b544fe5e45/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>À propos - beta.gouv.fr</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://beta.gouv.fr/apropos/">Source originale du contenu</a></h2>
 <h3 id="qui-sommes-nous">Qui sommes-nous ?</h3>
 
@@ -127,7 +149,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/874765e437a144748e9438d272b1177a/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Vieux développeur, pas manager</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://n.survol.fr/n/vieux-developpeur-pas-manager">Source originale du contenu</a></h2>
 <p>J’en­tends trop souvent des déve­lop­peurs se plaindre d’être forcés de passer dans le mana­ge­ment pour progres­ser en salaire. </p>
 
@@ -91,7 +113,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/8d7e08c54e30cc6d35375da17e6a61c0/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Zam - beta.gouv.fr</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://beta.gouv.fr/startups/zam.html">Source originale du contenu</a></h2>
 <h2 id="le-contexte">Le contexte</h2>
 
@@ -105,7 +127,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/911b72ae5d6e140268adf8591aae7df3/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Journal-Hydration</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://adactio.com/journal/16404">Source originale du contenu</a></h2>
 <p>As you may have noticed, <a href="https://adactio.com/tags/progressive%20enhancement">I’m a fan of progressive enhancement</a>.</p>
 
@@ -154,7 +176,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/91a099e7f48f8733274f7b27cb68b772/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Exercice pour préparer l’après crise sanitaire pour être sûr que tout ne reprenne pas comme avant</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="http://www.bruno-latour.fr/fr/node/851.html">Source originale du contenu</a></h2>
 <p><a href="https://www.franceinter.fr/emissions/l-invite-de-8h20-le-grand-entretien/l-invite-de-8h20-le-grand-entretien-03-avril-2020" rel="nofollow">Entretien avec Nicolas Demorand, 2 avril sur les gestes barrières.</a><br/>
 Il y a peut-être quelque chose d’inconvenant à se projeter dans l’après crise alors que le personnel de santé est, comme on dit, « sur le front », que des millions de gens perdent leur emploi et que beaucoup de familles endeuillées ne peuvent même pas enterrer leurs morts. Et pourtant, c’est bien maintenant qu’il faut se battre pour que la reprise économique, une fois la crise passée, ne ramène pas le même ancien régime climatique contre lequel nous essayions jusqu’ici, assez vainement, de lutter. En effet, la crise sanitaire est enchâssée dans ce qui n’est pas une crise — toujours passagère — mais une mutation écologique durable et irréversible. Si nous avons de bonne chance de « sortir » de la première, nous n’en avons aucune de « sortir » de la seconde. Les deux situations ne sont pas à la même échelle, mais il est très éclairant de les articuler l’une sur l’autre. En tous cas, ce serait dommage de ne pas se servir de la crise sanitaire pour découvrir d’autres moyens d’entrer dans la mutation écologique autrement qu’à l’aveugle.<br/>
@@ -69,7 +91,77 @@ Il y a peut-être quelque chose d’inconvenant à se projeter dans l’après c
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/99c5bddeed5760b748ba9b219270d75d/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Ecological crises and equitable futures</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://esra.nz/ecological-crises-equitable-futures/">Source originale du contenu</a></h2>
 <p><span class="post-featured-img"><img src="https://esra.nz/wp-content/uploads/2020/03/1184740878.jpg.0.jpg" class="attachment-full size-full wp-post-image" alt="" title=""/></span><p>Activism in the 20<sup>th</sup> century was largely dominated by struggles over labour and social justice. Conflicts between and within capitalism, socialism, communism and fascism were at the heart of many key events. In the 21<sup>st</sup> century, activism and political struggles surrounding labour and social justice will largely be framed by ecological crises, as climate change and the sixth mass extinction become major factors in instigating and perpetuating social conflict. This article explores four discourses that currently circulate within activist, popular and academic debates surrounding ecological futures. It considers some of their implications both globally and for Aotearoa New Zealand.</p>
 <p>I begin by exploring the discourse of extinction, which argues that we are currently on course to eradicate humans from the planet in the near future, a position which is growing in popularity but that contradicts available scientific evidence.<a href="#_edn1" name="_ednref1"><sup>[1]</sup></a> Second, I consider the discourse of ecological apocalypse. While this discourse also discusses catastrophic events, the key departure from extinction is that apocalypse does not signify the end of existence, but involves the sweeping away of the present regime in favour of a dramatically different society. I argue that this discourse is particularly pertinent to contemporary rhetoric that links ecological crises to overpopulation.</p>
@@ -127,7 +149,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/9a3fecdca72af16f1403b9e77b6e8e04/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>“Hey Google, stop tracking me”</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.magiclasso.co/insights/hey-google/">Source originale du contenu</a></h2>
 <p>It’s common knowledge that Google has used their political, marketing and technical prowess <a href="https://www.magiclasso.co/insights/google-undermines-adblock/">to stop and co-opt effective ad blocking</a> on the web. What hasn’t been clear until recently is how Google is using the Chrome web browser to track individuals, even when ad blocking and in-built tracking prevention is enabled.</p>
 
@@ -94,7 +116,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/a1ba10f6326b0ed4c9ca343a214f671d/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Végétarien carnivore</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://oncletom.io/2020/01/12/vegetarien-carnivore/">Source originale du contenu</a></h2>
 <p>Je n'achète plus de viande par défaut depuis une dizaine d'années. Et depuis 2 ans, je suis cuisine explicitement végétarien pour les repas de fête/famille — je considère la viande comme une option.</p>
 
@@ -71,7 +93,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/a38442a0e3e291d654793c384e17e737/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Le virus n’est pas une vengeance</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://perspectives-printanieres.info/index.php/2020/03/30/le-virus-nest-pas-une-vengeance/">Source originale du contenu</a></h2>
 <p><a href="https://perspectives-printanieres.info/wp-content/uploads/2020/03/Perspectives-Printanières_Coronavirus_et_Ecologie_mars2020-A5-page_par_page.pdf"><img class="alignright wp-image-984 size-full" src="https://perspectives-printanieres.info/wp-content/uploads/2020/03/brochure_page.png" alt=""/></a><a href="https://perspectives-printanieres.info/wp-content/uploads/2020/03/Perspectives-Printanières_Coronavirus_et_Ecologie_mars2020-A4-planche.pdf"><img class="alignright wp-image-985 size-full" src="https://perspectives-printanieres.info/wp-content/uploads/2020/03/brochure_livret.png" alt=""/></a></p>
 
@@ -366,7 +388,77 @@ La première reste très pragmatique : elle se contente de pointer les implicat
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/a70068c881eba36604b2f4f8aec54670/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>HTML: The Inaccessible Parts</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://daverupert.com/2020/02/html-the-inaccessible-parts/">Source originale du contenu</a></h2>
 <p>I’ve always abided in the idea that “HTML is accessible by default and then we come along and mess it up.” In a lot places this is very true and by just using a suitable HTML element instead of a generic <code>div</code> or <code>span</code> we can have a big Accessibility impact.</p>
 
@@ -98,7 +120,77 @@ After some user testing, Jeff Smith discovered <a href="http://simplyaccessible.
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/a72c83494fc6636cde5b73bd2b064958/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>La nature est un champ de bataille</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.editions-zones.fr/lyber?la-nature-est-un-champ-de-bataille">Source originale du contenu</a></h2>
 <div class="chapitre" id="pre-002"><h3><span>INTRODUCTION</span></h3><div class="dev"><p>À l’automne 1982, les habitants du comté de Warren, dans le nord-est de la Caroline du Nord, se sont mobilisés pendant six semaines contre l’installation d’une décharge de déchets toxiques<a href="javascript:void(0);" class="note" onmouseover="return overlib('Voir Eileen Maura M&lt;span class=petite_capitale style=font-variant:small-caps;&gt;C&lt;/span&gt;G&lt;span class=petite_capitale style=font-variant:small-caps;&gt;URTY&lt;/span&gt;, « From NIMBY to civil rights. The origins of the environmental justice movement », &lt;em&gt;Environmental History&lt;/em&gt;, vol. 2, nº 3, 1997.', FGCOLOR, '#ffffff', BGCOLOR, '#000000', BORDER, 1);" onmouseout="return nd();">note</a>. Quatre ans plus tôt, en 1978, une entreprise de gestion des déchets industriels avait entreposé illégalement dans la région d’importantes quantités de biphényles polychlorés (BPC), une substance utilisée notamment dans les transformateurs électriques et la peinture. Une fois découvertes, l’État de Caroline du Nord décida d’acquérir un terrain pour les y enfouir. Plusieurs endroits furent envisagés, et on opta finalement pour un terrain à proximité de la ville de Warrenton. Les résidents du lieu, comme c’est souvent le cas dans ce genre de circonstances, s’y opposèrent, craignant pour leur santé, le BPC étant une substance cancérigène. Ils entamèrent une action en justice afin d’empêcher que les déchets soient entreposés à cet endroit. Deux ans plus tard, le tribunal du district rejeta leur requête. C’est alors que la protestation prit une forme extrajudiciaire : manifestations, sit-in, boycotts, désobéissance civile, marches, meetings, coupures de routes… Ces actions conduisirent à l’arrestation de plus de cinq cents personnes, parmi lesquelles des élus locaux et fédéraux. Le mouvement n’obtint pas l’abandon du projet dans l’immédiat et le site ne fut décontaminé que dans les années 2000.</p>
 <p>Au départ, les arguments avancés par les protestataires contre la décharge avaient trait à la pollution de l’environnement (eau, sols) par le BPC et aux risques qu’il présente pour la santé. Cependant, à mesure que le mouvement s’élargit et devint plus politique, ces arguments changèrent de nature. Si l’État choisit d’enfouir ces déchets toxiques à cet endroit, affirmaient les résidents et leurs alliés, c’est parce qu’y vivent des Noirs, des pauvres et surtout des Noirs pauvres. Autrement dit, la décision d’installer la décharge a un fondement raciste. À l’époque, le comté de Warren est composé à 64 % de Noirs. La région immédiatement à proximité de la décharge l’est à hauteur de 75 %. Les protestataires faisaient remarquer que cette injustice dans la localisation des déchets toxiques avait cours non seulement en Caroline du Nord, mais aux États-Unis plus généralement, et ce depuis la fondation du pays. Dans ses politiques de gestion de l’environnement et des ressources, l’État favorise systématiquement les populations blanches et les classes moyennes et supérieures, qu’il préserve de ce type de nuisances. À l’inverse, les minorités, à savoir non seulement les Noirs, mais aussi les Amérindiens, les Hispaniques et les Asiatiques, ainsi que les pauvres, assument la plus grande part des conséquences négatives de la production industrielle. À ce jour encore, on constate que les amendes pour traitement non conforme des déchets aux États-Unis sont cinq fois plus fréquentes lorsque les faits ont eu lieu à proximité de quartiers blancs que de quartiers noirs ou hispaniques<a href="javascript:void(0);" class="note" onmouseover="return overlib('Marianne C&lt;span class=petite_capitale style=font-variant:small-caps;&gt;HAUMEL &lt;/span&gt;et Stéphane L&lt;span class=petite_capitale style=font-variant:small-caps;&gt;A &lt;/span&gt;B&lt;span class=petite_capitale style=font-variant:small-caps;&gt;RANCHE&lt;/span&gt;, « Inégalités écologiques : vers quelle définition ? », &lt;em&gt;Espace, populations, sociétés&lt;/em&gt;, nº 1, 2008, p. 107.', FGCOLOR, '#ffffff', BGCOLOR, '#000000', BORDER, 1);" onmouseout="return nd();">note</a>. Cette discrimination raciale n’est pas forcément intentionnelle de la part des pouvoirs publics, même si elle l’est souvent. Elle est systémique, c’est-à-dire qu’elle procède d’une logique en partie indépendante de la volonté des individus. Ce qui a permis au mouvement du comté de Warren de prendre de l’ampleur, c’est donc sa capacité à monter en généralité, à « accrocher » une revendication locale à une injustice globale.</p>
@@ -359,7 +381,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/a9155966aed8a47ec727d156bf8b5458/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Transmission de COVID-19 par aérosol, les implications pour la santé publique</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.lejournaldumedecin.com/actualite/transmission-de-covid-19-par-aerosol-les-implications-pour-la-sante-publique/article-opinion-47087.html">Source originale du contenu</a></h2>
 <p>Nous sommes un groupe pluridisciplinaire et international d'experts qui concluent que la négligence de la transmission du COVID 19 par aérosol est à l'origine de la différence entre les pays qui contrôlent ou ne contrôlent pas la propagation du nouveau coronavirus. La distanciation sociale de 1 m est largement insuffisante. Soyons adultes et acceptons la réalité du risque de transmission par aérosol, limitons toutes activités non essentielles, utilisons tous les moyens de protection de nos voies respiratoires, du FFP2 à l'humble châle, en attendant de développer les outils pour retourner à la pleine activité, à savoir une capacité de dépistage nucléique et sérologique massive de ce virus associé a un confinement des personnes infectées, et une capacité de production locale de masques de FFP2 pour toute la population.</p>
 <p>Quand une personne est infectée, sa toux, ses éternuements, mais aussi sa conversation ou ses chants vont produire un nuage de gouttelettes depuis sa bouche ou son nez.</p>
@@ -119,7 +141,77 @@ null © dr</p>
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/abb215ff6b7cb9c876db622d42385aca/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>La Licence Contributive Commons</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://contributivecommons.org/la-licence-contributive-commons/">Source originale du contenu</a></h2>
 <h2 id="h.1slp6p8t9wn0" class="c31 c28">Introduction</h2>
 
@@ -168,7 +190,77 @@ de l’Assemblée des Communs de Lille et de la P2P Foundation France. </p>
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/ac3266635585d387973da1c64b546990/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Ligue du LOL : un an après</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://medium.com/@vincentglad_67276/ligue-du-lol-un-an-apr%C3%A8s-aeee7784cf4d">Source originale du contenu</a></h2>
 <div class="fj"><div class="n p"><div class="fk fl fm fn fo fp ag fq ah fr aj ak"><div class="fs ft fu fv fw n fx"><figure class="fy fj fz ga gb gc gd paragraph-image"><div class="ge gf gg gh ak"><div class="gn r gg go"><div class="gp r"><div class="gi gj cg t u gk ak dy gl gm"><img class="cg t u gk ak gq gr gs" src="https://miro.medium.com/max/60/1*gkWadibNCyEc59UkqdGDeA.png?q=20" width="672" height="436" role="presentation"/></div><img class="gi gj cg t u gk ak gt" width="672" height="436" role="presentation"/><noscript><img class="cg t u gk ak" src="https://miro.medium.com/max/1344/1*gkWadibNCyEc59UkqdGDeA.png" width="672" height="436" role="presentation"/></noscript></div></div></div></figure><figure class="fy fj gu ga gb gc gd paragraph-image"><div class="ge gf gg gh ak"><div class="gn r gg go"><div class="gv r"><div class="gi gj cg t u gk ak dy gl gm"><img class="cg t u gk ak gq gr gs" src="https://miro.medium.com/max/60/1*aM_p6mbrMXmXQmeGJMb24w.png?q=20" width="512" height="342" role="presentation"/></div><img class="gi gj cg t u gk ak gt" width="512" height="342" role="presentation"/><noscript><img class="cg t u gk ak" src="https://miro.medium.com/max/1024/1*aM_p6mbrMXmXQmeGJMb24w.png" width="512" height="342" role="presentation"/></noscript></div></div></div><figcaption class="bo dx gw gx gy cd cb cc gz ha bj dw hb gg hc hd">Illustrations du Temps et du Monde sur l‘affaire.</figcaption></figure></div></div></div></div>
 
@@ -227,7 +249,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/ad8fd9818243ad950a794021d3dc794c/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>De l’alternumérisme : d’autres numériques sont-ils possibles ?</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="http://www.internetactu.net/2020/02/13/de-lalternumerisme-dautres-numeriques-sont-ils-possibles/">Source originale du contenu</a></h2>
 <p><img src="http://www.internetactu.net/wp-content/uploads/2020/02/contre-l-alternumerisme.jpg" alt="Couverture du livre Contre l'alternumérisme" title="Couverture du livre Contre l'alternumérisme" class="alignright size-full wp-image-35111" srcset="http://www.internetactu.net/wp-content/uploads/2020/02/contre-l-alternumerisme.jpg 220w, http://www.internetactu.net/wp-content/uploads/2020/02/contre-l-alternumerisme-191x300.jpg 191w" sizes="(max-width: 220px) 100vw, 220px"/>Il y a des livres qui vous font profondément réfléchir. C’est certainement le cas des livres les plus critiques à l’encontre des enjeux technologiques – et ils sont nombreux. Les arguments de ceux qui s’opposent à la numérisation sont bien plus pertinents et nécessaires que les arguments de ceux qui vous promettent du bonheur numérique ou qui continuent à soutenir que l’innovation technologique tient du progrès sans observer concrètement ses limites et ses effets délétères. Le nouveau livre publié par les éditions La lenteur – <em>Contre l’alternumérisme</em> (La Lenteur, 2020, 128p.), signé de l’étudiante en philosophie Julia Laïnae, membre des Décâblés, et de l’informaticien Nicolas Alep, membre de Technologos -, est assurément un livre qui interroge les arguments de ceux qui espèrent d’un autre numérique dont je suis. En cela, il est assurément nécessaire de nous y confronter.   </p>
 
@@ -112,7 +134,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/af5d5f52466dfc2f59718294faa07418/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Visitors, Developers, or Machines</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://garrettdimon.com/2020/visitors-developers-or-machines/">Source originale du contenu</a></h2>
 <p>I keep my feet squarely planted in two worlds when it comes to development. One of those is all things front-end, and the other is Ruby (and Rails).</p>
 
@@ -76,7 +98,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/afb9fa99e3c43324fbe57b416562b8f9/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Why is CSS Frustrating?</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://css-tricks.com/why-is-css-frustrating/">Source originale du contenu</a></h2>
 <p>Here’s <a href="https://twitter.com/KevinJPowell/status/1231979370446802945">a great thread</a> by Kevin Powell that's making the rounds. He believes so many folks see CSS as a frustrating and annoying language:</p>
 
@@ -72,7 +94,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/b33f1c0179a41a26c9c75499fdc970d8/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Garder une trace de ses lectures</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://bribesdereel.net/traces-de-lectures">Source originale du contenu</a></h2>
 <p>Je lis trop peu de livres depuis quelques années, ça je le sais. J’en parle encore moins ici et n’en garde que très rarement une trace (surtout si ce sont des livres empruntés).</p>
 
@@ -117,7 +139,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/b4edfe74a826089b329de71ea9c9b8c1/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Mark Alizart : « Le climato-scepticisme doit se comprendre comme un fait politique, non comme une opinion » (Coup d’état climatique)</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://diacritik.com/2020/04/01/mark-alizart-le-climato-scepticisme-doit-se-comprendre-comme-un-fait-politique-non-comme-une-opinion-coup-detat-climatique/">Source originale du contenu</a></h2>
 <p><span class="dropcap">S’il</span> y a un seul essai à lire en ce moment, c’est bel et bien celui de Mark Alizart : le vif et puissant <em>Coup d’état climatique </em>qui vient de paraître aux PUF. C’est de loin la réflexion la plus remarquable et tonique qu’on a pu tenir sur les questions climatiques, et en particulier sur la question de l’usage politique du réchauffement climatique.<span id="more-54041"/> Pour Mark Alizart, ce réchauffement n’est pas une opinion mais un fait politique majeur qui est au cœur d’un carbo-fascisme qui consume nos sociétés. Inutile de dire que <em>Diacritik</em> est allé à la rencontre de l’essayiste pour s’entretenir avec lui de ce coup d’état climatique comparable à l’incendie du Reichstag et du coup d’état pandémique que laisse augurer le Coronavirus.</p>
 
@@ -101,7 +123,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/bdc65ed9d2657f45d13d97186072b415/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>How I think about solving problems</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://humanwhocodes.com/blog/2020/02/how-i-think-about-solving-problems/">Source originale du contenu</a></h2>
 <p>Early on in my career as a software developer I thought my primary contribution was writing code. After all, software engineers are paid to ship software and writing code is a key component of that. It took several years for me to realize that there are numerous other contributions that go into shipping software (if not, why are there managers, designers, product managers, salespeople, etc.?). I slowly came to see myself less as a coder and more as a problem solver. Sometimes the problem could be solved by writing code while other times the solution didn’t involve code at all.</p>
 
@@ -120,7 +142,77 @@ Another way to ask this question is, “is the problem urgent?”</p>
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/be1507ea944c6b8d0abd2a6c09efdc43/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Sur la pandémie actuelle, d’après le point de vue d’Ivan Illich</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://lundi.am/Sur-la-pandemie-actuelle-d-apres-le-point-de-vue-d-Ivan-Illich">Source originale du contenu</a></h2>
 <p>De fidèles lecteurs de Lundimatin nous ont envoyé cette traduction depuis l’anglais d’un article de David Cayley <a href="https://www.quodlibet.it/david-cayley-questions-about-the-current-pandemic-from-the-point" class="spip_out" rel="external">publié d’abord sur <i>Quodlibet</i> aux côtés des interventions de Giorgio Agamben</a>. David Cayley est écrivain et fait de la radio à Toronto (voir <a href="http://www.davidcayley.com/" class="spip_out" rel="external">son site internet et ses podcasts par ici</a>). Proche d’Ivan Illich, il a participé à la publication de certains de ses livres. Dans cet article passionnant, il part des thèses d’Illich pour analyser la pandémie de coronavirus, en particulier au Canada où il vit, l’évolution de la médecine occidentale et ses dérives ainsi que le devenir « statistique » des êtres humains.</p>
 
@@ -132,7 +154,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/be8e81e9337d81e7a31a5cc1f4d38435/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>The Cost of Javascript Frameworks</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/">Source originale du contenu</a></h2>
 <p>There is no faster (pun intended) way to slow down a site than to use a bunch of JavaScript.</p>
 
@@ -642,7 +664,77 @@ What surprised me, and the reason I ended up including this data, is that at the
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/bfce8545a2d7c8d51d3af19f61208134/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>On Pair Programming</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://martinfowler.com/articles/on-pair-programming.html">Source originale du contenu</a></h2>
 <blockquote>
 <p>Betty Snyder and I, from the beginning, were a pair. And I believe that
@@ -1399,7 +1421,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/c1c53ee2ef8544ad798629bf8a3b7249/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Thinking about Climate on a Dark, Dismal Morning</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://blogs.scientificamerican.com/hot-planet/thinking-about-climate-on-a-dark-dismal-morning/">Source originale du contenu</a></h2>
 <p>It’s six in the morning of the shortest day of the year. The sky is dark. When the sun finally rises it will disappear behind leaden gray clouds and tall gray buildings streaked with rust. I’m on a train watching the wastelands of postindustrial New Jersey speed by, pylons and garbage piles and the occasional cluster of muddy, leafless trees. I’m sipping cheap burned coffee from a paper cup and staring at a blinding white page. I’m trying to write about hope, but it’s so dark out there.</p>
 
@@ -70,7 +92,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/c8a8edb7bc65f4ed6b0edc18010434cc/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>How Contact Tracing Can Foil COVID-19 & Big Brother</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://ncase.me/contact-tracing/">Source originale du contenu</a></h2>
 <p>
     <img src="https://ncase.me/contact-tracing/panels/panel0001.png?v=3"/>
@@ -102,7 +124,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/cbef115a80c646c9eddc61ac077a6891/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Sonos in bricked speaker 'recycling' row</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://www.bbc.co.uk/news/technology-50948868">Source originale du contenu</a></h2>
 <p class="story-body__introduction">Sonos is facing a backlash for encouraging customers to get rid of their old speakers when there may be nothing wrong with them. </p>
 
@@ -82,7 +104,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

cache/2020/ceecad22409cbd161b85bf5f18b09413/index.html

@@ -23,7 +23,7 @@
 <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
 <meta name="theme-color" content="#f0f0ea">
 <!-- Documented, feel free to shoot an email. -->
-<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
+<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
 <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
 <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
@@ -31,6 +31,22 @@
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
 <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
+<script type="text/javascript">
+    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>
 
   <meta name="robots" content="noindex, nofollow">
   <meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@
 
 <article>
 <h1>Estimating NetNewsWire for iOS Demand</h1>
+<nav>
+  <p class="center">
+    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
+  </p>
+</nav>
+<hr>
 <h2><a href="https://inessential.com/2020/01/03/estimating_netnewswire_for_ios_demand">Source originale du contenu</a></h2>
 <p>As we get closer and closer to shipping NetNewsWire for iOS, I’m starting to realize that the iOS version could be quite a bit more popular than the Mac app.</p>
 
@@ -90,7 +112,77 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+<script type="text/javascript">
+    function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+            toggleTheme(selectedTheme)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.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) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>