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

10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696
  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. Étiquette #commun
  14. — David Larlet</title>
  15. <meta name="description" content="Publications relatives au tag #commun">
  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_2024-02-03.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_b_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/century_supra_ot_b_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/century_supra_ot_b_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. <style type="text/css">
  106. details[open] summary {
  107. display: none;
  108. }
  109. </style>
  110. <body data-instant-intensity="viewport-all">
  111. <article>
  112. <header>
  113. <hgroup>
  114. <h1>#commun</h1>
  115. <p>Publications relatives à cette étiquette</p>
  116. </hgroup>
  117. </header>
  118. <nav>
  119. <p>
  120. <a href="/david/" title="Aller à l’accueil">
  121. Accueil</a>
  122. <a rel="tags"
  123. href="/david/2024/#tags"
  124. title="Liste de toutes les étiquettes">
  125. Étiquettes</a>
  126. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
  127. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  128. </p>
  129. </nav>
  130. <h2>
  131. <a href="/david/2024/02/16/" title="Lien permanent vers cet article">uMap&nbsp;2</a> <time datetime="2024-02-16">16 février 2024</time>
  132. </h2>
  133. <blockquote lang="en">
  134. <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>
  135. <p><cite><em><a data-link-domain="jacobian.org" href="https://jacobian.org/2024/feb/16/paying-maintainers-is-good/" hreflang="en"
  136. title="Consultation de l’article (anglais)">Paying people to work on open source is good actually</a>
  137. <a href="/david/cache/2024/ad0648259b032d4d0e5a9e6220c3c71e/" hreflang="en"
  138. 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."
  139. data-source="https://jacobian.org/2024/feb/16/paying-maintainers-is-good/"
  140. data-date="2024-02-17"
  141. data-favicon="https://jacobian.org/favicon.ico"
  142. data-domain="jacobian.org"
  143. ><svg xmlns="http://www.w3.org/2000/svg"
  144. width="24" height="24" viewBox="0 0 24 24" fill="none"
  145. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  146. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  147. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  148. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  149. </svg>
  150. <span class="sr-only">[archive]</span></a></em></cite></p>
  151. </blockquote>
  152. <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>
  153. <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>
  154. <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>
  155. <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>
  156. <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>
  157. <ul>
  158. <li>aller vers une amélioration de&nbsp;l’accessibilité&#8239;;</li>
  159. <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>
  160. <li>clarifier les lieux de support / documentation en participant&nbsp;davantage.</li>
  161. </ul>
  162. <blockquote lang="en">
  163. <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>
  164. <p><cite><em>Ibid.</em></cite></p>
  165. </blockquote>
  166. <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>
  167. <a href="#hr-73" title="Lien vers cette section de la page"><hr id="hr-73" /></a>
  168. <blockquote lang="en">
  169. <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>
  170. <p><cite><em><a data-link-domain="astral.sh" href="https://astral.sh/blog/uv" hreflang="en"
  171. title="Consultation de l’article (anglais)">uv: Python packaging in Rust</a>
  172. <a href="/david/cache/2024/359df603dbf60e8476027b2eb26cb7ce/" hreflang="en"
  173. 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."
  174. data-source="https://astral.sh/blog/uv"
  175. data-date="2024-02-17"
  176. data-favicon="https://astral.sh/static/favicon-32x32.png"
  177. data-domain="astral.sh"
  178. ><svg xmlns="http://www.w3.org/2000/svg"
  179. width="24" height="24" viewBox="0 0 24 24" fill="none"
  180. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  181. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  182. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  183. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  184. </svg>
  185. <span class="sr-only">[archive]</span></a></em></cite></p>
  186. </blockquote>
  187. <p>Un futur de Python se dessine et j’en apprécie les&nbsp;esquisses.</p>
  188. <nav>
  189. <p>
  190. <a href="/david/2024/commun/"
  191. title="Liste de tous les articles 2024 associés à cette étiquette"
  192. rel="tag">#commun</a>
  193. <a href="/david/2024/decision/"
  194. title="Liste de tous les articles 2024 associés à cette étiquette"
  195. rel="tag">#décision</a>
  196. <a href="/david/2024/opensource/"
  197. title="Liste de tous les articles 2024 associés à cette étiquette"
  198. rel="tag">#opensource</a>
  199. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  200. </p>
  201. </nav>
  202. <h2>
  203. <a href="/david/2024/02/15/" title="Lien permanent vers cet article">Licence</a> <time datetime="2024-02-15">15 février 2024</time>
  204. </h2>
  205. <blockquote lang="en">
  206. <p>Title: WTFPL Submission: http://crynwr.com/cgi-bin/ezmlm-cgi?17:mss:634:200902:aglgcgbhmfcheffmdgon License: http://sam.zoy.org/wtfpl/ Comments: It’s no different from dedication to the public domain. Author has submitted license approval request — author is free to make public domain dedication. Although he agrees with the recommendation, Mr. Michlmayr notes that <mark>public domain doesn’t exist in Europe.</mark> Recommend: Reject</p>
  207. <p><cite><em><a data-link-domain="opensource.org" href="https://opensource.org/meeting-minutes/minutes20090304/" hreflang="en"
  208. title="Consultation de l’article (anglais)">OSI Board Meeting Minutes, Wednesday, March 4, 2009</a>
  209. <a href="/david/cache/2024/90e6434dbda21f9d18ad8fa53c822b47/" hreflang="en"
  210. data-tippy data-description="Quorum reached and meeting called to order 08:10 am PST. Attendees Mr. Michael Tiemann, President Ms. Danese Cooper, Secretary and Treasurer Mr. Harshad Gune, Director Mr. Martin Michlmayr, Directo…"
  211. data-source="https://opensource.org/meeting-minutes/minutes20090304/"
  212. data-date="2024-02-17"
  213. data-favicon="https://i0.wp.com/opensource.org/wp-content/uploads/2023/01/cropped-cropped-OSI_Horizontal_Logo_0-e1674081292667.png?fit=32%2C32&ssl=1"
  214. data-domain="opensource.org"
  215. ><svg xmlns="http://www.w3.org/2000/svg"
  216. width="24" height="24" viewBox="0 0 24 24" fill="none"
  217. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  218. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  219. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  220. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  221. </svg>
  222. <span class="sr-only">[archive]</span></a></em></cite></p>
  223. </blockquote>
  224. <p>Nous sommes <a data-link-domain="github.com" href="https://github.com/umap-project/umap/pull/1605">passés</a> de la licence <a data-link-domain="wtfpl.net" href="http://www.wtfpl.net/">WTFPL</a> à <a data-link-domain="gnu.org" href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPLv3</a> pour uMap à partir de la version&nbsp;2 (à venir). Notamment car elle n’était pas acceptable pour l’<a data-link-domain="opensource.org" href="https://opensource.org/">OSI</a> ce qui nous posait des problèmes pour obtenir des financements européen ou pour bénéficier des plans <em>open-source</em> de services comme <a data-link-domain="browserstack.com" href="https://www.browserstack.com/open-source">BrowserStack</a>.</p>
  225. <p>Le seul service qui a accepté la licence WTFPL sans broncher est <a data-link-domain="sentry.io" href="https://sentry.io/for/open-source/">Sentry</a>, ceci en un temps&nbsp;record.</p>
  226. <blockquote lang="en">
  227. <p>Simply put, the AGPLv3 is effectively the GPLv3, but with an additional licensing term that ensures that users who interact <mark>over a network</mark> with modified versions of the program can receive the source code for that&nbsp;program.</p>
  228. <p><cite><em><a data-link-domain="fsf.org" href="https://www.fsf.org/bulletin/2021/fall/the-fundamentals-of-the-agplv3" hreflang="en"
  229. title="Consultation de l’article (anglais)">The fundamentals of the AGPLv3</a>
  230. <a href="/david/cache/2024/036789c955419215be9d88c6823b55aa/" hreflang="en"
  231. data-tippy data-description="The GNU Affero General Public License version 3 (AGPLv3) is the most protective of computer user freedom, yet it remains the most misunderstood of the GNU family of licenses."
  232. data-source="https://www.fsf.org/bulletin/2021/fall/the-fundamentals-of-the-agplv3"
  233. data-date="2024-02-17"
  234. data-favicon="https://www.fsf.org/favicon.ico"
  235. data-domain="fsf.org"
  236. ><svg xmlns="http://www.w3.org/2000/svg"
  237. width="24" height="24" viewBox="0 0 24 24" fill="none"
  238. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  239. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  240. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  241. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  242. </svg>
  243. <span class="sr-only">[archive]</span></a></em></cite></p>
  244. </blockquote>
  245. <a href="#hr-72" title="Lien vers cette section de la page"><hr id="hr-72" /></a>
  246. <blockquote>
  247. <p>La prévalence des drogues chinoises, et synthétiques en général, sur le marché a eu des conséquences au Mexique voisin. Dans une vidéo de fin 2020, The Intercept montre que la baisse drastique de demande en héroïne au profit du fentanyl a des conséquences humaines considérables. «&nbsp;Les cultivateurs de pavot au Mexique doivent se résoudre à migrer pour travailler ou se tourner vers le crime organisé&nbsp;», raconte le média, partageant des témoignages de personnes précaires encore appauvries par la&nbsp;situation.</p>
  248. <p><cite><em><a data-link-domain="basta.media" href="https://basta.media/crise-des-opioides-pourquoi-il-ne-faut-ni-oublier-ni-ignorer" hreflang="fr"
  249. title="Consultation de l’article">Crise des opioïdes&nbsp;: pourquoi il ne faut ni l’oublier ni l’ignorer</a>
  250. <a href="/david/cache/2024/1929f7183f694c7abeafeddb891fcf50/" hreflang="fr"
  251. data-tippy data-description="Aux États-Unis, le nombre de morts par overdose dépasse celui des décès sur la route. La crise des opioïdes, déclarée dans les années 2010, touche aussi de plein fouet le Canada. Et le phénomène dépasse les frontières nord-américaines."
  252. data-source="https://basta.media/crise-des-opioides-pourquoi-il-ne-faut-ni-oublier-ni-ignorer"
  253. data-date="2024-02-17"
  254. data-favicon="https://basta.media/squelettes/basta/favicon/favicon.svg?1634019699"
  255. data-domain="basta.media"
  256. ><svg xmlns="http://www.w3.org/2000/svg"
  257. width="24" height="24" viewBox="0 0 24 24" fill="none"
  258. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  259. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  260. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  261. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  262. </svg>
  263. <span class="sr-only">[archive]</span></a></em></cite></p>
  264. </blockquote>
  265. <p>Je n’avais pas encore pris conscience de tous les enjeux socio-économico-géopolitiques de ces nouvelles drogues. Il y a des guerres qui sont moins médiatisées que&nbsp;d’autres.</p>
  266. <nav>
  267. <p>
  268. <a href="/david/2024/commun/"
  269. title="Liste de tous les articles 2024 associés à cette étiquette"
  270. rel="tag">#commun</a>
  271. <a href="/david/2024/decision/"
  272. title="Liste de tous les articles 2024 associés à cette étiquette"
  273. rel="tag">#décision</a>
  274. <a href="/david/2024/opensource/"
  275. title="Liste de tous les articles 2024 associés à cette étiquette"
  276. rel="tag">#opensource</a>
  277. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  278. </p>
  279. </nav>
  280. <h2>
  281. <a href="/david/2024/02/14/" title="Lien permanent vers cet article">GéoCodage</a> <time datetime="2024-02-14">14 février 2024</time>
  282. </h2>
  283. <p>Dans le cadre de mon travail avec le <a data-link-domain="labrri.net" href="https://labrri.net/">LABRRI</a>, j’avais besoin de pouvoir laisser l’utilisateur·ice choisir une localité parmi les villes et arrondissements au Québec. Je me suis dit que c’était une bonne occasion d’explorer les données ouvertes&nbsp;locales.</p>
  284. <p>Je tombe rapidement sur le <a data-link-domain="donneesquebec.ca" href="https://www.donneesquebec.ca/recherche/dataset/repertoire-des-municipalites-du-quebec">Répertoire des municipalités du Québec</a> qui dispose des communes et arrondissements au format CSV. Il me manque tout de même les coordonnées pour pouvoir ensuite les afficher sur une carte. Je creuse un peu et il existe des services de géocodage locaux comme <a data-link-domain="geocoder.ca" href="https://geocoder.ca/">geocoder.ca</a> mais je suis persuadé que ça doit être accessible librement quelque part. Je finis par trouver les <a data-link-domain="statistique.quebec.ca" href="https://statistique.quebec.ca/statistiques/divisions-territoriales/fichiers_code_geo/code-geographique-quebec.html">Fichiers du code géographique du Québec</a> qui comportent des coordonnées pour chaque localité, le tout en XML. Elles sont au format <code>47° 22' 34&quot; N</code> ce qui ne m’arrange pas et je me fais surtout avoir par la longitude un moment car elle est en français(!) <code>61° 52' 05&quot; O</code> — <code>O(uest)</code> vs. <code>W(est)</code>. Avec un petit coup de <code>ElementTree</code> + <a data-link-domain="pypi.org" href="https://pypi.org/project/latlon3/">latlon3</a>, j’arrive enfin à des coordonnées utilisables par <a data-link-domain="leafletjs.com" href="https://leafletjs.com/">Leaflet</a> qui me serviront à afficher les situations sur une&nbsp;carte.</p>
  285. <p>Il me manque les coordonnées pour les arrondissements mais j’ai déjà fait la moitié à la main précédemment et il n’y en a qu’une quarantaine. Jouable, ne jamais oublier <a data-link-domain="xkcd.com" href="https://xkcd.com/1319/">ce XKCD</a> lorsqu’on&nbsp;développe.</p>
  286. <p>Je passe maintenant à l’interface et je me dis que cette problématique est une bonne candidate pour <code>&lt;datalist&gt;</code> surtout qu’il y a deux champs du formulaire où il faut saisir le lieu&nbsp;: il est possible de référencer la même liste de données pour deux champs distincts ce qui est élégant. Ce qui l’est moins par contre, c’est que pour rendre ces choix non modifiables, il faut définir un <code>pattern</code> avec l’ensemble des localité, pour chaque champ concerné, donc en double. Je me retrouve avec 3&nbsp;fois les mêmes données… mais cela donne lieu à une <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/html/#forcer-un-element-parmi-une-datalist">nouvelle entrée dans ma mémoire technique</a>. Le formulaire complet faisant au final moins de 110Ko, je considère que c’est suffisant pour ne pas affaiblir l’interface avec du JavaScript qui factoriserait ces&nbsp;données.</p>
  287. <figure>
  288. <a href="/static/david/2024/2024-02-14-input-datalist.png"
  289. title="Cliquer pour une version haute résolution">
  290. <img
  291. src="/static/david/2024/2024-02-14-input-datalist.png"
  292. width="1634" height="408"
  293. srcset="/static/david/2024/2024-02-14-input-datalist.png 1634w, /static/david/2024/2024-02-14-input-datalist.png 660w, /static/david/2024/2024-02-14-input-datalist.png 990w, /static/david/2024/2024-02-14-input-datalist.png 1320w"
  294. sizes="min(100vw, calc(100vh * 1634 / 408))"
  295. loading="lazy"
  296. decoding="async"
  297. alt="Un champ de saisie dans lequel j’ai écrit «&nbsp;baie&nbsp;» et qui affiche des suggestions de villes québécoises.">
  298. </a>
  299. <figcaption>Et&nbsp;voilà!</figcaption>
  300. </figure>
  301. <p>Si jamais vous avez besoin des données générées, <a href="/static/david/2024/municipalites_quebec_geocodees.csv">voici un CSV</a> (67Ko) qui est originellement sous licence <a data-link-domain="creativecommons.org" href="https://creativecommons.org/licenses/by/4.0/legalcode.fr">Creative Commons 4.0 – Attribution CC BY</a> l’«&nbsp;Institut de la statistique du Québec, Fichiers du code géographique du Québec&nbsp;» même si je ne sais pas trop ce que ça signifie après une telle transformation… qui devient vraiment le «&nbsp;BY&nbsp;»&#8239;? 🤔</p>
  302. <p><em>Note&nbsp;: l’interface proposée sous iOS pour les choix de datalist est assez déroutante car les suggestions se retrouvent dans la partie d’auto-completion du&nbsp;clavier&#8239;!</em></p>
  303. <nav>
  304. <p>
  305. <a href="/david/2024/commun/"
  306. title="Liste de tous les articles 2024 associés à cette étiquette"
  307. rel="tag">#commun</a>
  308. <a href="/david/2024/opendata/"
  309. title="Liste de tous les articles 2024 associés à cette étiquette"
  310. rel="tag">#opendata</a>
  311. <a href="/david/2024/technique/"
  312. title="Liste de tous les articles 2024 associés à cette étiquette"
  313. rel="tag">#technique</a>
  314. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  315. </p>
  316. </nav>
  317. <h2>
  318. <a href="/david/2024/01/31/" title="Lien permanent vers cet article">Mécénat</a> <time datetime="2024-01-31">31 janvier 2024</time>
  319. </h2>
  320. <p>Je termine mon mécénat de compétence avec uMap sur ces 4&nbsp;derniers mois (25&nbsp;jours de travail). Je suis très content d’avoir pu faire cette expérience avec / grâce à Scopyleft et&nbsp;OSM-FR.</p>
  321. <p>Voici les notes que j’avais prises avant d’établir une Convention de mécénat avec <a data-link-domain="openstreetmap.fr" href="https://www.openstreetmap.fr/association/">OpenStreetMap France</a>, j’ai pris le soin de documenter la démarche car ça pourrait donner lieu à d’autres dons en nature de la part de Scopyleft (et puis ça pourrait peut-être vous inspirer&nbsp;😇).</p>
  322. <p><em>Note&nbsp;: vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALawyer</em></p>
  323. <blockquote>
  324. <p>Une des possibilités offertes à un mécène entreprise consiste à apporter non pas des financements en numéraire mais des moyens (produits ou services) à la cause qu’elle entend soutenir. Il s’agit ici, d’un «&nbsp;mécénat en nature ou de compétence&nbsp;». Les critères d’éligibilité à cette forme de mécénat sont exactement les mêmes que ceux prévus pour une contribution en&nbsp;numéraire.</p>
  325. <p><cite><em><a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Thematiques/Mecenat/Entreprises/Le-mecenat-en-nature-ou-en-competence">Source</a></em></cite></p>
  326. </blockquote>
  327. <blockquote>
  328. <p>Le prêt de main d’œuvre&nbsp;: l’entreprise met à disposition d’un organisme éligible au mécénat un ou plusieurs salariés. C’est l’organisme qui pilote la mission et qui peut faire figure d’autorité fonctionnelle dans ce cadre. Le temps et la fréquence du mécénat de compétences peuvent considérablement varier en fonction des besoins&nbsp;: il peut aussi bien s’agir d’une mission courte, même d’une seule demi-journée, que d’une mission plus longue voir d’un plein temps dans la limite de&nbsp;3&nbsp;ans.</p>
  329. <p><cite><em><a data-link-domain="cci.fr" href="https://www.cci.fr/actualites/le-mecenat-de-competences-comment-le-mettre-en-place-et-mobiliser-les-equipes">Source</a></em></cite></p>
  330. </blockquote>
  331. <p>Lorsque les dons sont effectués en nature, il est nécessaire de procéder à leur&nbsp;valorisation&nbsp;:</p>
  332. <ul>
  333. <li>pour le calcul de la réduction d’impôt que déclare&nbsp;l’entreprise&#8239;;</li>
  334. <li>pour la réintégration extra-comptable de la valeur du don par&nbsp;l’entreprise&#8239;;</li>
  335. <li>pour l’établissement du reçu fiscal par l’organisme bénéficiaire du&nbsp;don&#8239;;</li>
  336. <li>pour la détermination des éventuels contreparties remises à l’entreprise par l’organisme bénéficiaire du&nbsp;don.</li>
  337. </ul>
  338. <h2 id="comment-valoriser-un-don-au-titre-dun-mecenat-de-competence">Comment valoriser un don au titre d’un mécénat de compétence&#8239;? <a href="#comment-valoriser-un-don-au-titre-dun-mecenat-de-competence" title="Ancre vers cette partie">#</a></h2>
  339. <blockquote>
  340. <p>Pour chaque salarié mis à disposition, ce don est évalué à son coût de revient, à savoir la somme de sa rémunération et des charges sociales y afférentes dans la limite de trois fois le montant du plafond mentionné à l’article L. 241-3&nbsp;du code de la sécurité sociale (CSS), soit 10&#8239;284&#8239;€ par mois en&nbsp;2022.</p>
  341. <p><cite><em><a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Thematiques/Mecenat/Entreprises/Le-mecenat-en-nature-ou-en-competence">Source</a></em></cite></p>
  342. </blockquote>
  343. <p>Ce n’est donc <strong>pas un TJM</strong> mais un <em>coût de revient</em>.</p>
  344. <blockquote>
  345. <p>A la suite de l’adoption de la <a data-link-domain="legifrance.gouv.fr" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000043964778">loi du 24&nbsp;août 2021&nbsp;confortant le respect des principes de la République</a>, l’administration fiscale a rappelé que <mark>la valorisation du don relève de la seule responsabilité de l’entreprise mécène</mark> qu’il s’agisse d’un don sous forme de biens (dons alimentaires notamment), de services ou d’une mise à disposition de personnel. Un <a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Media/Medias-creation-rapide/2041-mec-sd_4032.pdf">nouveau modèle de reçu fiscal</a> a été publié le 10&nbsp;juin&nbsp;2022.</p>
  346. </blockquote>
  347. <h2 id="avantages-fiscaux">Avantages fiscaux <a href="#avantages-fiscaux" title="Ancre vers cette partie">#</a></h2>
  348. <blockquote>
  349. <p>Le mécénat de compétences ouvre droit à un avantage fiscal. Concrètement, comme pour toute action de mécénat, le «&nbsp;don&nbsp;» de compétences de l’entreprise ouvrira droit à une réduction d’impôts de 60% du montant du salaire chargé du salarié mis à disposition. Cet avantage est accessible à tous les types d’entreprises, sans montant minimum de&nbsp;don.</p>
  350. <p><cite><em><a data-link-domain="economie.gouv.fr" href="https://www.economie.gouv.fr/files/Guide-pratique-mecenat-competences-novembre2021.pdf">Source</a></em></cite></p>
  351. </blockquote>
  352. <h2 id="modele">Modèle <a href="#modele" title="Ancre vers cette partie">#</a></h2><p>Un modèle de <a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Media/Medias-creation-rapide/Modele-de-convention-de-mecenat-d-entreprise.docx">convention de mécénat</a>, <a data-link-domain="associations.gouv.fr" href="https://www.associations.gouv.fr/IMG/pdf/asso_mecenat_2021_v1b.pdf">un autre</a> et <a data-link-domain="occitanie.developpement-durable.gouv.fr" href="https://www.occitanie.developpement-durable.gouv.fr/IMG/pdf/ex_convention_mecenat_competences_cle065a53.pdf">encore un autre</a>.</p>
  353. <p>En synthèse, il&nbsp;faut&nbsp;:</p>
  354. <h3>Les&nbsp;coordonnées</h3>
  355. <p>Entre&nbsp;:</p>
  356. <p>L’entreprise …, statut, dont le siège social est au …,<br />
  357. Représentée par …, fonction,<br />
  358. Ci-après dénommée «&nbsp;le&nbsp;mécène&nbsp;»,</p>
  359. <p>Et</p>
  360. <p>L’association …, sise au …,<br />
  361. Représentée par son Président (&#8239;?), …<br />
  362. Ci-après dénommée&nbsp;«&nbsp;l’association&nbsp;»,</p>
  363. <p>Vu la loi n°2003-79&nbsp;du 1<sup>er</sup> août 2003&nbsp;relative au mécénat, aux associations et aux fondations et notamment les dispositions codifiées à l’article 238&nbsp;bis du code général des&nbsp;impôts.</p>
  364. <h3>(optionnel) Préambule&nbsp;(contexte)</h3>
  365. <ul>
  366. <li>objet du mécénat de l’entreprise, de la&nbsp;fondation…</li>
  367. <li>objet de l’association&nbsp;: présentation de sa mission/vocation générale, et laïus sur le
  368. projet qu’ils portent en commun avec l’entreprise le cas&nbsp;échéant</li>
  369. <li>rencontre de ces deux&nbsp;objets&#8239;?</li>
  370. </ul>
  371. <h3>Ce qui est&nbsp;convenu</h3>
  372. <p>Il est convenu et décidé ce qui&nbsp;suit&nbsp;:</p>
  373. <ul>
  374. <li>La présente convention a pour objet de définir les conditions du soutien à l’association pour le projet suivant&nbsp;: (descriptif de l’action ou de la&nbsp;manifestation)</li>
  375. <li>L’entreprise mécène s’engage à mettre à disposition le personnel suivant&nbsp;: représentant une valeur de … € sur la période de&nbsp;…</li>
  376. </ul>
  377. <blockquote>
  378. <p>Pour valoriser ce mécénat de compétences, l’entreprise s’engage à comptabiliser et à valoriser le temps passé sur la mission sus nommée, soit le nombre d’heures passées x salaire horaire chargé (son commissaire aux comptes devra valider ce montant de salaire&nbsp;chargé).</p>
  379. <p>L’association pourra ainsi remettre à l’entreprise un reçu fiscal précisant le nombre d’heures et le coût équivalent donné à&nbsp;l’association.</p>
  380. <p>Conformément à l’article 238bis du code général des impôts, ce don en temps donnera droit à une réduction d’impôt égale à 60&#8239;% du montant des sommes versées dans la limite de 0,5% du C.A. HT.</p>
  381. </blockquote>
  382. <h3>Conditions</h3>
  383. <ul>
  384. <li>(optionnel / à adapter) L’association s’engage à faire figurer le nom de l’entreprise donatrice sur les supports d’information de l’action ou de la&nbsp;manifestation.</li>
  385. <li>La présente convention est établie en vertu des dispositions de l’article 238&nbsp;bis du&nbsp;CGI</li>
  386. <li>La présente convention prendra effet à sa date de signature et prendra fin le&nbsp;….</li>
  387. </ul>
  388. <p>Dans le cas où l’une des parties ne respecterait pas ses obligations contractuelles, cette convention serait résiliée de plein droit. En cas de litige, les parties conviennent d’une conciliation à&nbsp;l’amiable.</p>
  389. <h3>Signatures</h3>
  390. <p>Date, lieu et signatures&nbsp;:<br />
  391. A … le …<br />
  392. Représentant de l’entreprise / Représentant de&nbsp;l’association</p>
  393. <nav>
  394. <p>
  395. <a href="/david/2024/commun/"
  396. title="Liste de tous les articles 2024 associés à cette étiquette"
  397. rel="tag">#commun</a>
  398. <a href="/david/2024/documentation/"
  399. title="Liste de tous les articles 2024 associés à cette étiquette"
  400. rel="tag">#documentation</a>
  401. <a href="/david/2024/partage/"
  402. title="Liste de tous les articles 2024 associés à cette étiquette"
  403. rel="tag">#partage</a>
  404. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  405. </p>
  406. </nav>
  407. <h2>
  408. <a href="/david/2024/01/23/" title="Lien permanent vers cet article">Thèse</a> <time datetime="2024-01-23">23 janvier 2024</time>
  409. </h2>
  410. <blockquote>
  411. <p>Cette thèse porte sur les processus d’édition en considérant qu’ils sont constitutifs de la production du sens et qu’ils reflètent des visions du monde plurielles. Nous considérons le phénomène de fabrique d’édition comme un acte éditorial qui comprend autant la formalisation d’un texte <mark>que la constitution des outils permettant ce travail.</mark> Les dimensions techniques de l’édition sont ainsi imbriquées, telles que la construction de procédés de fabrication et de production de formes, d’objets et d’artefacts que sont les livres, ou telles que des opérations sur le texte comme l’architecture des contenus, la structuration sémantique et la composition&nbsp;typographique.</p>
  412. <p><cite><em><a data-link-domain="these.quaternum.net" href="https://these.quaternum.net/">Fabriquer des éditions
  413. Éditer des fabriques - Reconfiguration des processus techniques éditoriaux et nouveaux modèles épistémologiques</a></em>, Antoine&nbsp;Fauchié</cite></p>
  414. </blockquote>
  415. <p>J’assiste en direct à une soutenance de thèse pour la première fois de ma vie. Il s’agit d’un exercice moins facile que ce que je m’imaginais mais pas toutes les soutenances ne se font dans un tel contexte si j’ai bien réussi à lire entre les lignes. En tout cas, j’étais impressionné par la pertinence des réponses d’Antoine à chaud et sa faculté à recentrer les&nbsp;discussions.</p>
  416. <p>Les questions que j’aurais aimé&nbsp;poser&nbsp;:</p>
  417. <ol>
  418. <li>Comment transformer ces fabriques de logiciels <em>open-source</em> en communs numériques impliquant une gouvernance partagée&#8239;? Comment sont impliquées les différentes parties&nbsp;prenantes&#8239;?</li>
  419. <li>Quelle est la littéracie numérique nécessaire pour devenir auteur·ice aujourd’hui&#8239;? Quelle est l’in·accessibilité de ces fabriques sous cet angle&nbsp;là&#8239;?</li>
  420. <li>Le rôle de l’éditeur·ice devient-il également celui d’un·e accompagnateur·ice technique&#8239;? Quelle part pour l’éthique dans ce choix&nbsp;d’intermédiaire&#8239;?</li>
  421. </ol>
  422. <p>Niveau technique, dommage qu’il ne soit pas possible de faire référence à des passages particuliers vu qu’ils sont déjà numérotés dans la version HTML (mais en&nbsp;CSS).</p>
  423. <p><mark>@nnotation(contexte)</mark>&nbsp;: J’ai <a href="/david/2023/12/08/">participé au développement</a> d’une partie des outils présentés dans la thèse et on se connait depuis un moment avec&nbsp;Antoine.</p>
  424. <a href="#hr-45" title="Lien vers cette section de la page"><hr id="hr-45" /></a>
  425. <blockquote>
  426. <p>La sociologie parle de «&nbsp;dépossession économique&nbsp;» et de «&nbsp;dépossession culturelle&nbsp;» pour nommer la manière dont la société limite les capacités d’accès à certaines ressources et les expériences qu’elles rendent possibles. Ne pourrait-on pas suggérer qu’il y a aussi, à côté de ces deux phénomènes, ce que l’on pourrait désigner comme des mécanismes de dépossession existentielle&#8239;? Subir la forme-de-vie qui s’empare de nous et nous fait être ce que nous sommes, c’est subir sa vie et subir certains modes d’existence alors que d’autres auraient pu beaucoup mieux nous convenir et nous rendre plus heureux. C’est même, en un sens, se faire voler son existence par la société et les autres — et peut-être même par soi-même, par une certaine version de&nbsp;soi-même.</p>
  427. <p><mark>Nous ne devons jamais, comme dit Adorno, confondre ce que nous sommes et ce que la société a fait de nous.</mark> Nous ne sommes pas de toute éternité ce que nous avons été amenés à devenir. Il n’y a donc pas de projet qui vise à mettre en place une analytique oppositionnelle de l’ordre social et de notre inscription à l’intérieur de celui-ci qui pourrait faire l’économie d’une investigation de l’existence — d’une interrogation sur les formes de la vie et le tissu relationnel qui nous&nbsp;constitue.</p>
  428. <p><cite><em>Une aspiration au dehors</em>, Geoffroy de&nbsp;Lagasnerie</cite></p>
  429. </blockquote>
  430. <p>D’une certaine manière, je vis une <em>dépossession existentielle</em> choisie en assistant à cet exercice après avoir bifurqué d’une carrière&nbsp;universitaire.</p>
  431. <p>Merci Antoine pour&nbsp;l’invitation.</p>
  432. <p><em>Antoine a <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2024/02/02/trois-reponses-sur-ma-these/" hreflang="fr"
  433. title="Consultation de l’article">répondu le 2&nbsp;février</a>
  434. <a href="/david/cache/2024/e58d4c2ceeab475aba6a179c035852f8/" hreflang="fr"
  435. data-tippy data-description="David a assisté à la soutenance de ma thèse de doctorat, il m&rsquo;a posé trois questions via un billet de blog, à défaut d&rsquo;avoir pu le faire pendant la soutenance."
  436. data-source="https://www.quaternum.net/2024/02/02/trois-reponses-sur-ma-these/"
  437. data-date="2024-02-18"
  438. data-favicon=""
  439. data-domain="quaternum.net"
  440. ><svg xmlns="http://www.w3.org/2000/svg"
  441. width="24" height="24" viewBox="0 0 24 24" fill="none"
  442. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  443. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  444. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  445. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  446. </svg>
  447. <span class="sr-only">[archive]</span></a>.</em></p>
  448. <nav>
  449. <p>
  450. <a href="/david/2024/commun/"
  451. title="Liste de tous les articles 2024 associés à cette étiquette"
  452. rel="tag">#commun</a>
  453. <a href="/david/2024/experience/"
  454. title="Liste de tous les articles 2024 associés à cette étiquette"
  455. rel="tag">#expérience</a>
  456. <a href="/david/2024/processus/"
  457. title="Liste de tous les articles 2024 associés à cette étiquette"
  458. rel="tag">#processus</a>
  459. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  460. </p>
  461. </nav>
  462. <h2>
  463. <a href="/david/2024/01/18/" title="Lien permanent vers cet article">Open-source</a> <time datetime="2024-01-18">18 janvier 2024</time>
  464. </h2>
  465. <p>Deux phrases du&nbsp;jour&nbsp;:</p>
  466. <ol>
  467. <li><q lang="en">Open Source is the Right to Repair, for software.</q>, <a data-link-domain="macaw.social" href="https://macaw.social/@andypiper/111774169944729337">sur&nbsp;masto</a></li>
  468. <li><q lang="fr">uMap est-il un produit ou un commun&#8239;?</q>, en réunion&nbsp;interne</li>
  469. </ol>
  470. <p>Faute de temps, le développement est laissé comme exercice aux&nbsp;lecteur·ices.</p>
  471. <nav>
  472. <p>
  473. <a href="/david/2024/commun/"
  474. title="Liste de tous les articles 2024 associés à cette étiquette"
  475. rel="tag">#commun</a>
  476. <a href="/david/2024/decision/"
  477. title="Liste de tous les articles 2024 associés à cette étiquette"
  478. rel="tag">#décision</a>
  479. <a href="/david/2024/opensource/"
  480. title="Liste de tous les articles 2024 associés à cette étiquette"
  481. rel="tag">#opensource</a>
  482. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  483. </p>
  484. </nav>
  485. <form action="/david/recherche/" method="get">
  486. <fieldset>
  487. <legend>Recherche</legend>
  488. <label for="input-search">Termes de votre recherche :</label>
  489. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  490. <input type="submit" value="Chercher">
  491. <p id="indexation-infos">
  492. <small>
  493. Seuls les contenus de ces 8 dernières années sont indexés.
  494. </small>
  495. </p>
  496. </fieldset>
  497. </form>
  498. <aside>
  499. <theme-toggle></theme-toggle>
  500. </aside>
  501. </article>
  502. <hr>
  503. <footer>
  504. <p>
  505. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  506. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  507. <a href="http://larlet.com"
  508. title="Go to my English profile"
  509. data-instant>Pro</a>
  510. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  511. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  512. </p>
  513. <template id="theme-selector">
  514. <form>
  515. <style type="text/css">
  516. fieldset div {
  517. text-align: center;
  518. }
  519. </style>
  520. <fieldset>
  521. <legend>Thème</legend>
  522. <div>
  523. <label>
  524. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  525. Auto
  526. </label>
  527. <label>
  528. <input type="radio" value="dark" name="chosen-color-scheme">
  529. Foncé
  530. </label>
  531. <label>
  532. <input type="radio" value="light" name="chosen-color-scheme">
  533. Clair
  534. </label>
  535. </div>
  536. </fieldset>
  537. </form>
  538. </template>
  539. </footer>
  540. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  541. <script>
  542. class ThemeToggle extends HTMLElement {
  543. constructor() {
  544. super()
  545. const themeSelectorTemplate = document.querySelector('#theme-selector')
  546. const form = themeSelectorTemplate.content.firstElementChild
  547. this.attachShadow({ mode: 'open' })
  548. this.shadowRoot.appendChild(form.cloneNode(true))
  549. }
  550. connectedCallback() {
  551. const form = this.shadowRoot.querySelector('form')
  552. form.addEventListener('change', (e) => {
  553. const chosenColorScheme = e.target.value
  554. localStorage.setItem('theme', chosenColorScheme)
  555. toggleTheme(chosenColorScheme)
  556. })
  557. const selectedTheme = localStorage.getItem('theme')
  558. if (selectedTheme && selectedTheme !== 'undefined') {
  559. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  560. }
  561. }
  562. }
  563. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  564. window.addEventListener('load', () => {
  565. let colorsLayer = undefined
  566. let hasDarkRules = false
  567. for (const styleSheet of Array.from(document.styleSheets)) {
  568. let mediaRules = []
  569. for (const layerRule of styleSheet.cssRules) {
  570. if (!(layerRule instanceof CSSLayerBlockRule)) {
  571. continue
  572. }
  573. if (layerRule.name === 'colors') {
  574. colorsLayer = layerRule
  575. }
  576. for (const cssRule of layerRule.cssRules) {
  577. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  578. continue
  579. }
  580. // WARNING: Safari does not have/supports `conditionText`.
  581. if (cssRule.conditionText) {
  582. if (cssRule.conditionText !== prefersColorSchemeDark) {
  583. continue
  584. }
  585. } else {
  586. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  587. continue
  588. }
  589. }
  590. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  591. }
  592. }
  593. // WARNING: do not try to insert a Rule to a styleSheet you are
  594. // currently iterating on, otherwise the browser will be stuck
  595. // in a infinite loop…
  596. for (const mediaRule of mediaRules) {
  597. // Safari requires the `0` second parameter (even if default).
  598. colorsLayer.insertRule(mediaRule.cssText, 0)
  599. hasDarkRules = true
  600. }
  601. }
  602. if (hasDarkRules) {
  603. if ('customElements' in window && !customElements.get('theme-toggle')) {
  604. customElements.define('theme-toggle', ThemeToggle)
  605. }
  606. }
  607. })
  608. </script>
  609. </body>
  610. </html>