Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  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. <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.">
  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_2024-02-03.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_b_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/century_supra_ot_b_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/century_supra_ot_b_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. <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 rel="prev"
  189. href="/david/2024/01/03/"
  190. title="Publication précédente : Appariement">← Précédent</a> •
  191. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  192. • <a rel="next"
  193. href="/david/2024/01/05/"
  194. title="Publication suivante : Vocabulaire">Suivant →</a>
  195. </p>
  196. </nav>
  197. <form action="/david/recherche/" method="get">
  198. <fieldset>
  199. <legend>Recherche</legend>
  200. <label for="input-search">Termes de votre recherche :</label>
  201. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  202. <input type="submit" value="Chercher">
  203. <p id="indexation-infos">
  204. <small>
  205. Seuls les contenus de ces 8 dernières années sont indexés.
  206. </small>
  207. </p>
  208. </fieldset>
  209. </form>
  210. <aside>
  211. <theme-toggle></theme-toggle>
  212. </aside>
  213. </article>
  214. <hr>
  215. <footer>
  216. <p>
  217. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  218. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  219. <a href="http://larlet.com"
  220. title="Go to my English profile"
  221. data-instant>Pro</a>
  222. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  223. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  224. </p>
  225. <template id="theme-selector">
  226. <form>
  227. <style type="text/css">
  228. fieldset div {
  229. text-align: center;
  230. }
  231. </style>
  232. <fieldset>
  233. <legend>Thème</legend>
  234. <div>
  235. <label>
  236. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  237. Auto
  238. </label>
  239. <label>
  240. <input type="radio" value="dark" name="chosen-color-scheme">
  241. Foncé
  242. </label>
  243. <label>
  244. <input type="radio" value="light" name="chosen-color-scheme">
  245. Clair
  246. </label>
  247. </div>
  248. </fieldset>
  249. </form>
  250. </template>
  251. </footer>
  252. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  253. <script>
  254. class ThemeToggle extends HTMLElement {
  255. constructor() {
  256. super()
  257. const themeSelectorTemplate = document.querySelector('#theme-selector')
  258. const form = themeSelectorTemplate.content.firstElementChild
  259. this.attachShadow({ mode: 'open' })
  260. this.shadowRoot.appendChild(form.cloneNode(true))
  261. }
  262. connectedCallback() {
  263. const form = this.shadowRoot.querySelector('form')
  264. form.addEventListener('change', (e) => {
  265. const chosenColorScheme = e.target.value
  266. localStorage.setItem('theme', chosenColorScheme)
  267. toggleTheme(chosenColorScheme)
  268. })
  269. const selectedTheme = localStorage.getItem('theme')
  270. if (selectedTheme && selectedTheme !== 'undefined') {
  271. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  272. }
  273. }
  274. }
  275. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  276. window.addEventListener('load', () => {
  277. let colorsLayer = undefined
  278. let hasDarkRules = false
  279. for (const styleSheet of Array.from(document.styleSheets)) {
  280. let mediaRules = []
  281. for (const layerRule of styleSheet.cssRules) {
  282. if (!(layerRule instanceof CSSLayerBlockRule)) {
  283. continue
  284. }
  285. if (layerRule.name === 'colors') {
  286. colorsLayer = layerRule
  287. }
  288. for (const cssRule of layerRule.cssRules) {
  289. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  290. continue
  291. }
  292. // WARNING: Safari does not have/supports `conditionText`.
  293. if (cssRule.conditionText) {
  294. if (cssRule.conditionText !== prefersColorSchemeDark) {
  295. continue
  296. }
  297. } else {
  298. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  299. continue
  300. }
  301. }
  302. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  303. }
  304. }
  305. // WARNING: do not try to insert a Rule to a styleSheet you are
  306. // currently iterating on, otherwise the browser will be stuck
  307. // in a infinite loop…
  308. for (const mediaRule of mediaRules) {
  309. // Safari requires the `0` second parameter (even if default).
  310. colorsLayer.insertRule(mediaRule.cssText, 0)
  311. hasDarkRules = true
  312. }
  313. }
  314. if (hasDarkRules) {
  315. if ('customElements' in window && !customElements.get('theme-toggle')) {
  316. customElements.define('theme-toggle', ThemeToggle)
  317. }
  318. }
  319. })
  320. </script>
  321. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  322. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  323. <script>
  324. tippy('[data-tippy]', {
  325. content(reference) {
  326. reference.addEventListener('click', (e) => e.preventDefault())
  327. return `
  328. <h3 lang="fr">
  329. <img src="${reference.dataset.favicon}" loading="lazy">
  330. <a href="${reference.dataset.source}"
  331. >Article sur ${reference.dataset.domain}</a></h3>
  332. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  333. <div class="tippy-links" lang="fr">
  334. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  335. </div>
  336. `
  337. },
  338. allowHTML: true,
  339. interactive: true,
  340. delay: [150, 700],
  341. hideOnClick: false
  342. })
  343. </script>
  344. </body>
  345. </html>