Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

index.html 21KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468
  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. Dons
  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="Plus que 3 jours pour décider de l’usage de vos #impôts en donnant à des #assos !">
  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>Dons</h1>
  136. <p>Le <time datetime="2024-01-07">7 janvier 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/01/06/"
  143. title="Publication précédente : Objectif">← 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/08/"
  150. title="Publication suivante : Liens">Suivant →</a>
  151. </p>
  152. </nav>
  153. <blockquote>
  154. <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
  155. <p>Vu le succès de <a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
  156. <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark>&nbsp;[…]</p>
  157. <p><cite><a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
  158. </blockquote>
  159. <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&nbsp;personnel.</p>
  160. <p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a data-link-domain="saq.com" href="https://www.saq.com/">SAQ</a>.</p>
  161. <a href="#hr-13" title="Lien vers cette section de la page"><hr id="hr-13" /></a>
  162. <p>Pensée (genrée) du jour&nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&nbsp;cuisine.</p>
  163. <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&nbsp;déguisée.</p>
  164. <a href="#hr-14" title="Lien vers cette section de la page"><hr id="hr-14" /></a>
  165. <p>Masto comme un <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
  166. <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a data-link-domain="ricaud.me" href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
  167. <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de&nbsp;thème&nbsp;😅.</p>
  168. <p><em>Bientôt 500&nbsp;lignes de&nbsp;CSS.</em></p>
  169. <a href="#hr-15" title="Lien vers cette section de la page"><hr id="hr-15" /></a>
  170. <blockquote>
  171. <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p>
  172. <p>Je suis&nbsp;impressionné.</p>
  173. <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/06/ebauche" hreflang="fr"
  174. title="Consultation de l’article">plaisir d’ébauche</a>
  175. <a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" hreflang="fr"
  176. data-tippy data-description=""
  177. data-source="https://www.la-grange.net/2024/01/06/ebauche"
  178. data-date="2024-01-07"
  179. data-favicon="https://www.la-grange.net/favicon.ico"
  180. data-domain="la-grange.net"
  181. ><svg xmlns="http://www.w3.org/2000/svg"
  182. width="24" height="24" viewBox="0 0 24 24" fill="none"
  183. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  184. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  185. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  186. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  187. </svg>
  188. <span class="sr-only">[archive]</span></a></em></cite></p>
  189. </blockquote>
  190. <p>Ce&nbsp;titre&nbsp;:)</p>
  191. <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2&nbsp;minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3&nbsp;ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses&nbsp;inspirantes.</p>
  192. <a href="#hr-16" title="Lien vers cette section de la page"><hr id="hr-16" /></a>
  193. <blockquote lang="en">
  194. <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any&nbsp;more.</mark></p>
  195. <p>We are primarily in the business of search and we’d like to stay focused on&nbsp;that.</p>
  196. <p><cite><em><a data-link-domain="kagifeedback.org" href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6" hreflang="en"
  197. title="Consultation de l’article (anglais)">Vlad (admin Kagi) répondant</a>
  198. <a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" hreflang="en"
  199. data-tippy data-description="Brave, as you know, is led by Brendan Eich. s homophobia is so disgusting that he was forced to resign as the leader..."
  200. data-source="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6"
  201. data-date="2024-01-07"
  202. data-favicon="https://kagifeedback.org/assets/favicon-bmwk4ltf.png"
  203. data-domain="kagifeedback.org"
  204. ><svg xmlns="http://www.w3.org/2000/svg"
  205. width="24" height="24" viewBox="0 0 24 24" fill="none"
  206. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  207. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  208. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  209. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  210. </svg>
  211. <span class="sr-only">[archive]</span></a> à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
  212. </blockquote>
  213. <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez&nbsp;terrible.</p>
  214. <p><a data-link-domain="theverge.com" href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy" hreflang="en"
  215. title="Consultation de l’article (anglais)">Pas de politique au travail</a>
  216. <a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" hreflang="en"
  217. data-tippy data-description="Basecamp announced it would ban “societal and political discussions” at work. But the hardest conversations at work were about the company itself. Platformer’s Casey Newton spoke with half a dozen employees about the controversy."
  218. data-source="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy"
  219. data-date="2024-01-07"
  220. data-favicon="https://www.theverge.com/icons/favicon_32x32.png"
  221. data-domain="theverge.com"
  222. ><svg xmlns="http://www.w3.org/2000/svg"
  223. width="24" height="24" viewBox="0 0 24 24" fill="none"
  224. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  225. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  226. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  227. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  228. </svg>
  229. <span class="sr-only">[archive]</span></a> est ma nouvelle&nbsp;cryptonite.</p>
  230. <nav>
  231. <p>
  232. <a href="/david/2024/apprentissage/"
  233. title="Liste de tous les articles 2024 associés à cette étiquette"
  234. rel="tag">#apprentissage</a>
  235. <a href="/david/2024/communaute/"
  236. title="Liste de tous les articles 2024 associés à cette étiquette"
  237. rel="tag">#communauté</a>
  238. <a href="/david/2024/fediverse/"
  239. title="Liste de tous les articles 2024 associés à cette étiquette"
  240. rel="tag">#fédiverse</a>
  241. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  242. </p>
  243. </nav>
  244. <nav>
  245. <p>
  246. <a rel="prev"
  247. href="/david/2024/01/06/"
  248. title="Publication précédente : Objectif">← Précédent</a> •
  249. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  250. • <a rel="next"
  251. href="/david/2024/01/08/"
  252. title="Publication suivante : Liens">Suivant →</a>
  253. </p>
  254. </nav>
  255. <form action="/david/recherche/" method="get">
  256. <fieldset>
  257. <legend>Recherche</legend>
  258. <label for="input-search">Termes de votre recherche :</label>
  259. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  260. <input type="submit" value="Chercher">
  261. <p id="indexation-infos">
  262. <small>
  263. Seuls les contenus de ces 8 dernières années sont indexés.
  264. </small>
  265. </p>
  266. </fieldset>
  267. </form>
  268. <aside>
  269. <theme-toggle></theme-toggle>
  270. </aside>
  271. </article>
  272. <hr>
  273. <footer>
  274. <p>
  275. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  276. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  277. <a href="http://larlet.com"
  278. title="Go to my English profile"
  279. data-instant>Pro</a>
  280. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  281. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  282. </p>
  283. <template id="theme-selector">
  284. <form>
  285. <style type="text/css">
  286. fieldset div {
  287. text-align: center;
  288. }
  289. </style>
  290. <fieldset>
  291. <legend>Thème</legend>
  292. <div>
  293. <label>
  294. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  295. Auto
  296. </label>
  297. <label>
  298. <input type="radio" value="dark" name="chosen-color-scheme">
  299. Foncé
  300. </label>
  301. <label>
  302. <input type="radio" value="light" name="chosen-color-scheme">
  303. Clair
  304. </label>
  305. </div>
  306. </fieldset>
  307. </form>
  308. </template>
  309. </footer>
  310. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  311. <script>
  312. class ThemeToggle extends HTMLElement {
  313. constructor() {
  314. super()
  315. const themeSelectorTemplate = document.querySelector('#theme-selector')
  316. const form = themeSelectorTemplate.content.firstElementChild
  317. this.attachShadow({ mode: 'open' })
  318. this.shadowRoot.appendChild(form.cloneNode(true))
  319. }
  320. connectedCallback() {
  321. const form = this.shadowRoot.querySelector('form')
  322. form.addEventListener('change', (e) => {
  323. const chosenColorScheme = e.target.value
  324. localStorage.setItem('theme', chosenColorScheme)
  325. toggleTheme(chosenColorScheme)
  326. })
  327. const selectedTheme = localStorage.getItem('theme')
  328. if (selectedTheme && selectedTheme !== 'undefined') {
  329. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  330. }
  331. }
  332. }
  333. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  334. window.addEventListener('load', () => {
  335. let colorsLayer = undefined
  336. let hasDarkRules = false
  337. for (const styleSheet of Array.from(document.styleSheets)) {
  338. let mediaRules = []
  339. for (const layerRule of styleSheet.cssRules) {
  340. if (!(layerRule instanceof CSSLayerBlockRule)) {
  341. continue
  342. }
  343. if (layerRule.name === 'colors') {
  344. colorsLayer = layerRule
  345. }
  346. for (const cssRule of layerRule.cssRules) {
  347. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  348. continue
  349. }
  350. // WARNING: Safari does not have/supports `conditionText`.
  351. if (cssRule.conditionText) {
  352. if (cssRule.conditionText !== prefersColorSchemeDark) {
  353. continue
  354. }
  355. } else {
  356. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  357. continue
  358. }
  359. }
  360. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  361. }
  362. }
  363. // WARNING: do not try to insert a Rule to a styleSheet you are
  364. // currently iterating on, otherwise the browser will be stuck
  365. // in a infinite loop…
  366. for (const mediaRule of mediaRules) {
  367. // Safari requires the `0` second parameter (even if default).
  368. colorsLayer.insertRule(mediaRule.cssText, 0)
  369. hasDarkRules = true
  370. }
  371. }
  372. if (hasDarkRules) {
  373. if ('customElements' in window && !customElements.get('theme-toggle')) {
  374. customElements.define('theme-toggle', ThemeToggle)
  375. }
  376. }
  377. })
  378. </script>
  379. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  380. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  381. <script>
  382. tippy('[data-tippy]', {
  383. content(reference) {
  384. reference.addEventListener('click', (e) => e.preventDefault())
  385. return `
  386. <h3 lang="fr">
  387. <img src="${reference.dataset.favicon}" loading="lazy">
  388. <a href="${reference.dataset.source}"
  389. >Article sur ${reference.dataset.domain}</a></h3>
  390. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  391. <div class="tippy-links" lang="fr">
  392. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  393. </div>
  394. `
  395. },
  396. allowHTML: true,
  397. interactive: true,
  398. delay: [150, 700],
  399. hideOnClick: false
  400. })
  401. </script>
  402. <script type="module">
  403. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  404. const markObserver = new IntersectionObserver((entries, observer) => {
  405. const computedStyle = getComputedStyle(document.documentElement)
  406. const markBackground = computedStyle.getPropertyValue('--mark-background')
  407. for (const entry of entries) {
  408. if (entry.intersectionRatio === 0) continue
  409. const markElement = entry.target
  410. markElement.style.backgroundColor = 'inherit'
  411. const annotation = annotate(
  412. markElement, {
  413. type: 'highlight',
  414. multiline: true,
  415. color: markBackground,
  416. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  417. animate: false
  418. }
  419. )
  420. annotation.show()
  421. observer.unobserve(markElement)
  422. }
  423. }, {threshold: 1.0})
  424. for (const markElement of document.querySelectorAll('mark')) {
  425. markObserver.observe(markElement)
  426. }
  427. </script>
  428. </body>
  429. </html>