A place to cache linked articles (think custom and personal wayback machine)
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

index.html 27KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>The Privileged Have Entered Their Escape Pods (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <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>
  30. <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. <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>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://onezero.medium.com/the-privileged-have-entered-their-escape-pods-4706b4893af7">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>The Privileged Have Entered Their Escape Pods</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://onezero.medium.com/the-privileged-have-entered-their-escape-pods-4706b4893af7" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p>Technology gave us the dream of a cocooned future. Now we’re living it.</p>
  69. <section class="eo ep eq er es"><div class="n p"><div class="u v w x y fu ab ac"><p id="a89b" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df jr"><span class="an js jt ju jv jw jx jy jz ka dg">M</span>any of us don’t like who we have become in this pandemic but feel littl<span id="rmm">e</span> freedom to choose otherwise. Officially, we may be wearing our masks to protect others, but it sure does feel appropriate to hide our faces when we’re engaging in so many self-interested, survivalist activities in the light of day — leveraging whatever privilege we may enjoy to stock and equip our homes so they can serve as makeshift bunkers, workplaces, private schools, and hermetically sealed entertainment centers.</p>
  70. <p id="640d" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">Sure, because I’m still being paid as a professor at CUNY (the City University of New York), I donated my government relief check to the local food pantry and am sending a significant portion of my income to friends who can no longer meet their basic expenses. But I also went and spent $500 on a big rubber pool for my daughter and our neighbors’ kids to use as the basis for a makeshift private summer camp. And I’ve seen similar inflatable blue bubbles all over town.</p>
  71. <p id="08f6" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">“Don’t tell anyone,” one of my neighbors told me when he came over to borrow some chlorine tablets, “but we’re thinking to ride this whole thing out in Zurich, where the numbers are better.” His wife still has her European passport, and they both have jobs that can be done entirely remotely. They’d be joining scores of people I know — not millionaires, but writers and marketers and consultants and web developers — who are resettling in Canada or Europe on the logic that their kids shouldn’t be sacrificed to their progressive parents’ sense of shame about escaping.</p>
  72. <p id="92e5" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">When I challenge him on the ethics of bailing, he snaps back, “At least the elementary school will have two less bodies to space at six-foot intervals. I’m doing you a favor.” He can’t resist showing me the photo on his phone from the rental site. It was a gorgeous, solar-powered cabin on a remote hillside with the headline “Luxury Eco-Lodge.” He smiled. “I always wanted the kids to get a Waldorf education, and now they even have an online option.”</p><blockquote class="kb"><p id="ef6a" class="kc kd fx fy b ke kf kg kh ki kj ja fo">“Don’t tell anyone, but we’re thinking to ride this whole thing out in Zurich, where the numbers are better.”</p></blockquote><p id="6395" class="im in fx io b gq kk ip iq gt kl ir is it km gy iu iv kn hb iw ix ko he iy ja eo df">It sounds idyllic. So much so that I can’t help but wonder if the threat of infection is less the reason for his newfound embrace of virtual insulation than it is the excuse.</p>
  73. <p id="0682" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">It’s certainly the message I got a couple of years ago when a few tech billionaires asked me to <a class="av fp fq fr fs ft" rel="noopener" href="/survival-of-the-richest-9ef6cddd0cc1">water test their doomsday bunker strategies</a>. Ostensibly, they were worried about “the Event” — the war, climate catastrophe, or, yes, global pandemic that ends life as we know it and forces them to retreat to their high-tech fortresses in Alaska or New Zealand. We spent most of the session discussing potential flaws in their scenario planning, such as whether the human security forces they were intending to hire could be adequately controlled once cash no longer had value. If only they could work out these last few kinks, they could safely escape from the rest of us.</p>
  74. <p id="063e" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">At the time, I saw all this paranoid prepping as misplaced guilt over what these fellows knew they were doing to the world. It seemed to me that they were in a trap, building heinously extractive companies in order to earn enough money to insulate themselves from the reality they were creating by earning money in that way. Instead of figuring out how to get away from the rest of us, I told them, they might want to focus on making the world a place from which they wouldn’t have to retreat.</p>
  75. <p id="a7f5" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">But I’m just an author and media theorist, after all, not a scholar of catastrophe logistics. I like to think I’ve had some success identifying signals from the future, but looking back on the whole episode, I find it hard to believe this group of successful technology investors and entrepreneurs were really paying me for legitimate survival strategies so much as to serve as a kind of dungeon master for their fantasy role-playing session. The conversation was almost a form of theater dedicated to developing their collective, mutually reinforcing fantasy. These solar-powered hilltop resorts, chains of defensible floating islands, and robotically tilled eco-farms were less last resorts than escape fantasies for billionaires who aren’t quite rich enough to build space programs like Jeff Bezos and Elon Musk. No, they weren’t scared for the Event; on some level, they were hoping for it.</p>
  76. <p id="9a88" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">I don’t think these prepper billionaires are aspiring to live in the world depicted in the <em class="jb">Walking Dead</em> because they’re horrible people. Or at least not just because they’re horrible people. They’re simply succumbing to one of the dominant ethos of the digital age, which is to design one’s personal reality so meticulously that existential threats are simply removed from the equation. The leap from a Fitbit tracking your heart rate to an annual full-body cancer scan or from a doorbell surveillance camera to a network of autonomous robot sentries is really just a matter of money. No matter the level of existential security, the Netflix shows we stream are the same.</p></div></div><div class="et"><div class="n p"><div class="kp kq kr ks kt ku x kv y kw ab ac"><figure class="ky kz la lb lc et ld le paragraph-image"><div class="lf lg dg lh ac"><div class="eg eh kx"><div class="fa an dg du"><div class="li fc an"><div class="cc ev ej ew ek bx ac ex ey ez"><img alt="Image for post" class="ej ew ek bx ac fd fe ff" src="https://miro.medium.com/max/60/1*YDP_F4gJ5lxxKt7TPO8ftA.jpeg?q=20" width="2400" height="1520"/></div><img alt="Image for post" class="cc ev ej ew ek bx ac c" width="2400" height="1520"/><noscript><img alt="Image for post" class="ej ew ek bx ac" src="https://miro.medium.com/max/4800/1*YDP_F4gJ5lxxKt7TPO8ftA.jpeg" width="2400" height="1520" srcSet="https://miro.medium.com/max/552/1*YDP_F4gJ5lxxKt7TPO8ftA.jpeg 276w, https://miro.medium.com/max/1104/1*YDP_F4gJ5lxxKt7TPO8ftA.jpeg 552w, https://miro.medium.com/max/1280/1*YDP_F4gJ5lxxKt7TPO8ftA.jpeg 640w, https://miro.medium.com/max/1456/1*YDP_F4gJ5lxxKt7TPO8ftA.jpeg 728w, https://miro.medium.com/max/1632/1*YDP_F4gJ5lxxKt7TPO8ftA.jpeg 816w, https://miro.medium.com/max/1808/1*YDP_F4gJ5lxxKt7TPO8ftA.jpeg 904w, https://miro.medium.com/max/1984/1*YDP_F4gJ5lxxKt7TPO8ftA.jpeg 992w, https://miro.medium.com/max/2000/1*YDP_F4gJ5lxxKt7TPO8ftA.jpeg 1000w" sizes="1000px"/></noscript></div></div></div></div></figure></div></div></div><div class="n p"><div class="u v w x y fu ab ac"><p id="cffc" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">Now, pandemics don’t necessarily bring out our best instincts either. No matter how many mutual aid networks, school committees, food pantries, race protests, or fundraising efforts in which we participate, I feel as if many of those privileged enough to do so are still making a less public, internal calculation: How much are we allowed to use our wealth and our technologies to insulate ourselves and our families from the rest of the world? And, like a devil on our shoulder, our technology is telling us to go it alone. After all, it’s an iPad, not an usPad.</p>
  77. <p id="9543" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">The more advanced the tech, the more cocooned insularity it affords. “I finally caved and got the Oculus,” one of my best friends messaged me on Signal the other night. “Considering how little is available to do out in the real world, this is gonna be a game-changer.” Indeed, his hermetically sealed, Covid-19-inspired techno-paradise was now complete. Between VR, Amazon, FreshDirect, Netflix, and a sustainable income doing crypto trading, he was going to ride out the pandemic in style. Yet while VRporn.com is certainly a safer sexual strategy in the age of Covid-19 than meeting up with partners through Tinder, every choice to isolate and insulate has its correspondingly negative impact on others.</p>
  78. <p id="df96" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">The pool for my daughter wouldn’t have gotten here were it not for legions of Amazon workers behind the scenes, <a href="https://www.theverge.com/2020/6/3/21279740/amazon-sued-nyc-warehouse-workers-covid-19-coronavirus-safety-measures" class="av fp fq fr fs ft" rel="noopener nofollow">getting infected in warehouses</a> or <a href="https://www.businessinsider.com/why-amazon-delivery-workers-feel-exposed-and-vulnerable-to-coronavirus-2020-3" class="av fp fq fr fs ft" rel="noopener nofollow">risking their health driving delivery trucks</a> all summer. As with FreshDirect or Instacart, the externalized harm to people and places is kept out of sight. These apps are designed to be addictively fast and self-contained — push-button access to stuff that can be left at the front door without any human contact. The delivery people don’t even ring the bell; a photo of the package on the stoop automagically arrives in the inbox. Like with Thomas Jefferson’s ingenious dumbwaiter, there are no signs of the human labor that brought it.</p>
  79. <p id="09cf" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">Many of us once swore off Amazon after learning of the way it <a href="https://www.theguardian.com/business/2019/dec/02/new-study-deems-amazon-worst-for-aggressive-tax-avoidance" class="av fp fq fr fs ft" rel="noopener nofollow">evades taxes</a>, engages in <a href="https://www.theverge.com/2020/2/27/21156844/amazon-unions-petition-ftc-letter-anticompetitive-antitrust-investigation" class="av fp fq fr fs ft" rel="noopener nofollow">anti-competitive practices</a>, or <a href="https://www.theatlantic.com/business/archive/2018/01/amazon-mechanical-turk/551192/" class="av fp fq fr fs ft" rel="noopener nofollow">abuses labor</a>. But here we are, reluctantly re-upping our Prime delivery memberships to get the cables, webcams, and Bluetooth headsets we need to attend the Zoom meetings that now constitute our own work. Others are reactivating their long-forgotten Facebook accounts to connect with friends, all sharing highly curated depictions of their newfound appreciation for nature, sunsets, and family. And as we do, many of us are lulled further into digital isolation — being rewarded the more we accept the logic of the fully wired home, cut off from the rest of the world.</p>
  80. <p id="96d5" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">And so the <em class="jb">New York Times</em> is busy running photo spreads of <a href="https://www.nytimes.com/2020/07/24/realestate/coronavirus-second-homes-.html" class="av fp fq fr fs ft" rel="noopener nofollow">wealthy families</a> “retreating” to their summer homes — second residences worth well more than most of our primary ones — and stories about their successes working remotely from the beach or retrofitting extra bedrooms as offices. “It’s been great here,” one venture fund founder explained. “If I didn’t know there was absolute chaos in the world … I could do this forever.”</p>
  81. <p id="57d7" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">But what if we don’t have to know about the chaos in the world? That’s the real promise of digital technology. We can choose which cable news, Twitter feeds, and YouTube channels to stream — the ones that acknowledge the virus and its impacts or the ones that don’t. We can choose to continue wrestling with the civic challenges of the moment, such as whether to send kids back to school full-time, hybrid, or remotely. Or — like some of the wealthiest people in my own town — we <a href="https://www.nytimes.com/2020/07/30/nyregion/pod-schools-hastings-on-hudson.html" class="av fp fq fr fs ft" rel="noopener nofollow">can form private “pods,”</a> hire tutors, and offer our kids the kind of customized, elite education we could never justify otherwise. “Yes, we are in a pandemic,” one pod education provider explained to the <em class="jb">Times</em>. “But when it comes to education, we also feel some good may even come out of this.”</p>
  82. <p id="22f1" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">I get it. And if I had younger children and could afford these things, I might even be tempted to avail myself of them. But all of these “solutions” favor those who have already accepted the promise of digital technology to provide what the real world has failed to do. Day traders, for instance, had already discovered the power of the internet to let them earn incomes safely from home using nothing but a laptop and some capital. Under the pandemic, <a href="https://www.wsj.com/articles/everyones-a-day-trader-now-11595649609" class="av fp fq fr fs ft" rel="noopener nofollow">more people are opening up online trading accounts than ever</a>, hoping to participate in the video game version of the marketplace. Meanwhile, some of the world’s most successful social media posses are <a href="https://www.rollingstone.com/culture/culture-features/tiktok-quarantine-coronavirus-hype-house-sway-house-969092/" class="av fp fq fr fs ft" rel="noopener nofollow">moving into luxurious “hype houses”</a> in Los Angeles and Hawaii, where they can livestream their lifestyles, exercise routines, and sex advice — as well the products of their sponsors — to their millions of followers. And maybe it’s these young social media enthusiasts, thriving more than ever under pandemic conditions, who most explicitly embody the original promise of digital technology to provide for our every need.</p>
  83. <p id="32d9" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">I remember back around 1990, when psychedelics philosopher Timothy Leary first read Stewart Brand’s book <em class="jb">The Media Lab</em>, about the new digital technology center MIT had created in its architecture department. Leary devoured the book cover to cover over the course of one long day. Around sunset, just as he was finishing, he threw it across the living room in disgust. “Look at the index,” he said, “of all the names, less than 3% are women. That’ll tell you something.”</p>
  84. <p id="3f27" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">He went on to explain his core problem with the Media Lab and the digital universe these technology pioneers were envisioning: “They want to recreate the womb.” As Leary the psychologist saw it, the boys building our digital future were developing technology to simulate the ideal woman — the one their mothers could never be. Unlike their human mothers, a predictive algorithm could anticipate their every need in advance and deliver it directly, removing every trace of friction and longing. These guys would be able to float in their virtual bubbles — what the Media Lab called “artificial ecology” — and never have to face the messy, harsh reality demanded of people living in a real world with women and people of color and even those with differing views.</p>
  85. <p id="e777" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">For there’s the real rub with digital isolation — the problem those billionaires identified when we were gaming out their bunker strategies. The people and things we’d be leaving behind are still out there. And the more we ask them to service our bubbles, the more oppressed and angry they’re going to get. No, no matter how far <a href="https://www.sciencealert.com/google-s-director-of-engineering-claims-that-the-singularity-will-happen-by-2029" class="av fp fq fr fs ft" rel="noopener nofollow">Ray Kurzweil gets</a> with his artificial intelligence project at Google, we cannot simply rise from the chrysalis of matter as pure consciousness. There’s no Dropbox plan that will let us upload body and soul to the cloud. We are still here on the ground, with the same people and on the same planet we are being encouraged to leave behind. There’s no escape from the others.</p>
  86. <p id="a133" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">Not that people aren’t trying. The ultimate digital escape fantasy would require some seriously perverse enforcement of privilege. Anything to prevent the unwashed masses — the folks working in the meat processing plants, Amazon warehouses, UPS trucks, or not at all — from violating the sacred bounds of our virtual amnionic sacs. Sure, we can replace the factory workers with robots and the delivery people with drones, but then they’ll even have less at stake in maintaining our digital retreats.</p><blockquote class="kb"><p id="8bd7" class="kc kd fx fy b ke kf kg kh ki kj ja fo">Unlike their human mothers, a predictive algorithm could anticipate their every need in advance and deliver it directly, removing every trace of friction and longing.</p></blockquote><p id="46e7" class="im in fx io b gq kk ip iq gt kl ir is it km gy iu iv kn hb iw ix ko he iy ja eo df">I can’t help but see <a href="https://apnews.com/32700a8b49ddf5f7594d2271eb033c2e" class="av fp fq fr fs ft" rel="noopener nofollow">the dismantling of the Post Office</a> as a last-ditch attempt to keep the majority from piercing the bubbles of digital privilege through something as simple as voting. Climb to safety and then pull the ladder up after ourselves. No more voting, no more subsidized delivery of alternative journalism (that was the original constitutional purpose for a fully funded post office). So much the better for the algorithms streaming us the picture of the world we want to see, uncorrupted by imagery of what’s really happening out there. (And if it does come through, just swipe left, and the algorithms will know never to interrupt your dream state with such real news again.)</p>
  87. <p id="47c8" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">No, of course we’ll never get there. Climate, poverty, disease, and famine don’t respect the “guardian boundary” play space defined by the Oculus VR’s user preferences. Just as the billionaires can never, ever truly leave humanity behind, none of us can climb back into the womb. When times are hard, sure, take what peace and comfort you can afford. Use whatever tech you can get your hands on to make your kid’s online education work a bit better. Enjoy the glut of streaming media left over from the heyday of the Netflix-Amazon-HBO wars.</p>
  88. <p id="2cd9" class="im in fx io b gq jm ip iq gt jn ir is it jo gy iu iv jp hb iw ix jq he iy ja eo df">But don’t let this passing — yes, passing — crisis fool you into buying technology’s false promise of escaping from humanity to play video games alone in perpetuity. Our Covid-19 isolation is giving us a rare opportunity to see where this road takes us and to choose to use our technologies to take a very different one.</p></div></div></section>
  89. </main>
  90. </article>
  91. <hr>
  92. <footer>
  93. <p>
  94. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  95. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  96. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  97. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  98. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  99. </p>
  100. <template id="theme-selector">
  101. <form>
  102. <fieldset>
  103. <legend>Thème</legend>
  104. <label>
  105. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  106. </label>
  107. <label>
  108. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  109. </label>
  110. <label>
  111. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  112. </label>
  113. </fieldset>
  114. </form>
  115. </template>
  116. </footer>
  117. <script type="text/javascript">
  118. function loadThemeForm(templateName) {
  119. const themeSelectorTemplate = document.querySelector(templateName)
  120. const form = themeSelectorTemplate.content.firstElementChild
  121. themeSelectorTemplate.replaceWith(form)
  122. form.addEventListener('change', (e) => {
  123. const chosenColorScheme = e.target.value
  124. localStorage.setItem('theme', chosenColorScheme)
  125. toggleTheme(chosenColorScheme)
  126. })
  127. const selectedTheme = localStorage.getItem('theme')
  128. if (selectedTheme && selectedTheme !== 'undefined') {
  129. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  130. }
  131. }
  132. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  133. window.addEventListener('load', () => {
  134. let hasDarkRules = false
  135. for (const styleSheet of Array.from(document.styleSheets)) {
  136. let mediaRules = []
  137. for (const cssRule of styleSheet.cssRules) {
  138. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  139. continue
  140. }
  141. // WARNING: Safari does not have/supports `conditionText`.
  142. if (cssRule.conditionText) {
  143. if (cssRule.conditionText !== prefersColorSchemeDark) {
  144. continue
  145. }
  146. } else {
  147. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  148. continue
  149. }
  150. }
  151. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  152. }
  153. // WARNING: do not try to insert a Rule to a styleSheet you are
  154. // currently iterating on, otherwise the browser will be stuck
  155. // in a infinite loop…
  156. for (const mediaRule of mediaRules) {
  157. styleSheet.insertRule(mediaRule.cssText)
  158. hasDarkRules = true
  159. }
  160. }
  161. if (hasDarkRules) {
  162. loadThemeForm('#theme-selector')
  163. }
  164. })
  165. </script>
  166. </body>
  167. </html>