Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  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. AlgoRSSithme
  14. — David Larlet</title>
  15. <meta name="description" content="This is why RSS feeds are amazing: nobody can get into your feed or be prioritized in it unless you say so.">
  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_2021-01-20.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_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/triplicate_t4_poly_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/triplicate_t3_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/triplicate_t3_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/triplicate_t3_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. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
  106. data-instant-intensity="viewport-all">
  107. <article>
  108. <header>
  109. <h1>AlgoRSSithme</h1>
  110. </header>
  111. <nav>
  112. <p class="center">
  113. <a rel="prev"
  114. href="/david/2023/02/25/"
  115. title="Publication précédente : Transmission">← Précédent</a> •
  116. <nobr>
  117. <a href="/david/" title="Aller à l’accueil" rel="up">
  118. <svg class="icon icon-home">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  120. </svg>
  121. Accueil</a>
  122. </nobr>
  123. <nobr>
  124. <a href="/david/recherche/"
  125. title="Aller à la page de recherche"
  126. rel="search">
  127. <svg class="icon icon-search">
  128. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"></use>
  129. </svg>
  130. Recherche</a>
  131. </nobr>
  132. • <a rel="next"
  133. href="/david/2023/03/02/"
  134. title="Publication suivante : Jour&nbsp;1">Suivant →</a>
  135. </p>
  136. </nav>
  137. <hr>
  138. <blockquote lang="en">
  139. <p>This is why RSS feeds are amazing: nobody can get into your feed or be prioritized in it unless you say&nbsp;so.</p>
  140. <p><cite><em><a href="https://notes.jim-nielsen.com/#2023-02-27T0915">Enshittification - Jim Nielsen’s Notes</a></em>&nbsp;(<a href="/david/cache/2023/941b67353ff151e5da55c691f6e9161b/">cache</a>)</cite></p>
  141. </blockquote>
  142. <p>L’usage fait qu’il n’y a pas d’algorithme derrière un flux RSS ou un agrégateur mais il pourrait en être&nbsp;autrement.</p>
  143. <p>Les auteur·ices choisissent de mettre les x derniers articles dans leur flux mais ce n’est en fait que la <em>dernière</em> entrée qui est pertinente (en prenant l’hypothèse que l’agrégateur rafraichit plus vite que le rythme de publication). Tout le reste pourrait être choisi selon un algorithme car concernerait les personnes qui n’ont pas encore d’articles dans leur&nbsp;cache.</p>
  144. <p>Je pourrais par exemple choisir d’avoir le dernier article ainsi qu’une dizaine d’articles soigneusement sélectionnés pour motiver les nouvelles personnes inscrites à conserver ce flux (au même titre que les messages épinglés sur un compte mastodon), d’autant qu’il est <a href="/david/log/">affiché chez moi</a> (pour <a href="/david/2021/06/03/">rappel</a>).</p>
  145. <p>Je pourrais aussi tous les mois faire sortir un ancien article que j’aime bien et qui apparaitrait probablement en dernier/très loin dans votre agrégateur mais si vous êtes en RSS Zéro (je suis sûr que c’est un truc), ça pourrait le rendre visible et vous donner envie d’aller y jeter un&nbsp;œil.</p>
  146. <p>De l’autre côté du flux, l’agrégateur pourrait faire de même et aller repêcher de vieux billets non lus, ne pas afficher tous les articles lors de l’ajout d’un nouveau flux, mettre certaines publications de sources plus populaires en avant, etc.</p>
  147. <p>Ce n’est pas le format qui empêche d’y mettre une logique de dévelopeur·euse (aussi appelé algorithme), mais les outils qui le génèrent et qui l’exploitent. C’est relativement étonnant que personne n’ait encore pris le temps de saccager&nbsp;ça.</p>
  148. <p>Oups…</p>
  149. <hr />
  150. <blockquote>
  151. <p>💜 L’idée derrière cela, c’est de pouvoir accéder à <mark>de la papeterie facile à imprimer</mark> et à photocopier, tout en profitant de belles illustrations. Pour l’instant, je pense partager mes propres illustrations ainsi qu’une liste de liens pour les ressources d’autres personnes. […] J’aimerais que cette boutique soit le début d’une réflexion commune sur le partage de l’art et&nbsp;l’artisanat.</p>
  152. <p><cite><em><a href="https://la-papeterie-libre.fr/">La Papeterie&nbsp;Libre</a></em></cite></p>
  153. </blockquote>
  154. <blockquote lang="en">
  155. <p>🤦 It seems ChatGPT is wrongly recommending us for “reverse phone number lookup” - ie the ability to determine the location of a mobile phone solely based on the number. <mark>This is not a service we provide.</mark> It is not a service we have ever provided, nor a service we have any plans to provide. Indeed, it is a not a service we are technically capable of&nbsp;providing.</p>
  156. <p><cite><em><a href="https://blog.opencagedata.com/post/dont-believe-chatgpt">Don’t believe ChatGPT - we do NOT offer a “phone lookup” service</a></em>&nbsp;(<a href="/david/cache/2023/0568befa90d2b39c0694d4c7ffc3cd73/">cache</a>)</cite></p>
  157. </blockquote>
  158. <blockquote lang="en">
  159. <p>👍 The best time to leave Github was before it was acquired by Microsoft. The second-best time is <mark>now.</mark> Sooner or later, you will be forced out of Github like we, oldies, were forced out of Sourceforge. Better leaving while you are free to do it on your own&nbsp;terms…</p>
  160. <p><cite><em><a href="https://ploum.net/2023-02-22-leaving-github.html">We need to talk about your Github addiction</a></em>&nbsp;(<a href="/david/cache/2023/afa0aae212698b71118868d36d50a747/">cache</a>)</cite></p>
  161. </blockquote>
  162. <blockquote lang="en">
  163. <p>💅 You do not have to follow these rules every time. If you have a good reason to break any of them, do. But they are safe to follow every&nbsp;time.</p>
  164. <p><cite><em><a href="https://anthonyhobday.com/sideprojects/saferules/">Visual design rules you can safely follow every time</a></em>&nbsp;(<a href="/david/cache/2023/61f52848924157701ed66c85d67f3536/">cache</a>)</cite></p>
  165. </blockquote>
  166. <blockquote>
  167. <p>🤗 Je fais tout ça sans la contrainte de maintenance, car je ne développe que des prototypes de logiciels. C’est <mark>une sorte d’exutoire</mark> pour se libérer l’esprit des projets qui me traînent dans la&nbsp;tête.</p>
  168. <p><cite><em><a href="https://marienfressinaud.fr/farandole-de-projets.html">Farandole de projets</a></em>&nbsp;(<a href="/david/cache/2023/392138accbdaee722a669834da5f1a8d/">cache</a>)</cite></p>
  169. </blockquote>
  170. <blockquote lang="en">
  171. <p>🧠 You could even think of this home stream as what in literature is called a “stream of consciousness”: <mark>a constant stream of the multitudinous thoughts and feelings which pass through the mind of a narrator.</mark> Your website is a way for you to share your stream of consciousness, that temporary and subjective and highly biased snippet of the universe, with everyone else, including your future self. In all its&nbsp;multitudes.</p>
  172. <p><cite><em><a href="https://matthiasott.com/notes/streams-of-consciousness">Streams of Consciousness</a></em>&nbsp;(<a href="/david/cache/2023/328b56a2ee2e291dabc8f63a0013cc7a/">cache</a>)</cite></p>
  173. </blockquote>
  174. <nav>
  175. <p>
  176. <a href="/david/2023/attention/"
  177. title="Liste de tous les articles 2023 associés à cette étiquette"
  178. rel="tag">#attention</a>
  179. <a href="/david/2023/decentralisation/"
  180. title="Liste de tous les articles 2023 associés à cette étiquette"
  181. rel="tag">#décentralisation</a>
  182. <a href="/david/2023/web/"
  183. title="Liste de tous les articles 2023 associés à cette étiquette"
  184. rel="tag">#web</a>
  185. <a href="/david/#tags-2023" title="Liste de toutes les étiquettes 2023">
  186. <svg class="icon icon-tags">
  187. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
  188. </svg>
  189. tous ?</a>
  190. </p>
  191. </nav>
  192. <nav>
  193. <p class="center">
  194. <a rel="prev"
  195. href="/david/2023/02/25/"
  196. title="Publication précédente : Transmission">← Précédent</a> •
  197. <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
  198. • <a rel="next"
  199. href="/david/2023/03/02/"
  200. title="Publication suivante : Jour&nbsp;1">Suivant →</a>
  201. </p>
  202. </nav>
  203. </article>
  204. <hr>
  205. <footer>
  206. <p>
  207. <nobr>
  208. <a href="/david/" title="Aller à l’accueil">
  209. <svg class="icon icon-home">
  210. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  211. </svg>
  212. Accueil</a>
  213. </nobr>
  214. <nobr>
  215. <a href="/david/log/" title="Accès au flux RSS">
  216. <svg class="icon icon-rss2">
  217. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  218. </svg>
  219. Suivre</a>
  220. </nobr>
  221. <nobr>
  222. <a href="http://larlet.com"
  223. title="Go to my English profile"
  224. data-instant>
  225. <svg class="icon icon-user-tie">
  226. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  227. </svg>
  228. Pro</a>
  229. </nobr>
  230. <nobr>
  231. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
  232. <svg class="icon icon-mail">
  233. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  234. </svg>
  235. Email</a>
  236. </nobr>
  237. <nobr>
  238. <abbr class="nowrap"
  239. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
  240. <svg class="icon icon-hammer2">
  241. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  242. </svg>
  243. Légal</abbr>
  244. </nobr>
  245. </p>
  246. <template id="theme-selector">
  247. <form>
  248. <fieldset>
  249. <legend>
  250. <svg class="icon icon-brightness-contrast">
  251. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  252. </svg>
  253. Thème
  254. </legend>
  255. <label>
  256. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  257. Auto
  258. </label>
  259. <label>
  260. <input type="radio" value="dark" name="chosen-color-scheme">
  261. Foncé
  262. </label>
  263. <label>
  264. <input type="radio" value="light" name="chosen-color-scheme">
  265. Clair
  266. </label>
  267. </fieldset>
  268. </form>
  269. </template>
  270. </footer>
  271. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  272. <script>
  273. function loadThemeForm(templateName) {
  274. const themeSelectorTemplate = document.querySelector(templateName)
  275. const form = themeSelectorTemplate.content.firstElementChild
  276. themeSelectorTemplate.replaceWith(form)
  277. form.addEventListener('change', (e) => {
  278. const chosenColorScheme = e.target.value
  279. localStorage.setItem('theme', chosenColorScheme)
  280. toggleTheme(chosenColorScheme)
  281. })
  282. const selectedTheme = localStorage.getItem('theme')
  283. if (selectedTheme && selectedTheme !== 'undefined') {
  284. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  285. }
  286. }
  287. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  288. window.addEventListener('load', () => {
  289. let hasDarkRules = false
  290. for (const styleSheet of Array.from(document.styleSheets)) {
  291. let mediaRules = []
  292. for (const cssRule of styleSheet.cssRules) {
  293. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  294. continue
  295. }
  296. // WARNING: Safari does not have/supports `conditionText`.
  297. if (cssRule.conditionText) {
  298. if (cssRule.conditionText !== prefersColorSchemeDark) {
  299. continue
  300. }
  301. } else {
  302. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  303. continue
  304. }
  305. }
  306. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  307. }
  308. // WARNING: do not try to insert a Rule to a styleSheet you are
  309. // currently iterating on, otherwise the browser will be stuck
  310. // in a infinite loop…
  311. for (const mediaRule of mediaRules) {
  312. styleSheet.insertRule(mediaRule.cssText)
  313. hasDarkRules = true
  314. }
  315. }
  316. if (hasDarkRules) {
  317. loadThemeForm('#theme-selector')
  318. }
  319. })
  320. </script>
  321. </body>
  322. </html>