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

index.html 19KB

10ヶ月前
10ヶ月前
8ヶ月前
10ヶ月前
10ヶ月前
9ヶ月前
10ヶ月前
9ヶ月前
10ヶ月前
10ヶ月前
8ヶ月前
10ヶ月前
10ヶ月前
9ヶ月前
10ヶ月前
9ヶ月前
10ヶ月前
10ヶ月前
8ヶ月前
10ヶ月前
10ヶ月前
9ヶ月前
9ヶ月前
9ヶ月前
8ヶ月前
8ヶ月前
8ヶ月前
8ヶ月前
8ヶ月前
8ヶ月前
8ヶ月前
9ヶ月前
10ヶ月前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  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. Cargo
  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="I think the actual harm of signing git commits is to perpetuate an engineering culture of unquestioningly cargo-culting sophisticated and complex tools like cryptographic signatures into new contexts where they have no use.">
  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>Cargo</h1>
  138. <p>Le <time datetime="2024-01-26">26 janvier 2024</time></p>
  139. </hgroup>
  140. </header>
  141. <nav>
  142. <p>
  143. <a rel="prev"
  144. href="/david/2024/01/25/"
  145. title="Publication précédente : Stratégie">← 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/01/27/"
  152. title="Publication suivante : Jour 1">Suivant →</a>
  153. </p>
  154. </nav>
  155. <blockquote lang="en">
  156. <p>I think the actual harm of signing git commits is to perpetuate an engineering culture of unquestioningly cargo-culting sophisticated and complex tools like cryptographic signatures into new contexts where they have no&nbsp;use.</p>
  157. <p>Just from a baseline utilitarian philosophical perspective, for a given action A, all else being equal, it’s always better not to do A, because taking an action always has some non-zero opportunity cost even if it is just the time taken to do it. Epsilon cost and zero benefit is still a net harm. This is even more true in the context of a complex system. Any action taken in response to a rule in a system is going to interact with all the other rules in that system. You have to pay complexity-rent on every new rule. <mark>So an apparently-useless embellishment like signing commits can have potentially far-reaching consequences in the&nbsp;future.</mark></p>
  158. <p><cite><em><a data-link-domain="blog.glyph.im" href="https://blog.glyph.im/2024/01/unsigned-commits.html" hreflang="en"
  159. title="Consultation de l’article (anglais)">Unsigned Commits</a>
  160. <a href="/david/cache/2024/ce5fdc61fd66cdb9ce548fb543eba986/" hreflang="en"
  161. data-tippy data-description="Deciphering Glyph, the blog of Glyph Lefkowitz."
  162. data-source="https://blog.glyph.im/2024/01/unsigned-commits.html"
  163. data-date="2024-01-25"
  164. data-favicon="https://blog.glyph.im/images/favicon.ico"
  165. data-domain="blog.glyph.im"
  166. ><svg xmlns="http://www.w3.org/2000/svg"
  167. width="24" height="24" viewBox="0 0 24 24" fill="none"
  168. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  169. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  170. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  171. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  172. </svg>
  173. <span class="sr-only">[archive]</span></a></em></cite></p>
  174. </blockquote>
  175. <p>J’avoue avoir sauté sur l’occasion lorsque j’en ai eu la possibilité avec <a data-link-domain="git-tower.com" href="https://www.git-tower.com/help/guides/integration/gpg/mac">mon client git</a> pour avoir le badge vert sur Microsoft GitHub et Gitlab sans trop me poser de questions. C’était peut-être une erreur et je vais faire mûrir ma réflexion maintenant qu’on m’a mis le nez&nbsp;dedans.</p>
  176. <p>Entre <em>refus de parvenir</em> et auto-défense&nbsp;numérique.</p>
  177. <a href="#hr-50" title="Lien vers cette section de la page"><hr id="hr-50" /></a>
  178. <blockquote>
  179. <p>Cette lutte ne créera pas un mouvement de masse…<br />
  180. Mais elle est un ingrédient, parmi de nombreuses autres luttes territoriales, qui toutes façonnent ces mêmes possibilités affectives…<br />
  181. Se sentir coïncider non pas avec soi-même mais avec un milieu de vie…<br />
  182. Se sentir maillé à un vaste collectif d’humains et de non-humains…<br />
  183. Des affects, qui constituent la nécessaire force motrice du mouvement que nous espérons voir&nbsp;croître.</p>
  184. <p><cite><em><a data-link-domain="puntish.blogspot.com" href="http://puntish.blogspot.com/2024/01/defendre-le-glacier-de-la-grave.html">Défendre le glacier de La&nbsp;Grave</a></em></cite></p>
  185. </blockquote>
  186. <p>La justesse d’Alessandro Pignocchi et les couleurs de ses&nbsp;aquarelles&nbsp;💚.</p>
  187. <a href="#hr-51" title="Lien vers cette section de la page"><hr id="hr-51" /></a>
  188. <blockquote lang="en">
  189. <p>Every time I have told someone “I want to replace PDF“, the statement has been met with extreme skepticism. Hopefully this document has convinced you that <mark>HTML-via-EPUB could potentially be a viable</mark> and desirable document format for the&nbsp;future.</p>
  190. <p><cite><em><a data-link-domain="willcrichton.net" href="https://willcrichton.net/notes/portable-epubs/" hreflang="en"
  191. title="Consultation de l’article (anglais)">Portable EPUBs</a>
  192. <a href="/david/cache/2024/ffaf50bf5d5e4cf870a618b518ee5ba7/" hreflang="en"
  193. data-tippy data-description="A proposal for the next generation of portable documents."
  194. data-source="https://willcrichton.net/notes/portable-epubs/"
  195. data-date="2024-01-25"
  196. data-favicon=""
  197. data-domain="willcrichton.net"
  198. ><svg xmlns="http://www.w3.org/2000/svg"
  199. width="24" height="24" viewBox="0 0 24 24" fill="none"
  200. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  201. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  202. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  203. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  204. </svg>
  205. <span class="sr-only">[archive]</span></a></em></cite></p>
  206. </blockquote>
  207. <p>Superbe initiative qui rappelle cruellement ce <a data-link-domain="xkcd.com" href="https://xkcd.com/927/">célèbre XKCD</a> mais qui m’est franchement bien plus utilisable qu’un PDF, quel que soit le lecteur… à part pour en récupérer la source avec mon extracteur maison. Cela me fait découvrir <a data-link-domain="nota-lang.org" href="https://nota-lang.org/">Nota</a> au&nbsp;passage.</p>
  208. <p>Un simple individu peut-il faire bouger des choses dans le&nbsp;domaine&#8239;?</p>
  209. <a href="#hr-52" title="Lien vers cette section de la page"><hr id="hr-52" /></a>
  210. <blockquote>
  211. <p>Les sites et outils numériques que je&nbsp;propose</p>
  212. <p><cite><em><a data-link-domain="eyssette.github.io" href="https://eyssette.github.io/">Cédric&nbsp;Eyssette</a></em></cite></p>
  213. </blockquote>
  214. <p>Beaucoup de belles et frugales choses (autour de markdown) à explorer sur cet&nbsp;espace.</p>
  215. <nav>
  216. <p>
  217. <a href="/david/2024/gratitude/"
  218. title="Liste de tous les articles 2024 associés à cette étiquette"
  219. rel="tag">#gratitude</a>
  220. <a href="/david/2024/partage/"
  221. title="Liste de tous les articles 2024 associés à cette étiquette"
  222. rel="tag">#partage</a>
  223. <a href="/david/2024/psychologie/"
  224. title="Liste de tous les articles 2024 associés à cette étiquette"
  225. rel="tag">#psychologie</a>
  226. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  227. </p>
  228. </nav>
  229. <nav>
  230. <p>
  231. <a rel="prev"
  232. href="/david/2024/01/25/"
  233. title="Publication précédente : Stratégie">← Précédent</a> •
  234. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  235. • <a rel="next"
  236. href="/david/2024/01/27/"
  237. title="Publication suivante : Jour 1">Suivant →</a>
  238. </p>
  239. </nav>
  240. <form action="/david/recherche/" method="get">
  241. <fieldset>
  242. <legend>Recherche</legend>
  243. <label for="input-search">Termes de votre recherche :</label>
  244. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  245. <input type="submit" value="Chercher">
  246. <p id="indexation-infos">
  247. <small>
  248. Seuls les contenus de ces 8 dernières années sont indexés.
  249. </small>
  250. </p>
  251. </fieldset>
  252. </form>
  253. <aside>
  254. <theme-toggle></theme-toggle>
  255. </aside>
  256. </article>
  257. <hr>
  258. <footer>
  259. <p>
  260. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  261. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  262. <a href="http://larlet.com"
  263. title="Go to my English profile"
  264. data-instant>Pro</a>
  265. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  266. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  267. </p>
  268. <template id="theme-selector">
  269. <form>
  270. <style type="text/css">
  271. fieldset div {
  272. text-align: center;
  273. }
  274. </style>
  275. <fieldset>
  276. <legend>Thème</legend>
  277. <div>
  278. <label>
  279. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  280. Auto
  281. </label>
  282. <label>
  283. <input type="radio" value="dark" name="chosen-color-scheme">
  284. Foncé
  285. </label>
  286. <label>
  287. <input type="radio" value="light" name="chosen-color-scheme">
  288. Clair
  289. </label>
  290. </div>
  291. </fieldset>
  292. </form>
  293. </template>
  294. </footer>
  295. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  296. <script>
  297. class ThemeToggle extends HTMLElement {
  298. constructor() {
  299. super()
  300. const themeSelectorTemplate = document.querySelector('#theme-selector')
  301. const form = themeSelectorTemplate.content.firstElementChild
  302. this.attachShadow({ mode: 'open' })
  303. this.shadowRoot.appendChild(form.cloneNode(true))
  304. }
  305. connectedCallback() {
  306. const form = this.shadowRoot.querySelector('form')
  307. form.addEventListener('change', (e) => {
  308. const chosenColorScheme = e.target.value
  309. localStorage.setItem('theme', chosenColorScheme)
  310. toggleTheme(chosenColorScheme)
  311. })
  312. const selectedTheme = localStorage.getItem('theme')
  313. if (selectedTheme && selectedTheme !== 'undefined') {
  314. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  315. }
  316. }
  317. }
  318. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  319. window.addEventListener('load', () => {
  320. let colorsLayer = undefined
  321. let hasDarkRules = false
  322. for (const styleSheet of Array.from(document.styleSheets)) {
  323. let mediaRules = []
  324. for (const layerRule of styleSheet.cssRules) {
  325. if (!(layerRule instanceof CSSLayerBlockRule)) {
  326. continue
  327. }
  328. if (layerRule.name === 'colors') {
  329. colorsLayer = layerRule
  330. }
  331. for (const cssRule of layerRule.cssRules) {
  332. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  333. continue
  334. }
  335. // WARNING: Safari does not have/supports `conditionText`.
  336. if (cssRule.conditionText) {
  337. if (cssRule.conditionText !== prefersColorSchemeDark) {
  338. continue
  339. }
  340. } else {
  341. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  342. continue
  343. }
  344. }
  345. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  346. }
  347. }
  348. // WARNING: do not try to insert a Rule to a styleSheet you are
  349. // currently iterating on, otherwise the browser will be stuck
  350. // in a infinite loop…
  351. for (const mediaRule of mediaRules) {
  352. // Safari requires the `0` second parameter (even if default).
  353. colorsLayer.insertRule(mediaRule.cssText, 0)
  354. hasDarkRules = true
  355. }
  356. }
  357. if (hasDarkRules) {
  358. if ('customElements' in window && !customElements.get('theme-toggle')) {
  359. customElements.define('theme-toggle', ThemeToggle)
  360. }
  361. }
  362. })
  363. </script>
  364. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  365. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  366. <script>
  367. tippy('[data-tippy]', {
  368. content(reference) {
  369. reference.addEventListener('click', (e) => e.preventDefault())
  370. return `
  371. <h3 lang="fr">
  372. <img src="${reference.dataset.favicon}" loading="lazy">
  373. <a href="${reference.dataset.source}"
  374. >Article sur ${reference.dataset.domain}</a></h3>
  375. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  376. <div class="tippy-links" lang="fr">
  377. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  378. </div>
  379. `
  380. },
  381. allowHTML: true,
  382. interactive: true,
  383. delay: [150, 700],
  384. hideOnClick: false
  385. })
  386. </script>
  387. <script type="module">
  388. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  389. const markObserver = new IntersectionObserver((entries, observer) => {
  390. const computedStyle = getComputedStyle(document.documentElement)
  391. const markBackground = computedStyle.getPropertyValue('--mark-background')
  392. for (const entry of entries) {
  393. if (entry.intersectionRatio === 0) continue
  394. const markElement = entry.target
  395. markElement.style.backgroundColor = 'inherit'
  396. const annotation = annotate(
  397. markElement, {
  398. type: 'highlight',
  399. multiline: true,
  400. color: markBackground,
  401. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  402. animate: false
  403. }
  404. )
  405. annotation.show()
  406. observer.unobserve(markElement)
  407. }
  408. }, {threshold: 1.0})
  409. for (const markElement of document.querySelectorAll('mark')) {
  410. markObserver.observe(markElement)
  411. }
  412. </script>
  413. </body>
  414. </html>