A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  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>Thinking about Climate on a Dark, Dismal Morning (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://blogs.scientificamerican.com/hot-planet/thinking-about-climate-on-a-dark-dismal-morning/">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Thinking about Climate on a Dark, Dismal Morning</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://blogs.scientificamerican.com/hot-planet/thinking-about-climate-on-a-dark-dismal-morning/" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p>It’s six in the morning of the shortest day of the year. The sky is dark. When the sun finally rises it will disappear behind leaden gray clouds and tall gray buildings streaked with rust. I’m on a train watching the wastelands of postindustrial New Jersey speed by, pylons and garbage piles and the occasional cluster of muddy, leafless trees. I’m sipping cheap burned coffee from a paper cup and staring at a blinding white page. I’m trying to write about hope, but it’s so dark out there.</p>
  69. <p>This year wildfires became domesticated, inviting themselves into the homes of the wealthy and the poor. Lagoons of pig feces overflowed in the rains of Hurricane Florence, smearing the countryside and water supplies with a pink sludge of untreated waste. The entire Northern Hemisphere baked in the summer heat. The U.N. warned about the consequences of failing to curb warming, while the National Climate Assessment told us what was coming and what was already here.</p>
  70. <p>Of course the climate is changing, say the politicians. But we don’t know why. It’s a mystery, an unknowable natural cycle that we have no power to stop. Imagine believing this (I don’t think for a minute <em>they </em>do). Imagine the terror you’d feel confronting a force of nature completely beyond your control. You’d rapidly go through all the stages of grief until you reached the bargaining phase. I’ve been there, after the terrible phone call or car accident, my mind cycling through what-ifs and could-have-beens, desperate for a reprieve that will never come.</p>
  71. <p>Here is a miracle: the reprieve has come. This is the alternate reality. This is the timeline we hoped for: the one in which we have a chance, no matter how small, to make things better.</p>
  72. <p>You may have heard that we have 12 years to fix everything. This is well-meaning nonsense, but it’s still nonsense. We have both no time and more time. Climate change isn’t a cliff we fall off, but a slope we slide down. And, true, we’ve chosen to throw ourselves headlong down the hill at breakneck speed. But we can always choose to begin the long, slow, brutal climb back up. If we must argue about what the view will be like when we get there, let’s at least agree to turn around first.</p>
  73. <p>It’s true that we’re not going to get utopia. The planet has already warmed by one degree Celsius. Most of the coral reefs are going to die, and many of the glaciers will melt. Climate change is here, leaving grubby human fingerprints on parched, burned, flooded and melted landscapes. But we don’t have to settle for dystopia. It’s going to be worse, but it doesn’t have to be bleak. We can have a “topia,” an ordinary future where we go about ordinary lives in cities on stilts, missing what we’ve lost but looking forward to better things. There is light in the future that doesn’t come from burning.</p>
  74. <p>Hope, said Emily Dickinson, is the thing with feathers. I have never understood this poem. Hope does not keep me warm, nor is it always there. Hope is not comfortable. It demands things, drains you, makes you sad and anxious. Hope is the knowledge that we can prevent bad things, and the realization that we might choose not to.</p>
  75. <p>It’s eight o’clock and the train is passing through the outskirts of Baltimore. The weird orange streetlight glow is giving way to the gray mist of the morning. There is a small break in the clouds: not enough to show blue sky, but just enough to turn the sunlight bright silver. Tomorrow, there will be a second more of daylight in the darkness, and then a few more seconds, and then the long days of summer until the world swings back around the sun. It doesn’t stop. It never will.</p>
  76. </main>
  77. </article>
  78. <hr>
  79. <footer>
  80. <p>
  81. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  82. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  83. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  84. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  85. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  86. </p>
  87. <template id="theme-selector">
  88. <form>
  89. <fieldset>
  90. <legend>Thème</legend>
  91. <label>
  92. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  93. </label>
  94. <label>
  95. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  96. </label>
  97. <label>
  98. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  99. </label>
  100. </fieldset>
  101. </form>
  102. </template>
  103. </footer>
  104. <script type="text/javascript">
  105. function loadThemeForm(templateName) {
  106. const themeSelectorTemplate = document.querySelector(templateName)
  107. const form = themeSelectorTemplate.content.firstElementChild
  108. themeSelectorTemplate.replaceWith(form)
  109. form.addEventListener('change', (e) => {
  110. const chosenColorScheme = e.target.value
  111. localStorage.setItem('theme', chosenColorScheme)
  112. toggleTheme(chosenColorScheme)
  113. })
  114. const selectedTheme = localStorage.getItem('theme')
  115. if (selectedTheme && selectedTheme !== 'undefined') {
  116. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  117. }
  118. }
  119. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  120. window.addEventListener('load', () => {
  121. let hasDarkRules = false
  122. for (const styleSheet of Array.from(document.styleSheets)) {
  123. let mediaRules = []
  124. for (const cssRule of styleSheet.cssRules) {
  125. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  126. continue
  127. }
  128. // WARNING: Safari does not have/supports `conditionText`.
  129. if (cssRule.conditionText) {
  130. if (cssRule.conditionText !== prefersColorSchemeDark) {
  131. continue
  132. }
  133. } else {
  134. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  135. continue
  136. }
  137. }
  138. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  139. }
  140. // WARNING: do not try to insert a Rule to a styleSheet you are
  141. // currently iterating on, otherwise the browser will be stuck
  142. // in a infinite loop…
  143. for (const mediaRule of mediaRules) {
  144. styleSheet.insertRule(mediaRule.cssText)
  145. hasDarkRules = true
  146. }
  147. }
  148. if (hasDarkRules) {
  149. loadThemeForm('#theme-selector')
  150. }
  151. })
  152. </script>
  153. </body>
  154. </html>