davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>A blog post is a very long and complex search query to find fascinating people and make them route interesting stuff to your inbox (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.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>
    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://escapingflatland.substack.com/p/search-query">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>A blog post is a very long and complex search query to find fascinating people and make them route interesting stuff to your inbox</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://escapingflatland.substack.com/p/search-query" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>I was born in July 1989, which means I am of the last generation who will remember the time before the internet. The cables and data centers and hyperlinks grew up around me; they grew with me. I find it hard to disentangle the evolution of my psyche from that of the internet.</p>
<p>Explaining it to my daughter, who was born in 2017, a year when the world’s largest economy had begun tearing itself apart from the tension of this ever-evolving network, I tell her that the internet is like an alien intelligence. We don’t know exactly what it is; it has just landed, and only the first ship. We are trying to figure out how to talk to it. The first generation of explorers have noted that by making certain finger motions you can make the aliens show you images of cats and clothes, or tell you all the ways the world is falling apart.</p>
<p>For a long time, I thought this was all there was to it. I could tap the keyboard in a particular way and the screen would show me the weather, or tell me which translation of the Iliad to read and then make someone jump in a truck and drive it to our house. I preferred the Iliad to the screen.</p>
<p>But then, late 2021, after I had been making intricate finger movements again, I woke up in our guesthouse before sunrise and noticed that something had changed.</p>
<p>During the night, the internet had been set in motion. Tossing hither and thither in silence—as the fields lay frozen and waiting and the hedgehog slept in its pile of leaves—the internet had rearranged itself around me.</p>
<p>I had written an essay about Ivan Illich and systems thinking, a topic I had never found anyone else intrigued by, and which magazines thought below a rejection letter—and the internet had suddenly reshaped itself so that my keyboard hooked up to the screens of a bunch of people who wanted to talk about these topics, and a little later, their keyboards hooked up to mine.</p>
<p><span>I had written for 15 years, but never before had this happened. I had conjured a minor conference! And I hadn’t even known that you could </span><em>do</em><span> that.</span></p>
<p>This gave me a first glimpse of the social mechanics of the internet. Looking at the traffic data, and talking to readers, I could retrace how my words had traveled through the network, and I got a sense of why. I didn’t fully understand it; I don’t think anyone does. But like a scientist who’s got hold of an alien artifact, I proceeded by gleefully and semi-randomly pushing every button I could find to see what happened. I would think of a series of funny finger movements and then I’d say to myself, LOL I wonder what this combination does? And then I’d try.</p>
<p>The way the machine seemed to work was:  </p>
<ol><li><p><span>The more precise and niche the words I input, the better the internet would match me with people I could forge meaningful relationships with. This precision was hard for me, partly because my sense for how communication is supposed to work is shaped by reading mass media. Writing for a general public, you need to be broad and a bit bland. I didn’t want a general public. I wanted a specific set of people, the people who could help me along as a human being obsessed with certain intellectual problems. I didn’t know who these people </span><em>were</em><span>. I only knew that they existed. Hence my writing was a search query. It needed to be phrased in such a way that it found these people and, if necessary, filtered others.</span></p></li><li><p>The pleasant parts of the internet seemed to be curated by human beings, not algorithms. For my writing to find its way in this netherworld, I needed to have a rough sense of how information flowed down there. The pattern was this: words flowed from the periphery to the centers. This was a surprisingly rapid stream. Then the words cascaded from the center down in a broader but slower stream to the periphery again.</p></li></ol>
<p>I will spend the rest of this essay unpacking those two statements.</p>
<p><span>It will seem like I am mainly talking about how to use writing to forge meaningful relationships. I think doing that is beautiful and important. But lurking behind it is a larger idea. Namely, that </span><a href="https://escapingflatland.substack.com/p/first-we-shape-our-social-graph-then" rel>you can shape yourself by reshaping your relationships</a><span>. By changing who you are addressing, and the responses you garner, you steer your development. You </span><a href="https://tomcritchlow.com/2022/08/29/blogging-agency/" rel>become more agentic</a><span>.</span></p>
<p><span>Human brains are wired such that we get rewarded for attending to surprisal. If we turn our attention toward things that surprise us we get </span><em>excited</em><span>—and our model of the world changes. It grows more complex.</span></p>
<p>This is easy at first. My one-year-old was in complete rapture today on seeing a hen. But after a while, hens do not surprise us anymore, even if they are scratching dirt. We need a bigger hit to get the same high. To make hens interesting again, you could perhaps read about how they originally lived in the jungle, or you might get into the biology of egg production, or, more likely, you’ll pursue something more interesting than hens. Any which way, by pursuing your interest, you will move toward complexity. The simple things do not surprise you anymore. So you turn your attention to more complicated things. This is an amazing algorithm: do interesting things and magically arrive at a complex understanding of the world.</p>
<p><span>Sadly, it also leads you down a path that will likely end in existential loneliness and sobbing. What leads you there is the fact that the particular complexity that catches your interest is highly idiosyncratic. People get interested in all sorts of things. I have heard, from credible sources, that there even exist people who are interested in the names of Brazilian soccer players! Having idiosyncratic interests that grow in complexity means that </span><em>if you pursue</em><span> </span><em>them too far you will end up obsessed with things that no one else around you cares about</em><span>.</span></p>
<p><span>(There is a counteracting force in that humans tend to mimic the interests of those around them. But this is of little help for those of us for whom ”those around them” mostly means niche bloggers, contributors at Wikipedia, and </span><a href="https://en.wikipedia.org/wiki/Erasmus" rel>Erasmus of Rotterdam</a><span>.)</span></p>
<p>People feeling alone in their interests has always been true to a certain extent, but the internet has made it much worse. The excess of information allows you to travel down your path of interest with mad velocity. On the internet, Wonderland is recursive, with rabbit holes opening up to yet more rabbit holes; you never stop falling. And the further you fall, the less likely it is that anyone you’ve ever met is falling where you are. This will make you immensely sad. You will visit your parents, and when they ask you about your life you will have two choices. You can either be incomprehensible and see them grow concerned about things you are excited about, or you can talk about surface-level things and cry a little when you are alone at night.</p>
<p><span>The reason I’m spelling out this dynamic is twofold. First, you </span><em>can</em><span> get out of this mess if you want to. You do that by writing online (or publishing cool pieces of software, or videos, or whatever makes you tickle—as long as you work in public). Second, if you want to get out of the mess the key lies exactly in understanding that you are not the only person who has no one to talk to about the things you get obsessed by.</span></p>
<p><span>When writing in public, there is a common idea that you should make it </span><em>accessible</em><span>. This is a left over from mass media. Words addressed to a large and diverse set of people need to be simple and clear and free of jargon. It is valuable to write clearly of course, to a degree. Clear writing is clear thinking. But to make the content accessible? To cut digressions and obscure references to reduce the number of things people need to understand to make sense of your argument? Really?</span></p>
<p><span>That is against our purposes here. A blog post is </span><em>a search query</em><span>. You write to find your tribe; you write so they will know what kind of fascinating things they should route to your inbox. If you follow common wisdom, you will cut exactly the things that will help you find these people. It is like </span><a href="https://www.newyorker.com/magazine/2006/06/19/american-sublime" rel>the time</a><span> someone told the composer Morton Feldman he should write for “the man in the street”. Feldman went over and looked out the window, and who did he see? Jackson Pollock.</span></p>
<p>Write for Jackson Pollock.</p>
<p>The people you will be able to have deep conversations with have, like you, already been surprised by the simple, clear things. They need more to get high. And this “more” will be wildly idiosyncratic. It cannot be summarized in a list of writing rules.</p>
<p>So what do you do?</p>
<p>You ask yourself: What would have made me jump off my chair if I had read it six months ago (or a week ago, or however fast you write)? If you have figured out something that made you ecstatic, this is what you should write. And you do not dumb it down, because you were not stupid six months ago, you just knew less. You also write with as much useful detail and beauty as you can muster, because that is what you would have wanted.</p>
<p><span>Six months ago, I was thinking about how large language models will affect how we learn. The essay </span><a href="https://escapingflatland.substack.com/p/gpt-3" rel>Using GPT-3 to augment human learning</a><span> would have made me jump off my chair and run out to Johanna talking excitedly and incomprehensibly; that’s why I wrote it.</span></p>
<p>To make it interesting for myself, I made it longish and detailed. I like it when people don’t just talk in the abstract but show you with examples, preferably many examples, and preferably taken from the real world so they are messy. Some people find this excess annoying. I don’t. Rich data lets me develop a tacit understanding of the domain. So I wrote 3000 words about how to prompt GPT-3 in ways that make it more truthful, and I included a long dialogue where the AI diagnoses Johanna’s itching hands; and another one about how cities affect innovation; and a third about digitally mediated apprenticeships. I also made the essay a bit literary and flamboyant, which you are not “supposed” to do when writing about AI, at least not if you want the average LessWrong reader to upvote it. I’m not the average Less Wrong reader; I much prefer Thomas Bernhard’s rants to Eliezer Yudkowsky’s. Hence, I made it flamboyant.</p>
<p><span>I’m not saying it was a great essay; I’m saying </span><em>I</em><span> would have loved it. The essay would have answered most of the questions I had, and it would have given me a new more complex understanding of language models that I could have used to get excited by even more obscure things. And because the internet is big, there were a few thousand people who felt the same way—and I felt really deeply for these people.</span></p>
<p>It is crazy-beautiful to have a stranger arrive in your inbox, and they are excited by exactly the same things as you! You start dropping the most obscure references, and they’re like, yeah, read that, love it. The first handful of times it happened, Johanna asked me what was wrong. I was crying in the kitchen.</p>
<p>Those were tears of homecoming.</p>
<p>And—as if that wasn’t good enough—now these people are routing me interesting things about language models, cow breeding, Quintilian, 19th-century dictionaries, graph-based operating systems . . . and on and on . . . I get more and better input than I could ever have found on my own, a lot of it from sources outside the clear web, tinkerers writing to me about tools they are building, or new observations they have made.</p>
<p>In other words, I have, to a degree, automated my obsessions now. I have summoned a milieu that pulls me where I want to go!</p>
<p>A search query doesn’t have to be a 5000-word effort post to work (though the internet does reward that amply). Anything that would have been useful to you sometime in the past will do. Alexey Guzey makes lists, half of which are made up of quotes, and they are incredibly useful and have been instrumental in reshaping his network so that he could start New Science. Most good Twitter accounts can be viewed in the same way.</p>
<p>If you follow the advice above, you will write essays that almost no one likes.</p>
<p><span>Luckily, </span><em>almost no one</em><span> multiplied by the entire population of the internet is plenty if you can only find them.</span></p>
<p>How do you do that?</p>
<p>Well, you can probably spot a few of them already, even if you are a fairly naive internet user. The people you can spot will be those that have large followings. This might depress you. The famous people will seem out of reach, and the rest of the internet will seem to be pure madness.</p>
<p>When starting out, my model of how it would work was this: I wouldn’t find any readers. And if I did, they would be plebeians like myself, and then, maybe? hopefully? as I found more of them, I would level up? so that I could connect to people with increasingly large followings? like climbing a corporate hierarchy? This is not how it works.</p>
<p>The social structure of the internet is shaped like a river.</p>
<p>People with big followings, say someone like Sam Harris, is the mouth of the Mississippi emptying into the Mexican Gulf. Sam has millions of tributaries. There are perhaps a few hundred people Sam pays close attention to, and these in turn have a few hundred they listen to—tributaries flowing into headwaters flowing into rivers. The way messages spread on the internet is by flowing up this order of streams, from people with smaller networks to those with larger, and then it spreads back down through the larger networks. Going over land, from one tributary to another, is harder than going up the stream order and then down again.</p>
<p>This dynamic is easier to spot on Twitter, where you get notified every time someone likes or retweets what you have written (compared to a blog where the traffic data is more murky). When I tried out the title of this piece as a tweet—a primitive way to A/B-test—I could map that dynamic.</p>
<p><span>It was not a viral tweet. I am a minor tributary in the Twitter river system (my follower count was ~100 at the time). But a few of my followers were slightly larger. They had found me, I assume, because I made replies to their tweets that they sort of liked. Two of these, </span><a href="https://twitter.com/houshuang" rel>Stian Håklev</a><span> and </span><a href="https://twitter.com/tomcritchlow" rel>Tom Critchlow</a><span>, resonated with the tweet, so they retweeted it. A few others gave it a heart, which is also a way to route tweets (though it is a weaker form of routing than a retweet).</span></p>
<p><span>Then a few accounts that were an order of magnitude larger still retweeted it, because they followed Stian and Tom and now saw it. And from there it rushed up the stream order. It only took an hour or two for the tweet to reach the largest accounts it would reach (Tiago Forte with 84k followers, who retweeted it, and Balaji Srinavasan with 681K, who routed it on through a like). But </span><em>the smaller accounts took much longer</em><span>. Information rushes up and then trickles down. The larger accounts are not larger without a reason, but, at least in part, because they spend more time routing information in the network!</span></p>
<p><span>(This, by the way, is how you sent letters before the post service was established. In the 1600s, if you were an intellectual who wanted to send a letter to another intellectual, you’d send it to someone who could forward it to Marin Mersenne—because he knew everyone who knew anyone and would surely know someone who could find the person you wanted to reach. This I learned from a tweet by </span><a href="https://twitter.com/visakanv" rel>Visa</a><span>, who is the modern day version of Mersenne.)</span></p>
<p><span>The trick, then, is this. You take the person you think is closest to the person (or type of person) you want to talk to and send what you write to this person. A subreddit is a good place to start. I usually do this by collecting interesting people on Twitter through good reply game. Then I can simply post my essays there and know they will have a chance of seeing it. Occasionally—and this makes more sense in the start—I send essays to people directly, in their direct messages or to their email. I sent </span><a href="https://escapingflatland.substack.com/p/apprenticeship-online" rel>Apprenticeship Online</a><span> to José Rincón, mostly as a way to give context to a few comments I had on one of his essays. He didn’t answer, but he did tweet out the essay, which brought in a handful of interesting people in my orbit. It turns out that if you’ve written something that </span><em>you</em><span> find interesting, it is not unlikely that people you like will find it interesting too, and pass it on if you give them the chance.</span></p>
<p>As you start routing information and putting out blog posts, you will begin to accumulate connections. Useful information will start to stream toward you, turning you into a small hub yourself. This will allow you to collect and curate information and route it back out, which will allow even more people to connect to you, in a flywheel that lets you do increasingly useful and good work. I especially enjoy it when intelligent people attack me; I then invite them to comment on upcoming drafts.</p>
<p><span>You can also post to subreddits and forums, like </span><a href="https://www.lesswrong.com/" rel>LessWrong </a><span>or </span><a href="https://www.reddit.com/r/slatestarcodex/" rel>the SlateStarCodex subreddit</a><span>, that act like intellectual cafés on the internet. Pasting your posts there, it is easy to find community when you are starting out; you don't have to scream into the void. And, more importantly, a lot of people pass through these cafés, and if they are </span><em>your kind</em><span> they can help spread your work in the netherworld of personal connections and open weird doors on the internet for you. I relied heavily on forums in the beginning, gaining my first hundred or so subscribers this way, but they are growing less important now that I have collected a set of connections of my own. I can get a more precise spread of my essays by just emailing them to my subscribers and putting out a few tweets. But I feel deep gratitude, especially to LessWrong, which provides me with an editor who helps me with grammar and fact-checking.</span></p>
<p><span>By the way, the reason you will eventually grow out of forums is that </span><em>they are search queries written by other people</em><span>. LessWrong was summoned into existence by</span><a href="https://en.wikipedia.org/wiki/Eliezer_Yudkowsky" rel> Eliezer Yudkowsky</a><span> and </span><a href="https://en.wikipedia.org/wiki/Robin_Hanson" rel>Robin Hanson</a><span> writing a sequence of exceptionally powerful search queries (on Overcoming bias), blog posts so strong that the networks they created survived the exodus of the original nodes.</span></p>
<p>This is what online writing is at its limit—the summoning of a new culture.</p>
<p><span>If we squint a little, we could even say that this is how the internet itself came into existence. In 1963,</span><a href="https://en.wikipedia.org/wiki/J._C._R._Licklider" rel> J. C. R. Licklider</a><span> wrote</span><a href="http://worrydream.com/refs/Licklider-IntergalacticNetwork.pdf" rel> a memo</a><span> about an “intergalactic computer network”, and that search query was so powerful it summoned the aliens.</span></p>
<p>We’re all living inside his search query now.</p>
<p><span>Sincerly,</span><br><span>Henrik</span></p>
<p>PS. If you’ve made it all the way down here and don’t feel that you’ve just wasted ten minutes, consider scrolling back up to like the essay. It helps others find it. And it makes me happy. </p>
<p><span>Also, this piece is a part of a sequence. Here you can read the </span><a href="https://escapingflatland.substack.com/p/first-we-shape-our-social-graph-then" rel>first</a><span> and </span><a href="https://escapingflatland.substack.com/p/training-data" rel>second</a><span> part. I’m going to pause the sequence for a bit now and focus on other things. But if you have anything you’d want me to expand on, or if the sequence provoked any ideas, I would love to discuss. </span></p>
<p class="button-wrapper" data-attrs='{"url":"https://escapingflatland.substack.com/p/search-query/comments","text":"Leave a comment","action":null,"class":null}'><a class="button primary" href="https://escapingflatland.substack.com/p/search-query/comments" rel><span>Leave a comment</span></a></p>
<p>And finally, my favorite part:</p>
<p><span>On this piece, I had the honor to get feedback from </span><a href="https://twitter.com/tomcritchlow" rel>Tom Critchlow</a><span> and </span><a href="https://twitter.com/genmon" rel>Matt Webb</a><span>. Matt has been keeping a blog since february 2000—which is, if I remember correctly, the same month I first accessed the internet. He made me dare to be more thankful. Also, as ever, the team at LessWrong helped comb my words straight. And that I am thankful for.</span></p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    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 && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    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>