A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  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` element
  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>Watching The World Burn on Our Phones (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="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Is that even respected? Retrospectively? What a shAItshow…
  28. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  29. <meta name="robots" content="noai, noimageai">
  30. <!-- Documented, feel free to shoot an email. -->
  31. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  32. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  33. <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>
  34. <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>
  35. <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>
  36. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  37. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  38. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  39. <script>
  40. function toggleTheme(themeName) {
  41. document.documentElement.classList.toggle(
  42. 'forced-dark',
  43. themeName === 'dark'
  44. )
  45. document.documentElement.classList.toggle(
  46. 'forced-light',
  47. themeName === 'light'
  48. )
  49. }
  50. const selectedTheme = localStorage.getItem('theme')
  51. if (selectedTheme !== 'undefined') {
  52. toggleTheme(selectedTheme)
  53. }
  54. </script>
  55. <meta name="robots" content="noindex, nofollow">
  56. <meta content="origin-when-cross-origin" name="referrer">
  57. <!-- Canonical URL for SEO purposes -->
  58. <link rel="canonical" href="https://www.okdoomer.io/watching-the-world-burn-on-our-phones/">
  59. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  60. <article>
  61. <header>
  62. <h1>Watching The World Burn on Our Phones</h1>
  63. </header>
  64. <nav>
  65. <p class="center">
  66. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  68. </svg> Accueil</a> •
  69. <a href="https://www.okdoomer.io/watching-the-world-burn-on-our-phones/" title="Lien vers le contenu original">Source originale</a>
  70. </p>
  71. </nav>
  72. <hr>
  73. <p>There's this play by Eugene Ionesco called, "Rhinoceros."</p>
  74. <p>You should read it sometime.</p>
  75. <p>It's about an ordinary dude named Berenger, a Lebowski type who drinks too much and never shows up anywhere on time. Things get interesting when he meets up with a friend for coffee, but their conversation gets interrupted when...yep... a rhinoceros charges through the town square. Over the course of three acts, Berenger watches everyone he cares about, including the woman he loves, transform into a rhinoceros.</p>
  76. <p>Nobody believes him.</p>
  77. <p>The transformation into a rhinoceros starts off with a mild cold. As people transform, they get cranky and aggressive. They accuse Berenger of paranoia. They tell him to stop obsessing over rhinos.</p>
  78. <p>They lose all their empathy.</p>
  79. <p>They start talking about letting everyone live their own lives and getting back to normal. It's ironic, because after they transform, all a rhinoceros wants to do is chase people down and turn them.</p>
  80. <p>Scholars have described the play as a metaphor for the spread of fascism, but it applies to a lot of situations these days. I never thought I'd live through something like that, and yet here we are.</p>
  81. <p>The heat index hit 120F (48.9C) today. Honestly, it doesn't feel that bad. I've gotten used to it. I get out and walk in this every day.</p>
  82. <p>I know, it could kill me.</p>
  83. <p>We're in the middle of a Covid surge, but almost nobody wants to talk about it. We all know someone who doesn't know anyone with Long Covid. Suddenly people who were in the ICU have no memory of it, or they pretend they were never sick. People are forgetting entire conversations.</p>
  84. <p>Sometimes, even the media can't help but report on the undercurrent of fatigue and resentment that pervades public life.</p>
  85. <p>Everything feels... off.</p>
  86. <p>There's no end to the depressing stories. An entire town burns down during a firestorm. Teachers mock disabled children. Schools punish kids for talking during lunch. They're replacing libraries with detention centers.</p>
  87. <p>Newspapers publish stories about experts "baffled" by sudden spikes in heart attacks and chronic illness. They blame environmentalists for holding up progress on renewable energy. They report on labor shortages and broken supply chains. Then they report on the avalanche of studies showing the organ and brain damage caused by the disease everyone wants to ignore. They want to hold everyone accountable <em>except </em>the ones responsible.</p>
  88. <p>They're pulling a rhino.</p>
  89. <p>There's a relentless pressure to act happy now. You have to go to the office. You have to go to bars and restaurants. You have to go to concerts. You have to go on vacation. You have to post about it.</p>
  90. <p>You have to talk to strangers.</p>
  91. <p>But...</p>
  92. <p>You can't talk about all the friends and family you've lost. You can't talk about how tired you are. You can't talk about politics. You can't talk about climate change. You can't talk about the wildfires or that town that burned down. You can't talk about living through the hottest days in human history. You can't talk about masks or air purifiers. You can't talk about student loans. You can't talk about the wars we're fighting or getting ready to fight.</p>
  93. <p>You can't talk about anything that matters.</p>
  94. <p>You can only talk about the latest shitty superhero movie. You can talk about Barbie. You can talk about celebrity gossip. You can talk about the vacation you pretended to enjoy. You can talk about yoga.</p>
  95. <p>You can talk about your morning routine.</p>
  96. <p>You can talk about sports.</p>
  97. <p>The conspiracy theories are getting even crazier. Now people don't believe in viruses at all. They don't believe in polio. They don't believe in the flu. They don't even believe droughts are real anymore. They believe the government is hiding endless supplies of clean water deep underground. They believe the government is starting fires with space lasers.</p>
  98. <p>They're turning into rhinos.</p>
  99. <p>There's a reason why everyone's so tired and miserable. It's not because of climate change. It's not because of the pandemic. It's because of this tedious, soul-sucking normal we're forcing each other to endure.</p>
  100. <p>It doesn't have to be like this.</p>
  101. <p>We don't have to turn into rhinos. We could ditch this normal for something else. All we have to do is stop pretending.</p>
  102. <p>It would be easy.</p>
  103. <p>We have the knowledge and tools to survive. We could build tiny houses for everyone. We could build root cellars. We could build earth tubes. We could leave these shitty jobs and ugly McMansions in the desert. We could localize our supply chains. We could let go of beef. We could build rain catchment systems. We could get around on carts and bicycles.</p>
  104. <p>We could ration energy and electricity.</p>
  105. <p>We could be happy.</p>
  106. <p>We're not miserable because of viruses or heat indexes. We're miserable because this system forces us to participate in our own destruction. We're miserable because we know deep down that we're in trouble, that we have to adapt, but we're still expected to sling lattes for assholes, all the way up until the moment a wildfire or a flood engulfs our neighborhood.</p>
  107. <p>We're miserable because we're forced to watch the world burn on our phones, and then we're accused of doomscrolling.</p>
  108. <p>Isn't that something?</p>
  109. </article>
  110. <hr>
  111. <footer>
  112. <p>
  113. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  114. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  115. </svg> Accueil</a> •
  116. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  117. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  118. </svg> Suivre</a> •
  119. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  120. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  121. </svg> Pro</a> •
  122. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  123. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  124. </svg> Email</a> •
  125. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  126. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  127. </svg> Légal</abbr>
  128. </p>
  129. <template id="theme-selector">
  130. <form>
  131. <fieldset>
  132. <legend><svg class="icon icon-brightness-contrast">
  133. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  134. </svg> Thème</legend>
  135. <label>
  136. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  137. </label>
  138. <label>
  139. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  140. </label>
  141. <label>
  142. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  143. </label>
  144. </fieldset>
  145. </form>
  146. </template>
  147. </footer>
  148. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  149. <script>
  150. function loadThemeForm(templateName) {
  151. const themeSelectorTemplate = document.querySelector(templateName)
  152. const form = themeSelectorTemplate.content.firstElementChild
  153. themeSelectorTemplate.replaceWith(form)
  154. form.addEventListener('change', (e) => {
  155. const chosenColorScheme = e.target.value
  156. localStorage.setItem('theme', chosenColorScheme)
  157. toggleTheme(chosenColorScheme)
  158. })
  159. const selectedTheme = localStorage.getItem('theme')
  160. if (selectedTheme && selectedTheme !== 'undefined') {
  161. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  162. }
  163. }
  164. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  165. window.addEventListener('load', () => {
  166. let hasDarkRules = false
  167. for (const styleSheet of Array.from(document.styleSheets)) {
  168. let mediaRules = []
  169. for (const cssRule of styleSheet.cssRules) {
  170. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  171. continue
  172. }
  173. // WARNING: Safari does not have/supports `conditionText`.
  174. if (cssRule.conditionText) {
  175. if (cssRule.conditionText !== prefersColorSchemeDark) {
  176. continue
  177. }
  178. } else {
  179. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  180. continue
  181. }
  182. }
  183. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  184. }
  185. // WARNING: do not try to insert a Rule to a styleSheet you are
  186. // currently iterating on, otherwise the browser will be stuck
  187. // in a infinite loop…
  188. for (const mediaRule of mediaRules) {
  189. styleSheet.insertRule(mediaRule.cssText)
  190. hasDarkRules = true
  191. }
  192. }
  193. if (hasDarkRules) {
  194. loadThemeForm('#theme-selector')
  195. }
  196. })
  197. </script>
  198. </body>
  199. </html>