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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  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. Jour 2
  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="Bien mauvaise nuit, trop de choses se bousculent et je ne suis pas serein de squatter un refuge qui se réserve. Pour ma défense, il est maintenant obligatoire de réserver 2 jours consécutifs pour la fin de semaine. Fenêtre d’Overton du Covid combiné à un culte du cargo j’imagine. Ou un intérêt purement économique. Ou de l’incompétence technique car l’outil employé est devenu une boîte noire pour les personnes qui s’en occupent. Peut-être que j’ai envie d’accompagner ces personnes dans leur émancipation.">
  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>Jour 2</h1>
  138. <p>Le <time datetime="2024-06-22">22 juin 2024</time></p>
  139. </hgroup>
  140. </header>
  141. <nav>
  142. <p>
  143. <a rel="prev"
  144. href="/david/2024/06/21/"
  145. title="Publication précédente : Jour 1">← 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/06/28/"
  152. title="Publication suivante : CompAIgnon">Suivant →</a>
  153. </p>
  154. </nav>
  155. <p>Bien mauvaise nuit, trop de choses se bousculent et je ne suis pas serein de squatter un refuge qui se réserve. Pour ma défense, il est maintenant obligatoire de réserver 2&nbsp;jours consécutifs pour la fin de semaine. <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Fen%C3%AAtre_d%27Overton">Fenêtre d’Overton</a> du Covid combiné à un <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Culte_du_cargo">culte du cargo</a> j’imagine. Ou un intérêt purement économique. Ou de l’incompétence technique car l’outil employé est devenu une boîte noire pour les personnes qui s’en occupent. Peut-être que j’ai envie d’accompagner ces personnes dans leur&nbsp;émancipation.</p>
  156. <p>Je me retrouve sur le chemin du retour avec des traces très fraîches d’orignal. J’ai la crainte de tomber nez-à-nez avec cet animal d’une tonne, même s’il ne devrait pas être trop farouche en cette saison le sentier me laisse peu de solutions de repli. Je me fais charger de manière très bruyante par… une gélinotte huppée, le poids n’est pas vraiment le même mais l’intention est claire&#8239;! J’imagine sa portée très proche pour qu’elle prenne un tel risque, je bifurque aussi précautionneusement que&nbsp;possible.</p>
  157. <p>Je suis content de ma forme actuelle, après une journée à plus de 20km et avoir <a data-link-domain="ledevoir.com" href="https://www.ledevoir.com/societe/815347/langue-mots-quebecois-preferes-lecteurs-devoir">dormi par sauts de buttes</a>, j’ai encore des jambes. La beauté de cet environnement me porte, parfois j’en arrive à trouver celui-ci monotone mais je sais aussi me rappeler de la chance que&nbsp;j’ai&nbsp;:</p>
  158. <figure>
  159. <a href="/static/david/2024/2024-06-22-lac-lemieux.jpg"
  160. title="Cliquer pour une version haute résolution">
  161. <img
  162. src="/static/david/2024/2024-06-22-lac-lemieux.jpg"
  163. width="3699" height="2774"
  164. srcset="/static/david/2024/2024-06-22-lac-lemieux.jpg 3699w, /static/david/2024/2024-06-22-lac-lemieux_660x440.jpg 660w, /static/david/2024/2024-06-22-lac-lemieux_990x660.jpg 990w, /static/david/2024/2024-06-22-lac-lemieux_1320x880.jpg 1320w"
  165. sizes="min(100vw, calc(100vh * 3699 / 2774))"
  166. loading="lazy"
  167. decoding="async"
  168. alt="Un lac québécois depuis la rive.">
  169. </a>
  170. <figcaption>Lac Lemieux devant le refuge&nbsp;Paul-Perreault.</figcaption>
  171. </figure>
  172. <p>Une autre en prenant de la&nbsp;hauteur&nbsp;:</p>
  173. <figure>
  174. <a href="/static/david/2024/2024-06-22-lac-ouareau.jpg"
  175. title="Cliquer pour une version haute résolution">
  176. <img
  177. src="/static/david/2024/2024-06-22-lac-ouareau.jpg"
  178. width="4032" height="3024"
  179. srcset="/static/david/2024/2024-06-22-lac-ouareau.jpg 4032w, /static/david/2024/2024-06-22-lac-ouareau_660x440.jpg 660w, /static/david/2024/2024-06-22-lac-ouareau_990x660.jpg 990w, /static/david/2024/2024-06-22-lac-ouareau_1320x880.jpg 1320w"
  180. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  181. loading="lazy"
  182. decoding="async"
  183. alt="Vue d’un lac depuis un point de vue en hauteur.">
  184. </a>
  185. <figcaption>Lac Ouareau depuis un point de vue de la&nbsp;randonnée.</figcaption>
  186. </figure>
  187. <p>Pas mal de voitures en finissant sur le parking, j’étais la seule en arrivant la veille. Difficile d’imaginer un covoiturage de niche dans un contexte de randonnée avec des heures / contraintes assez aléatoires. L’usage du stop auquel m’a initié <a data-link-domain="thom4.net" href="https://thom4.net/">Thomas</a> pour cette activité est assez éloigné de la culture pro-voiture&nbsp;locale.</p>
  188. <a href="#hr-187" title="Lien vers cette section de la page"><hr id="hr-187" /></a>
  189. <blockquote>
  190. <p>Finalement, depuis 2003, le contrôle biologique des insectes piqueurs est réalisé sur le territoire de la Municipalité de Saint‑Donat. Le taux de performance excède 85&#8239;% chaque année. Le contrôle débute à la mi-mai pour se terminer à la fin du mois d’août. Bien entendu, les conditions météorologiques peuvent affecter le nombre d’insectes que l’on observe sur le territoire. Cela explique la variation que l’on observe d’année en année. Malgré cette variation, le traitement reste toujours efficace, réduisant la très grande majorité des insectes piqueurs nuisibles sur le&nbsp;territoire.</p>
  191. <p><mark>Le traitement est assuré par un larvicide biologique (B.t.i pour Bacillus thuringiensis isralensis) qui est parfaitement sécuritaire pour l’environnement</mark> à cause de sa nature biologique (contrairement aux pesticides chimiques) et de sa très grande sélectivité pour les larves visées (moustiques et mouches&nbsp;noires).</p>
  192. <p><cite><em><a data-link-domain="saint-donat.ca" href="https://www.saint-donat.ca/services-aux-citoyens/urbanisme-et-environnement/environnement/" hreflang="fr"
  193. title="Consultation de l’article">Environnement - Municipalité de Saint Donat</a>
  194. <a href="/david/cache/2024/2a98a563ee9940d690523ce5113b5f9b/" hreflang="fr"
  195. data-tippy data-description="Environnement Lacs et cours d’eau Eaux  Milieux humides Faune et flore Rives Forêt"
  196. data-source="https://www.saint-donat.ca/services-aux-citoyens/urbanisme-et-environnement/environnement/"
  197. data-date="2024-06-22"
  198. data-favicon="https://www.saint-donat.ca/wp-content/themes/VSD12463-saint-donat.ca/assets/img/Fav-st-donat.png"
  199. data-domain="saint-donat.ca"
  200. ><svg xmlns="http://www.w3.org/2000/svg"
  201. width="24" height="24" viewBox="0 0 24 24" fill="none"
  202. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  203. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  204. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  205. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  206. </svg>
  207. <span class="sr-only">[archive]</span></a></em></cite></p>
  208. </blockquote>
  209. <p>Le soir venu, je creuse un peu le traitement appliqué. Je ne trouve pas d’études en défaveur du <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Bacillus_thuringiensis_israelensis">Bacillus thuringiensis israelensis</a>, «&nbsp;à part&nbsp;» une modification de l’écosystème, forcément. Le document le plus intéressant que j’ai pu trouver à ce sujet est cette méta-analyse de vulgarisation en PDF par l’université de l’Oregon&nbsp;: <a data-link-domain="npic.orst.edu" href="http://npic.orst.edu/factsheets/BTgen.pdf">Bacillus thuringiensis Fact sheet</a> [<a href="/static/david/2024/BTgen.pdf">cache</a> (PDF, 469Ko)].</p>
  210. <a href="#hr-188" title="Lien vers cette section de la page"><hr id="hr-188" /></a>
  211. <p>Mots du jour&nbsp;: <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Joual">Joual</a> et <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Chiac">Chiac</a>.</p>
  212. <p><em>Aussi, <a data-link-domain="youtube.com" href="https://www.youtube.com/watch?v=lwYUqgZVlrs">En berne</a> a&nbsp;22&nbsp;ans…</em></p>
  213. <nav>
  214. <p>
  215. <a href="/david/2024/biologie/"
  216. title="Liste de tous les articles 2024 associés à cette étiquette"
  217. rel="tag">#biologie</a>
  218. <a href="/david/2024/foret/"
  219. title="Liste de tous les articles 2024 associés à cette étiquette"
  220. rel="tag">#forêt</a>
  221. <a href="/david/2024/laboratoire/"
  222. title="Liste de tous les articles 2024 associés à cette étiquette"
  223. rel="tag">#laboratoire</a>
  224. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  225. </p>
  226. </nav>
  227. <nav>
  228. <p>
  229. <a rel="prev"
  230. href="/david/2024/06/21/"
  231. title="Publication précédente : Jour 1">← Précédent</a> •
  232. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  233. • <a rel="next"
  234. href="/david/2024/06/28/"
  235. title="Publication suivante : CompAIgnon">Suivant →</a>
  236. </p>
  237. </nav>
  238. <form action="/david/recherche/" method="get">
  239. <fieldset>
  240. <legend>Recherche</legend>
  241. <label for="input-search">Termes de votre recherche :</label>
  242. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  243. <input type="submit" value="Chercher">
  244. <p id="indexation-infos">
  245. <small>
  246. Seuls les contenus de ces 8 dernières années sont indexés.
  247. </small>
  248. </p>
  249. </fieldset>
  250. </form>
  251. <aside>
  252. <theme-toggle></theme-toggle>
  253. </aside>
  254. </article>
  255. <hr>
  256. <footer>
  257. <p>
  258. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  259. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  260. <a href="http://larlet.com"
  261. title="Go to my English profile"
  262. data-instant>Pro</a>
  263. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  264. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  265. </p>
  266. <template id="theme-selector">
  267. <form>
  268. <style type="text/css">
  269. fieldset div {
  270. text-align: center;
  271. }
  272. </style>
  273. <fieldset>
  274. <legend>Thème</legend>
  275. <div>
  276. <label>
  277. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  278. Auto
  279. </label>
  280. <label>
  281. <input type="radio" value="dark" name="chosen-color-scheme">
  282. Foncé
  283. </label>
  284. <label>
  285. <input type="radio" value="light" name="chosen-color-scheme">
  286. Clair
  287. </label>
  288. </div>
  289. </fieldset>
  290. </form>
  291. </template>
  292. </footer>
  293. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  294. <script>
  295. class ThemeToggle extends HTMLElement {
  296. constructor() {
  297. super()
  298. const themeSelectorTemplate = document.querySelector('#theme-selector')
  299. const form = themeSelectorTemplate.content.firstElementChild
  300. this.attachShadow({ mode: 'open' })
  301. this.shadowRoot.appendChild(form.cloneNode(true))
  302. }
  303. connectedCallback() {
  304. const form = this.shadowRoot.querySelector('form')
  305. form.addEventListener('change', (e) => {
  306. const chosenColorScheme = e.target.value
  307. localStorage.setItem('theme', chosenColorScheme)
  308. toggleTheme(chosenColorScheme)
  309. })
  310. const selectedTheme = localStorage.getItem('theme')
  311. if (selectedTheme && selectedTheme !== 'undefined') {
  312. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  313. }
  314. }
  315. }
  316. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  317. window.addEventListener('load', () => {
  318. let colorsLayer = undefined
  319. let hasDarkRules = false
  320. for (const styleSheet of Array.from(document.styleSheets)) {
  321. let mediaRules = []
  322. for (const layerRule of styleSheet.cssRules) {
  323. if (!(layerRule instanceof CSSLayerBlockRule)) {
  324. continue
  325. }
  326. if (layerRule.name === 'colors') {
  327. colorsLayer = layerRule
  328. }
  329. for (const cssRule of layerRule.cssRules) {
  330. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  331. continue
  332. }
  333. // WARNING: Safari does not have/supports `conditionText`.
  334. if (cssRule.conditionText) {
  335. if (cssRule.conditionText !== prefersColorSchemeDark) {
  336. continue
  337. }
  338. } else {
  339. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  340. continue
  341. }
  342. }
  343. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  344. }
  345. }
  346. // WARNING: do not try to insert a Rule to a styleSheet you are
  347. // currently iterating on, otherwise the browser will be stuck
  348. // in a infinite loop…
  349. for (const mediaRule of mediaRules) {
  350. // Safari requires the `0` second parameter (even if default).
  351. colorsLayer.insertRule(mediaRule.cssText, 0)
  352. hasDarkRules = true
  353. }
  354. }
  355. if (hasDarkRules) {
  356. if ('customElements' in window && !customElements.get('theme-toggle')) {
  357. customElements.define('theme-toggle', ThemeToggle)
  358. }
  359. }
  360. })
  361. </script>
  362. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  363. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  364. <script>
  365. tippy('[data-tippy]', {
  366. content(reference) {
  367. reference.addEventListener('click', (e) => e.preventDefault())
  368. return `
  369. <h3 lang="fr">
  370. <img src="${reference.dataset.favicon}" loading="lazy">
  371. <a href="${reference.dataset.source}"
  372. >Article sur ${reference.dataset.domain}</a></h3>
  373. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  374. <div class="tippy-links" lang="fr">
  375. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  376. </div>
  377. `
  378. },
  379. allowHTML: true,
  380. interactive: true,
  381. delay: [150, 700],
  382. hideOnClick: false
  383. })
  384. </script>
  385. <script type="module">
  386. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  387. const markObserver = new IntersectionObserver((entries, observer) => {
  388. const computedStyle = getComputedStyle(document.documentElement)
  389. const markBackground = computedStyle.getPropertyValue('--mark-background')
  390. for (const entry of entries) {
  391. if (entry.intersectionRatio === 0) continue
  392. const markElement = entry.target
  393. markElement.style.backgroundColor = 'inherit'
  394. const annotation = annotate(
  395. markElement, {
  396. type: 'highlight',
  397. multiline: true,
  398. color: markBackground,
  399. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  400. animate: false
  401. }
  402. )
  403. annotation.show()
  404. observer.unobserve(markElement)
  405. }
  406. }, {threshold: 1.0})
  407. for (const markElement of document.querySelectorAll('mark')) {
  408. markObserver.observe(markElement)
  409. }
  410. </script>
  411. </body>
  412. </html>