Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  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. Dépendances
  14. — David Larlet</title>
  15. <meta name="description" content="I suspect one of the reasons for this is that Pinafore is written in Svelte v2 and Sapper – both of which are deprecated in favor of Svelte v3 and SvelteKit. Not only is there no migration path from Svelte v2 to v3, but there isn’t one from Sapper to SvelteKit either. (And on top of that, I had to fork Sapper pretty heavily.) Anyone making a bet on learning Pinafore’s tech stack is investing in a dead framework, so it’s not very attractive for new maintainers.">
  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>Dépendances</h1>
  110. </header>
  111. <nav>
  112. <p class="center">
  113. <a rel="prev"
  114. href="/david/2023/01/13/"
  115. title="Publication précédente : Eaux&nbsp;grises">← 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/01/15/"
  134. title="Publication suivante : Snow&nbsp;Fall">Suivant →</a>
  135. </p>
  136. </nav>
  137. <hr>
  138. <blockquote lang="en">
  139. <p>I suspect one of the reasons for this is that Pinafore is written in Svelte v2 and Sapper – both of which are deprecated in favor of Svelte v3 and SvelteKit. Not only is there no migration path from Svelte v2 to v3, but there isn’t one from Sapper to SvelteKit either. (And on top of that, I had to fork Sapper pretty heavily.) Anyone making a bet on learning Pinafore’s tech stack is investing in a dead framework, so <mark>it’s not very attractive for new&nbsp;maintainers.</mark></p>
  140. <p><cite><em><a href="https://nolanlawson.com/2023/01/09/retiring-pinafore/">Retiring Pinafore</a></em>&nbsp;(<a href="/david/cache/2023/b5acd8bbf209345ff300ea8c10c44181/">cache</a>)</cite></p>
  141. </blockquote>
  142. <p>«&nbsp;<span lang=en>Move fast and outdate things.</span>&nbsp;» n’est pas un <em>motto</em> mais une constatation. Je suis assez assidu des écrits de Baldur Bjarnason à ce sujet, que ce soit à travers son <a href="https://www.baldurbjarnason.com/">site</a>, son <a href="https://softwarecrisis.baldurbjarnason.com/">livre</a> ou sa <a href="https://softwarecrisis.dev/">newsletter</a>.</p>
  143. <p>Je crois que je commence à dépasser la sidération et le rejet pour tenter de comprendre un peu mieux les raisons profondes de toute cette complexité et cette vitesse que l’on s’impose, avec une composante historique&nbsp;notamment.</p>
  144. <p>2023, l’année de la maturité&nbsp;😂.</p>
  145. <blockquote lang="en">
  146. <p>The symptoms of pop&nbsp;culture:</p>
  147. <ul>
  148. <li>A “disdain for history”. Pop cultures believe history doesn’t have anything to teach&nbsp;them.</li>
  149. <li>Newer is automatically better. Pop cultures are built on the assumption that anything new or different is superior to established. Or, in other words, older is inherently&nbsp;inferior.</li>
  150. <li><mark>What’s next is going to be superior to what’s now.</mark> Pop cultures exist in perpetual anticipation of the next trend. Their disbelief of history appears to outsiders as a belief in&nbsp;progress.</li>
  151. <li>The “Pop” in “Pop Culture” stands for “popularity”. If it’s popular then it must be&nbsp;right.</li>
  152. </ul>
  153. <p>These traits are deeply irrational but they are the tech industry’s default mode of&nbsp;operation.</p>
  154. <p><cite><em><a href="https://softwarecrisis.dev/letters/tech-is-a-pop-culture/">Tech Companies Are Irrational Pop Cultures</a></em>&nbsp;(<a href="/david/cache/2023/45c1becce6fcd8254f2c99fbc1397018/">cache</a>)</cite></p>
  155. </blockquote>
  156. <hr />
  157. <blockquote lang="en">
  158. <p>We’re starting to see the initial decay hit the parts of the web dev ecosystem that are the furthest away from the cheap money fountains Google and Facebook are providing. Core projects run out of money. Git commits stop. <mark>A dependency you use breaks when one of its dependencies stops working,</mark> leading somebody to fork it with a quick fix or replacement dependency. Bandaid fixes to decaying OSS projects start to crop up in more and more places. We start to see blog posts saying that all we need to do is get enough people to donate money or pay for support. Everything will be fine. Just look at how OpenSSL got turned&nbsp;around.</p>
  159. <p>All of which is bad enough but also misses the&nbsp;point.</p>
  160. <p><cite><em><a href="https://www.baldurbjarnason.com/2021/the-oss-bubble-and-the-blogging-bubble/">The Open-Source Software bubble that is and the blogging bubble that was</a></em>&nbsp;(<a href="/david/cache/2023/d6b891fd250a6ae967ae55564770b67a/">cache</a>)</cite></p>
  161. </blockquote>
  162. <blockquote>
  163. <p>This JavaScript community (if judged by the demographics of this survey) seems to be comprised mostly of folks that are largely building with React, webpack, and Jest. With React on 3.2% of web sites and jQuery at 77.7% (as of January 2023), <mark>that’s a pretty small slice of a much larger&nbsp;community.</mark></p>
  164. <p>We seem to live in different&nbsp;worlds.</p>
  165. <p><cite><em><a href="https://www.zachleat.com/web/javascript-community/">JavaScript, Community</a></em>&nbsp;(<a href="/david/cache/2023/7ff62009f21336b8eb54ea18261bcfb7/">cache</a>)</cite></p>
  166. </blockquote>
  167. <nav>
  168. <p>
  169. <a href="/david/2023/gratitude/"
  170. title="Liste de tous les articles 2023 associés à cette étiquette"
  171. rel="tag">#gratitude</a>
  172. <a href="/david/2023/recherche/"
  173. title="Liste de tous les articles 2023 associés à cette étiquette"
  174. rel="tag">#recherche</a>
  175. <a href="/david/2023/technique/"
  176. title="Liste de tous les articles 2023 associés à cette étiquette"
  177. rel="tag">#technique</a>
  178. <a href="/david/#tags-2023" title="Liste de toutes les étiquettes 2023">
  179. <svg class="icon icon-tags">
  180. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
  181. </svg>
  182. tous ?</a>
  183. </p>
  184. </nav>
  185. <nav>
  186. <p class="center">
  187. <a rel="prev"
  188. href="/david/2023/01/13/"
  189. title="Publication précédente : Eaux&nbsp;grises">← Précédent</a> •
  190. <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
  191. • <a rel="next"
  192. href="/david/2023/01/15/"
  193. title="Publication suivante : Snow&nbsp;Fall">Suivant →</a>
  194. </p>
  195. </nav>
  196. </article>
  197. <hr>
  198. <footer>
  199. <p>
  200. <nobr>
  201. <a href="/david/" title="Aller à l’accueil">
  202. <svg class="icon icon-home">
  203. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  204. </svg>
  205. Accueil</a>
  206. </nobr>
  207. <nobr>
  208. <a href="/david/log/" title="Accès au flux RSS">
  209. <svg class="icon icon-rss2">
  210. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  211. </svg>
  212. Suivre</a>
  213. </nobr>
  214. <nobr>
  215. <a href="http://larlet.com"
  216. title="Go to my English profile"
  217. data-instant>
  218. <svg class="icon icon-user-tie">
  219. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  220. </svg>
  221. Pro</a>
  222. </nobr>
  223. <nobr>
  224. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
  225. <svg class="icon icon-mail">
  226. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  227. </svg>
  228. Email</a>
  229. </nobr>
  230. <nobr>
  231. <abbr class="nowrap"
  232. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
  233. <svg class="icon icon-hammer2">
  234. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  235. </svg>
  236. Légal</abbr>
  237. </nobr>
  238. </p>
  239. <template id="theme-selector">
  240. <form>
  241. <fieldset>
  242. <legend>
  243. <svg class="icon icon-brightness-contrast">
  244. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  245. </svg>
  246. Thème
  247. </legend>
  248. <label>
  249. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  250. Auto
  251. </label>
  252. <label>
  253. <input type="radio" value="dark" name="chosen-color-scheme">
  254. Foncé
  255. </label>
  256. <label>
  257. <input type="radio" value="light" name="chosen-color-scheme">
  258. Clair
  259. </label>
  260. </fieldset>
  261. </form>
  262. </template>
  263. </footer>
  264. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  265. <script>
  266. function loadThemeForm(templateName) {
  267. const themeSelectorTemplate = document.querySelector(templateName)
  268. const form = themeSelectorTemplate.content.firstElementChild
  269. themeSelectorTemplate.replaceWith(form)
  270. form.addEventListener('change', (e) => {
  271. const chosenColorScheme = e.target.value
  272. localStorage.setItem('theme', chosenColorScheme)
  273. toggleTheme(chosenColorScheme)
  274. })
  275. const selectedTheme = localStorage.getItem('theme')
  276. if (selectedTheme && selectedTheme !== 'undefined') {
  277. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  278. }
  279. }
  280. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  281. window.addEventListener('load', () => {
  282. let hasDarkRules = false
  283. for (const styleSheet of Array.from(document.styleSheets)) {
  284. let mediaRules = []
  285. for (const cssRule of styleSheet.cssRules) {
  286. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  287. continue
  288. }
  289. // WARNING: Safari does not have/supports `conditionText`.
  290. if (cssRule.conditionText) {
  291. if (cssRule.conditionText !== prefersColorSchemeDark) {
  292. continue
  293. }
  294. } else {
  295. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  296. continue
  297. }
  298. }
  299. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  300. }
  301. // WARNING: do not try to insert a Rule to a styleSheet you are
  302. // currently iterating on, otherwise the browser will be stuck
  303. // in a infinite loop…
  304. for (const mediaRule of mediaRules) {
  305. styleSheet.insertRule(mediaRule.cssText)
  306. hasDarkRules = true
  307. }
  308. }
  309. if (hasDarkRules) {
  310. loadThemeForm('#theme-selector')
  311. }
  312. })
  313. </script>
  314. </body>
  315. </html>