Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
  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. Responsabilité
  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="Il n’y a pas vraiment de conclusion à tout ça. Nous avons été témoins, par le petit bout de la lorgnette, du tout début de cette histoire ; nous avons imaginé un instant avoir l’opportunité, ou le devoir, d’y faire quelque chose. Finalement, nous n’avons jamais vraiment donné notre avis. 🤷">
  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>Responsabilité</h1>
  136. <p>Le <time datetime="2024-02-22">22 février 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/02/21/"
  143. title="Publication précédente : Cinéma">← 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/02/23/"
  150. title="Publication suivante : Préparatifs">Suivant →</a>
  151. </p>
  152. </nav>
  153. <blockquote>
  154. <p>Il n’y a pas vraiment de conclusion à tout ça. Nous avons été témoins, par le petit bout de la lorgnette, du tout début de cette histoire&#8239;; nous avons imaginé un instant <mark>avoir l’opportunité, ou le devoir,</mark> d’y faire quelque chose. Finalement, nous n’avons jamais vraiment donné notre&nbsp;avis.&nbsp;🤷</p>
  155. <p><cite><em><a data-link-domain="codeursenliberte.fr" href="https://www.codeursenliberte.fr/blog/tous_anti_covid/" hreflang="fr"
  156. title="Consultation de l’article">TousAntiCovid&nbsp;: vu depuis Codeureuses en Liberté</a>
  157. <a href="/david/cache/2024/ddc3ee3603be2702cef745c180b87776/" hreflang="fr"
  158. data-tippy data-description="TousAntiCovid a refait récemment l’actualité sur les montants de l’hébergement et les modalités d’attribution du marché."
  159. data-source="https://www.codeursenliberte.fr/blog/tous_anti_covid/"
  160. data-date="2024-02-22"
  161. data-favicon="https://www.codeursenliberte.fr/favicon.png"
  162. data-domain="codeursenliberte.fr"
  163. ><svg xmlns="http://www.w3.org/2000/svg"
  164. width="24" height="24" viewBox="0 0 24 24" fill="none"
  165. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  166. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  167. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  168. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  169. </svg>
  170. <span class="sr-only">[archive]</span></a></em></cite></p>
  171. </blockquote>
  172. <p>Je me souviens vaguement de certaines discussions à ce sujet. D’un côté l’orgueil de penser que l’on pouvait faire mieux, de l’autre la culpabilité de pouvoir être associé à un tel projet. Et au milieu, une épidémie et le sentiment de pouvoir faire des choses avec nos compétences et notre position au sein de l’État français. Un mois plus tard, je m’embarquais dans <a href="/david/2020/05/26/">une autre aventure</a>, plus proche de mon&nbsp;style.</p>
  173. <p>Deux années, 23&nbsp;millions de visiteur·euses uniques et 60&nbsp;millions de pages vues plus tard, j’ai l’impression d’avoir été utile à mon échelle. Merci à la D<a data-link-domain="ronan.amicel.net" href="https://ronan.amicel.net/">R</a><a data-link-domain="ut7.fr" href="https://www.ut7.fr/">R</a>u<a data-link-domain="maiwann.net" href="https://www.maiwann.net/">M</a><a data-link-domain="fr.linkedin.com" href="https://fr.linkedin.com/in/m%C3%A9lodiedahi">M</a> team pour cette&nbsp;période.</p>
  174. <a href="#hr-84" title="Lien vers cette section de la page"><hr id="hr-84" /></a>
  175. <blockquote lang="en">
  176. <p>A custom element implementation of the Stack is provided for&nbsp;download.</p>
  177. <p><cite><em><a data-link-domain="every-layout.dev" href="https://every-layout.dev/layouts/stack/#the-component" hreflang="en"
  178. title="Consultation de l’article (anglais)">The Stack: Every Layout</a>
  179. <a href="/david/cache/2024/6b2b8e2559a07b8d66dac842017b2619/" hreflang="en"
  180. data-tippy data-description="A composable CSS layout primitive."
  181. data-source="https://every-layout.dev/layouts/stack/#the-component"
  182. data-date="2024-02-22"
  183. data-favicon="https://every-layout.dev/images/favicon.png"
  184. data-domain="every-layout.dev"
  185. ><svg xmlns="http://www.w3.org/2000/svg"
  186. width="24" height="24" viewBox="0 0 24 24" fill="none"
  187. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  188. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  189. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  190. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  191. </svg>
  192. <span class="sr-only">[archive]</span></a></em></cite></p>
  193. </blockquote>
  194. <p>Utiliser des <em>Web Components</em> pour appliquer un style, je n’y avais pas encore&nbsp;songé.</p>
  195. <a href="#hr-85" title="Lien vers cette section de la page"><hr id="hr-85" /></a>
  196. <p>Hier soir, j’ai regardé <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/The_Deepest_Breath">The Deepest Breath</a>. J’ai mal dormi. D’autant que, plus tôt dans la journée, on m’avait transmis <a data-link-domain="youtube.com" href="https://www.youtube.com/watch?v=LFLl9q-bEgk">ce retour d’expérience</a>, flippant (et discutable) à plus d’un&nbsp;titre.</p>
  197. <p>La récupération de ma cheville suit son cours, ça va être long, il manque du muscle. Je me sens suffisamment en confiance pour tenter une sortie hivernale en camping cette fin de semaine, on va voir ce que ça donne. Il va faire <q lang="fr_CA">frête</q> et ça laisse peu de place aux&nbsp;incapacités…</p>
  198. <nav>
  199. <p>
  200. <a href="/david/2024/decision/"
  201. title="Liste de tous les articles 2024 associés à cette étiquette"
  202. rel="tag">#décision</a>
  203. <a href="/david/2024/experience/"
  204. title="Liste de tous les articles 2024 associés à cette étiquette"
  205. rel="tag">#expérience</a>
  206. <a href="/david/2024/partage/"
  207. title="Liste de tous les articles 2024 associés à cette étiquette"
  208. rel="tag">#partage</a>
  209. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  210. </p>
  211. </nav>
  212. <nav>
  213. <p>
  214. <a rel="prev"
  215. href="/david/2024/02/21/"
  216. title="Publication précédente : Cinéma">← Précédent</a> •
  217. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  218. • <a rel="next"
  219. href="/david/2024/02/23/"
  220. title="Publication suivante : Préparatifs">Suivant →</a>
  221. </p>
  222. </nav>
  223. <form action="/david/recherche/" method="get">
  224. <fieldset>
  225. <legend>Recherche</legend>
  226. <label for="input-search">Termes de votre recherche :</label>
  227. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  228. <input type="submit" value="Chercher">
  229. <p id="indexation-infos">
  230. <small>
  231. Seuls les contenus de ces 8 dernières années sont indexés.
  232. </small>
  233. </p>
  234. </fieldset>
  235. </form>
  236. <aside>
  237. <theme-toggle></theme-toggle>
  238. </aside>
  239. </article>
  240. <hr>
  241. <footer>
  242. <p>
  243. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  244. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  245. <a href="http://larlet.com"
  246. title="Go to my English profile"
  247. data-instant>Pro</a>
  248. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  249. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  250. </p>
  251. <template id="theme-selector">
  252. <form>
  253. <style type="text/css">
  254. fieldset div {
  255. text-align: center;
  256. }
  257. </style>
  258. <fieldset>
  259. <legend>Thème</legend>
  260. <div>
  261. <label>
  262. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  263. Auto
  264. </label>
  265. <label>
  266. <input type="radio" value="dark" name="chosen-color-scheme">
  267. Foncé
  268. </label>
  269. <label>
  270. <input type="radio" value="light" name="chosen-color-scheme">
  271. Clair
  272. </label>
  273. </div>
  274. </fieldset>
  275. </form>
  276. </template>
  277. </footer>
  278. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  279. <script>
  280. class ThemeToggle extends HTMLElement {
  281. constructor() {
  282. super()
  283. const themeSelectorTemplate = document.querySelector('#theme-selector')
  284. const form = themeSelectorTemplate.content.firstElementChild
  285. this.attachShadow({ mode: 'open' })
  286. this.shadowRoot.appendChild(form.cloneNode(true))
  287. }
  288. connectedCallback() {
  289. const form = this.shadowRoot.querySelector('form')
  290. form.addEventListener('change', (e) => {
  291. const chosenColorScheme = e.target.value
  292. localStorage.setItem('theme', chosenColorScheme)
  293. toggleTheme(chosenColorScheme)
  294. })
  295. const selectedTheme = localStorage.getItem('theme')
  296. if (selectedTheme && selectedTheme !== 'undefined') {
  297. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  298. }
  299. }
  300. }
  301. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  302. window.addEventListener('load', () => {
  303. let colorsLayer = undefined
  304. let hasDarkRules = false
  305. for (const styleSheet of Array.from(document.styleSheets)) {
  306. let mediaRules = []
  307. for (const layerRule of styleSheet.cssRules) {
  308. if (!(layerRule instanceof CSSLayerBlockRule)) {
  309. continue
  310. }
  311. if (layerRule.name === 'colors') {
  312. colorsLayer = layerRule
  313. }
  314. for (const cssRule of layerRule.cssRules) {
  315. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  316. continue
  317. }
  318. // WARNING: Safari does not have/supports `conditionText`.
  319. if (cssRule.conditionText) {
  320. if (cssRule.conditionText !== prefersColorSchemeDark) {
  321. continue
  322. }
  323. } else {
  324. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  325. continue
  326. }
  327. }
  328. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  329. }
  330. }
  331. // WARNING: do not try to insert a Rule to a styleSheet you are
  332. // currently iterating on, otherwise the browser will be stuck
  333. // in a infinite loop…
  334. for (const mediaRule of mediaRules) {
  335. // Safari requires the `0` second parameter (even if default).
  336. colorsLayer.insertRule(mediaRule.cssText, 0)
  337. hasDarkRules = true
  338. }
  339. }
  340. if (hasDarkRules) {
  341. if ('customElements' in window && !customElements.get('theme-toggle')) {
  342. customElements.define('theme-toggle', ThemeToggle)
  343. }
  344. }
  345. })
  346. </script>
  347. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  348. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  349. <script>
  350. tippy('[data-tippy]', {
  351. content(reference) {
  352. reference.addEventListener('click', (e) => e.preventDefault())
  353. return `
  354. <h3 lang="fr">
  355. <img src="${reference.dataset.favicon}" loading="lazy">
  356. <a href="${reference.dataset.source}"
  357. >Article sur ${reference.dataset.domain}</a></h3>
  358. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  359. <div class="tippy-links" lang="fr">
  360. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  361. </div>
  362. `
  363. },
  364. allowHTML: true,
  365. interactive: true,
  366. delay: [150, 700],
  367. hideOnClick: false
  368. })
  369. </script>
  370. <script type="module">
  371. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  372. const markObserver = new IntersectionObserver((entries, observer) => {
  373. const computedStyle = getComputedStyle(document.documentElement)
  374. const markBackground = computedStyle.getPropertyValue('--mark-background')
  375. for (const entry of entries) {
  376. if (entry.intersectionRatio === 0) continue
  377. const markElement = entry.target
  378. markElement.style.backgroundColor = 'inherit'
  379. const annotation = annotate(
  380. markElement, {
  381. type: 'highlight',
  382. multiline: true,
  383. color: markBackground,
  384. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  385. animate: false
  386. }
  387. )
  388. annotation.show()
  389. observer.unobserve(markElement)
  390. }
  391. }, {threshold: 1.0})
  392. for (const markElement of document.querySelectorAll('mark')) {
  393. markObserver.observe(markElement)
  394. }
  395. </script>
  396. </body>
  397. </html>