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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  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. uMap 2
  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="But it’s deeper that that. Open source is good for humanity. It’s only slightly hyperbolic to say that open source is one of the most notable collective successes of humankind as a species! It’s one of the few places where essentially all of humanity works together on something that benefits everyone. A world without open source would be substantially worse than the world we live in.">
  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>uMap 2</h1>
  138. <p>Le <time datetime="2024-02-16">16 février 2024</time></p>
  139. </hgroup>
  140. </header>
  141. <nav>
  142. <p>
  143. <a rel="prev"
  144. href="/david/2024/02/15/"
  145. title="Publication précédente : Licence">← 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/02/17/"
  152. title="Publication suivante : Quotidien">Suivant →</a>
  153. </p>
  154. </nav>
  155. <blockquote lang="en">
  156. <p>But it’s deeper that that. Open source is <em>good for humanity</em>. It’s only slightly hyperbolic to say that <mark>open source is one of the most notable collective successes</mark> of humankind as a species! It’s one of the few places where essentially all of humanity works together on something that benefits everyone. A world without open source would be substantially worse than the world we live&nbsp;in.</p>
  157. <p><cite><em><a data-link-domain="jacobian.org" href="https://jacobian.org/2024/feb/16/paying-maintainers-is-good/" hreflang="en"
  158. title="Consultation de l’article (anglais)">Paying people to work on open source is good actually</a>
  159. <a href="/david/cache/2024/ad0648259b032d4d0e5a9e6220c3c71e/" hreflang="en"
  160. data-tippy data-description="If you have a problem with maintainers getting paid then you have a problem with me and I suggest you let that one marinate."
  161. data-source="https://jacobian.org/2024/feb/16/paying-maintainers-is-good/"
  162. data-date="2024-02-17"
  163. data-favicon="https://jacobian.org/favicon.ico"
  164. data-domain="jacobian.org"
  165. ><svg xmlns="http://www.w3.org/2000/svg"
  166. width="24" height="24" viewBox="0 0 24 24" fill="none"
  167. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  168. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  169. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  170. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  171. </svg>
  172. <span class="sr-only">[archive]</span></a></em></cite></p>
  173. </blockquote>
  174. <p>J’ai déjà parlé <a href="/david/2024/01/18/" title="Open-source">d’open-source</a>, de <a href="/david/2024/01/31/" title="Mécénat">mécénat</a>, de <a href="/david/2024/02/09/" title="Version">versions</a>, de <a href="/david/2024/02/15/" title="Licence">licences</a>, mais comment se passe une <em>release</em> de produit&nbsp;open-source&#8239;?</p>
  175. <p>On commence à avoir affiné et <a data-link-domain="docs.umap-project.org" href="https://docs.umap-project.org/en/master/release/">documenté le processus</a>, on a <a data-link-domain="github.com" href="https://github.com/umap-project/umap-deploy-osmfr">des scripts dédiés</a> pour arriver à cela lorsque le moment est venu et nous sommes pour l’instant 2&nbsp;à pouvoir faire cela de bout en bout avec <a data-link-domain="yohanboniface.me" href="https://yohanboniface.me/">Yohan</a>. C’est peu mais c’est aussi +100% par rapport à l’année&nbsp;dernière…</p>
  176. <p>Nous n’étions pas très loin de repousser encore une fois la version&nbsp;2&nbsp;car il y avait un dernier changement majeur à faire passer. Tiraillés, nous avons repoussé cela à une version&nbsp;3&nbsp;quitte à ce qu’elle arrive prochainement. Franchir cette barrière psychologique était important pour la suite. Le faire en visio de bout en bout (comme une bonne partie de nos interactions sur le produit) était enthousiasmant. En bonus, c’était un vendredi&nbsp;après-midi.</p>
  177. <p>Voilà donc <a data-link-domain="docs.umap-project.org" href="https://docs.umap-project.org/en/master/changelog/#200-2024-02-16">un <em>changelog</em></a> déjà bien chargé. Nous nous sommes rendu compte au cours du processus que le versionnement était davantage pertinent pour les mainteneur·euses que pour les utilisateur·ices. Les fonctionnalités sont ajoutées au compte-goutte mais il faut prévenir les personnes qui vont mettre à jour l’outil de ce qui pourrait coincer lors du déploiement. Certains changements ont été volontaires (modules ESM =&gt; support navigateurs), d’autres contraints (fin du support de l’authification OpenStreetMap OAuth1), d’autres subis (Django&nbsp;5 =&gt; Python 3.10). Un beau&nbsp;mélange.</p>
  178. <p>Je ne vais rien annoncer pour une version&nbsp;3&nbsp;car ce serait ajouter une pression inutile et même si on a des intuitions tout est loin d’être priorisé. Dans mes motivations <em>personnelles</em>&nbsp;:</p>
  179. <ul>
  180. <li>aller vers une amélioration de&nbsp;l’accessibilité&#8239;;</li>
  181. <li>voir les <a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/tag/umap.html">explorations d’Alexis</a> prendre&nbsp;forme&#8239;;</li>
  182. <li>clarifier les lieux de support / documentation en participant&nbsp;davantage.</li>
  183. </ul>
  184. <blockquote lang="en">
  185. <p>We have to accept the world as it is – even if it’s not the world we want. This means we have to be okay with the idea that maintainers need to be paid. Far too often I see arguments like: “<mark>maintainers shouldn’t be paid by private companies because the government should be supporting them.</mark>” Sure, this sounds great – but <em>governments aren’t doing this!</em> So this argument reduces to “open source maintainers shouldn’t be paid”. I can’t get on board with&nbsp;that.</p>
  186. <p><cite><em>Ibid.</em></cite></p>
  187. </blockquote>
  188. <p>Étant actuellement payé par l’Agence nationale de la cohésion des territoires pour participer à de l’<em>open-source</em>, je ne peux qu’approuver cette partie de la citation et être heureux de me trouver là où je suis. Les exceptions existent grâce à une conjonction de volontés, de privilèges et de coups de&nbsp;bol.</p>
  189. <a href="#hr-73" title="Lien vers cette section de la page"><hr id="hr-73" /></a>
  190. <blockquote lang="en">
  191. <p><a data-link-domain="github.com" href="https://github.com/astral-sh/uv">uv</a> represents a milestone in our pursuit of a “<a data-link-domain="blog.rust-lang.org" href="https://blog.rust-lang.org/2016/05/05/cargo-pillars.html#pillars-of-cargo">Cargo for Python</a>”: a comprehensive Python project and package manager that’s fast, reliable, and easy to&nbsp;use.</p>
  192. <p><cite><em><a data-link-domain="astral.sh" href="https://astral.sh/blog/uv" hreflang="en"
  193. title="Consultation de l’article (anglais)">uv: Python packaging in Rust</a>
  194. <a href="/david/cache/2024/359df603dbf60e8476027b2eb26cb7ce/" hreflang="en"
  195. data-tippy data-description="uv is an extremely fast Python package installer and resolver, designed as a drop-in alternative to pip and pip-tools."
  196. data-source="https://astral.sh/blog/uv"
  197. data-date="2024-02-17"
  198. data-favicon="https://astral.sh/static/favicon-32x32.png"
  199. data-domain="astral.sh"
  200. ><svg xmlns="http://www.w3.org/2000/svg"
  201. width="24" height="24" viewBox="0 0 24 24" fill="none"
  202. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  203. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  204. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  205. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  206. </svg>
  207. <span class="sr-only">[archive]</span></a></em></cite></p>
  208. </blockquote>
  209. <p>Un futur de Python se dessine et j’en apprécie les&nbsp;esquisses.</p>
  210. <nav>
  211. <p>
  212. <a href="/david/2024/commun/"
  213. title="Liste de tous les articles 2024 associés à cette étiquette"
  214. rel="tag">#commun</a>
  215. <a href="/david/2024/decision/"
  216. title="Liste de tous les articles 2024 associés à cette étiquette"
  217. rel="tag">#décision</a>
  218. <a href="/david/2024/opensource/"
  219. title="Liste de tous les articles 2024 associés à cette étiquette"
  220. rel="tag">#opensource</a>
  221. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  222. </p>
  223. </nav>
  224. <nav>
  225. <p>
  226. <a rel="prev"
  227. href="/david/2024/02/15/"
  228. title="Publication précédente : Licence">← Précédent</a> •
  229. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  230. • <a rel="next"
  231. href="/david/2024/02/17/"
  232. title="Publication suivante : Quotidien">Suivant →</a>
  233. </p>
  234. </nav>
  235. <form action="/david/recherche/" method="get">
  236. <fieldset>
  237. <legend>Recherche</legend>
  238. <label for="input-search">Termes de votre recherche :</label>
  239. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  240. <input type="submit" value="Chercher">
  241. <p id="indexation-infos">
  242. <small>
  243. Seuls les contenus de ces 8 dernières années sont indexés.
  244. </small>
  245. </p>
  246. </fieldset>
  247. </form>
  248. <aside>
  249. <theme-toggle></theme-toggle>
  250. </aside>
  251. </article>
  252. <hr>
  253. <footer>
  254. <p>
  255. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  256. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  257. <a href="http://larlet.com"
  258. title="Go to my English profile"
  259. data-instant>Pro</a>
  260. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  261. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  262. </p>
  263. <template id="theme-selector">
  264. <form>
  265. <style type="text/css">
  266. fieldset div {
  267. text-align: center;
  268. }
  269. </style>
  270. <fieldset>
  271. <legend>Thème</legend>
  272. <div>
  273. <label>
  274. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  275. Auto
  276. </label>
  277. <label>
  278. <input type="radio" value="dark" name="chosen-color-scheme">
  279. Foncé
  280. </label>
  281. <label>
  282. <input type="radio" value="light" name="chosen-color-scheme">
  283. Clair
  284. </label>
  285. </div>
  286. </fieldset>
  287. </form>
  288. </template>
  289. </footer>
  290. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  291. <script>
  292. class ThemeToggle extends HTMLElement {
  293. constructor() {
  294. super()
  295. const themeSelectorTemplate = document.querySelector('#theme-selector')
  296. const form = themeSelectorTemplate.content.firstElementChild
  297. this.attachShadow({ mode: 'open' })
  298. this.shadowRoot.appendChild(form.cloneNode(true))
  299. }
  300. connectedCallback() {
  301. const form = this.shadowRoot.querySelector('form')
  302. form.addEventListener('change', (e) => {
  303. const chosenColorScheme = e.target.value
  304. localStorage.setItem('theme', chosenColorScheme)
  305. toggleTheme(chosenColorScheme)
  306. })
  307. const selectedTheme = localStorage.getItem('theme')
  308. if (selectedTheme && selectedTheme !== 'undefined') {
  309. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  310. }
  311. }
  312. }
  313. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  314. window.addEventListener('load', () => {
  315. let colorsLayer = undefined
  316. let hasDarkRules = false
  317. for (const styleSheet of Array.from(document.styleSheets)) {
  318. let mediaRules = []
  319. for (const layerRule of styleSheet.cssRules) {
  320. if (!(layerRule instanceof CSSLayerBlockRule)) {
  321. continue
  322. }
  323. if (layerRule.name === 'colors') {
  324. colorsLayer = layerRule
  325. }
  326. for (const cssRule of layerRule.cssRules) {
  327. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  328. continue
  329. }
  330. // WARNING: Safari does not have/supports `conditionText`.
  331. if (cssRule.conditionText) {
  332. if (cssRule.conditionText !== prefersColorSchemeDark) {
  333. continue
  334. }
  335. } else {
  336. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  337. continue
  338. }
  339. }
  340. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  341. }
  342. }
  343. // WARNING: do not try to insert a Rule to a styleSheet you are
  344. // currently iterating on, otherwise the browser will be stuck
  345. // in a infinite loop…
  346. for (const mediaRule of mediaRules) {
  347. // Safari requires the `0` second parameter (even if default).
  348. colorsLayer.insertRule(mediaRule.cssText, 0)
  349. hasDarkRules = true
  350. }
  351. }
  352. if (hasDarkRules) {
  353. if ('customElements' in window && !customElements.get('theme-toggle')) {
  354. customElements.define('theme-toggle', ThemeToggle)
  355. }
  356. }
  357. })
  358. </script>
  359. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  360. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  361. <script>
  362. tippy('[data-tippy]', {
  363. content(reference) {
  364. reference.addEventListener('click', (e) => e.preventDefault())
  365. return `
  366. <h3 lang="fr">
  367. <img src="${reference.dataset.favicon}" loading="lazy">
  368. <a href="${reference.dataset.source}"
  369. >Article sur ${reference.dataset.domain}</a></h3>
  370. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  371. <div class="tippy-links" lang="fr">
  372. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  373. </div>
  374. `
  375. },
  376. allowHTML: true,
  377. interactive: true,
  378. delay: [150, 700],
  379. hideOnClick: false
  380. })
  381. </script>
  382. <script type="module">
  383. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  384. const markObserver = new IntersectionObserver((entries, observer) => {
  385. const computedStyle = getComputedStyle(document.documentElement)
  386. const markBackground = computedStyle.getPropertyValue('--mark-background')
  387. for (const entry of entries) {
  388. if (entry.intersectionRatio === 0) continue
  389. const markElement = entry.target
  390. markElement.style.backgroundColor = 'inherit'
  391. const annotation = annotate(
  392. markElement, {
  393. type: 'highlight',
  394. multiline: true,
  395. color: markBackground,
  396. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  397. animate: false
  398. }
  399. )
  400. annotation.show()
  401. observer.unobserve(markElement)
  402. }
  403. }, {threshold: 1.0})
  404. for (const markElement of document.querySelectorAll('mark')) {
  405. markObserver.observe(markElement)
  406. }
  407. </script>
  408. </body>
  409. </html>