Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  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>CarbEAUne — David Larlet</title>
  13. <meta name="description" content="L’hyper-focalisation sur le carbone et l’électricité cache efficacement les autres grands problèmes environnementaux. De tous ces problèmes, il me semble que la consommation d’eau du numérique peut devenir très problématique dans un futur proche et dans des zones très concentrés : les lieux d’extraction minière (approvisionnement en eau pour le nettoyage et la purification du minerai) ; la fabrication de circuits intégrés (eau ultra-pure, rinçage des wafers, etc.) ; le refroidissement des centres de données en zones désertiques (par évaporation d’eau) ; et la pollution des eaux (rejets miniers et industriels, décharges, etc.).">
  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. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  53. <article>
  54. <header>
  55. <h1>CarbEAUne</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/07/27/" title="Publication précédente : Évasion">← Précédent</a> •
  60. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  61. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  62. </svg> Accueil</a>
  63. • <a rel="next" href="/david/2021/07/29/" title="Publication suivante : Mobilaine">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <blockquote>
  68. <p>L’hyper-focalisation sur le carbone et l’électricité cache efficacement les autres grands problèmes environnementaux. De tous ces problèmes, il me semble que <strong>la consommation d’eau du numérique peut devenir très problématique dans un futur proche et dans des zones très concentrés</strong>&nbsp;: les lieux d’extraction minière (approvisionnement en eau pour le nettoyage et la purification du minerai)&#8239;; la fabrication de circuits intégrés (eau ultra-pure, rinçage des wafers, etc.)&#8239;; le refroidissement des centres de données en zones désertiques (par évaporation d’eau)&#8239;; et la pollution des eaux (rejets miniers et industriels, décharges, etc.).</p>
  69. <p><cite><em><a href="https://gauthierroussilhe.com/post/paradoxes-enjeux.html">Paradoxes et enjeux environnementaux de la numérisation</a></em> (<a href="/david/cache/2021/8b4951ac1a12fd9431861f49af5886c8/">cache</a>)</cite></p>
  70. </blockquote>
  71. <p>Une excellente série de billets par Gauthier Roussilhe qui enchaîne avec&nbsp;:</p>
  72. <ul>
  73. <li><a href="https://gauthierroussilhe.com/post/limites-debat.html">Les limites pour débattre de numérisation</a> (<a href="/david/cache/2021/f442ffc39b7109ceebe8bc2a669589cb/">cache</a>)</li>
  74. <li><a href="https://gauthierroussilhe.com/post/ecoconception-critique.html">Eco-conception, le brouillard à venir</a> (<a href="/david/cache/2021/059ace3d9bcdbd911d83f1da84ced326/">cache</a>)</li>
  75. <li><a href="https://gauthierroussilhe.com/post/territoires-centres-de-donnees.html">Territorialiser les systèmes numériques, l’exemple des centres de données</a> (<a href="/david/cache/2021/618145b6b22de36fbbc1cd3162d41515/">cache</a>)</li>
  76. </ul>
  77. <p>Je suis particulièrement sensible à l’effort qui a été fait pour tenter de prendre en compte <em>l’ensemble</em> des coûts autour de ces sujets. Ainsi que l’impact sur le cycle de l’eau qui est localement redéfini par de telles industries.</p>
  78. <blockquote>
  79. <p>Les besoins en eau de certains acteurs du numérique pourraient se confronter avec le plus consommateur d’eau sur le globe&nbsp;: le secteur agricole. Plus précisément, <strong>certains acteurs du numérique pourraient rentrer en concurrence avec les acteurs agricoles pour pomper les eaux souterraines en zones de stress hydrique et pour la captation des eaux de surface (réservoirs, etc.).</strong> Par exemple, en avril 2021, le gouvernement taïwanais a demandé l’arrêt subventionné de l’irrigation de 74&#8239;000&nbsp;hectares de terres agricoles pour maintenir l’approvisionnement en eau d’usines de semi-conducteurs dans le nord de l’île. De plus, les rejets industriels d’usines de fabrication pourraient contaminer plus gravement des rivières et flux qui servent aux activités agricoles.</p>
  80. <p><cite><em>Ibid.</em></cite></p>
  81. </blockquote>
  82. <hr />
  83. <p>Et pendant ce temps-là au Québec, on parle d’un <q>traffic Internet plus vert</q> (<em>sic</em>), la route est longue&nbsp;:</p>
  84. <blockquote>
  85. <p>Hydro-Québec fait, elle aussi, partie de la solution. En incitant des centres de traitement de données à s’installer ici pour profiter de notre énergie propre, nous pouvons en effet contribuer à rendre le trafic Internet plus vert.</p>
  86. <p><cite><em><a href="https://www.hydroquebec.com/a/decarboner.html">Pollution numérique</a></em> (<a href="/david/cache/2021/75c2f55c5321a0afe4352f53da5e0b89/">cache</a>)</cite></p>
  87. </blockquote>
  88. <nav>
  89. <p>
  90. <a href="/david/2021/capitalocene/"
  91. title="Liste de tous les articles associés à cette étiquette"
  92. >#capitalocène</a>
  93. <a href="/david/2021/technique/"
  94. title="Liste de tous les articles associés à cette étiquette"
  95. >#technique</a>
  96. <a href="/david/#tags"
  97. title="Liste de toutes les étiquettes existantes"
  98. ><svg class="icon icon-tags">
  99. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  100. </svg> tous ?</a>
  101. </p>
  102. </nav>
  103. <nav>
  104. <p class="center">
  105. <a rel="prev" href="/david/2021/07/27/" title="Publication précédente : Évasion">← Précédent</a> •
  106. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  107. • <a rel="next" href="/david/2021/07/29/" title="Publication suivante : Mobilaine">Suivant →</a>
  108. </p>
  109. </nav>
  110. </article>
  111. <hr>
  112. <footer>
  113. <p>
  114. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  115. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  116. </svg> Accueil</a> •
  117. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  118. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  119. </svg> Suivre</a> •
  120. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  121. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  122. </svg> Pro</a> •
  123. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  124. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  125. </svg> Email</a> •
  126. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  127. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  128. </svg> Légal</abbr>
  129. </p>
  130. <template id="theme-selector">
  131. <form>
  132. <fieldset>
  133. <legend><svg class="icon icon-brightness-contrast">
  134. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  135. </svg> Thème</legend>
  136. <label>
  137. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  138. </label>
  139. <label>
  140. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  141. </label>
  142. <label>
  143. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  144. </label>
  145. </fieldset>
  146. </form>
  147. </template>
  148. </footer>
  149. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  150. <script>
  151. function loadThemeForm(templateName) {
  152. const themeSelectorTemplate = document.querySelector(templateName)
  153. const form = themeSelectorTemplate.content.firstElementChild
  154. themeSelectorTemplate.replaceWith(form)
  155. form.addEventListener('change', (e) => {
  156. const chosenColorScheme = e.target.value
  157. localStorage.setItem('theme', chosenColorScheme)
  158. toggleTheme(chosenColorScheme)
  159. })
  160. const selectedTheme = localStorage.getItem('theme')
  161. if (selectedTheme && selectedTheme !== 'undefined') {
  162. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  163. }
  164. }
  165. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  166. window.addEventListener('load', () => {
  167. let hasDarkRules = false
  168. for (const styleSheet of Array.from(document.styleSheets)) {
  169. let mediaRules = []
  170. for (const cssRule of styleSheet.cssRules) {
  171. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  172. continue
  173. }
  174. // WARNING: Safari does not have/supports `conditionText`.
  175. if (cssRule.conditionText) {
  176. if (cssRule.conditionText !== prefersColorSchemeDark) {
  177. continue
  178. }
  179. } else {
  180. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  181. continue
  182. }
  183. }
  184. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  185. }
  186. // WARNING: do not try to insert a Rule to a styleSheet you are
  187. // currently iterating on, otherwise the browser will be stuck
  188. // in a infinite loop…
  189. for (const mediaRule of mediaRules) {
  190. styleSheet.insertRule(mediaRule.cssText)
  191. hasDarkRules = true
  192. }
  193. }
  194. if (hasDarkRules) {
  195. loadThemeForm('#theme-selector')
  196. }
  197. })
  198. </script>
  199. </body>
  200. </html>