Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
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 31KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591
  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>
  13. Tout
  14. — David Larlet</title>
  15. <script>
  16. function toggleTheme(themeName) {
  17. document.documentElement.classList.toggle(
  18. 'forced-dark',
  19. themeName === 'dark'
  20. )
  21. document.documentElement.classList.toggle(
  22. 'forced-light',
  23. themeName === 'light'
  24. )
  25. }
  26. const selectedTheme = localStorage.getItem('theme')
  27. if (selectedTheme !== 'undefined') {
  28. toggleTheme(selectedTheme)
  29. }
  30. </script>
  31. <!-- Documented, feel free to shoot an email. -->
  32. <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  33. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  34. <link rel="preload"
  35. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  36. as="font"
  37. type="font/woff2"
  38. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  39. crossorigin>
  40. <link rel="preload"
  41. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  42. as="font"
  43. type="font/woff2"
  44. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  45. crossorigin>
  46. <link rel="preload"
  47. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  48. as="font"
  49. type="font/woff2"
  50. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  51. crossorigin>
  52. <link rel="preload"
  53. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  54. as="font"
  55. type="font/woff2"
  56. media="(prefers-color-scheme: dark)"
  57. crossorigin>
  58. <link rel="preload"
  59. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  60. as="font"
  61. type="font/woff2"
  62. media="(prefers-color-scheme: dark)"
  63. crossorigin>
  64. <link rel="preload"
  65. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  66. as="font"
  67. type="font/woff2"
  68. media="(prefers-color-scheme: dark)"
  69. crossorigin>
  70. <meta name="description" content="We’re expected to do everything, keep up with everything, adapt to constant changes, and understand multiple conflicting architectural paradigms ranging from immediate mode rendering, to relational databases, to REST API designs, to both imperative and declarative programming, to complex state querying languages like GraphQL, to all of the various intricacies of how CSS handles rendering.">
  71. <!-- That good ol' feed, subscribe :). -->
  72. <link rel="alternate"
  73. type="application/atom+xml"
  74. title="Feed"
  75. href="/david/log/">
  76. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  77. <link rel="apple-touch-icon"
  78. sizes="180x180"
  79. href="/static/david/icons2/apple-touch-icon.png">
  80. <link rel="icon"
  81. type="image/png"
  82. sizes="32x32"
  83. href="/static/david/icons2/favicon-32x32.png">
  84. <link rel="icon"
  85. type="image/png"
  86. sizes="16x16"
  87. href="/static/david/icons2/favicon-16x16.png">
  88. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  89. <link rel="mask-icon"
  90. href="/static/david/icons2/safari-pinned-tab.svg"
  91. color="#07486c">
  92. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  93. <meta name="msapplication-TileColor" content="#f7f7f7">
  94. <meta name="msapplication-config"
  95. content="/static/david/icons2/browserconfig.xml">
  96. <meta name="theme-color"
  97. content="#f7f7f7"
  98. media="(prefers-color-scheme: light)">
  99. <meta name="theme-color"
  100. content="#272727"
  101. media="(prefers-color-scheme: dark)">
  102. <!-- Is that even respected? Retrospectively? What a shAItshow…
  103. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  104. <meta name="robots" content="noai, noimageai">
  105. <!-- To get attribution when linking on mastodon. -->
  106. <meta name="fediverse:creator" content="@david@larlet.fr">
  107. <style type="text/css">
  108. .tippy-content {
  109. min-width: 280px;
  110. padding: .5rem;
  111. font-size: calc(var(--fluid-0) * 0.8);
  112. font-family: var(--labor-font);
  113. letter-spacing: initial;
  114. text-align: left;
  115. }
  116. .tippy-content h3 {
  117. margin-top: 0;
  118. }
  119. .tippy-content h3 img {
  120. max-width: 2rem;
  121. max-height: 2rem;
  122. display: inline-block;
  123. }
  124. .tippy-content .tippy-links {
  125. display: flex;
  126. justify-content: space-around;
  127. }
  128. .tippy-content a {
  129. padding: .4rem;
  130. color: #F06048;
  131. }
  132. </style>
  133. <body data-instant-intensity="viewport-all">
  134. <article>
  135. <header>
  136. <hgroup>
  137. <h1>Tout</h1>
  138. <p>Le <time datetime="2024-05-24">24 mai 2024</time></p>
  139. </hgroup>
  140. </header>
  141. <nav>
  142. <p>
  143. <a rel="prev"
  144. href="/david/2024/05/20/"
  145. title="Publication précédente : Stimulations">← Précédent</a> •
  146. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  147. <a href="/david/recherche/"
  148. title="Aller à la page de recherche"
  149. rel="search" data-no-instant>Recherche</a>
  150. • <a rel="next"
  151. href="/david/2024/05/31/"
  152. title="Publication suivante : Technocritique">Suivant →</a>
  153. </p>
  154. </nav>
  155. <blockquote lang="en">
  156. <p>We’re expected to do everything, keep up with everything, adapt to constant changes, and understand multiple conflicting architectural paradigms ranging from immediate mode rendering, to relational databases, to REST API designs, to both imperative and declarative programming, to complex state querying languages like GraphQL, to all of the various intricacies of how CSS handles&nbsp;rendering.</p>
  157. <p>We’re made <mark>to do all this while watching</mark> our peers lose their jobs, our employers savage society through pervasive surveillance and collaboration with authoritarian companies, and our data centres suck up the entire water supply for entire&nbsp;municipalities.</p>
  158. <p>No wonder we’re all fucked up emotionally and&nbsp;mentally.</p>
  159. <p><cite><em><a data-link-domain="baldurbjarnason.com" href="https://www.baldurbjarnason.com/2024/the-deskilling-of-web-dev-is-harming-us-all/" hreflang="en"
  160. title="Consultation de l’article (anglais)">The deskilling of web dev is harming the product but, more importantly, it’s damaging our health</a>
  161. <a href="/david/cache/2024/8672047b982b09475a59605ed0f9a011/" hreflang="en"
  162. data-tippy data-description="Even before the web developer job market became as dire as it is today, I was regularly seeing developers burn out and leave the industry. Some left for good; some only temporarily."
  163. data-source="https://www.baldurbjarnason.com/2024/the-deskilling-of-web-dev-is-harming-us-all/"
  164. data-date="2024-05-21"
  165. data-favicon="https://www.baldurbjarnason.com/dark-bird.svg"
  166. data-domain="baldurbjarnason.com"
  167. ><svg xmlns="http://www.w3.org/2000/svg"
  168. width="24" height="24" viewBox="0 0 24 24" fill="none"
  169. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  170. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  171. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  172. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  173. </svg>
  174. <span class="sr-only">[archive]</span></a></em></cite></p>
  175. </blockquote>
  176. <p>J’aimerais bien papoter avec Baldur Bjarnason un jour. Et je sais que mon niveau d’anglais actuel ne me permettrait pas d’aborder ces sujets avec la subtilité qui le&nbsp;nécessite.</p>
  177. <a href="#hr-169" title="Lien vers cette section de la page"><hr id="hr-169" /></a>
  178. <blockquote lang="en">
  179. <p>My web experience was thus enlightenment and disempowerment. Opportunity and anxiety. Tears and&nbsp;joy.</p>
  180. <p>[…]</p>
  181. <p>My vision for the web over the next ten years is that <mark>we can turn that feeling of malaise,</mark> which I think is rooted in disempowerment, into a feeling that things can be&nbsp;different.</p>
  182. <p>No one person set off a light bulb in my mind that made me think I could have a personal website where I blog about all the things I find fun and interesting. Rather, it was seeing role models from all different backgrounds that made me think I could take more control of the web, and use the web as a platform not for consumption or creation for capital, but as a place of&nbsp;expression.</p>
  183. <p><cite><em><a data-link-domain="jamesg.blog" href="https://jamesg.blog/2024/05/19/next-web-decade/" hreflang="en"
  184. title="Consultation de l’article (anglais)">The next decade of the web</a>
  185. <a href="/david/cache/2024/50fb34a41d67e9468fce639e97fd62a3/" hreflang="en"
  186. data-tippy data-description="My experience on the web has been one of dualities."
  187. data-source="https://jamesg.blog/2024/05/19/next-web-decade/"
  188. data-date="2024-05-21"
  189. data-favicon="https://jamesg.blog/favicon.ico"
  190. data-domain="jamesg.blog"
  191. ><svg xmlns="http://www.w3.org/2000/svg"
  192. width="24" height="24" viewBox="0 0 24 24" fill="none"
  193. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  194. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  195. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  196. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  197. </svg>
  198. <span class="sr-only">[archive]</span></a></em></cite></p>
  199. </blockquote>
  200. <p>Un peu d’optimisme ne fait pas de&nbsp;mal.</p>
  201. <a href="#hr-170" title="Lien vers cette section de la page"><hr id="hr-170" /></a>
  202. <blockquote>
  203. <p>The best way to think of SLS is as a balding guy with a mullet: there are fireworks down below that are meant to distract you from a sad situation up&nbsp;top.</p>
  204. <p><cite><em><a data-link-domain="idlewords.com" href="https://idlewords.com/2024/5/the_lunacy_of_artemis.htm" hreflang=""
  205. title="Consultation de l’article">The Lunacy of Artemis (Idle Words)</a>
  206. <a href="/david/cache/2024/b1099381931e530393ab2740d48ae1ef/" hreflang=""
  207. data-tippy data-description="For the first time since the 1960's, it looks doubtful whether the US space agency is even capable of getting us to the Moon."
  208. data-source="https://idlewords.com/2024/5/the_lunacy_of_artemis.htm"
  209. data-date="2024-05-21"
  210. data-favicon=""
  211. data-domain="idlewords.com"
  212. ><svg xmlns="http://www.w3.org/2000/svg"
  213. width="24" height="24" viewBox="0 0 24 24" fill="none"
  214. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  215. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  216. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  217. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  218. </svg>
  219. <span class="sr-only">[archive]</span></a></em></cite></p>
  220. </blockquote>
  221. <p>Maciej Cegłowski, in style&nbsp;😂.</p>
  222. <p>Voir aussi&nbsp;: <a data-link-domain="idlewords.com" href="https://idlewords.com/2023/1/why_not_mars.htm" hreflang="en"
  223. title="Consultation de l’article (anglais)">Why Not Mars</a>
  224. <a href="/david/cache/2024/9dee199dbf71b1176eaac521e828693b/" hreflang="en"
  225. data-tippy data-description="It's slow, expensive, the engineering is mostly port-a-potty chemistry, and the best-case outcome is that thirty years from now we’ll get to watch someone remotely operate a soil scoop from Mars instead of Pasadena"
  226. data-source="https://idlewords.com/2023/1/why_not_mars.htm"
  227. data-date="2024-05-21"
  228. data-favicon=""
  229. data-domain="idlewords.com"
  230. ><svg xmlns="http://www.w3.org/2000/svg"
  231. width="24" height="24" viewBox="0 0 24 24" fill="none"
  232. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  233. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  234. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  235. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  236. </svg>
  237. <span class="sr-only">[archive]</span></a>.</p>
  238. <a href="#hr-171" title="Lien vers cette section de la page"><hr id="hr-171" /></a>
  239. <blockquote lang="en">
  240. <p>Rye said Apple’s response addressed the most depressing aspect of their research: That there was previously no way for anyone to opt out of this data&nbsp;collection.</p>
  241. <p>“You may not have Apple products, but if you have an access point and someone near you owns an Apple device, your BSSID will be in [Apple’s] database,” he said. “What’s important to note here is that <mark>every access point is being tracked, without opting in, whether they run an Apple device or not.</mark> Only after we disclosed this to Apple have they added the ability for people to opt&nbsp;out.”</p>
  242. <p><cite><em><a data-link-domain="krebsonsecurity.com" href="https://krebsonsecurity.com/2024/05/why-your-wi-fi-router-doubles-as-an-apple-airtag/" hreflang="en"
  243. title="Consultation de l’article (anglais)">Why Your Wi-Fi Router Doubles as an Apple AirTag</a>
  244. <a href="/david/cache/2024/34b4deffee5820ed20c6e57d6c0ee000/" hreflang="en"
  245. data-tippy data-description="Apple and the satellite-based broadband service Starlink each recently took steps to address new research into the potential security and privacy implications of how their services geo-locate devices. Researchers from the University of Maryland say they relied on publicly available…"
  246. data-source="https://krebsonsecurity.com/2024/05/why-your-wi-fi-router-doubles-as-an-apple-airtag/"
  247. data-date="2024-05-22"
  248. data-favicon="https://krebsonsecurity.com/favicon.ico"
  249. data-domain="krebsonsecurity.com"
  250. ><svg xmlns="http://www.w3.org/2000/svg"
  251. width="24" height="24" viewBox="0 0 24 24" fill="none"
  252. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  253. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  254. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  255. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  256. </svg>
  257. <span class="sr-only">[archive]</span></a></em></cite></p>
  258. </blockquote>
  259. <p>Le ver est dans la pomme depuis un peu trop longtemps à mon&nbsp;goût…</p>
  260. <p>Un <a data-link-domain="infosec.exchange" href="https://infosec.exchange/@briankrebs/112480004285401846">résumé sur masto</a>.</p>
  261. <a href="#hr-172" title="Lien vers cette section de la page"><hr id="hr-172" /></a>
  262. <blockquote lang="en">
  263. <p>Recall works by <mark>taking a screenshot of your active window every few seconds</mark>, recording everything you do in Windows for up to three months by&nbsp;default.</p>
  264. <p>These snapshots will be analyzed by the on-device Neural Processing Unit (NPU) and an AI model to extract data from the screenshot. The data will be saved in a semantic index, allowing Windows users to browse through the snapshot history or search using human language&nbsp;queries.</p>
  265. <p><cite><em><a data-link-domain="bleepingcomputer.com" href="https://www.bleepingcomputer.com/news/microsoft/microsofts-new-windows-11-recall-is-a-privacy-nightmare/" hreflang="en"
  266. title="Consultation de l’article (anglais)">Microsoft’s new Windows 11&nbsp;Recall is a privacy nightmare</a>
  267. <a href="/david/cache/2024/e1f6125fe416ecd26f2804cdab5cc571/" hreflang="en"
  268. data-tippy data-description="Microsoft&#039;s announcement of the new AI-powered Windows 11 Recall feature has sparked a lot of concern, with many thinking that it has created massive privacy risks and a new attack vector that threat actors can exploit to steal data."
  269. data-source="https://www.bleepingcomputer.com/news/microsoft/microsofts-new-windows-11-recall-is-a-privacy-nightmare/"
  270. data-date="2024-05-24"
  271. data-favicon="https://www.bleepstatic.com/favicon/bleeping.ico"
  272. data-domain="bleepingcomputer.com"
  273. ><svg xmlns="http://www.w3.org/2000/svg"
  274. width="24" height="24" viewBox="0 0 24 24" fill="none"
  275. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  276. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  277. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  278. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  279. </svg>
  280. <span class="sr-only">[archive]</span></a></em></cite></p>
  281. </blockquote>
  282. <p>C’est la porte ouverte à toute les fenêtres, Windows Unlimited eut été un meilleur nom. 🤡</p>
  283. <a href="#hr-173" title="Lien vers cette section de la page"><hr id="hr-173" /></a>
  284. <blockquote lang="en">
  285. <p>Russian troops in Ukraine are using thousands of Starlink satellite communications terminals made by Elon Musk’s SpaceX, the Ukrainian military intelligence chief told the Wall Street Journal in an interview published on&nbsp;Thursday.</p>
  286. <p>Lieutenant General Kyrylo Budanov said that <mark>Russian troops have been communicating over the Starlink system “for quite a long time”</mark> and acquired the terminals from private Russian firms that purchased them from&nbsp;intermediaries.</p>
  287. <p><cite><em><a data-link-domain="reuters.com" href="https://www.reuters.com/world/europe/russia-using-thousands-spacex-starlink-terminals-ukraine-wsj-says-2024-02-15/" hreflang="en"
  288. title="Consultation de l’article (anglais)">Russia using thousands of SpaceX Starlink terminals in Ukraine, WSJ says</a>
  289. <a href="/david/cache/2024/664e0f4028089315e2fa0be1c8c70300/" hreflang="en"
  290. data-tippy data-description="The Russian Embassy and SpaceX did not respond immediately to requests for comment."
  291. data-source="https://www.reuters.com/world/europe/russia-using-thousands-spacex-starlink-terminals-ukraine-wsj-says-2024-02-15/"
  292. data-date="2024-05-22"
  293. data-favicon="https://www.reuters.com/favicon.ico"
  294. data-domain="reuters.com"
  295. ><svg xmlns="http://www.w3.org/2000/svg"
  296. width="24" height="24" viewBox="0 0 24 24" fill="none"
  297. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  298. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  299. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  300. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  301. </svg>
  302. <span class="sr-only">[archive]</span></a></em></cite></p>
  303. </blockquote>
  304. <p>Neutralité du net vs. héroïsation des fournisseurs d’accès à&nbsp;internet.</p>
  305. <a href="#hr-174" title="Lien vers cette section de la page"><hr id="hr-174" /></a>
  306. <blockquote lang="en">
  307. <p>This leads us straight back to the original conversation about “Man or Bear,” which has nothing to do with bears. (Sorry, bears!) <mark>“Would you rather be stuck in a forest with a man or a bear?” is just another way of asking, “Are you afraid of men?”</mark> It’s the same question I’ve been fielding for the entirety of my life as a solo female traveler. It’s the same question that hovers over women all the time as we move through the&nbsp;world.</p>
  308. <p>And it’s a question that’s always been difficult for me to answer. I’m not afraid of all men. But I am afraid of some men. The real problem is the gray area in between and what it takes to manage the murkiness of that&nbsp;unknown.</p>
  309. <p><cite><em><a data-link-domain="bikepacking.com" href="https://bikepacking.com/plog/man-or-bear-debate/" hreflang="en"
  310. title="Consultation de l’article (anglais)">A Woman Who Left Society to Live With Bears Weighs in on “Man or Bear”</a>
  311. <a href="/david/cache/2024/cba1417ac2338abde14bb06d0a1f505d/" hreflang="en"
  312. data-tippy data-description="In this piece, long-term bicycle traveler Laura Killingbeck reflects on the Man or Bear debate and adds her unique perspective..."
  313. data-source="https://bikepacking.com/plog/man-or-bear-debate/"
  314. data-date="2024-05-24"
  315. data-favicon="https://bikepacking.com/icon.svg?v=2"
  316. data-domain="bikepacking.com"
  317. ><svg xmlns="http://www.w3.org/2000/svg"
  318. width="24" height="24" viewBox="0 0 24 24" fill="none"
  319. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  320. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  321. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  322. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  323. </svg>
  324. <span class="sr-only">[archive]</span></a></em></cite></p>
  325. </blockquote>
  326. <p>En tant qu’homme qui peut croiser des hommes et des ours dans la forêt, j’ai déjà plus peur de croiser un homme. Je n’imagine même pas en tant que&nbsp;femme.</p>
  327. <p>À mon niveau, lorsque je croise une femme seule dans la forêt (très rare, mais ça arrive), j’essaye de rester à bonne distance en ayant l’attitude que j’aurais vis-à-vis… d’un&nbsp;ours.</p>
  328. <blockquote lang="en">
  329. <p>As I listened to his laughter, a visceral understanding rose from my stomach and landed in my brain. In that moment I knew something that I could no longer prevent myself from knowing. That the person I loved got bigger when I got smaller. That he could not stop bringing me down, because bringing me down was what brought him&nbsp;up.</p>
  330. <p><cite><em><a data-link-domain="bicycling.com" href="https://www.bicycling.com/rides/a34466128/search-for-the-wild-reindeer/" hreflang="en"
  331. title="Consultation de l’article (anglais)">In Search of the Wild Reindeer</a>
  332. <a href="/david/cache/2024/49b61c702d03a23ba3e0801bdaa3cb07/" hreflang="en"
  333. data-tippy data-description="When her life fell apart, Laura Killingbeck went on an epic bike journey to find wild reindeer in Labrador."
  334. data-source="https://www.bicycling.com/rides/a34466128/search-for-the-wild-reindeer/"
  335. data-date="2024-05-24"
  336. data-favicon="https://www.bicycling.com/_assets/design-tokens/bicycling/static/images/favicon.94f0fb3.ico"
  337. data-domain="bicycling.com"
  338. ><svg xmlns="http://www.w3.org/2000/svg"
  339. width="24" height="24" viewBox="0 0 24 24" fill="none"
  340. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  341. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  342. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  343. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  344. </svg>
  345. <span class="sr-only">[archive]</span></a></em></cite></p>
  346. </blockquote>
  347. <p>😭</p>
  348. <nav>
  349. <p>
  350. <a href="/david/2024/evolution/"
  351. title="Liste de tous les articles 2024 associés à cette étiquette"
  352. rel="tag">#évolution</a>
  353. <a href="/david/2024/liens/"
  354. title="Liste de tous les articles 2024 associés à cette étiquette"
  355. rel="tag">#liens</a>
  356. <a href="/david/2024/web/"
  357. title="Liste de tous les articles 2024 associés à cette étiquette"
  358. rel="tag">#web</a>
  359. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  360. </p>
  361. </nav>
  362. <nav>
  363. <p>
  364. <a rel="prev"
  365. href="/david/2024/05/20/"
  366. title="Publication précédente : Stimulations">← Précédent</a> •
  367. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  368. • <a rel="next"
  369. href="/david/2024/05/31/"
  370. title="Publication suivante : Technocritique">Suivant →</a>
  371. </p>
  372. </nav>
  373. <form action="/david/recherche/" method="get">
  374. <fieldset>
  375. <legend>Recherche</legend>
  376. <label for="input-search">Termes de votre recherche :</label>
  377. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  378. <input type="submit" value="Chercher">
  379. <p id="indexation-infos">
  380. <small>
  381. Seuls les contenus de ces 8 dernières années sont indexés.
  382. </small>
  383. </p>
  384. </fieldset>
  385. </form>
  386. <aside>
  387. <theme-toggle></theme-toggle>
  388. </aside>
  389. </article>
  390. <hr>
  391. <footer>
  392. <p>
  393. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  394. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  395. <a href="http://larlet.com"
  396. title="Go to my English profile"
  397. data-instant>Pro</a>
  398. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  399. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  400. </p>
  401. <template id="theme-selector">
  402. <form>
  403. <style type="text/css">
  404. fieldset div {
  405. text-align: center;
  406. }
  407. </style>
  408. <fieldset>
  409. <legend>Thème</legend>
  410. <div>
  411. <label>
  412. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  413. Auto
  414. </label>
  415. <label>
  416. <input type="radio" value="dark" name="chosen-color-scheme">
  417. Foncé
  418. </label>
  419. <label>
  420. <input type="radio" value="light" name="chosen-color-scheme">
  421. Clair
  422. </label>
  423. </div>
  424. </fieldset>
  425. </form>
  426. </template>
  427. </footer>
  428. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  429. <script>
  430. class ThemeToggle extends HTMLElement {
  431. constructor() {
  432. super()
  433. const themeSelectorTemplate = document.querySelector('#theme-selector')
  434. const form = themeSelectorTemplate.content.firstElementChild
  435. this.attachShadow({ mode: 'open' })
  436. this.shadowRoot.appendChild(form.cloneNode(true))
  437. }
  438. connectedCallback() {
  439. const form = this.shadowRoot.querySelector('form')
  440. form.addEventListener('change', (e) => {
  441. const chosenColorScheme = e.target.value
  442. localStorage.setItem('theme', chosenColorScheme)
  443. toggleTheme(chosenColorScheme)
  444. })
  445. const selectedTheme = localStorage.getItem('theme')
  446. if (selectedTheme && selectedTheme !== 'undefined') {
  447. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  448. }
  449. }
  450. }
  451. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  452. window.addEventListener('load', () => {
  453. let colorsLayer = undefined
  454. let hasDarkRules = false
  455. for (const styleSheet of Array.from(document.styleSheets)) {
  456. let mediaRules = []
  457. for (const layerRule of styleSheet.cssRules) {
  458. if (!(layerRule instanceof CSSLayerBlockRule)) {
  459. continue
  460. }
  461. if (layerRule.name === 'colors') {
  462. colorsLayer = layerRule
  463. }
  464. for (const cssRule of layerRule.cssRules) {
  465. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  466. continue
  467. }
  468. // WARNING: Safari does not have/supports `conditionText`.
  469. if (cssRule.conditionText) {
  470. if (cssRule.conditionText !== prefersColorSchemeDark) {
  471. continue
  472. }
  473. } else {
  474. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  475. continue
  476. }
  477. }
  478. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  479. }
  480. }
  481. // WARNING: do not try to insert a Rule to a styleSheet you are
  482. // currently iterating on, otherwise the browser will be stuck
  483. // in a infinite loop…
  484. for (const mediaRule of mediaRules) {
  485. // Safari requires the `0` second parameter (even if default).
  486. colorsLayer.insertRule(mediaRule.cssText, 0)
  487. hasDarkRules = true
  488. }
  489. }
  490. if (hasDarkRules) {
  491. if ('customElements' in window && !customElements.get('theme-toggle')) {
  492. customElements.define('theme-toggle', ThemeToggle)
  493. }
  494. }
  495. })
  496. </script>
  497. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  498. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  499. <script>
  500. tippy('[data-tippy]', {
  501. content(reference) {
  502. reference.addEventListener('click', (e) => e.preventDefault())
  503. return `
  504. <h3 lang="fr">
  505. <img src="${reference.dataset.favicon}" loading="lazy">
  506. <a href="${reference.dataset.source}"
  507. >Article sur ${reference.dataset.domain}</a></h3>
  508. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  509. <div class="tippy-links" lang="fr">
  510. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  511. </div>
  512. `
  513. },
  514. allowHTML: true,
  515. interactive: true,
  516. delay: [150, 700],
  517. hideOnClick: false
  518. })
  519. </script>
  520. <script type="module">
  521. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  522. const markObserver = new IntersectionObserver((entries, observer) => {
  523. const computedStyle = getComputedStyle(document.documentElement)
  524. const markBackground = computedStyle.getPropertyValue('--mark-background')
  525. for (const entry of entries) {
  526. if (entry.intersectionRatio === 0) continue
  527. const markElement = entry.target
  528. markElement.style.backgroundColor = 'inherit'
  529. const annotation = annotate(
  530. markElement, {
  531. type: 'highlight',
  532. multiline: true,
  533. color: markBackground,
  534. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  535. animate: false
  536. }
  537. )
  538. annotation.show()
  539. observer.unobserve(markElement)
  540. }
  541. }, {threshold: 1.0})
  542. for (const markElement of document.querySelectorAll('mark')) {
  543. markObserver.observe(markElement)
  544. }
  545. </script>
  546. </body>
  547. </html>