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 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  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. Simple
  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="We can bring that into RSS by treating any interaction as content. If you post something, thats an entry in your feed (as before). If you comment on something, thats also an entry in your feed. If you like something, thats another entry in your feed. If you follow someone (which would mean subscribing to some RSS feed), thats also another entry in your feed. To mark that interactive nature of some feed entry, we can simple extend RSS a bit">
  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>Simple</h1>
  136. <p>Le <time datetime="2024-03-01">1 mars 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/02/29/"
  143. title="Publication précédente : Wikipédia">← 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/03/02/"
  150. title="Publication suivante : Montre">Suivant →</a>
  151. </p>
  152. </nav>
  153. <blockquote lang="en">
  154. <p>We can bring that into RSS by treating any interaction as content. If you post something, thats an entry in your feed (as before). If you comment on something, thats also an entry in your feed. If you like something, thats another entry in your feed. If you follow someone (which would mean subscribing to some RSS feed), thats also another entry in your feed. To mark that interactive nature of some feed entry, <mark>we can simple extend RSS a&nbsp;bit</mark></p>
  155. <p><cite><em><a data-link-domain="gist.github.com" href="https://gist.github.com/loreanvictor/bddd8824c744024d338e935bd7e96707" hreflang="en"
  156. title="Consultation de l’article (anglais)">Interaction as Content</a>
  157. <a href="/david/cache/2024/e401917f8e9785285afed817e5344443/" hreflang="en"
  158. data-tippy data-description="Interaction as Content. GitHub Gist: instantly share code, notes, and snippets."
  159. data-source="https://gist.github.com/loreanvictor/bddd8824c744024d338e935bd7e96707"
  160. data-date="2024-03-01"
  161. data-favicon="https://github.githubassets.com/favicons/favicon.png"
  162. data-domain="gist.github.com"
  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>Tout est dans le <q lang="en">simple</q>&nbsp;🙃.</p>
  173. <p>Rédiger une spécification comme <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Media_RSS">Media RSS</a> n’est déjà pas trivial mais alors faire en sorte que cela soit adopté et devienne un standard c’est une autre paire de&nbsp;manches.</p>
  174. <blockquote lang="en">
  175. <p>RSS originated in 1999, and has strived to be a simple, easy to understand format, with relatively modest goals. After it became a popular format, <mark>developers wanted to extend it</mark> using modules defined in namespaces, as specified by the&nbsp;W3C.</p>
  176. <p>RSS 2.0&nbsp;adds that capability, following a simple rule. A RSS feed may contain elements and attributes not described on this page, only if those elements and attributes are defined in a&nbsp;namespace.</p>
  177. <p><cite><em><a data-link-domain="rssboard.org" href="https://www.rssboard.org/rss-specification#extendingRss" hreflang="en"
  178. title="Consultation de l’article (anglais)">RSS 2.0&nbsp;Specification</a>
  179. <a href="/david/cache/2024/85b765a918ef094a5a2dd13a1ff5dd7d/" hreflang="en"
  180. data-tippy data-description="The current version of the RSS 2.0 specification (2.0.11), published on March 30, 2009."
  181. data-source="https://www.rssboard.org/rss-specification#extendingRss"
  182. data-date="2024-03-01"
  183. data-favicon="https://www.rssboard.org/favicon.ico"
  184. data-domain="rssboard.org"
  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>Beaucoup de personnes ont envie de faire davantage avec RSS, c’est la diffusion à une échelle non anecdotique qui est difficile. Peut-être qu’un acteur comme Mastodon pourrait peser dans la balance d’une telle&nbsp;initiative.</p>
  195. <blockquote lang="en">
  196. <p>Another feature area I would think about is interactivity. I’m fascinated with Google’s work in Gmail around “Inbox Actions” – basically the one-click buttons to perform an email action like RSVP, or reviewing a bug. Here’s an explainer with some&nbsp;examples.</p>
  197. <p>Let’s call it Feed Actions. <mark>Feed Actions could also be an RSS&nbsp;extension.</mark></p>
  198. <p><cite><em><a data-link-domain="interconnected.org" href="https://interconnected.org/home/2021/05/26/chrome_and_rss" hreflang="en"
  199. title="Consultation de l’article (anglais)">Three requests for the Google Chrome team as they experiment with RSS</a>
  200. <a href="/david/cache/2024/4a9c4c407b34c40ec5b3783ac5f274a7/" hreflang="en"
  201. data-tippy data-description="Posted on Wednesday 26 May 2021. 976 words, 11 links. By Matt Webb."
  202. data-source="https://interconnected.org/home/2021/05/26/chrome_and_rss"
  203. data-date="2024-03-01"
  204. data-favicon=""
  205. data-domain="interconnected.org"
  206. ><svg xmlns="http://www.w3.org/2000/svg"
  207. width="24" height="24" viewBox="0 0 24 24" fill="none"
  208. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  209. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  210. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  211. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  212. </svg>
  213. <span class="sr-only">[archive]</span></a></em></cite></p>
  214. </blockquote>
  215. <p>J’ai deux communautés dans lesquelles c’est même devenu un <em>running gag</em> de créer un outil qui explorerait de nouvelles&nbsp;possibilités.</p>
  216. <p><a href="/david/2021/05/26/">Suivez-moi</a> et vous n’aurez plus jamais faim&#8239;! Gniarkgniarkgniark&nbsp;🦁⚡️</p>
  217. <nav>
  218. <p>
  219. <a href="/david/2024/evolution/"
  220. title="Liste de tous les articles 2024 associés à cette étiquette"
  221. rel="tag">#évolution</a>
  222. <a href="/david/2024/laboratoire/"
  223. title="Liste de tous les articles 2024 associés à cette étiquette"
  224. rel="tag">#laboratoire</a>
  225. <a href="/david/2024/web/"
  226. title="Liste de tous les articles 2024 associés à cette étiquette"
  227. rel="tag">#web</a>
  228. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  229. </p>
  230. </nav>
  231. <nav>
  232. <p>
  233. <a rel="prev"
  234. href="/david/2024/02/29/"
  235. title="Publication précédente : Wikipédia">← Précédent</a> •
  236. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  237. • <a rel="next"
  238. href="/david/2024/03/02/"
  239. title="Publication suivante : Montre">Suivant →</a>
  240. </p>
  241. </nav>
  242. <form action="/david/recherche/" method="get">
  243. <fieldset>
  244. <legend>Recherche</legend>
  245. <label for="input-search">Termes de votre recherche :</label>
  246. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  247. <input type="submit" value="Chercher">
  248. <p id="indexation-infos">
  249. <small>
  250. Seuls les contenus de ces 8 dernières années sont indexés.
  251. </small>
  252. </p>
  253. </fieldset>
  254. </form>
  255. <aside>
  256. <theme-toggle></theme-toggle>
  257. </aside>
  258. </article>
  259. <hr>
  260. <footer>
  261. <p>
  262. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  263. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  264. <a href="http://larlet.com"
  265. title="Go to my English profile"
  266. data-instant>Pro</a>
  267. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  268. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  269. </p>
  270. <template id="theme-selector">
  271. <form>
  272. <style type="text/css">
  273. fieldset div {
  274. text-align: center;
  275. }
  276. </style>
  277. <fieldset>
  278. <legend>Thème</legend>
  279. <div>
  280. <label>
  281. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  282. Auto
  283. </label>
  284. <label>
  285. <input type="radio" value="dark" name="chosen-color-scheme">
  286. Foncé
  287. </label>
  288. <label>
  289. <input type="radio" value="light" name="chosen-color-scheme">
  290. Clair
  291. </label>
  292. </div>
  293. </fieldset>
  294. </form>
  295. </template>
  296. </footer>
  297. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  298. <script>
  299. class ThemeToggle extends HTMLElement {
  300. constructor() {
  301. super()
  302. const themeSelectorTemplate = document.querySelector('#theme-selector')
  303. const form = themeSelectorTemplate.content.firstElementChild
  304. this.attachShadow({ mode: 'open' })
  305. this.shadowRoot.appendChild(form.cloneNode(true))
  306. }
  307. connectedCallback() {
  308. const form = this.shadowRoot.querySelector('form')
  309. form.addEventListener('change', (e) => {
  310. const chosenColorScheme = e.target.value
  311. localStorage.setItem('theme', chosenColorScheme)
  312. toggleTheme(chosenColorScheme)
  313. })
  314. const selectedTheme = localStorage.getItem('theme')
  315. if (selectedTheme && selectedTheme !== 'undefined') {
  316. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  317. }
  318. }
  319. }
  320. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  321. window.addEventListener('load', () => {
  322. let colorsLayer = undefined
  323. let hasDarkRules = false
  324. for (const styleSheet of Array.from(document.styleSheets)) {
  325. let mediaRules = []
  326. for (const layerRule of styleSheet.cssRules) {
  327. if (!(layerRule instanceof CSSLayerBlockRule)) {
  328. continue
  329. }
  330. if (layerRule.name === 'colors') {
  331. colorsLayer = layerRule
  332. }
  333. for (const cssRule of layerRule.cssRules) {
  334. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  335. continue
  336. }
  337. // WARNING: Safari does not have/supports `conditionText`.
  338. if (cssRule.conditionText) {
  339. if (cssRule.conditionText !== prefersColorSchemeDark) {
  340. continue
  341. }
  342. } else {
  343. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  344. continue
  345. }
  346. }
  347. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  348. }
  349. }
  350. // WARNING: do not try to insert a Rule to a styleSheet you are
  351. // currently iterating on, otherwise the browser will be stuck
  352. // in a infinite loop…
  353. for (const mediaRule of mediaRules) {
  354. // Safari requires the `0` second parameter (even if default).
  355. colorsLayer.insertRule(mediaRule.cssText, 0)
  356. hasDarkRules = true
  357. }
  358. }
  359. if (hasDarkRules) {
  360. if ('customElements' in window && !customElements.get('theme-toggle')) {
  361. customElements.define('theme-toggle', ThemeToggle)
  362. }
  363. }
  364. })
  365. </script>
  366. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  367. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  368. <script>
  369. tippy('[data-tippy]', {
  370. content(reference) {
  371. reference.addEventListener('click', (e) => e.preventDefault())
  372. return `
  373. <h3 lang="fr">
  374. <img src="${reference.dataset.favicon}" loading="lazy">
  375. <a href="${reference.dataset.source}"
  376. >Article sur ${reference.dataset.domain}</a></h3>
  377. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  378. <div class="tippy-links" lang="fr">
  379. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  380. </div>
  381. `
  382. },
  383. allowHTML: true,
  384. interactive: true,
  385. delay: [150, 700],
  386. hideOnClick: false
  387. })
  388. </script>
  389. <script type="module">
  390. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  391. const markObserver = new IntersectionObserver((entries, observer) => {
  392. const computedStyle = getComputedStyle(document.documentElement)
  393. const markBackground = computedStyle.getPropertyValue('--mark-background')
  394. for (const entry of entries) {
  395. if (entry.intersectionRatio === 0) continue
  396. const markElement = entry.target
  397. markElement.style.backgroundColor = 'inherit'
  398. const annotation = annotate(
  399. markElement, {
  400. type: 'highlight',
  401. multiline: true,
  402. color: markBackground,
  403. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  404. animate: false
  405. }
  406. )
  407. annotation.show()
  408. observer.unobserve(markElement)
  409. }
  410. }, {threshold: 1.0})
  411. for (const markElement of document.querySelectorAll('mark')) {
  412. markObserver.observe(markElement)
  413. }
  414. </script>
  415. </body>
  416. </html>