A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  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>bearing witness (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. <!-- 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. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://winnielim.org/journal/bearing-witness/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>bearing witness</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://winnielim.org/journal/bearing-witness/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>Everyone is trying to move on with life declaring the pandemic is over, while a conservative estimate of 10% of the world’s infected population will face potential lifelong complications of the virus. I guess there is not much of a choice. No matter how much suffering there is and how many tragedies we face – pandemic or not – we can only try to move forward. This sort of moving forward can only be possible with some magical thinking mixed with denialism, and a lot of looking away. Maybe the difference is that I <em>know</em> I am looking away.</p>
  71. <p>I’ve been entertaining thoughts of wearing a n95 mask with goggles to get on a plane so we can travel. Yet I know I will not be able to forgive myself if my partner happens to be one of the unlucky 10%. Who knows? Do we want to play this russian roulette? I feel very envious browsing through the instagram stories of friends who are overseas right now. But I have no courage to do the same. Maybe the way I approach life has been forever tainted by my chronic illness. I remember I was in my 20s the first time Singapore had SARs, and I didn’t give a shit. Oh, the ignorant blissfulness of my youth, the unwarranted confidence in my body back then.</p>
  72. <p>I personally believe the world will face some sort of collapse, if not multiple collapses in my lifetime. I don’t think I’ll suffer the brunt of climate change, but I’ll suffer the brunt of the many events that are already occurring because of climate change. Looking at how we responded to the virus I am not optimistic at all. Nobody wants to believe or know that things will be bad, so we’ll all try to live life as normally as possible, whatever normal means. Prevention is better than cure, but prevention is also a lot of hard work. </p>
  73. <p>Unlike my younger self I don’t blame people for wanting to stay in their made-belief Disneyland while fire is burning outside. Even without all the issues we face, life is inherently difficult. I think we have limited emotional and psychological capacity. We’re like puppies, we just want to run around, smell the wind and have some fun along the way. We wish to love and be loved. Not crank for exams, tire our bodies out, exhaust our brains – just so we can pay bills and look good to each other – over and over again. But to survive we have to pay bills, and to pay bills we have to crank for exams, manage our parents, children, colleagues, clients, bosses, our unhinged psyches, our suffering bodies. On top of that we have to care about justice, the environment, politics, violence, society. I too, want to retreat into my own Disneyland.</p>
  74. <p>I am one of those people who will write posts like this over and over again and offer no solutions. I can barely cope with my existence prior to this. I just want to lie on the sofa, sip my coffee and read a book. Not live through a million guilt trips of how much more I should have done as a human being or a thousand nightmares of getting long-term disabling illnesses. </p>
  75. <p>I will continue to record these observations and feelings. Maybe I’m only good writing down these convoluted words so I can bear witness – to the world and her people, to myself and my hypocritical feelings. I will look away, but first I’ll acknowledge. </p>
  76. <p>Meanwhile I’ll still try to savour whatever’s left of the world’s goodness: books, music, art, cooking, films, love, in the sanctuary of my own make-belief Disneyland. </p>
  77. </article>
  78. <hr>
  79. <footer>
  80. <p>
  81. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  82. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  83. </svg> Accueil</a> •
  84. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  85. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  86. </svg> Suivre</a> •
  87. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  88. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  89. </svg> Pro</a> •
  90. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  91. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  92. </svg> Email</a> •
  93. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  94. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  95. </svg> Légal</abbr>
  96. </p>
  97. <template id="theme-selector">
  98. <form>
  99. <fieldset>
  100. <legend><svg class="icon icon-brightness-contrast">
  101. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  102. </svg> Thème</legend>
  103. <label>
  104. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  105. </label>
  106. <label>
  107. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  108. </label>
  109. <label>
  110. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  111. </label>
  112. </fieldset>
  113. </form>
  114. </template>
  115. </footer>
  116. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  117. <script>
  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>