Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 52KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791
  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 #dystopie
  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="Publications relatives au tag #dystopie">
  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. details[open] summary {
  109. display: none;
  110. }
  111. </style>
  112. <body data-instant-intensity="viewport-all">
  113. <article>
  114. <header>
  115. <hgroup>
  116. <h1>#dystopie</h1>
  117. <p>Publications relatives à cette étiquette</p>
  118. </hgroup>
  119. </header>
  120. <nav>
  121. <p>
  122. <a href="/david/" title="Aller à l’accueil">
  123. Accueil</a>
  124. <a rel="tags"
  125. href="/david/2024/#tags"
  126. title="Liste de toutes les étiquettes">
  127. Étiquettes</a>
  128. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
  129. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  130. </p>
  131. </nav>
  132. <h2>
  133. <a href="/david/2024/05/31/" title="Lien permanent vers cet article">Technocritique</a> <time datetime="2024-05-31">31 mai 2024</time>
  134. </h2>
  135. <blockquote lang="en">
  136. <p>Given the extreme connectivity constraints at the South Pole, I wrote a Python script for publishing to S3 that worked well in the challenging environment. It uses the S3 API to upload assets in small chunks. It detects and resumes failed uploads without losing progress. It waits until everything is safely uploaded before publishing the new&nbsp;version.</p>
  137. <p>If I can do it, unpaid, working alone, for my silly little hobby blog, in 200&nbsp;lines of Python… <mark>surely your team of engineers can do so</mark> for your flagship&nbsp;webapp.</p>
  138. <p><cite><em><a data-link-domain="brr.fyi" href="https://brr.fyi/posts/engineering-for-slow-internet" hreflang="en"
  139. title="Consultation de l’article (anglais)">Engineering for Slow Internet</a>
  140. <a href="/david/cache/2024/9e9c6f97d732010e14201f1624782ddc/" hreflang="en"
  141. data-tippy data-description="How to minimize user frustration in Antarctica."
  142. data-source="https://brr.fyi/posts/engineering-for-slow-internet"
  143. data-date="2024-05-31"
  144. data-favicon="https://brr.fyi/favicon-32x32.png"
  145. data-domain="brr.fyi"
  146. ><svg xmlns="http://www.w3.org/2000/svg"
  147. width="24" height="24" viewBox="0 0 24 24" fill="none"
  148. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  149. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  150. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  151. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  152. </svg>
  153. <span class="sr-only">[archive]</span></a></em></cite></p>
  154. </blockquote>
  155. <p>En ce moment, suite à une mise à jour de l’application SONOS rendant mes enceintes inutilisables (n’achetez jamais cette marque…), je m’amuse à faire une interface web grâce au <a data-link-domain="github.com" href="https://github.com/avantrec/soco-cli/">serveur open-source</a> qui a été développé ces dernières&nbsp;années.</p>
  156. <p>C’est triste d’en arriver là, je ressens fort le pouvoir que me procurent mes capacités de développeur mais je sais aussi que la majorité subit l’emmerdification logicielle (c’était déjà pas terrible avant&#8239;!) sans avoir d’autre&nbsp;option.</p>
  157. <p>Ce n’est pas encore prêt à être utilisable par d’autres mais c’est stimulant d’ajouter des fonctionnalités au fil des besoins locaux. Je réalise à quel point le manque de réactivité de l’app de 175Mo n’est pas liée au <em>hardware</em> vu que j’arrive à avoir quelque chose d’immédiat avec quelques lignes de Python +&nbsp;JS/HTML.</p>
  158. <blockquote lang="en">
  159. <p>The <strong>only way</strong> I was able to get this done was by <strong>turning off the phone entirely</strong>, right before Internet access dropped, and then turning it back on when Internet access resumed at the next satellite pass. This tricked the phone into not giving up on the download, because it was totally off during the period without Internet. It never had a chance to fail. By doing this, I was able to spread out the download across multiple satellite passes, and I could complete the&nbsp;download.</p>
  160. <p>This is an absurd workaround! I should not have had to do&nbsp;this.</p>
  161. <p><cite><em>Ibid.</em></cite></p>
  162. </blockquote>
  163. <a href="#hr-175" title="Lien vers cette section de la page"><hr id="hr-175" /></a>
  164. <blockquote>
  165. <p>À chaque technologie qu’on vous propose, qui émerge dans le champ commercial, il s’agit toujours de se demander&nbsp;: en quoi cette tech va-t-elle nourrir ou appauvrir mon rapport aux autres, au monde et à moi-même&#8239;? Il est très facile de mesurer le pouvoir qu’une appli ou qu’un service numérique apporte, beaucoup plus insidieux de réaliser ce qu’elle nous fait perdre ou même dégrade dans nos relations et nos puissances propres&nbsp;: puissance de créer, de réfléchir, d’imaginer, d’être empathique, d’écouter, puissance physique de ressentir par soi-même, de se déplacer, de garder son énergie, etc.</p>
  166. <p><mark>La technocritique doit discriminer pouvoir (le faire faire) et puissance (le faire par soi-même, en autonomie),</mark> ouverture ou fermeture au monde, enrichissement ou effilochement des liens, impact sur l’écologie en amont et en aval, exhaustion des ressources, impacts sociaux sur les pays en développement, pollutions induites, pour notre Terre — mais aussi dans nos cerveaux avec le siphonnage permanent de notre attention, de nos temps libres par le numérique. Et elle doit aussi se demander&nbsp;: quels désirs doit-on encourager&#8239;? Quelle liberté ou émancipation la techno doit-elle nous aider à atteindre&#8239;? Le peut-elle seulement, et dans quel contexte&nbsp;d’usage&#8239;?</p>
  167. <p><cite><em><a data-link-domain="bonpote.com" href="https://bonpote.com/on-a-besoin-de-pirates-pour-saboter-les-datacenters-damazon-pour-bloquer-les-plateformes-duber-ou-de-airbnb/" hreflang="fr"
  168. title="Consultation de l’article">«&nbsp;On a besoin de pirates pour saboter les datacenters d’Amazon, pour bloquer les plateformes d’Uber ou de Airbnb&nbsp;»</a>
  169. <a href="/david/cache/2024/02acbf716d95797a371706c8983d6164/" hreflang="fr"
  170. data-tippy data-description="La Silicon Valley n’est qu’à la marge soucieuse de l’écologie. Mais c’est aussi qu’elle croit profondément au solutionnisme techno pour"
  171. data-source="https://bonpote.com/on-a-besoin-de-pirates-pour-saboter-les-datacenters-damazon-pour-bloquer-les-plateformes-duber-ou-de-airbnb/"
  172. data-date="2024-05-31"
  173. data-favicon="https://bonpote.com/wp-content/uploads/2024/01/ezez_1.ico"
  174. data-domain="bonpote.com"
  175. ><svg xmlns="http://www.w3.org/2000/svg"
  176. width="24" height="24" viewBox="0 0 24 24" fill="none"
  177. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  178. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  179. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  180. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  181. </svg>
  182. <span class="sr-only">[archive]</span></a></em></cite></p>
  183. </blockquote>
  184. <p><del>Martine</del> Alain aux&nbsp;US.</p>
  185. <a href="#hr-176" title="Lien vers cette section de la page"><hr id="hr-176" /></a>
  186. <blockquote lang="en">
  187. <p>Google utilizes cookie history, logged-in Chrome data, and pattern detection (referred to in the leak as “unsquashed” clicks versus “squashed” clicks) as effective means for fighting manual &amp; automated click spam. […]</p>
  188. <p>My anonymous source claimed that way back in 2005, <mark>Google wanted the full clickstream of billions of Internet users, and with Chrome, they’ve now got it.</mark> The API documents suggest Google calculates several types of metrics that can be called using Chrome views related to both individual pages and entire&nbsp;domains.</p>
  189. <p>This document, describing the features around how Google creates Sitelinks, is particularly interesting. It showcases a call named topUrl, which is “A list of top urls with highest two_level_score, i.e., chrome_trans_clicks.” My read is that Google likely uses the number of clicks on pages in Chrome browsers and uses that to determine the most popular/important URLs on a site, which go into the calculation of which to include in the sitelinks&nbsp;feature.</p>
  190. <p><cite><em><a data-link-domain="sparktoro.com" href="https://sparktoro.com/blog/an-anonymous-source-shared-thousands-of-leaked-google-search-api-documents-with-me-everyone-in-seo-should-see-them/" hreflang="en"
  191. title="Consultation de l’article (anglais)">An Anonymous Source Shared Thousands of Leaked Google Search API Documents with Me; Everyone in SEO Should See Them</a>
  192. <a href="/david/cache/2024/2eba81418d244e79cef08638976dbeae/" hreflang="en"
  193. data-tippy data-description="On Sunday, May 5th, I received an email from a person claiming to have access to a massive leak of API documentation from inside Google’s Search division."
  194. data-source="https://sparktoro.com/blog/an-anonymous-source-shared-thousands-of-leaked-google-search-api-documents-with-me-everyone-in-seo-should-see-them/"
  195. data-date="2024-05-31"
  196. data-favicon="https://sparktoro.com/favicon.ico"
  197. data-domain="sparktoro.com"
  198. ><svg xmlns="http://www.w3.org/2000/svg"
  199. width="24" height="24" viewBox="0 0 24 24" fill="none"
  200. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  201. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  202. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  203. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  204. </svg>
  205. <span class="sr-only">[archive]</span></a></em></cite></p>
  206. </blockquote>
  207. <p>Ce qui est bien avec les produits Google c’est qu’on n’est jamais&nbsp;surpris.</p>
  208. <a href="#hr-177" title="Lien vers cette section de la page"><hr id="hr-177" /></a>
  209. <blockquote>
  210. <p>En prenant un tout petit peu de recul Josh se rend compte que cette troupe ne comprend pas vraiment ce qu’est le Bluetooth, son fonctionnement SANS FIL justement. Josh a de son côté pris part à des développement dans ce format au cours de son activité professionnelle. Il a même remonté des bugs rencontrés sur ce format à Ericsson au début des années 2000. <mark>Comment, avec un diplôme d’informatique en poche, Josh peut-il avoir tord</mark> et comment ces gens qui ne comprennent pas le fonctionnement du Bluetooth peuvent-ils avoir&nbsp;raison&#8239;?</p>
  211. <p><cite><em><a data-link-domain="minimachines.net" href="https://www.minimachines.net/actu/casque-apple-lightning-bluetooth-127339" hreflang="fr"
  212. title="Consultation de l’article">L’aventurier du casque Bluetooth maudit</a>
  213. <a href="/david/cache/2024/acf33204fda8c91ac054bb26f99e8c59/" hreflang="fr"
  214. data-tippy data-description="Cette histoire est un témoignage étonnant d'un internaute qui ne comprend plus comment le Bluetooth - et notre monde - fonctionnent."
  215. data-source="https://www.minimachines.net/actu/casque-apple-lightning-bluetooth-127339"
  216. data-date="2024-05-31"
  217. data-favicon="https://www.minimachines.net/wp-content/uploads/2012/09/favicon1.png"
  218. data-domain="minimachines.net"
  219. ><svg xmlns="http://www.w3.org/2000/svg"
  220. width="24" height="24" viewBox="0 0 24 24" fill="none"
  221. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  222. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  223. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  224. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  225. </svg>
  226. <span class="sr-only">[archive]</span></a></em></cite></p>
  227. </blockquote>
  228. <p>Cette histoire peut être lue avec tellement d’angles —&nbsp;et de biais&nbsp;— possibles. Je me demande quel serait le bilan carbone des deux options sur du long terme en tenant compte de la production, du transport, de la durabilité, de la consommation, etc.</p>
  229. <a href="#hr-178" title="Lien vers cette section de la page"><hr id="hr-178" /></a>
  230. <blockquote lang="en">
  231. <p>This approach serves as a reminder of the constantly changing tactics of cybercriminals and, unfortunately, illustrates why you can never blindly trust what someone shares&nbsp;online.</p>
  232. <p>Instead, <mark>developers must verify the source of all packages they add to their projects,</mark> and even if it feels trustworthy, check the code (with word wrap enabled) for unusual or obfuscated commands that will be&nbsp;executed.</p>
  233. <p><cite><em><a data-link-domain="bleepingcomputer.com" href="https://www.bleepingcomputer.com/news/security/cybercriminals-pose-as-helpful-stack-overflow-users-to-push-malware/" hreflang="en"
  234. title="Consultation de l’article (anglais)">Cybercriminals pose as “helpful” Stack Overflow users to push malware</a>
  235. <a href="/david/cache/2024/1bff60d11f3a030aa5b3d1da84dce189/" hreflang="en"
  236. data-tippy data-description="Cybercriminals are abusing Stack Overflow in an interesting approach to spreading malware&mdash;answering users&#039; questions by promoting a malicious PyPi package that installs Windows information-stealing malware."
  237. data-source="https://www.bleepingcomputer.com/news/security/cybercriminals-pose-as-helpful-stack-overflow-users-to-push-malware/"
  238. data-date="2024-05-31"
  239. data-favicon="https://www.bleepstatic.com/favicon/bleeping.ico"
  240. data-domain="bleepingcomputer.com"
  241. ><svg xmlns="http://www.w3.org/2000/svg"
  242. width="24" height="24" viewBox="0 0 24 24" fill="none"
  243. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  244. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  245. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  246. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  247. </svg>
  248. <span class="sr-only">[archive]</span></a></em></cite></p>
  249. </blockquote>
  250. <p>Bon&nbsp;courage.</p>
  251. <a href="#hr-179" title="Lien vers cette section de la page"><hr id="hr-179" /></a>
  252. <blockquote>
  253. <p>J’ai appris qu’un produit beau avec des erreurs fonc­tionne mieux qu’un produit moche sans erreurs. <mark>C’est contre-intui­tif pour moi et pas dans mes attentes mais c’est la réalité du terrain.</mark> J’ai appris qu’au-delà du <em>beau</em>, l’ex­pé­rience utili­sa­teur dans la mani­pu­la­tion des inter­faces était une vraie exper­tise qui faisait toute la diffé­rence. J’ai appris que l’adé­qua­tion aux besoins métier primait encore plus sur tout&nbsp;ça.</p>
  254. <p><cite><em><a data-link-domain="n.survol.fr" href="https://n.survol.fr/n/quick-n-dirty" hreflang="fr"
  255. title="Consultation de l’article">Quick ‘n dirty - Carnet de notes</a>
  256. <a href="/david/cache/2024/23c807abc870219e09f41f92bc869d37/" hreflang="fr"
  257. data-tippy data-description="J'ai appris.En bon ingénieur j'ai beaucoup poussé l'idée qu'il faut un produit très bien foutu, sans erreur, sans zone d'ombre, performant et que, quand tout ça va, les utilisateurs vont ven"
  258. data-source="https://n.survol.fr/n/quick-n-dirty"
  259. data-date="2024-05-31"
  260. data-favicon=""
  261. data-domain="n.survol.fr"
  262. ><svg xmlns="http://www.w3.org/2000/svg"
  263. width="24" height="24" viewBox="0 0 24 24" fill="none"
  264. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  265. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  266. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  267. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  268. </svg>
  269. <span class="sr-only">[archive]</span></a></em></cite></p>
  270. </blockquote>
  271. <p>Oui. J’ai appris cela&nbsp;aussi.</p>
  272. <p>J’ai même appris que des gué-guerres politiques internes pouvaient sabrer la meilleure des&nbsp;techniques.</p>
  273. <nav>
  274. <p>
  275. <a href="/david/2024/apprentissage/"
  276. title="Liste de tous les articles 2024 associés à cette étiquette"
  277. rel="tag">#apprentissage</a>
  278. <a href="/david/2024/deception/"
  279. title="Liste de tous les articles 2024 associés à cette étiquette"
  280. rel="tag">#déception</a>
  281. <a href="/david/2024/dystopie/"
  282. title="Liste de tous les articles 2024 associés à cette étiquette"
  283. rel="tag">#dystopie</a>
  284. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  285. </p>
  286. </nav>
  287. <h2>
  288. <a href="/david/2024/04/13/" title="Lien permanent vers cet article">Fondation</a> <time datetime="2024-04-13">13 avril 2024</time>
  289. </h2>
  290. <blockquote>
  291. <p>— A mesure que Trantor devient plus spécialisée, dit Gaal, elle devient plus vulnérable, moins apte à se défendre. Qui plus est, à mesure que s’y développe l’administration centrale de l’Empire, la planète devient une proie plus enviable. Étant donné les difficultés croissantes que soulève le problème de la succession impériale, les querelles toujours plus violentes qui opposent les grandes familles les unes aux autres, le sentiment de la responsabilité envers la société va s’affaiblissant.<br />
  292. — C’est suffisant. Et quelles sont les probabilités numériques de destruction totale d’ici trois siècles&#8239;?<br />
  293. — Je ne saurais vous le dire.<br />
  294. — […] Le chiffre exact est 92,5&#8239;%.<br />
  295. — Voilà donc pourquoi on vous appelle Cassandre Seldon, dit Gaal. Je n’ai rien vu de tout cela dans les publications scientifiques.<br />
  296. — On ne peut pas publier des choses pareilles, voyons. <mark>Vous ne pensez tout de même pas que l’Empire irait révéler ainsi sa faiblesse.</mark> C’est la base de la psychohistoire la plus&nbsp;élémentaire.</p>
  297. <p><cite><em>Fondation 1</em>, Isaac Asimov, traduit de l’américain par Jean Rosenthal et Pierre Billon, complété et harmonisé par Philippe&nbsp;Gindre</cite></p>
  298. </blockquote>
  299. <p>Après un <a href="/david/2024/02/06/" title="Anneau">séjour en terre du milieu</a>, me voici sur <em>Trantor</em>. Je ne l’ai jamais lu mais c’est la série TV qui m’a donné envie de&nbsp;creuser.</p>
  300. <p>L’interprétation de ce passage est laissée comme&nbsp;exercice.</p>
  301. <blockquote>
  302. <p>D’après une ou deux personnes bien informées, je suis un genre de geek de tout. Un Sheldon en herbe, mais&nbsp;sociable.</p>
  303. <p><cite><em><a data-link-domain="nota-bene.org" href="https://nota-bene.org/Geek-de-tout" hreflang="fr"
  304. title="Consultation de l’article">Geek de tout | nota-bene.org</a>
  305. <a href="/david/cache/2024/e4ca68d300ca1572c2a41b6e2887c663/" hreflang="fr"
  306. data-tippy data-description="Un inventaire à la Prévert, pour rire."
  307. data-source="https://nota-bene.org/Geek-de-tout"
  308. data-date="2024-04-14"
  309. data-favicon="https://nota-bene.org/squelettes/favicon.ico"
  310. data-domain="nota-bene.org"
  311. ><svg xmlns="http://www.w3.org/2000/svg"
  312. width="24" height="24" viewBox="0 0 24 24" fill="none"
  313. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  314. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  315. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  316. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  317. </svg>
  318. <span class="sr-only">[archive]</span></a></em></cite></p>
  319. </blockquote>
  320. <a href="#hr-148" title="Lien vers cette section de la page"><hr id="hr-148" /></a>
  321. <blockquote lang="en">
  322. <p>I’ve found I personally have three <em>states</em> of&nbsp;being…</p>
  323. <ul>
  324. <li><strong>Hyperfocus</strong>, where I’m deeply focused on one thing and phenomenally&nbsp;productive.</li>
  325. <li><strong>Physical</strong>, where I have lots of energy, but little mental&nbsp;focus.</li>
  326. <li><strong>Burnt out</strong>, where both my mental and physical energy are&nbsp;low.</li>
  327. </ul>
  328. <p>Your states of being might be different. These are three I tend to operate in most&nbsp;frequently.</p>
  329. <p><cite><em><a data-link-domain="adhdftw.com" href="https://adhdftw.com/follow-your-adhd-flow/" hreflang="en"
  330. title="Consultation de l’article (anglais)">Follow your ADHD flow</a>
  331. <a href="/david/cache/2024/3d60afcca78959bd637ac725d0a7fc7e/" hreflang="en"
  332. data-tippy data-description="One of the most things that’s had the biggest impact on my ability to be happy and fulfilled has been working with my ADHD instead of trying to fight against it."
  333. data-source="https://adhdftw.com/follow-your-adhd-flow/"
  334. data-date="2024-04-14"
  335. data-favicon="https://adhdftw.com/img/favicon.ico"
  336. data-domain="adhdftw.com"
  337. ><svg xmlns="http://www.w3.org/2000/svg"
  338. width="24" height="24" viewBox="0 0 24 24" fill="none"
  339. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  340. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  341. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  342. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  343. </svg>
  344. <span class="sr-only">[archive]</span></a></em></cite></p>
  345. </blockquote>
  346. <p>Peut-être que cette notion de <a href="/david/2024/03/08/" title="Flow">flow</a> n’est pas si anodine en fait&nbsp;🤔. La communauté sur Discord évoque notamment l’importance de l’exercice comme outil de canalisation et <a href="/david/2024/04/14/">ce dernier mois</a> je ne peux que constater à quel point c’est vrai <em>pour moi</em>. J’ai un peu de mal avec les étiquettes d’auto-défintion/enfermement mais je constate aussi que pour beaucoup de personnes cela permet de reconsidérer ses propres fondations pour s’accepter et mieux se re·connaître&nbsp;ainsi.</p>
  347. <p>Une identité n’est pas une suite d’acronymes mais plutôt une suite d’explorations et de compréhensions de ce que signifient ces acronymes dans sa propre façon&nbsp;d’être&#8239;?</p>
  348. <nav>
  349. <p>
  350. <a href="/david/2024/dystopie/"
  351. title="Liste de tous les articles 2024 associés à cette étiquette"
  352. rel="tag">#dystopie</a>
  353. <a href="/david/2024/lecture/"
  354. title="Liste de tous les articles 2024 associés à cette étiquette"
  355. rel="tag">#lecture</a>
  356. <a href="/david/2024/psychologie/"
  357. title="Liste de tous les articles 2024 associés à cette étiquette"
  358. rel="tag">#psychologie</a>
  359. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  360. </p>
  361. </nav>
  362. <h2>
  363. <a href="/david/2024/03/04/" title="Lien permanent vers cet article">Jour 1</a> <time datetime="2024-03-04">4 mars 2024</time>
  364. </h2>
  365. <p>Une réservation de longue date qui s’est transformée en sortie familiale (!), malheureusement nous n’avons pas pu rejoindre le refuge à ski faute de neige suffisante. C’était problématique car j’avais prévu de traîner une bonne partie de l’équipement, ce qui se révélait être un peu plus lourd sur le dos. Bon, aussi, on était partis sur une raclette, ça n’aide&nbsp;pas&nbsp;😅.</p>
  366. <p>J’avais très peur que le sentier soit peu praticable sans percer à chaque pas, ce qui m’était déjà arrivé dans un tel contexte. Vu le poids du sac, je craignais notamment que ma cheville en cours de réparation refasse le même mouvement en descente… mais nous étions à une poignée de degrés de cet état de la neige pour notre plus grand&nbsp;bonheur.</p>
  367. <p>Ce n’était pas non plus de tout repos et la récompense d’une lac dégelant à l’arrivée était bien méritée. Il est rare d’avoir ces conditions très douces dans un contexte hivernal, on en avait même oublié de prendre nos&nbsp;tuques&#8239;!</p>
  368. <p><em>Tests du jour&nbsp;: les barquettes en aluminium pour faire réflecteur de bougies. Efficace. Les bougies longues durées d’Ikea pour faire fondre du fromage. Pas&nbsp;efficace.</em></p>
  369. <figure>
  370. <a href="/static/david/2024/2024-03-04-lac-corbeau.jpg"
  371. title="Cliquer pour une version haute résolution">
  372. <img
  373. src="/static/david/2024/2024-03-04-lac-corbeau.jpg"
  374. width="3024" height="4032"
  375. srcset="/static/david/2024/2024-03-04-lac-corbeau.jpg 3024w, /static/david/2024/2024-03-04-lac-corbeau_660x440.jpg 660w, /static/david/2024/2024-03-04-lac-corbeau_990x660.jpg 990w, /static/david/2024/2024-03-04-lac-corbeau_1320x880.jpg 1320w"
  376. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  377. loading="lazy"
  378. decoding="async"
  379. alt="Lac corbeau avec des boulots au premier plan.">
  380. </a>
  381. <figcaption>Un décor très minecrafteux&nbsp;(sic).</figcaption>
  382. </figure>
  383. <nav>
  384. <p>
  385. <a href="/david/2024/dystopie/"
  386. title="Liste de tous les articles 2024 associés à cette étiquette"
  387. rel="tag">#dystopie</a>
  388. <a href="/david/2024/foret/"
  389. title="Liste de tous les articles 2024 associés à cette étiquette"
  390. rel="tag">#forêt</a>
  391. <a href="/david/2024/solastalgia/"
  392. title="Liste de tous les articles 2024 associés à cette étiquette"
  393. rel="tag">#solastalgia</a>
  394. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  395. </p>
  396. </nav>
  397. <h2>
  398. <a href="/david/2024/02/21/" title="Lien permanent vers cet article">Cinéma</a> <time datetime="2024-02-21">21 février 2024</time>
  399. </h2>
  400. <blockquote lang="en">
  401. <p>Software is a creative industry with more in common with media production industries than&nbsp;housebuilding.</p>
  402. <p><cite><em><a data-link-domain="baldurbjarnason.com" href="https://www.baldurbjarnason.com/2024/software-is-a-medium-of-setbacks/" hreflang="en"
  403. title="Consultation de l’article (anglais)">Software is a medium of setbacks, but a medium’s limitations don’t define the artist</a>
  404. <a href="/david/cache/2024/d133365d1dec62b9ad7ab4c911db863a/" hreflang="en"
  405. data-tippy data-description="Much of the time, progress in software development comes coupled with a matching regression.“We’ve made it better.”(Whispered) “But we’ve also made it worse. The evolution of Apple’s computing devices makes for a decent example."
  406. data-source="https://www.baldurbjarnason.com/2024/software-is-a-medium-of-setbacks/"
  407. data-date="2024-02-21"
  408. data-favicon="https://www.baldurbjarnason.com/dark-bird.svg"
  409. data-domain="baldurbjarnason.com"
  410. ><svg xmlns="http://www.w3.org/2000/svg"
  411. width="24" height="24" viewBox="0 0 24 24" fill="none"
  412. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  413. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  414. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  415. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  416. </svg>
  417. <span class="sr-only">[archive]</span></a></em></cite></p>
  418. </blockquote>
  419. <p>Pour filer la métaphore, je me demande si les assistants à base de <a data-link-domain="vitrinelinguistique.oqlf.gouv.qc.ca" href="https://vitrinelinguistique.oqlf.gouv.qc.ca/fiche-gdt/fiche/26570880/grand-modele-de-langage">grands modèles de langage</a> seraient l’équivalent des environnements verts dans lesquels évoluent les acteur·ices aujourd’hui. Leur métier a changé avec la technologie, leur jeu a dû s’adapter pour transmettre des émotions dans un contexte où iels ne maîtrisent plus du tout la chaîne de représentation de leur travail. J’imagine que même la vérification de leur prise nécessite une bonne dose&nbsp;d’imaginaire.</p>
  420. <p>Quel est leur sentiment à la fin d’une journée de tournage&#8239;? Quel sera le&nbsp;mien&#8239;?</p>
  421. <blockquote lang="en">
  422. <p>Dear Mr. Architect!</p>
  423. <p>Please design and build me a house. I am not quite sure of what I need, so you should use your discretion. My house should have between two and forty-five bedrooms. Just make sure the plans are such that the bedrooms can be easily added or deleted. When you bring the blueprints to me, I will make the final decision of what I want. Also, bring me the cost breakdown for each configuration so that I can arbitrarily pick&nbsp;one.</p>
  424. <p><cite><em><a data-link-domain="gksoft.com" href="http://www.gksoft.com/a/fun/architects.html" hreflang="en"
  425. title="Consultation de l’article (anglais)">If Architects had to work like Programmers</a>
  426. <a href="/david/cache/2024/2ad967b8fc35e160fa8e6c1d2a3b4734/" hreflang="en"
  427. data-tippy data-description="You must be thrilled to be working on an interesting project as this!"
  428. data-source="http://www.gksoft.com/a/fun/architects.html"
  429. data-date="2024-02-21"
  430. data-favicon=""
  431. data-domain="gksoft.com"
  432. ><svg xmlns="http://www.w3.org/2000/svg"
  433. width="24" height="24" viewBox="0 0 24 24" fill="none"
  434. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  435. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  436. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  437. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  438. </svg>
  439. <span class="sr-only">[archive]</span></a></em>, 1995</cite></p>
  440. </blockquote>
  441. <a href="#hr-83" title="Lien vers cette section de la page"><hr id="hr-83" /></a>
  442. <blockquote>
  443. <p>Fracas est un collectif queer et féministe d’aide à la gestion de conflits interpersonnels, de violences et d’agressions au sein de&nbsp;collectifs.</p>
  444. <p><cite><em><a data-link-domain="collectif-fracas.com" href="https://www.collectif-fracas.com/" hreflang="fr"
  445. title="Consultation de l’article">Fracas, collectif queer et féministe d’aide à la gestion de conflits</a>
  446. <a href="/david/cache/2024/f1041ff1c0dfabc719d64a4a5bcb0c10/" hreflang="fr"
  447. data-tippy data-description="Fracas est un collectif queer et féministe d’aide à la gestion de conflits interpersonnels, de violences et d’agressions au sein de collectifs."
  448. data-source="https://www.collectif-fracas.com/"
  449. data-date="2024-02-21"
  450. data-favicon="https://assets-global.website-files.com/60339ece26e0011279a8b071/614c50304051ad041149ae60_favicon.png"
  451. data-domain="collectif-fracas.com"
  452. ><svg xmlns="http://www.w3.org/2000/svg"
  453. width="24" height="24" viewBox="0 0 24 24" fill="none"
  454. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  455. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  456. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  457. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  458. </svg>
  459. <span class="sr-only">[archive]</span></a></em></cite></p>
  460. </blockquote>
  461. <p>Si peu de temps et tellement à&nbsp;explorer.</p>
  462. <p>(<a data-link-domain="cqfd-journal.org" href="https://cqfd-journal.org/Se-reapproprier-nos-conflits" hreflang="fr"
  463. title="Consultation de l’article">Via CQFD</a>
  464. <a href="/david/cache/2024/81e8bd49021e320b84e5d4fbd4c7f587/" hreflang="fr"
  465. data-tippy data-description="En se penchant sur les manières dont sont prises en charge les violences (notamment sexistes et sexuelles) dans les milieux militants, l’ouvrage (...)"
  466. data-source="https://cqfd-journal.org/Se-reapproprier-nos-conflits"
  467. data-date="2024-02-21"
  468. data-favicon="https://cqfd-journal.org/squelettes/favicon.ico"
  469. data-domain="cqfd-journal.org"
  470. ><svg xmlns="http://www.w3.org/2000/svg"
  471. width="24" height="24" viewBox="0 0 24 24" fill="none"
  472. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  473. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  474. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  475. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  476. </svg>
  477. <span class="sr-only">[archive]</span></a> qui arrive à ne faire aucun lien vers le site en question, ça me rend&nbsp;fou…)</p>
  478. <nav>
  479. <p>
  480. <a href="/david/2024/dystopie/"
  481. title="Liste de tous les articles 2024 associés à cette étiquette"
  482. rel="tag">#dystopie</a>
  483. <a href="/david/2024/ia/"
  484. title="Liste de tous les articles 2024 associés à cette étiquette"
  485. rel="tag">#IA</a>
  486. <a href="/david/2024/psychologie/"
  487. title="Liste de tous les articles 2024 associés à cette étiquette"
  488. rel="tag">#psychologie</a>
  489. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  490. </p>
  491. </nav>
  492. <h2>
  493. <a href="/david/2024/02/01/" title="Lien permanent vers cet article">Vision</a> <time datetime="2024-02-01">1 février 2024</time>
  494. </h2>
  495. <blockquote lang="en">
  496. <p>But if you were to try just one thing using Vision Pro — just one thing — it has to be <mark>watching a movie</mark> in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your&nbsp;wallet.</p>
  497. <p><cite><em><a data-link-domain="daringfireball.net" href="https://daringfireball.net/2024/01/the_vision_pro" hreflang="en"
  498. title="Consultation de l’article (anglais)">Daring Fireball: The Vision Pro</a>
  499. <a href="/david/cache/2024/cd9184008ba5d9e4c9be4d0a0eea4f60/" hreflang="en"
  500. data-tippy data-description="A headset, a spatial productivity platform, and a personal entertainment device."
  501. data-source="https://daringfireball.net/2024/01/the_vision_pro"
  502. data-date="2024-01-31"
  503. data-favicon="https://daringfireball.net/graphics/favicon.ico?v=005"
  504. data-domain="daringfireball.net"
  505. ><svg xmlns="http://www.w3.org/2000/svg"
  506. width="24" height="24" viewBox="0 0 24 24" fill="none"
  507. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  508. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  509. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  510. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  511. </svg>
  512. <span class="sr-only">[archive]</span></a></em></cite></p>
  513. </blockquote>
  514. <p>Ce jouet est bien trop cher… et c’est une bonne chose. D’une certaine manière, c’est la seule innovation de 2023&nbsp;qui ne comporte pas IA dans le premier écran marketing, c’est déjà pas mal. Je n’ai pas la naïveté de penser que la version 2&nbsp;ne nous amènera pas vers le <em>SpatIAl Computing</em> pour autant, restons&nbsp;sérieux.</p>
  515. <p>Je peux imaginer des des <a data-link-domain="theinfiniteexperience.world" href="https://theinfiniteexperience.world">expériences immersives</a> dans des endroits dédiés, de la location comme on pouvait louer un DVD il y a des années, des salles dédiées en bibliothèques (ambiance dystopie cyberpunk assurée), à un moment il pourrait même y avoir un espace pour ça (payant&#8239;?) dans les <em>Apple Store</em>. Si le son est aussi bon que ce que peut décrire <em>Daring Fanboy</em>, j’aurais vraiment envie de me retrouver au milieu d’un concert, d’avoir le choix entre plusieurs points de vues et&nbsp;acoustiques.</p>
  516. <p>Le côté immersif aurait aussi sa place en terme d’apprentissage / transmission. Être au premier rang d’une conférence ou d’un cours pourrait permettre de redéfinir son attention&nbsp;(?) et sachant que la dernière version de l’iPhone permet de capter de telles vidéos, c’est peut-être un moyen de faire entrer quelqu’un dans son salon ce qui produirait un autre type&nbsp;d’intimité.</p>
  517. <p>En parlant de captation et d’intimité, avec les <em>deepfakes</em> il devient possible de se retrouver dans un salon mais dans une autre tenue. Toute prise de vidéo devient une menace potentielle. Impossible de ne pas penser à des objets connectés / synchronisés autour de la&nbsp;pornographie…</p>
  518. <a href="#hr-59" title="Lien vers cette section de la page"><hr id="hr-59" /></a>
  519. <blockquote lang="en">
  520. <p>The “i” in iPhone stands for “inequality”. […]</p>
  521. <p><mark>iPhone owners live in a different world</mark> than high-end Android buyers, and light-years away what the bulk of the market experiences. No matter how you slice it, the performance inequality gap is growing for CPU-bound workloads like JavaScript-heavy web&nbsp;apps.</p>
  522. <p><cite><em><a data-link-domain="infrequently.org" href="https://infrequently.org/2024/01/performance-inequality-gap-2024/" hreflang="en"
  523. title="Consultation de l’article (anglais)">The Performance Inequality Gap, 2024</a>
  524. <a href="/david/cache/2024/0676c7ccf1ab2b380641866789366d26/" hreflang="en"
  525. data-tippy data-description="How much HTML, CSS, and JavaScript can we afford? More than in years past, but much less than frontend developers are burdening users with."
  526. data-source="https://infrequently.org/2024/01/performance-inequality-gap-2024/"
  527. data-date="2024-01-31"
  528. data-favicon="https://infrequently.org/assets/images/favicons/ino-dark-opt-192x192.png"
  529. data-domain="infrequently.org"
  530. ><svg xmlns="http://www.w3.org/2000/svg"
  531. width="24" height="24" viewBox="0 0 24 24" fill="none"
  532. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  533. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  534. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  535. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  536. </svg>
  537. <span class="sr-only">[archive]</span></a></em></cite></p>
  538. </blockquote>
  539. <p>Ce rapport me rappelle que la notion d’accessibilité est très vaste. Et je suis mal placé pour donner des leçons en vous faisant charger 5&nbsp;polices de caractères pour vous afficher une page… je n’ai pas encore travaillé les performances du thème de l’année et c’est une&nbsp;erreur.</p>
  540. <blockquote lang="en">
  541. <p>We got to a place where performance has been a constant problem in large part because a tribe of programmers convinced themselves that it <em>wasn’t</em> and <em>wouldn’t be</em>. […]</p>
  542. <p>But tribalism-boosted confirmation bias mixed with JavaScript’s toxic positivity culture to precipitate out a Silicon Prosperity Gospel; all resources would go infinite if you just <em>believed</em>. […]</p>
  543. <p>The solutions are social, not technical, because <mark>the delusions are social,</mark> rather than&nbsp;technical.</p>
  544. <p><cite><em>Ibid.</em></cite></p>
  545. </blockquote>
  546. <p>Ça&nbsp;pique.</p>
  547. <a href="#hr-60" title="Lien vers cette section de la page"><hr id="hr-60" /></a>
  548. <blockquote lang="en">
  549. <p>Rather, the biggest benefits I see are <em>collective</em>, cutting across the industry as a whole. I think web components can make the entire web more accessible. They have the potential to unify currently fragmented communities, including various JavaScript frameworks <em>and</em> <mark>those who avoid them</mark>.</p>
  550. <p>[…] Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks. We probably won’t even all learn how to write&nbsp;them!</p>
  551. <p><cite><em><a data-link-domain="jakelazaroff.com" href="https://jakelazaroff.com/words/the-web-component-success-story/" hreflang="en"
  552. title="Consultation de l’article (anglais)">The Web Component Success Story</a>
  553. <a href="/david/cache/2024/f4d2d42eba58062be910407690ae447c/" hreflang="en"
  554. data-tippy data-description="Web components won't take web development by storm, or show us the One True Way to build websites. What they will do is let us collectively build a rich ecosystem of dynamic components that work with any web stack."
  555. data-source="https://jakelazaroff.com/words/the-web-component-success-story/"
  556. data-date="2024-01-31"
  557. data-favicon="https://jakelazaroff.com/favicon.ico"
  558. data-domain="jakelazaroff.com"
  559. ><svg xmlns="http://www.w3.org/2000/svg"
  560. width="24" height="24" viewBox="0 0 24 24" fill="none"
  561. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  562. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  563. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  564. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  565. </svg>
  566. <span class="sr-only">[archive]</span></a></em></cite></p>
  567. </blockquote>
  568. <p>Très bon article et la boite de prévisualisation au survol de chaque lien ressemble beaucoup à ce que j’avais l’intention de faire pour régler mes soucis d’accès à la version archivée tout en affichant le domaine. Actuellement chaque lien devient trop long et hache le texte lorsque ça n’est pas en pied de citation (et encore). Il faut que je creuse comment cela est fait, via un <em>web component</em> réutilisable&nbsp;j’imagine&nbsp;:-).</p>
  569. <p>PS&nbsp;: si vous minifiez votre JavaScript, les <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap">SourceMap</a> sont un moyen de partager votre expérience. Sinon l’aspect <q lang="en">collective</q> est beaucoup moins&nbsp;pertinent.</p>
  570. <nav>
  571. <p>
  572. <a href="/david/2024/accessibilite/"
  573. title="Liste de tous les articles 2024 associés à cette étiquette"
  574. rel="tag">#accessibilité</a>
  575. <a href="/david/2024/dystopie/"
  576. title="Liste de tous les articles 2024 associés à cette étiquette"
  577. rel="tag">#dystopie</a>
  578. <a href="/david/2024/evolution/"
  579. title="Liste de tous les articles 2024 associés à cette étiquette"
  580. rel="tag">#évolution</a>
  581. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  582. </p>
  583. </nav>
  584. <form action="/david/recherche/" method="get">
  585. <fieldset>
  586. <legend>Recherche</legend>
  587. <label for="input-search">Termes de votre recherche :</label>
  588. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  589. <input type="submit" value="Chercher">
  590. <p id="indexation-infos">
  591. <small>
  592. Seuls les contenus de ces 8 dernières années sont indexés.
  593. </small>
  594. </p>
  595. </fieldset>
  596. </form>
  597. <aside>
  598. <theme-toggle></theme-toggle>
  599. </aside>
  600. </article>
  601. <hr>
  602. <footer>
  603. <p>
  604. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  605. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  606. <a href="http://larlet.com"
  607. title="Go to my English profile"
  608. data-instant>Pro</a>
  609. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  610. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  611. </p>
  612. <template id="theme-selector">
  613. <form>
  614. <style type="text/css">
  615. fieldset div {
  616. text-align: center;
  617. }
  618. </style>
  619. <fieldset>
  620. <legend>Thème</legend>
  621. <div>
  622. <label>
  623. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  624. Auto
  625. </label>
  626. <label>
  627. <input type="radio" value="dark" name="chosen-color-scheme">
  628. Foncé
  629. </label>
  630. <label>
  631. <input type="radio" value="light" name="chosen-color-scheme">
  632. Clair
  633. </label>
  634. </div>
  635. </fieldset>
  636. </form>
  637. </template>
  638. </footer>
  639. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  640. <script>
  641. class ThemeToggle extends HTMLElement {
  642. constructor() {
  643. super()
  644. const themeSelectorTemplate = document.querySelector('#theme-selector')
  645. const form = themeSelectorTemplate.content.firstElementChild
  646. this.attachShadow({ mode: 'open' })
  647. this.shadowRoot.appendChild(form.cloneNode(true))
  648. }
  649. connectedCallback() {
  650. const form = this.shadowRoot.querySelector('form')
  651. form.addEventListener('change', (e) => {
  652. const chosenColorScheme = e.target.value
  653. localStorage.setItem('theme', chosenColorScheme)
  654. toggleTheme(chosenColorScheme)
  655. })
  656. const selectedTheme = localStorage.getItem('theme')
  657. if (selectedTheme && selectedTheme !== 'undefined') {
  658. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  659. }
  660. }
  661. }
  662. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  663. window.addEventListener('load', () => {
  664. let colorsLayer = undefined
  665. let hasDarkRules = false
  666. for (const styleSheet of Array.from(document.styleSheets)) {
  667. let mediaRules = []
  668. for (const layerRule of styleSheet.cssRules) {
  669. if (!(layerRule instanceof CSSLayerBlockRule)) {
  670. continue
  671. }
  672. if (layerRule.name === 'colors') {
  673. colorsLayer = layerRule
  674. }
  675. for (const cssRule of layerRule.cssRules) {
  676. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  677. continue
  678. }
  679. // WARNING: Safari does not have/supports `conditionText`.
  680. if (cssRule.conditionText) {
  681. if (cssRule.conditionText !== prefersColorSchemeDark) {
  682. continue
  683. }
  684. } else {
  685. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  686. continue
  687. }
  688. }
  689. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  690. }
  691. }
  692. // WARNING: do not try to insert a Rule to a styleSheet you are
  693. // currently iterating on, otherwise the browser will be stuck
  694. // in a infinite loop…
  695. for (const mediaRule of mediaRules) {
  696. // Safari requires the `0` second parameter (even if default).
  697. colorsLayer.insertRule(mediaRule.cssText, 0)
  698. hasDarkRules = true
  699. }
  700. }
  701. if (hasDarkRules) {
  702. if ('customElements' in window && !customElements.get('theme-toggle')) {
  703. customElements.define('theme-toggle', ThemeToggle)
  704. }
  705. }
  706. })
  707. </script>
  708. </body>
  709. </html>