A place to cache linked articles (think custom and personal wayback machine)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

index.html 9.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  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>Sidération | nota-bene.org (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://nota-bene.org/Sideration">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Sidération | nota-bene.org</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://nota-bene.org/Sideration" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p>Je viens de revoir <a href="https://fr.wikipedia.org/wiki/Extr%C3%AAmement_fort_et_incroyablement_pr%C3%A8s_(film)" class="spip_out" rel="external"><cite>Extrêmement fort et incroyablement près</cite></a>, et ça m’évoque des émotions variées et complexes, difficiles à mettre en mots. C’est mon tort, ça, tout vouloir mettre en mots.</p>
  69. <p>Ça a réveillé, en tout cas, une émotion rare que j’ai vécue ces jours de 2001, qu’on est nombreux à avoir vécue je pense. Cette hébétude, autant une incapacité à comprendre qu’une incapacité à passer à autre chose, cette hypnose devant ces images en boucle de tours percutées, de tours fumantes, de tours effondrées, de gens qui courent dans la fumée lourde de cendres.</p>
  70. <p>Depuis deux mois, je suis bizarre. Je fais illusion, frénétique sur un réseau social, j’écris quelques haïkus, je joue à des défis d’écriture, mais le travail, lui ? Il n’avance pas, ou si peu. Là encore il fait illusion lors des réunions quotidiennes. Je suis à tout ce qui implique ma présence, j’y suis au sens d’une présence pleine et entière (à peu près) qui requiert mon attention, mon écoute, mes réponses, mes suggestions. C’est déjà pas mal, diront certains (et c’est une promesse que je peux encore redémarrer, pleinement et entièrement à ce que je ferai). Mais c’est presque tout. Le reste prend du retard. Je constate autour de moi que je ne suis pas tout seul, en tout cas parmi ceux qui osent aborder le sujet.</p>
  71. <p>Est-ce que c’est de la complaisance, de la fainéantise ? Bien sûr qu’on se pose la question. Bien sûr que je me demande si c’est la faute aux addictions faciles (réseau social, je te regarde), bien sûr que tous les jours je me fais une liste de choses à faire en me promettant qu’avec une « boucle de rétroaction positive » je serai bien content de l’avoir cochée en entier, parce qu’on est toujours content d’avoir fait ce qu’on s’est promis de faire, et qu’on ferme l’ordinateur le soir venu avec la satisfaction du travail accompli.</p>
  72. <p>Mais non, ce n’est pas de la complaisance (je l’ai connue de près, celle-là), ni de la fainéantise (je suis trop actif pour ça, trop occupé ne serait-ce qu’à courir après des chimères).</p>
  73. <p>En revoyant ce film, en revivant indirectement les émotions passées, je retrouve ce mot qui dit où j’en suis, où nous en sommes : sidération.</p>
  74. <p>Va savoir combien de temps ça va durer.</p>
  75. <p>(Mettre un nom sur les problèmes, c’est commencer à les résoudre.)</p>
  76. <p>Demain, je prends mon vélo (si j’ai le courage !) et je vais revoir des copains pas vus depuis deux mois. Premiers copains à revoir sans l’indirection d’un écran. Peut-être le début de la suite ?</p>
  77. </main>
  78. </article>
  79. <hr>
  80. <footer>
  81. <p>
  82. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  83. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  84. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  85. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  86. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  87. </p>
  88. <template id="theme-selector">
  89. <form>
  90. <fieldset>
  91. <legend>Thème</legend>
  92. <label>
  93. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  94. </label>
  95. <label>
  96. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  97. </label>
  98. <label>
  99. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  100. </label>
  101. </fieldset>
  102. </form>
  103. </template>
  104. </footer>
  105. <script type="text/javascript">
  106. function loadThemeForm(templateName) {
  107. const themeSelectorTemplate = document.querySelector(templateName)
  108. const form = themeSelectorTemplate.content.firstElementChild
  109. themeSelectorTemplate.replaceWith(form)
  110. form.addEventListener('change', (e) => {
  111. const chosenColorScheme = e.target.value
  112. localStorage.setItem('theme', chosenColorScheme)
  113. toggleTheme(chosenColorScheme)
  114. })
  115. const selectedTheme = localStorage.getItem('theme')
  116. if (selectedTheme && selectedTheme !== 'undefined') {
  117. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  118. }
  119. }
  120. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  121. window.addEventListener('load', () => {
  122. let hasDarkRules = false
  123. for (const styleSheet of Array.from(document.styleSheets)) {
  124. let mediaRules = []
  125. for (const cssRule of styleSheet.cssRules) {
  126. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  127. continue
  128. }
  129. // WARNING: Safari does not have/supports `conditionText`.
  130. if (cssRule.conditionText) {
  131. if (cssRule.conditionText !== prefersColorSchemeDark) {
  132. continue
  133. }
  134. } else {
  135. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  136. continue
  137. }
  138. }
  139. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  140. }
  141. // WARNING: do not try to insert a Rule to a styleSheet you are
  142. // currently iterating on, otherwise the browser will be stuck
  143. // in a infinite loop…
  144. for (const mediaRule of mediaRules) {
  145. styleSheet.insertRule(mediaRule.cssText)
  146. hasDarkRules = true
  147. }
  148. }
  149. if (hasDarkRules) {
  150. loadThemeForm('#theme-selector')
  151. }
  152. })
  153. </script>
  154. </body>
  155. </html>