davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
							<!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>trapped in the technologist factory (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="#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_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://ideolalia.com/essays/trapped-in-the-technologist-factory.html">

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

<article>
  <header>
    <h1>trapped in the technologist factory</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.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://ideolalia.com/essays/trapped-in-the-technologist-factory.html" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>The first time I was paid to use Clojure was only two years after the language was released.  Needless to say, it was at an <a href="https://web.archive.org/web/20101127141126/http://runa.com/">early-stage startup</a>.</p>

<p>The idea behind Runa was that we’d do dynamic pricing for smaller online retailers, offering targeted discounts based on individual shopper behavior.  In practice, we offered a fixed discount to anyone who abandoned their shopping cart.  By treating a small percentage of customers as a control group, we could calculate our effect on the retailer’s sales, and take a cut.  Our biggest problem was convincing retailers to let us control their prices, closely followed by convincing them the math behind our calculated “lift” was sound.</p>

<p>We told ourselves a big contract was always just about to close, permanently increasing our traffic by an order of magnitude.  We used <a href="https://hbase.apache.org/">HBase</a> as our primary data store, because it was designed to scale, just like us.<sup id="fnref:hbase" role="doc-noteref"><a href="#fn:hbase" class="footnote">1</a></sup>  In the future, we would power a loosely federated Amazon, composed of independent online retailers, knit together by our software.  If we built it, they would come.</p>

<p>But they didn’t.  The only thing that kept us afloat was a bespoke product we had built for eBay, because our CEO knew an executive there.  Later, after I left, that same executive moved to Staples and convinced them to acquire the startup outright.  Nothing we had built was useful to Staples, it was just evidence of our ability to “innovate”.  The resulting <a href="https://web.archive.org/web/20180224081622/http://www.staples-sparx.com/">“skunk works” team</a> has since been disbanded.</p>

<p>My next job was at <a href="https://web.archive.org/web/20121001101254/http://www.factual.com/">Factual</a>, a more established startup that had built their product using Java and <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Rhino">embedded Javascript</a>, and were beginning to adopt Clojure.  Their product was an index of all the places in the world, generated by applying hundreds of different heuristics to web crawl data.  Each entry had a canonical id and various properties like name, address, and hours.  More interestingly, it also had the equivalent ids from different platforms like Yelp and Foursquare, and we offered an API that could resolve an an incomplete (or even partially incorrect) set of properties to the corresponding entity in our index.</p>

<p>Our product could stitch together thousands of disparate datasets, so long as they had some geographic component; I liked to describe it as a “foreign key for the world”.  Unfortunately, there’s not much money in ontologies.  By the time I had joined, the dataset had already been used as the basis for <a href="https://www.facebook.com/places/">Facebook Places</a> and as part of Apple’s then-new map offering.  These were large contracts, but there are only so many big tech firms in the world, and even fewer with a geographic component to their data.  No matter how much we tried to make up the difference with our smaller customers, we didn’t have a path to a billion dollar valuation.</p>

<p>We began to offer services powered by our data.  Internally, this was presented as less a pivot than a demonstration of the intrinsic value of our data; once people saw what <em>we</em> could do with our data, surely they’d have some ideas of their own.  Our first customers were adtech firms, hoping to do better geographic targeting for mobile ads.  We hired salespeople and marketing executives with a background in digital advertising, and when sales started to take off we hired more.  Even as I built <a href="https://github.com/factual/s3-journal">services</a> to ingest billions of daily ad impressions and bespoke <a href="https://github.com/factual/riffle">almost-databases</a> to power on-premise services for our adtech partners, I told myself it was all incidental; our business was data, not ads.</p>

<p>I was wrong, of course.  The advertising side of the company was where all the growth was happening, and our product direction was whatever helped them close deals.  But I wasn’t the only person who was slow to acknowledge this fact.  In my exit interview with the CEO, just after I had given notice, I told him that he should be more direct with everyone that Factual’s focus had permanently shifted.  He told me what I had only just stopped telling myself: ads were a temporary diversion, and we’d return to the underlying data before too long.  In the years that followed, however, Factual became increasingly focused on location-based advertising, until it finally <a href="https://techcrunch.com/2020/04/06/foursquare-merges-with-factual/">merged with Foursquare</a>.</p>

<hr />

<p>When a startup takes venture funding, its singular goal becomes growth; it will either reach a billion dollar valuation or die trying.  With that growth comes ever-greater technical challenges.  Some of these are obvious: more users will not only require more machines, but a more complex infrastructure.<sup id="fnref:data" role="doc-noteref"><a href="#fn:data" class="footnote">2</a></sup>  Others are less obvious: as the userbase grows, each individual becomes increasingly abstracted in the business logic of our software.  To deal with the first challenge, we must have technical acumen.  To deal with the second, we must have a deep understanding of our business domain.</p>

<p>This means that as long as a startup continues to grow, its engineers can (and must) continue to improve their knowledge and acumen.  But most startups fail.  Some of those failures are because the company <a href="https://en.wikipedia.org/wiki/Friendster">couldn’t keep up with their own growth</a>, but these are the exception.  The common, boring reason for failure is that the startup barely grew at all.</p>

<p>Confronted with stagnation, an engineering organization can have two reactions: they can try to help reinvent the company, or they can continue to prepare for the growth that must, inevitably, come.  At Runa, we chose the latter.</p>

<p>At first, the engineering leadership adopted promising, poorly-understood technologies (Clojure! HBase!) which would give them the necessary leverage down the line.  But once they launched, and the stagnation set in, that preparation became a need for constant readiness.  Any early technical mistakes, however regrettable, were baked in.  Trying to revisit them, to build something better, would just leave us flat-footed when the growth finally came.</p>

<p>I joined Runa only a few months before the engineering organization entered its defensive crouch.  I was too inexperienced and too distracted<sup id="fnref:depression" role="doc-noteref"><a href="#fn:depression" class="footnote">3</a></sup> to question it. Every day we played Jenga, trying to jostle the existing codebase as little as possible with each new commit.  Later, as I realized I wasn’t proud of any of the work I had done so far, I began to energetically push for rebuilding key pieces of the system.</p>

<p>After a few months, I was told to either drop it or take three weeks severance.  I took the severance.</p>

<p>Of course, even if I had gotten my way, nothing would have changed.  All of us were carefully ignoring the actual problem,  which is that our business model didn’t really work.  Our product and pricing model both required unjustifiable levels of trust from our prospective customers, but none of us saw that as our problem to solve.  We were downstream of the business model; our job was simply to wait and prepare for its eventual success.</p>

<p>I joined Factual because I found the problem space fascinating, but most of it had been solved by the time I joined.  About six months later, the leadership began to acknowledge that our business model, while successful, wasn’t going to get us to a billion dollar valuation.  So began my descent into adtech.</p>

<p>I wanted to prove that I had learned my lesson; if the current business model wasn’t working, I’d help them build a new one.  I built services to consume the raw data, and on-premise servers to provide the processed result to our customers.  I attended sales meetings, wrote design docs, and painstakingly analyzed packet dumps to prove to partners that latency spikes were occurring elsewhere in their system.</p>

<p>In the end, I learned that I didn’t like the advertising industry very much.  When a brand wanted to run a digital ad campaign, they went to an agency, which is be responsible for spending their budget to the greatest effect.  The agency then went to a demand-side platform (DSP), which was be responsible for making real-time bids on individual ad impressions on an exchange.  To inform those decisions, the DSP went to a company like Factual, which could distill a phone’s current and past locations into binary features relevant to the campaign.</p>

<p>Crucially, when you’re not selling something online, it’s almost impossible to measure the efficacy of a digital ad campaign.<sup id="fnref:attribution" role="doc-noteref"><a href="#fn:attribution" class="footnote">4</a></sup>  This means that the agency could say almost anything, so long as it closed the deal.  The DSP, in turn, sold whatever they thought would help agencies close their deals.  And at the end of this chain was Factual, selling whatever we thought would entice the salespeople enticing the salespeople enticing the brands.</p>

<p>I thought I had become product-focused, ready to solve any problem that would help the company to succeed.  In truth, I was only really paying attention to the technical problems.  Once they were largely solved, it became harder to ignore my ambivalence for what the product actually did.  Eventually, I left.</p>

<hr />

<p>I learned two lessons from this time in my life.  The first was personal: I am, at heart, a technologist.  I like to generalize, to abstract.  While I believe it’s crucial to understand the context around your software, I’m happiest when that context is other people’s software.</p>

<p>The second lesson was broader, and less obvious:<sup id="fnref:protagonist" role="doc-noteref"><a href="#fn:protagonist" class="footnote">5</a></sup> our industry is designed to foster people like me.</p>

<p>This was surprising because it seems so clearly against our own interest.  In almost every case, companies fail because they build the wrong thing.  Unless your customers are themselves engineers, I’m the wrong person to help with that.  You want someone comfortable at the periphery of your system, who wants to learn about the competitive landscape, who wants to talk to customers.  You want a product engineer.</p>

<p>But consider our standard interview questions: data structures, recursion, and computational complexity.  It always feels a little strange when I see someone arguing that these don’t reflect “real” day-to-day software tasks; I write recursive functions all the time.  But that’s a consequence of the abstraction; what might be a simple nested lookup on any specific datatype becomes recursion when you try to generalize over a set of possible datatypes.</p>

<p>Likewise, I’ve seen it argued that the difference between, say, <code class="language-plaintext highlighter-rouge">O(log N)</code> and <code class="language-plaintext highlighter-rouge">O(N)</code> isn’t important, because in practice <code class="language-plaintext highlighter-rouge">N</code> tends to be small enough.  That may be true for some domains, maybe even most of them, but if you’re building a general-purpose tool you have to focus on the pathological cases.</p>

<p>Of course, others will argue this first-year CS material is the essence of what we do.  This was certainly the attitude when I was at Google;<sup id="fnref:Google" role="doc-noteref"><a href="#fn:Google" class="footnote">6</a></sup> since their existing employees were <a href="http://www.gwtproject.org">going to any length</a> to avoid writing Javascript, they decided that anyone with frontend experience would be held to a lower technical standard.  These hires were widely viewed as second-class; people who were only allowed in because they were willing to do the work no one else wanted.</p>

<p>But if we want to hire product engineers, what questions should we ask instead?  It’s impractical, given the sprawling scope of our industry, to only consider candidates with prior experience in our exact product space.  Likewise, it’s unrealistic to expect that we’d have expertise in a candidate’s prior product spaces.  We lack a common vocabulary, a common understanding of the nuances that separate good design choices from middling ones.</p>

<p>And so we continue to <a href="https://en.wikipedia.org/wiki/Streetlight_effect">search for our keys under the streetlamp</a>; they could be anywhere, but this is where the light is.  If we’re lucky, the technologists we hire will also have all the other skills necessary to make humane, useful software.</p>

<p>This means that even if you’re not a technologist, you have to learn how to pretend.<sup id="fnref:alternatives" role="doc-noteref"><a href="#fn:alternatives" class="footnote">7</a></sup>  And this brings us back to the beginning, when it was obvious that my first Clojure job, only two years after the language was released, would have been at an early-stage startup.</p>

<p>Most new technologies, if they get adopted at all, follow a familiar path: first come the hobbyists, and then the companies which employ those hobbyists.  This second step is easiest when the company has little to no process around adopting a new technology; in other words, an early-stage startup.  The <a href="http://www.paulgraham.com/avg.html">standard narrative</a> around this phenomenon is that certain technologies are simply more powerful, but only startups are daring enough to hire from the niche pool of talent that knows how to wield them.</p>

<p>But new technologies<sup id="fnref:novelty" role="doc-noteref"><a href="#fn:novelty" class="footnote">8</a></sup> don’t have power; for that they’d need a community, documentation, and a thriving ecosystem of ancillary technology.  What they have is <em>potential</em>, which resonates with the potential within the startup and the early adopter; perhaps they can all, over time, grow together.</p>

<p><a href="https://mcfunley.com/choose-boring-technology">As many have pointed out</a>, this is not a rational strategy for building a company.  It is, however, a phenomenal way to train new technologists.  <a href="https://en.wiktionary.org/wiki/Chesterton%27s_fence">Chesterton</a> notwithstanding, the fastest way to learn why a fence exists is to tear it down and see what happens.</p>

<p>Seen from this perspective, it doesn’t seem so irrational; most startups fail before reaching a scale that has any existential technical risks.  The only guaranteed benefit they can offer their engineers is the freedom to invent their own challenges, and learn through iterative failure.<sup id="fnref:ladder" role="doc-noteref"><a href="#fn:ladder" class="footnote">9</a></sup>  If the startup fails, there’s no harm done.  If the startup gets traction, the engineers can apply their newfound wisdom.</p>

<p>This means startups don’t adopt new technologies despite their immaturity, they adopt them <em>because</em> of that immaturity.  This drives a constant churn of novelty and obsolescence, which amplifies the importance of a technologist’s skillset, which drives startups to adopt new technologies.</p>

<p>This flywheel has been spinning for a long time, and won’t stop simply because I’ve pointed out that we’re conflating novelty with technological advancement.  Hopefully we can slow it down, though, because I believe it’s causing real harm.</p>

<p>By introducing abstraction into every problem we solve, we distance ourselves from how our work is ultimately used.  We tell ourselves we’re in the business of building sharp knives; if we made them safer, they’d be useless for everything except spreading butter.  We float above the the effects of what we’ve created, treating them as inexorable consequences of <a href="https://patrickcollison.com/progress">progress</a>.</p>

<p>It’s true we can’t encode our values into general-purpose software,<sup id="fnref:license" role="doc-noteref"><a href="#fn:license" class="footnote">10</a></sup> but we’re not simply atomized technologists, and our worlds are not bounded by the interfaces we expose.  We share a collective responsibility for what we create, and are capable of collectively acting on that responsibility.</p>

<p>But what does a belief in collective responsibility mean, in practical terms?  What actions does it entail?  Honestly, I don’t know.  All I know is that we can’t stay under the streetlamp forever.  At some point, we’ll have to see what’s out there in the dark.</p>

<p><hr />
<div class="footnotes" role="doc-endnotes">
  <ol>
    <li id="fn:hbase" role="doc-endnote">
      <p>In a twist that will surprise no one, the way we used it could never scale.  To support ordered scans over keys, HBase partitions on contiguous ranges in the keyspace.  Since we wanted to scan over the events for a given day, all of our keys began with a timestamp.  This meant every write for a given time period was focused on a single shard, which would drive HBase to constantly repartition its shards in a futile attempt to equally distribute the load.  Our HBase cluster was always on the cusp of falling over. <a href="#fnref:hbase" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
    </li>
    <li id="fn:data" role="doc-endnote">
      <p>Even in the exceedingly rare case where your core services can horizontally scale, processing the increasing volumes of data they generate will introduce complexity elsewhere in your system. <a href="#fnref:data" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
    </li>
    <li id="fn:depression" role="doc-endnote">
      <p>My first year at Runa coincided with a bout of mostly-unrelated depression, and the one-foot-in-front-of-the-other approach to software development perfectly mirrored how I was approaching pretty much everything else in my life. <a href="#fnref:depression" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
    </li>
    <li id="fn:attribution" role="doc-endnote">
      <p>The only possible exception to this is Google.  If you have an Android phone, Google can attribute your visit to a Walmart store to an ad for Walmart they showed you some number of days earlier.  If you use Google Pay, they can even attribute your purchases.  They may not be able to prove a causal link, but it’s still lightyears beyond what anyone else has to offer. <a href="#fnref:attribution" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
    </li>
    <li id="fn:protagonist" role="doc-endnote">
      <p>It’s difficult to reason about structural forces in tech, and especially in startups, because of the pervading myth that we are all protagonists within the company’s narrative arc.  If something failed, it’s only because we didn’t work hard enough, or didn’t have a better idea.  Even now, years later, thinking about this period in my career brings a twinge of guilt; couldn’t I have changed how the story ended? <a href="#fnref:protagonist" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
    </li>
    <li id="fn:Google" role="doc-endnote">
      <p>This was back in 2010, but I’d be surprised if anything has substantially changed. <a href="#fnref:Google" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
    </li>
    <li id="fn:alternatives" role="doc-endnote">
      <p>I know of a few ways to skip this gauntlet, but none of them have universal appeal.  If someone at an early-stage startup vouches for you, they’ll often skip straight to making sure you’re a “culture fit”.  This only works, however, for a candidate with a strong network, who wants to work for a small startup, and who fits the culture in question.  Likewise, you can simply found your own company, but being a founder places you first and foremost at the interface between business and investor; the interface between product and user is always further down the list. <a href="#fnref:alternatives" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
    </li>
    <li id="fn:novelty" role="doc-endnote">
      <p>And the niche technologies adopted by startups are, almost without exception, new.  Graham’s Lisp evangelism didn’t lead to widespread adoption of Common Lisp, it led to the adoption of Clojure, a brand new Lisp which was still full of potential. <a href="#fnref:novelty" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
    </li>
    <li id="fn:ladder" role="doc-endnote">
      <p>Given our current situation, telling junior engineers to only use boring technologies can actually be portrayed as the older generations of engineers pulling up the ladder.  They got to learn through failure, why can’t the new generation do the same? <a href="#fnref:ladder" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
    </li>
    <li id="fn:license" role="doc-endnote">
      <p>I’m begging everyone who thinks a software license can delineate when something is or isn’t being used for a bad purpose to read a single book on ethics. <a href="#fnref:license" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
    </li>
  </ol>
</div></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.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.svg#icon-rss2"></use>
      </svg> RSS</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.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.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.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.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>
    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>