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 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  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. Papillon
  14. — David Larlet</title>
  15. <meta name="description" content="Plus je suis stressé et plus je m’éparpille, une façon de canaliser mon cerveau qui bouillonne, une tentative pour étouffer ce qui remue au fond par un ensevelissement de tâches plus ou moins f·utiles. La beauté de ce mécanisme c’est que même en étant pleinement conscient de cela, je n’ai pas pour autant une prise dessus. Alors je lâche-prise justement, j’accepte cette période, surtout si je sais qu’elle est bornée par une date clé. Savoir qu’il va y avoir un après est déjà libérateur.">
  16. <!-- That good ol' feed, subscribe :). -->
  17. <link rel="alternate"
  18. type="application/atom+xml"
  19. title="Feed"
  20. href="/david/log/">
  21. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  22. <link rel="apple-touch-icon"
  23. sizes="180x180"
  24. href="/static/david/icons2/apple-touch-icon.png">
  25. <link rel="icon"
  26. type="image/png"
  27. sizes="32x32"
  28. href="/static/david/icons2/favicon-32x32.png">
  29. <link rel="icon"
  30. type="image/png"
  31. sizes="16x16"
  32. href="/static/david/icons2/favicon-16x16.png">
  33. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  34. <link rel="mask-icon"
  35. href="/static/david/icons2/safari-pinned-tab.svg"
  36. color="#07486c">
  37. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  38. <meta name="msapplication-TileColor" content="#f7f7f7">
  39. <meta name="msapplication-config"
  40. content="/static/david/icons2/browserconfig.xml">
  41. <meta name="theme-color"
  42. content="#f7f7f7"
  43. media="(prefers-color-scheme: light)">
  44. <meta name="theme-color"
  45. content="#272727"
  46. media="(prefers-color-scheme: dark)">
  47. <!-- Is that even respected? Retrospectively? What a shAItshow…
  48. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  49. <meta name="robots" content="noai, noimageai">
  50. <!-- Documented, feel free to shoot an email. -->
  51. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
  55. as="font"
  56. type="font/woff2"
  57. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  58. crossorigin>
  59. <link rel="preload"
  60. href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
  61. as="font"
  62. type="font/woff2"
  63. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  64. crossorigin>
  65. <link rel="preload"
  66. href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
  67. as="font"
  68. type="font/woff2"
  69. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  70. crossorigin>
  71. <link rel="preload"
  72. href="/static/david/css/fonts/triplicate_t3_regular.woff2"
  73. as="font"
  74. type="font/woff2"
  75. media="(prefers-color-scheme: dark)"
  76. crossorigin>
  77. <link rel="preload"
  78. href="/static/david/css/fonts/triplicate_t3_bold.woff2"
  79. as="font"
  80. type="font/woff2"
  81. media="(prefers-color-scheme: dark)"
  82. crossorigin>
  83. <link rel="preload"
  84. href="/static/david/css/fonts/triplicate_t3_italic.woff2"
  85. as="font"
  86. type="font/woff2"
  87. media="(prefers-color-scheme: dark)"
  88. crossorigin>
  89. <script>
  90. function toggleTheme(themeName) {
  91. document.documentElement.classList.toggle(
  92. 'forced-dark',
  93. themeName === 'dark'
  94. )
  95. document.documentElement.classList.toggle(
  96. 'forced-light',
  97. themeName === 'light'
  98. )
  99. }
  100. const selectedTheme = localStorage.getItem('theme')
  101. if (selectedTheme !== 'undefined') {
  102. toggleTheme(selectedTheme)
  103. }
  104. </script>
  105. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
  106. data-instant-intensity="viewport-all">
  107. <article>
  108. <header>
  109. <h1>Papillon</h1>
  110. </header>
  111. <nav>
  112. <p class="center">
  113. <a rel="prev"
  114. href="/david/2023/11/27/"
  115. title="Publication précédente : Dix">← Précédent</a> •
  116. <nobr>
  117. <a href="/david/" title="Aller à l’accueil" rel="up">
  118. <svg class="icon icon-home">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  120. </svg>
  121. Accueil</a>
  122. </nobr>
  123. <nobr>
  124. <a href="/david/recherche/"
  125. title="Aller à la page de recherche"
  126. rel="search">
  127. <svg class="icon icon-search">
  128. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"></use>
  129. </svg>
  130. Recherche</a>
  131. </nobr>
  132. • <a rel="next"
  133. href="/david/2023/12/03/"
  134. title="Publication suivante : NostAlgIe">Suivant →</a>
  135. </p>
  136. </nav>
  137. <hr>
  138. <p>Plus je suis stressé et plus je m’éparpille, une façon de canaliser mon cerveau qui bouillonne, une tentative pour étouffer ce qui remue au fond par un ensevelissement de tâches plus ou moins f·utiles. La beauté de ce mécanisme c’est que même en étant pleinement conscient de cela, je n’ai pas pour autant une prise dessus. Alors je lâche-prise justement, j’accepte cette période, surtout si je sais qu’elle est bornée par une date clé. Savoir qu’il va y avoir un après est déjà&nbsp;libérateur.</p>
  139. <hr />
  140. <blockquote lang="en">
  141. <p>🤯 As a family, we have a secret pass phrase to check identity between ourselves in the event of an unexpected video&nbsp;call.</p>
  142. <p>It’s a sticking plaster solution. <mark>Long term I suspect we all need 2FA for&nbsp;humans.</mark></p>
  143. <p>In the meantime, maybe the most effective ward against deepfakes is simply to turn&nbsp;sideways?</p>
  144. <p>We should build the habit now. At the beginning of every call, exchange a quick proof-of-humanity by showing our&nbsp;ears.</p>
  145. <p><cite><em><a href="https://interconnected.org/home/2023/09/22/wards">Old wards and new against fake humans</a></em>&nbsp;(<a href="/david/cache/2023/60461be5ec82443fd6a7c12f29e40587/">cache</a>)</cite></p>
  146. </blockquote>
  147. <blockquote lang="en">
  148. <p>🦫 “As our collaborator Joe Wheaton [from Utah State University] likes to say, ‘water doesn’t burn,’” Kolarik says. “Beavers maintain healthy riverscapes which store carbon and water. Consistent access to water is key to mitigating the effects of climate disturbances like&nbsp;drought.”</p>
  149. <p><mark>Beavers’ role as firefighters</mark> has already been documented in Idaho. A 2018&nbsp;technical report by Anabranch Solutions, a river restoration company, found that beavers were a major factor in decreasing burn intensity along Baugh Creek during that year’s Sharps&nbsp;Fire.</p>
  150. <p>“Where active beaver dams were present, native riparian vegetation persisted, unburnt,” the authors wrote. In our hotter and fierier world, beavers are a&nbsp;buffer.</p>
  151. <p>“I once heard a rancher use the analogy of sponges when referring to valley bottoms. If we can successfully rewet the sponges, the West will be much more resilient to climate change, and beavers can keep those sponges wet,” Kolarik&nbsp;says.</p>
  152. <p><cite><em><a href="https://news.mongabay.com/2023/09/nasa-satellites-reveal-restoration-power-of-beavers/">NASA satellites reveal restoration power of beavers</a></em>&nbsp;(<a href="/david/cache/2023/7732c1cdc56a5db0f2fd3117f9522fa8/">cache</a>)</cite></p>
  153. </blockquote>
  154. <blockquote lang="en">
  155. <p>✋ It should be strictly <strong>opt-in</strong>. No one should be required to provide their work for free to any person or organization. The online community is under no responsibility to help them create their products. Some will declare that I am “Anti-AI” for saying such things, but that would be a misrepresentation. I am not declaring that these systems should be torn down, simply that <mark>their developers aren’t entitled to our work.</mark> They can still build those systems with purchased or donated&nbsp;data.</p>
  156. <p><cite><em><a href="https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/">Block the Bots that Feed “AI” Models by Scraping Your Website</a></em>&nbsp;(<a href="/david/cache/2023/af6aeab9b848e78334e31b9b7a668413/">cache</a>)</cite></p>
  157. </blockquote>
  158. <blockquote lang="en">
  159. <p>😔 Our community has persistent and pervasive problems of a particular sort which we are not allowed to talk about: sexual harassment and assault. Men who assault, harass, and even rape women in our spaces, are protected. A culture of silence is enforced, and those who call out rape, sexual assault, or harassment, those who criticise they who enable and protect these behaviors, are punished, swiftly and&nbsp;aggressively.</p>
  160. <p><cite><em><a href="https://drewdevault.com/2023/09/29/The-forbidden-topics.html">The forbidden topics</a></em>&nbsp;(<a href="/david/cache/2023/ae2b427ba896475633726fdd731caf09/">cache</a>)</cite></p>
  161. </blockquote>
  162. <blockquote>
  163. <p>☢️ [en] The Soviet RTG program is – for me – a foreboding engineering parable about the cost of deploying an idea with no plans for future maintenance. Sure, I can deploy this hot new tech now and it does the job in new and clever ways, but what is the impact if we don’t have a plan for regular maintenance? When future people interact with my contraption, will it work and will it kill anyone? Y’know, the basic concerns every software project deals&nbsp;with.</p>
  164. <p><cite><em><a href="https://daverupert.com/2023/05/soviet-rtgs/">Lessons from Soviet Russia on deploying small nuclear generators</a></em>&nbsp;(<a href="/david/cache/2023/90e565ff0043e34d7fcfc087d66555d3/">cache</a>)</cite></p>
  165. </blockquote>
  166. <blockquote>
  167. <p>🚴 Je n’ai ni gagné ni perdu de poids, je saurais pas dire si il y a le moindre changement niveau muscles/graisse. D’après Strava, je brulais en moyenne 2000&nbsp;kcal par jour à&nbsp;vélo.</p>
  168. <p><cite><em><a href="https://virgule.net/blog/vacances_a_velo_2023.html">Vacances à vélo 2023</a></em>&nbsp;(<a href="/david/cache/2023/7863cd9fd3df50880d0d8841307b05f2/">cache</a>)</cite></p>
  169. </blockquote>
  170. <blockquote>
  171. <p>🎯 En tant que travailleurs de la tech, très souvent, nous faisons partie du système, nous participons au problème, <mark>nous sommes un maillon de la chaine productiviste</mark>&nbsp;: par notre travail, nous contribuons à des modèles capitalistiques coloniaux, le profit de certains au détriment de tous, l’accaparement des ressources de la planète, l’asservissement des êtres humains les plus pauvres et la destruction du&nbsp;vivant.</p>
  172. <p><cite><em><a href="https://richardhanna.dev/blog/2023/ecoconception-ne-suffit-pas.html">Écoconception des services numériques, et si ça ne suffisait pas&#8239;?</a></em>&nbsp;(<a href="/david/cache/2023/026e36c493ee97a30d613864813aaae1/">cache</a>)</cite></p>
  173. </blockquote>
  174. <nav>
  175. <p class="center">
  176. <a rel="prev"
  177. href="/david/2023/11/27/"
  178. title="Publication précédente : Dix">← Précédent</a> •
  179. <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
  180. • <a rel="next"
  181. href="/david/2023/12/03/"
  182. title="Publication suivante : NostAlgIe">Suivant →</a>
  183. </p>
  184. </nav>
  185. </article>
  186. <hr>
  187. <footer>
  188. <p>
  189. <nobr>
  190. <a href="/david/" title="Aller à l’accueil">
  191. <svg class="icon icon-home">
  192. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  193. </svg>
  194. Accueil</a>
  195. </nobr>
  196. <nobr>
  197. <a href="/david/log/" title="Accès au flux RSS">
  198. <svg class="icon icon-rss2">
  199. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  200. </svg>
  201. Suivre</a>
  202. </nobr>
  203. <nobr>
  204. <a href="http://larlet.com"
  205. title="Go to my English profile"
  206. data-instant>
  207. <svg class="icon icon-user-tie">
  208. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  209. </svg>
  210. Pro</a>
  211. </nobr>
  212. <nobr>
  213. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
  214. <svg class="icon icon-mail">
  215. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  216. </svg>
  217. Email</a>
  218. </nobr>
  219. <nobr>
  220. <abbr class="nowrap"
  221. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
  222. <svg class="icon icon-hammer2">
  223. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  224. </svg>
  225. Légal</abbr>
  226. </nobr>
  227. </p>
  228. <template id="theme-selector">
  229. <form>
  230. <fieldset>
  231. <legend>
  232. <svg class="icon icon-brightness-contrast">
  233. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  234. </svg>
  235. Thème
  236. </legend>
  237. <label>
  238. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  239. Auto
  240. </label>
  241. <label>
  242. <input type="radio" value="dark" name="chosen-color-scheme">
  243. Foncé
  244. </label>
  245. <label>
  246. <input type="radio" value="light" name="chosen-color-scheme">
  247. Clair
  248. </label>
  249. </fieldset>
  250. </form>
  251. </template>
  252. </footer>
  253. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  254. <script>
  255. function loadThemeForm(templateName) {
  256. const themeSelectorTemplate = document.querySelector(templateName)
  257. const form = themeSelectorTemplate.content.firstElementChild
  258. themeSelectorTemplate.replaceWith(form)
  259. form.addEventListener('change', (e) => {
  260. const chosenColorScheme = e.target.value
  261. localStorage.setItem('theme', chosenColorScheme)
  262. toggleTheme(chosenColorScheme)
  263. })
  264. const selectedTheme = localStorage.getItem('theme')
  265. if (selectedTheme && selectedTheme !== 'undefined') {
  266. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  267. }
  268. }
  269. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  270. window.addEventListener('load', () => {
  271. let hasDarkRules = false
  272. for (const styleSheet of Array.from(document.styleSheets)) {
  273. let mediaRules = []
  274. for (const cssRule of styleSheet.cssRules) {
  275. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  276. continue
  277. }
  278. // WARNING: Safari does not have/supports `conditionText`.
  279. if (cssRule.conditionText) {
  280. if (cssRule.conditionText !== prefersColorSchemeDark) {
  281. continue
  282. }
  283. } else {
  284. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  285. continue
  286. }
  287. }
  288. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  289. }
  290. // WARNING: do not try to insert a Rule to a styleSheet you are
  291. // currently iterating on, otherwise the browser will be stuck
  292. // in a infinite loop…
  293. for (const mediaRule of mediaRules) {
  294. styleSheet.insertRule(mediaRule.cssText)
  295. hasDarkRules = true
  296. }
  297. }
  298. if (hasDarkRules) {
  299. loadThemeForm('#theme-selector')
  300. }
  301. })
  302. </script>
  303. </body>
  304. </html>