Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  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. Repos
  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="Je m’engouffre, sans trop réfléchir et avant qu’il ne file, dans cet élan d’écriture que j’espérais tout en refusant de m’en faire une contrainte. L’Inde m’offre l’imprévu, la nouveauté, la stimulation sans doute, que je n’avais plus en France pour pouvoir écrire autre chose que de la fiction. Ce pays est un roman en soi — je peux revenir avec désir à cette réalité-là. J’en suis aussi excitée que prudente, je n’ai aucune idée de ce que cela va donner ni si ça aura le moindre intérêt. Mais je sais déjà que je n’évoquerai ni les Rafale, ni le nucléaire, ni Modi, ces tue-l’amour absolus.">
  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. <style type="text/css">
  106. .tippy-content {
  107. min-width: 280px;
  108. padding: .5rem;
  109. font-size: calc(var(--fluid-0) * 0.8);
  110. font-family: var(--labor-font);
  111. letter-spacing: initial;
  112. text-align: left;
  113. }
  114. .tippy-content h3 {
  115. margin-top: 0;
  116. }
  117. .tippy-content h3 img {
  118. max-width: 2rem;
  119. max-height: 2rem;
  120. display: inline-block;
  121. }
  122. .tippy-content .tippy-links {
  123. display: flex;
  124. justify-content: space-around;
  125. }
  126. .tippy-content a {
  127. padding: .4rem;
  128. color: #F06048;
  129. }
  130. </style>
  131. <body data-instant-intensity="viewport-all">
  132. <article>
  133. <header>
  134. <hgroup>
  135. <h1>Repos</h1>
  136. <p>Le <time datetime="2024-01-04">4 janvier 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/01/03/"
  143. title="Publication précédente : Appariement">← Précédent</a> •
  144. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  145. <a href="/david/recherche/"
  146. title="Aller à la page de recherche"
  147. rel="search" data-no-instant>Recherche</a>
  148. • <a rel="next"
  149. href="/david/2024/01/05/"
  150. title="Publication suivante : Vocabulaire">Suivant →</a>
  151. </p>
  152. </nav>
  153. <blockquote>
  154. <p>Je m’engouffre, sans trop réfléchir et avant qu’il ne file, dans cet élan d’écriture que j’espérais tout en refusant de m’en faire une contrainte. L’Inde m’offre l’imprévu, la nouveauté, la stimulation sans doute, que je n’avais plus en France pour pouvoir écrire autre chose que de la fiction. Ce pays est un roman en soi — je peux revenir avec désir à cette réalité-là. <mark>J’en suis aussi excitée que prudente,</mark> je n’ai aucune idée de ce que cela va donner ni si ça aura le moindre intérêt. Mais je sais déjà que je n’évoquerai ni les Rafale, ni le nucléaire, ni Modi, ces tue-l’amour&nbsp;absolus.</p>
  155. <p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
  156. </blockquote>
  157. <p>Dans un chalet pour quelques jours. Des randonnées à trois générations. Toujours ces questionnements autour de la propriété. Concilier tous les besoins, accepter de changer de vie, ne pas savoir si on serait finalement entourés d’une culture qui ne nous correspond pas (et qui ne nous attire pas non plus). Trouver le bon&nbsp;tempo.</p>
  158. <a href="#hr-6" title="Lien vers cette section de la page"><hr id="hr-6" /></a>
  159. <p>Je me demande s’il serait pertinent <a data-link-domain="blog.stephaniestimac.com" href="https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/" hreflang="en"
  160. title="Consultation de l’article (anglais)">d’utiliser <code>text-wrap</code></a>
  161. <a href="/david/cache/2024/b31ba18e3de1fc479b79f1885043026a/" hreflang="en"
  162. data-tippy data-description="A ruthless look at when to use these two CSS text-wrap values."
  163. data-source="https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/"
  164. data-date="2024-01-07"
  165. data-favicon="https://stephaniestimac.com/imgs/favicon.ico"
  166. data-domain="blog.stephaniestimac.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> sachant que mes titres ne font qu’un seul mot et que je m’occupe déjà des veuves / orphelines typographiques avec <a data-link-domain="git.larlet.fr" href="https://git.larlet.fr/davidbgk/larlet-fr-david/src/branch/master/typography.py">un script Python</a> que l’on a fait avec <a data-link-domain="ronan.amicel.net" href="https://ronan.amicel.net/">Ronan</a> à l’époque <a href="/david/2020/05/26/">de MesConseilsCovid / Covidoudou</a>.</p>
  175. <p>Je tente de rendre les citations explicites car on m’a déjà fait le retour de ne pas tout de suite comprendre une publication qui commence par une citation&nbsp;: <q>Ah je croyais que c’était de toi&#8239;!</q>.</p>
  176. <pre><code>blockquote::before {
  177. content: &quot;citation&quot;;
  178. transform: rotate(-90deg);
  179. position: absolute;
  180. margin-left: -1rem;
  181. margin-top: 3.5rem;
  182. }
  183. </code></pre>
  184. <p>Au passage, autant faire de même pour le code. Des couleurs, de la vie&#8239;! De&nbsp;l’envie.</p>
  185. <p>Note&nbsp;: être développeur d’un produit <em>open-source</em> populaire c’est un boulot à plein temps, pas de vacances pour les notifications /&nbsp;sollicitations.</p>
  186. <nav>
  187. <p>
  188. <a href="/david/2024/decision/"
  189. title="Liste de tous les articles 2024 associés à cette étiquette"
  190. rel="tag">#décision</a>
  191. <a href="/david/2024/parvenir/"
  192. title="Liste de tous les articles 2024 associés à cette étiquette"
  193. rel="tag">#parvenir</a>
  194. <a href="/david/2024/propriete/"
  195. title="Liste de tous les articles 2024 associés à cette étiquette"
  196. rel="tag">#propriété</a>
  197. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  198. </p>
  199. </nav>
  200. <nav>
  201. <p>
  202. <a rel="prev"
  203. href="/david/2024/01/03/"
  204. title="Publication précédente : Appariement">← Précédent</a> •
  205. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  206. • <a rel="next"
  207. href="/david/2024/01/05/"
  208. title="Publication suivante : Vocabulaire">Suivant →</a>
  209. </p>
  210. </nav>
  211. <form action="/david/recherche/" method="get">
  212. <fieldset>
  213. <legend>Recherche</legend>
  214. <label for="input-search">Termes de votre recherche :</label>
  215. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  216. <input type="submit" value="Chercher">
  217. <p id="indexation-infos">
  218. <small>
  219. Seuls les contenus de ces 8 dernières années sont indexés.
  220. </small>
  221. </p>
  222. </fieldset>
  223. </form>
  224. <aside>
  225. <theme-toggle></theme-toggle>
  226. </aside>
  227. </article>
  228. <hr>
  229. <footer>
  230. <p>
  231. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  232. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  233. <a href="http://larlet.com"
  234. title="Go to my English profile"
  235. data-instant>Pro</a>
  236. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  237. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  238. </p>
  239. <template id="theme-selector">
  240. <form>
  241. <style type="text/css">
  242. fieldset div {
  243. text-align: center;
  244. }
  245. </style>
  246. <fieldset>
  247. <legend>Thème</legend>
  248. <div>
  249. <label>
  250. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  251. Auto
  252. </label>
  253. <label>
  254. <input type="radio" value="dark" name="chosen-color-scheme">
  255. Foncé
  256. </label>
  257. <label>
  258. <input type="radio" value="light" name="chosen-color-scheme">
  259. Clair
  260. </label>
  261. </div>
  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. class ThemeToggle extends HTMLElement {
  269. constructor() {
  270. super()
  271. const themeSelectorTemplate = document.querySelector('#theme-selector')
  272. const form = themeSelectorTemplate.content.firstElementChild
  273. this.attachShadow({ mode: 'open' })
  274. this.shadowRoot.appendChild(form.cloneNode(true))
  275. }
  276. connectedCallback() {
  277. const form = this.shadowRoot.querySelector('form')
  278. form.addEventListener('change', (e) => {
  279. const chosenColorScheme = e.target.value
  280. localStorage.setItem('theme', chosenColorScheme)
  281. toggleTheme(chosenColorScheme)
  282. })
  283. const selectedTheme = localStorage.getItem('theme')
  284. if (selectedTheme && selectedTheme !== 'undefined') {
  285. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  286. }
  287. }
  288. }
  289. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  290. window.addEventListener('load', () => {
  291. let colorsLayer = undefined
  292. let hasDarkRules = false
  293. for (const styleSheet of Array.from(document.styleSheets)) {
  294. let mediaRules = []
  295. for (const layerRule of styleSheet.cssRules) {
  296. if (!(layerRule instanceof CSSLayerBlockRule)) {
  297. continue
  298. }
  299. if (layerRule.name === 'colors') {
  300. colorsLayer = layerRule
  301. }
  302. for (const cssRule of layerRule.cssRules) {
  303. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  304. continue
  305. }
  306. // WARNING: Safari does not have/supports `conditionText`.
  307. if (cssRule.conditionText) {
  308. if (cssRule.conditionText !== prefersColorSchemeDark) {
  309. continue
  310. }
  311. } else {
  312. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  313. continue
  314. }
  315. }
  316. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  317. }
  318. }
  319. // WARNING: do not try to insert a Rule to a styleSheet you are
  320. // currently iterating on, otherwise the browser will be stuck
  321. // in a infinite loop…
  322. for (const mediaRule of mediaRules) {
  323. // Safari requires the `0` second parameter (even if default).
  324. colorsLayer.insertRule(mediaRule.cssText, 0)
  325. hasDarkRules = true
  326. }
  327. }
  328. if (hasDarkRules) {
  329. if ('customElements' in window && !customElements.get('theme-toggle')) {
  330. customElements.define('theme-toggle', ThemeToggle)
  331. }
  332. }
  333. })
  334. </script>
  335. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  336. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  337. <script>
  338. tippy('[data-tippy]', {
  339. content(reference) {
  340. reference.addEventListener('click', (e) => e.preventDefault())
  341. return `
  342. <h3 lang="fr">
  343. <img src="${reference.dataset.favicon}" loading="lazy">
  344. <a href="${reference.dataset.source}"
  345. >Article sur ${reference.dataset.domain}</a></h3>
  346. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  347. <div class="tippy-links" lang="fr">
  348. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  349. </div>
  350. `
  351. },
  352. allowHTML: true,
  353. interactive: true,
  354. delay: [150, 700],
  355. hideOnClick: false
  356. })
  357. </script>
  358. <script type="module">
  359. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  360. const markObserver = new IntersectionObserver((entries, observer) => {
  361. const computedStyle = getComputedStyle(document.documentElement)
  362. const markBackground = computedStyle.getPropertyValue('--mark-background')
  363. for (const entry of entries) {
  364. if (entry.intersectionRatio === 0) continue
  365. const markElement = entry.target
  366. markElement.style.backgroundColor = 'inherit'
  367. const annotation = annotate(
  368. markElement, {
  369. type: 'highlight',
  370. multiline: true,
  371. color: markBackground,
  372. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  373. animate: false
  374. }
  375. )
  376. annotation.show()
  377. observer.unobserve(markElement)
  378. }
  379. }, {threshold: 1.0})
  380. for (const markElement of document.querySelectorAll('mark')) {
  381. markObserver.observe(markElement)
  382. }
  383. </script>
  384. </body>
  385. </html>