Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

index.html 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  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. Conteur
  14. — David Larlet</title>
  15. <meta name="description" content="Un peu de contexte. Lorsqu’on va promener et bivouaquer en forêt avec l’enfant — comme la fin de semaine dernière — on invente des histoires. C’est souvent inspiré des lectures du moment (La guerre de clans, Naruto, etc) croisées avec les éléments que l’on a sous la main (crapauds, anis gemmes de Flavigny, etc). En rentrant à la maison, on prend un moment le soir pour écrire taper tout cela mais il faut garder de la place pour les dessins d’illustration. Me voilà donc en train de chercher comment introduire un saut de page en Markdown lors de l’impression. Ou plutôt dans le rendu de Markdown par iAWriter pour être plus précis. Et il s’avère que c’est possible (cache) avec +++ !">
  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>Conteur</h1>
  110. </header>
  111. <nav>
  112. <p class="center">
  113. <a rel="prev"
  114. href="/david/2023/09/06/"
  115. title="Publication précédente : Retour">← 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/09/08/"
  134. title="Publication suivante : Char&nbsp;2">Suivant →</a>
  135. </p>
  136. </nav>
  137. <hr>
  138. <p>Un peu de contexte. Lorsqu’on va promener et bivouaquer en forêt avec l’enfant —&nbsp;comme la fin de semaine dernière&nbsp;— on invente des histoires. C’est souvent inspiré des lectures du moment (La guerre de clans, Naruto, etc) croisées avec les éléments que l’on a sous la main (crapauds, <del>anis</del> gemmes de Flavigny, etc). En rentrant à la maison, on prend un moment le soir pour <del>écrire</del> taper tout cela mais il faut garder de la place pour les dessins d’illustration. Me voilà donc en train de chercher comment introduire un saut de page en Markdown lors de l’impression. Ou plutôt dans le rendu de Markdown par iAWriter pour être plus précis. Et il s’avère que <a href="https://ia.net/writer/support/basics/markdown-guide">c’est possible</a>&nbsp;(<a href="/david/cache/2023/478260db4b078551676bf263cbeeaa52/">cache</a>) avec <code>+++</code>&#8239;!</p>
  139. <p>Au passage, je découvre qu’il y a tout un tas de possibilités dans un logiciel que j’utilise depuis des années. Comme les formules (dans les tableaux) ou les métadonnées qui viennent dynamiquement remplacer des variables. Une chouette découverte après avoir utilisé récemment les <em>templates</em> pour uniformiser mes&nbsp;courriers.</p>
  140. <p>Et c’est ainsi que je vous conte ce qu’il nous est arrivé en contant cette histoire. Je vous accorde que c’est un peu <em>meta</em>.</p>
  141. <figure>
  142. <a href="/static/david/2023/2023-09-06-extrait-quete.jpg"
  143. title="Cliquer pour une version haute résolution">
  144. <img
  145. src="/static/david/2023/2023-09-06-extrait-quete.jpg"
  146. width="3024" height="3024"
  147. srcset="/static/david/2023/2023-09-06-extrait-quete.jpg 3024w, /static/david/2023/2023-09-06-extrait-quete_660x440.jpg 660w, /static/david/2023/2023-09-06-extrait-quete_990x660.jpg 990w, /static/david/2023/2023-09-06-extrait-quete_1320x880.jpg 1320w"
  148. sizes="min(100vw, calc(100vh * 3024 / 3024))"
  149. loading="lazy"
  150. decoding="async"
  151. alt="Un extrait de l’histoire&nbsp;: Sur le chemin du retour, nous nous dimes que nous allions écrire cette histoire.">
  152. </a>
  153. <figcaption>Mais on aime ça le meta. (Et les typos. (Et le passé&nbsp;simple.))</figcaption>
  154. </figure>
  155. <hr />
  156. <blockquote lang="en">
  157. <p>🪦 The 100-Year Plan isn’t just about today. It’s an investment in tomorrow. Whether you’re cementing your own digital legacy or gifting 100&nbsp;years of a trusted platform to a loved one, <mark>this plan is a testament to the future</mark>’s boundless&nbsp;potential.</p>
  158. <p>The cost is $38,000. We hope people&nbsp;renew.</p>
  159. <p><cite><em><a href="https://wordpress.com/blog/2023/08/25/introducing-the-100-year-plan/">Introducing the 100-Year Plan: Secure Your Online Legacy for a Century</a></em>&nbsp;(<a href="/david/cache/2023/57c0b22f733354552de63db112f51b20/">cache</a>)</cite></p>
  160. </blockquote>
  161. <blockquote lang="en">
  162. <p>📜 A false sense of security persists surrounding digitized documents: because an infinite number of identical copies can be made of any original, most of us believe that our electronic files have an indefinite shelf life and unlimited retrieval opportunities. In fact, preserving the world’s online content is an increasing concern, particularly as file formats (and the hardware and software used to run them) become scarce, inaccessible, or antiquated, technologies evolve, and data decays. <mark>Without constant maintenance and management,</mark> most digital information will be lost in just a few decades. Our modern records are far from&nbsp;permanent.</p>
  163. <p><cite><em><a href="https://longnow.org/ideas/shining-a-light-on-the-digital-dark-age/">Shining a Light on the Digital Dark Age</a></em>&nbsp;(<a href="/david/cache/2023/83c60dd85e9f0f07bf41821a2694a0e5/">cache</a>)</cite></p>
  164. </blockquote>
  165. <blockquote lang="en">
  166. <p>🔋 But there’s something else I want to suggest here, and it’s to stop thinking about time entirely. Or, at least, to stop thinking about time as something <em>consistent</em>. We all know that time can be stretchy or compressed—we’ve experienced hours that plodded along interminably and those that whisked by in a few breaths. We’ve had days in which we got so much done we surprised ourselves and days where we got into a staring contest with the to-do list and the to-do list didn’t blink. And we’ve also had days that left us puddled on the floor and days that left us pumped up, practically leaping out of our chairs. <mark>What differentiates these experiences isn’t the number of hours in the day but the energy we get from the work.</mark> Energy <em>makes</em>&nbsp;time.</p>
  167. <p><cite><em><a href="https://everythingchanges.us/blog/energy-makes-time/">Energy makes time</a></em>&nbsp;(<a href="/david/cache/2023/3f4be4add2995420dc6be529f1032e46/">cache</a>)</cite></p>
  168. </blockquote>
  169. <nav>
  170. <p>
  171. <a href="/david/2023/aventure/"
  172. title="Liste de tous les articles 2023 associés à cette étiquette"
  173. rel="tag">#aventure</a>
  174. <a href="/david/2023/foret/"
  175. title="Liste de tous les articles 2023 associés à cette étiquette"
  176. rel="tag">#forêt</a>
  177. <a href="/david/2023/parentalite/"
  178. title="Liste de tous les articles 2023 associés à cette étiquette"
  179. rel="tag">#parentalité</a>
  180. <a href="/david/#tags-2023" title="Liste de toutes les étiquettes 2023">
  181. <svg class="icon icon-tags">
  182. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
  183. </svg>
  184. tous ?</a>
  185. </p>
  186. </nav>
  187. <nav>
  188. <p class="center">
  189. <a rel="prev"
  190. href="/david/2023/09/06/"
  191. title="Publication précédente : Retour">← Précédent</a> •
  192. <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
  193. • <a rel="next"
  194. href="/david/2023/09/08/"
  195. title="Publication suivante : Char&nbsp;2">Suivant →</a>
  196. </p>
  197. </nav>
  198. </article>
  199. <hr>
  200. <footer>
  201. <p>
  202. <nobr>
  203. <a href="/david/" title="Aller à l’accueil">
  204. <svg class="icon icon-home">
  205. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  206. </svg>
  207. Accueil</a>
  208. </nobr>
  209. <nobr>
  210. <a href="/david/log/" title="Accès au flux RSS">
  211. <svg class="icon icon-rss2">
  212. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  213. </svg>
  214. Suivre</a>
  215. </nobr>
  216. <nobr>
  217. <a href="http://larlet.com"
  218. title="Go to my English profile"
  219. data-instant>
  220. <svg class="icon icon-user-tie">
  221. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  222. </svg>
  223. Pro</a>
  224. </nobr>
  225. <nobr>
  226. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
  227. <svg class="icon icon-mail">
  228. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  229. </svg>
  230. Email</a>
  231. </nobr>
  232. <nobr>
  233. <abbr class="nowrap"
  234. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
  235. <svg class="icon icon-hammer2">
  236. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  237. </svg>
  238. Légal</abbr>
  239. </nobr>
  240. </p>
  241. <template id="theme-selector">
  242. <form>
  243. <fieldset>
  244. <legend>
  245. <svg class="icon icon-brightness-contrast">
  246. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  247. </svg>
  248. Thème
  249. </legend>
  250. <label>
  251. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  252. Auto
  253. </label>
  254. <label>
  255. <input type="radio" value="dark" name="chosen-color-scheme">
  256. Foncé
  257. </label>
  258. <label>
  259. <input type="radio" value="light" name="chosen-color-scheme">
  260. Clair
  261. </label>
  262. </fieldset>
  263. </form>
  264. </template>
  265. </footer>
  266. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  267. <script>
  268. function loadThemeForm(templateName) {
  269. const themeSelectorTemplate = document.querySelector(templateName)
  270. const form = themeSelectorTemplate.content.firstElementChild
  271. themeSelectorTemplate.replaceWith(form)
  272. form.addEventListener('change', (e) => {
  273. const chosenColorScheme = e.target.value
  274. localStorage.setItem('theme', chosenColorScheme)
  275. toggleTheme(chosenColorScheme)
  276. })
  277. const selectedTheme = localStorage.getItem('theme')
  278. if (selectedTheme && selectedTheme !== 'undefined') {
  279. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  280. }
  281. }
  282. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  283. window.addEventListener('load', () => {
  284. let hasDarkRules = false
  285. for (const styleSheet of Array.from(document.styleSheets)) {
  286. let mediaRules = []
  287. for (const cssRule of styleSheet.cssRules) {
  288. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  289. continue
  290. }
  291. // WARNING: Safari does not have/supports `conditionText`.
  292. if (cssRule.conditionText) {
  293. if (cssRule.conditionText !== prefersColorSchemeDark) {
  294. continue
  295. }
  296. } else {
  297. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  298. continue
  299. }
  300. }
  301. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  302. }
  303. // WARNING: do not try to insert a Rule to a styleSheet you are
  304. // currently iterating on, otherwise the browser will be stuck
  305. // in a infinite loop…
  306. for (const mediaRule of mediaRules) {
  307. styleSheet.insertRule(mediaRule.cssText)
  308. hasDarkRules = true
  309. }
  310. }
  311. if (hasDarkRules) {
  312. loadThemeForm('#theme-selector')
  313. }
  314. })
  315. </script>
  316. </body>
  317. </html>