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.

преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 2 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 2 години
преди 3 години
преди 3 години
преди 3 години
преди 2 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
преди 3 години
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567
  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>Tag #gafam — David Larlet</title>
  13. <meta name="description" content="Publications relatives au tag #gafam">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <style type="text/css">
  53. details[open] summary {
  54. display: none;
  55. }
  56. </style>
  57. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  58. <header>
  59. <h1>Publications relatives au tag #gafam</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a>
  66. • <a rel="tags" href="/david/#tags" title="Liste de toutes les étiquettes"><svg class="icon icon-tags">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  68. </svg> Étiquettes</a>
  69. </p>
  70. </nav>
  71. <hr>
  72. <main>
  73. <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  74. <h2><a href="/david/2021/12/05/" title="Lien permanent vers cet article">Mise à jour</a> (2021-12-05)</h2>
  75. <blockquote lang="en">
  76. <p>What that moment revealed to me was <mark>Netflix’s ability to program cultural discourse</mark> in a relatively direct way: You realize that a certain topic or event starts coming up frequently in conversations and social media posts—Fyre Festival, the ‘90s Chicago Bulls, chess—and then find out that topic is the subject of a Netflix blockbuster, living rent free in the hive mind (actually, getting <em>paid</em> to live there). Even now, but especially during the pandemic, there are only a few primary sources of large-scale collective experience, upstream of Twitter and TikTok, and Netflix has emerged as one of the most potent.</p>
  77. <p><cite><em><a href="https://kneelingbus.substack.com/p/173-experimental-jet-set">#173: Experimental Jet Set</a></em> (<a href="/david/cache/2021/204869c76aa1717af78e5ed685ea81bc/">cache</a>)</cite></p>
  78. </blockquote>
  79. <p>C’est affreusement vrai. Je le vois de manière assez franche avec l’engouement pour le <a href="/david/2021/12/03/" title="Record">Championnat du Monde</a> ou d’autres évènements ou même la popularité soudaine des youtubers dans ce domaine là. C’était déjà le cas pour des séries antérieures mais la pandémie a eu un impact franc sur cette capacité à modeler les centres d’intérêts des riches.</p>
  80. <p>Ce qu’il y a d’affreux c’est d’en faire partie et de difficilement pouvoir y résister. C’est au moins une chose d’en prendre conscience de manière franche pour pouvoir s’adapter et trouver des formes de conversion de cette attention.</p>
  81. <p>Imaginez être en capacité d’orienter la consommation de millions de <em>clients</em>. Le terme de <strong>programmation</strong> prend alors tout son sens.</p>
  82. <blockquote>
  83. <p>Je n’en peux plus des faux dieux de l’Occident toujours à l’affût comme des araignées, qui nous mangent le foie, nous sucent la moelle. Et je porte plainte contre le Monde Moderne, c’est lui, le Monstre. Il détruit notre terre, il piétine l’âme des hommes.<br />
  84. — C’est pourtant grâce à notre Monde Moderne que tu as un <em>bon</em> bateau avec des winches, des voiles en tergal, une coque métallique qui te laisse en paix, soudée, étanche et solide.<br />
  85. — C’est vrai, mais c’est à cause du Monde Moderne, à cause de sa prétendue «&nbsp;Civilisation&nbsp;», à cause de ses prétendus «&nbsp;Progrès&nbsp;» que je me tire avec mon <em>beau</em> bateau.<br />
  86. — Et bien tu es libre de te «&nbsp;tirer&nbsp;», personne ne t’en empêche, tout le monde est libre, ici, tant que ça ne gêne pas les autres.<br />
  87. — Libre pour le moment… mais un jour plus personne ne le sera si les choses continuent sur la même pente. <mark>Elles sont déjà inhumaines.</mark> Alors, il y a ceux qui partent sur les mers, ou sur les routes, pour chercher la vérité perdue. Et ceux qui ne peuvent pas, ou qui ne veulent plus, qui ont perdu jusqu’à l’espoir. La «&nbsp;Civilisation occidentale&nbsp;» devenue presque entièrement technocratique n’est plus une civilisation.</p>
  88. <p><cite><em>La longue route</em>, Bernard Moitessier</cite></p>
  89. </blockquote>
  90. <h2><a href="/david/2021/11/24/" title="Lien permanent vers cet article">Souveraineté</a> (2021-11-24)</h2>
  91. <ol>
  92. <li>Recevoir une notification sur Google Mail.</li>
  93. <li>Qui redirige vers un <em>build</em> cassé dans Microsoft Github.</li>
  94. <li>Car il y a un <em>bug</em> dans ce composant Facebook React.</li>
  95. <li>Ouvrir son éditeur Microsoft VSCode.</li>
  96. <li>Faire une recherche sur Google Search.</li>
  97. <li>Trouver une solution sur Google web.dev.</li>
  98. <li>Tester le rendu dans Google Chrome.</li>
  99. <li>Tester le <em>responsive</em> sur Apple Safari mobile.</li>
  100. <li>Pousser le code sur Microsoft Github.</li>
  101. <li>Faire tourner les tests sur Amazon Web Services.</li>
  102. <li>Déployer la pré-production sur Amazon Web Services.</li>
  103. <li>Tester avec son Apple iPhone.</li>
  104. <li>Se féliciter que la production tourne chez OVH 🇫🇷.</li>
  105. <li>Acheter des Google Adwords pour faire connaître le service.</li>
  106. <li>Faire de la publicité ciblée sur Facebook (Instagram).</li>
  107. <li>Enregistrer les retours utilisateur·ices dans une Google Sheet.</li>
  108. <li>Les contacter en utilisant Amazon Simple Email Service</li>
  109. <li>Leur proposer des <em>interviews</em> sur Google Hangouts.</li>
  110. <li>Se demander s’il y a des améliorations à faire pour prendre en compte la nouvelle barre d’URL basse dans Apple Safari mobile.</li>
  111. <li>Etc etc.</li>
  112. </ol>
  113. <p>La liste est une (auto-)critique caricaturale mais pas tant que ça et elle pourrait facilement s’allonger. Il y a un moment où l’hypocrisie de ce processus vis-à-vis de la production de nos <a href="/david/2021/11/14/" title="Captées"><em>capta</em> et <em>tracka</em></a> me pèse plus que d’autres. À quelle souveraineté peut-on prétendre lorsque toute notre chaîne de production est pieds et doigts liée aux GAFAM&#8239;?</p>
  114. <p>Je salue chaque initiative qui essaye de s’en extraire et de montrer que d’autres voies sont possibles&nbsp;:</p>
  115. <blockquote>
  116. <p>Comme le montre <a href="https://github.com/etalab/etalab/blob/master/logiciels-libres.md#les-logiciels-libres-utilis%C3%A9s-par-etalab">cette liste</a>, Etalab s’est tôt engagé dans le fait de recourir à des logiciels libres&nbsp;: c’est d’abord cet engagement qui a décidé le pôle logiciels libres à utiliser SourceHut pour publier une partie de ses codes sources. C’est aussi pour montrer qu’il existe d’autres forges que celles envisagées par défaut ou par habitude, et ainsi encourager chaque administration à bien motiver ses choix d’hébergement de code.</p>
  117. <p><cite><em><a href="https://man.sr.ht/~etalab/logiciels-libres/pourquoi-sourcehut.md">Pourquoi le pôle logiciels libres d’Etalab utilise SourceHut</a></em> (<a href="/david/cache/2021/587b80280806281157e5d25c92f7ca68/">cache</a>)</cite></p>
  118. </blockquote>
  119. <h2><a href="/david/2021/11/15/" title="Lien permanent vers cet article">SourceHut</a> (2021-11-15)</h2>
  120. <blockquote lang="en">
  121. <p>This suite of open source tools is the software development platform you’ve been waiting for. We’ve taken the wisdom of the most successful open-source communities and turned it into a platform of efficient engineering tools.</p>
  122. </blockquote>
  123. <p>Ce soir, je (re?)découvre <a href="https://sourcehut.org/">SourceHut</a> et je suis impressionné. C’est <a href="https://forgeperf.org/">rapide</a> et leurs petits outils satellites sont bien pensés. Ça semble être une <a href="https://srht.site">alternative crédible</a> à Microsoft Github Pages et Microsoft Gists pour les <a href="https://paste.sr.ht/">petits bouts de codes</a>.</p>
  124. <p>Pour ce qui est des dépôts en eux-mêmes, cela me demanderait de <a href="https://drewdevault.com/2018/07/02/Email-driven-git.html">revoir mon <em>workflow</em></a> (<a href="/david/cache/2021/ea19b309a39227f6b370ec83e6c63028/">cache</a>) pour passer davantage <a href="https://git-send-email.io">par les courriels</a>, ce qui est potentiellement <a href="https://blog.brixit.nl/git-email-flow-versus-github-flow/">une meilleure pratique</a> (<a href="/david/cache/2021/68c1cb8256a8472b2711a0ffb5e7921e/">cache</a>), davantage décentralisée. Je me demande à quel point ça devient moins accessible à la contribution cela dit, ce qui pourrait être le point le plus bloquant. Je vois bien qu’en ayant ma <a href="https://git.larlet.fr/davidbgk">propre forge</a>, cela réduit les contributions à néant… et je n’ai pas de moyen de comparer avec une présence de ces sources sur Microsoft Github.</p>
  125. <p>Cerise sur le gâteau, niveau culture ça a l’air bien pensé aussi&nbsp;:</p>
  126. <blockquote lang="en">
  127. <p>Think of SourceHut’s engineering culture as a dynamic, mutual collaboration between equals, who aim to support each other in achieving our shared ambitions in free software. We have essentially attempted to reproduce the FOSS community’s collaboration environment, and to some extent, governance model, in the context of a business.</p>
  128. <p><cite><em><a href="https://man.sr.ht/staff/culture.md">Introduction to SourceHut culture</a></em> (<a href="/david/cache/2021/3b811b75e116cdc0ac8f6f1b2fa60f12/">cache</a>)</cite></p>
  129. </blockquote>
  130. <h2><a href="/david/2021/11/14/" title="Lien permanent vers cet article">Captées</a> (2021-11-14)</h2>
  131. <details>
  132. <summary>Déplier pour lire le contenu de la publication</summary>
  133. <blockquote>
  134. <p>Plutôt que de <em>data</em>, il nous faudrait plutôt parler de <em>capta</em>&nbsp;:</p>
  135. <ol>
  136. <li>les <em>data</em> ne sont pas données comme l’espace et le temps, elles doivent être <strong>produites</strong>&#8239;;</li>
  137. <li>les <em>data</em> sont toujours <strong>construites</strong> d’une manière particulière, d’après une vision du monde&#8239;;</li>
  138. <li>pour être connues, les <em>data</em> doivent être <strong>captées</strong>&#8239;; il a y donc un choix entre le type d’information qui a été retenu et ce qui a été ignoré&#8239;;</li>
  139. <li>les <em>data</em> seraient donc <strong>beaucoup moins objectives</strong> qu’elles ne le paraissent à première vue.</li>
  140. </ol>
  141. <p><cite><em><a href="https://journal.loupbrun.ca/n/119/">Les données ne sont pas données</a></em> (<a href="/david/cache/2021/5b13354f8ffafd6cf2af4efd3a37dbca/">cache</a>)</cite></p>
  142. </blockquote>
  143. <p>Distinction importante rapportée par Louis-Olivier Brassard. J’accorde beaucoup d’importance à cette distinction sémantique, surtout avec le double sens de «&nbsp;données&nbsp;» en français qui prête d’autant plus à confusion…</p>
  144. <p>Peut-être <a href="https://adactio.com/journal/18625">faudrait-il même évoquer</a> (<a href="/david/cache/2021/a2489e4ca3410b8cc1fdec65c2c1d47a/">cache</a>) des <em>tracka</em>&#8239;? Auquel cas l’ambiguïté est davantage acceptable, souhaitable&#8239;? 😇</p>
  145. </details>
  146. <h2><a href="/david/2021/11/08/" title="Lien permanent vers cet article">Écriture</a> (2021-11-08)</h2>
  147. <details>
  148. <summary>Déplier pour lire le contenu de la publication</summary>
  149. <blockquote>
  150. <p>La question est de savoir ce qui reste de la capacité de fiction quand toutes les histoires se publient sans friction et quand seules les frictions semblent capables de «&nbsp;faire histoire&nbsp;» dans le débat public.</p>
  151. <p>[…]</p>
  152. <p>La vitesse de ces enchaînements déterminés algorithmiquement dans le seul but de fabriquer des routines d’aliénation scopique, <mark>cette capacité à ne valoriser le court que tant qu’il concourt à fabriquer de l’artificiellement long en continu</mark>, ce refus total et programmatique du discontinu, cela interroge aujourd’hui notre capacité plus globale, plus politique, à nous confronter à des régimes narratifs nécessitant d’articuler le temps long comme autre chose que la simple agrégation de séquences courtes.</p>
  153. <p><cite><em><a href="https://www.affordance.info/mon_weblog/2021/11/le-temps-de-faire-pus-court.html">Je n’ai pas eu le temps de faire plus court.</a></em> (<a href="/david/cache/2021/4801845e14d06e498d20118977d6c334/">cache</a>)</cite></p>
  154. </blockquote>
  155. <p>De l’importance de l’élément perturbateur, de son récit, du rythme imposé par les plateformes, encore un billet bien touffu et nécessaire d’Olivier Ertzscheid.</p>
  156. <p>L’injonction au court(-termisme).</p>
  157. <blockquote lang="en">
  158. <p>There are 2&nbsp;things I have come to believe about writing:</p>
  159. <ol>
  160. <li>The average person should write 5x more things than they do.</li>
  161. <li>The average written thing should be 5x shorter than it is.</li>
  162. </ol>
  163. <p><cite><em><a href="https://critter.blog/2020/10/02/write-5x-more-but-write-5x-less/">Write 5x more but write 5x less</a></em> (<a href="/david/cache/2021/0a106edc34e0e32ff31371309ceb668a/">cache</a>)</cite></p>
  164. </blockquote>
  165. </details>
  166. <h2><a href="/david/2021/09/28/" title="Lien permanent vers cet article">Paranoïa</a> (2021-09-28)</h2>
  167. <details>
  168. <summary>Déplier pour lire le contenu de la publication</summary>
  169. <blockquote lang="en">
  170. <p>Scanning the photos on your phone isn’t like steaming open the mail and peeping inside the envelopes. It’s like rifling through your memory.</p>
  171. <p>And when those memories may at any time be silently observed or removed… even if it never happens but there is the possibility of it…</p>
  172. <p>[…]</p>
  173. <p>And if somebody else is now inside your memories, <mark>can you be sure that they’re not being edited?</mark> Is gaslighting occurring with these most personal of devices? Even if it never happens… that’s the lesson of the Panopticon, the mere possibility is enough to affect behaviour.</p>
  174. <p><cite><em><a href="https://interconnected.org/home/2021/08/06/paranoia">Apple’s photo scanning and our state of forced collective paranoia</a></em> (<a href="/david/cache/2021/afd74b165f837caf94dd2098d161627a/">cache</a>)</cite></p>
  175. </blockquote>
  176. <p>Je me suis penché plusieurs fois sur cet article depuis sa publication. Il y a plusieurs lectures possibles pour considérer les liens entre ces différents éléments et, même si ça semble un peu tiré par les cheveux parfois, il y a tout de même cette atmosphère un peu malaisante que j’ai du mal à formuler.</p>
  177. <p>Les pensées et fragments de mémoire publiés ici me semblent être difficilement falsifiables à mon insu. J’ai un historique, sur plusieurs machines, etc. En revanche pour des photos — qui plus est stockées sur l’ordinateur d’un·e autre — c’est bien plus compliqué à identifier et à prouver.</p>
  178. <hr />
  179. <p>En retournant le problème, cela pourrait être un métier d’aller effacer de mauvais souvenirs… plus ou moins à la demande de la personne.</p>
  180. </details>
  181. <h2><a href="/david/2021/09/15/" title="Lien permanent vers cet article">Héritage</a> (2021-09-15)</h2>
  182. <details>
  183. <summary>Déplier pour lire le contenu de la publication</summary>
  184. <blockquote lang="en">
  185. <p>I like thinking about privacy as being collective, because it feels like a more true reflection of the fact that our lives are made up of relationships, and information about our lives is social and contextual by nature. The fact that I have a sister also indicates that my sister has at least one sibling: me. If I took a DNA test through 23andme <mark>I’m not just disclosing information about me but also about everyone that I’m related to</mark>, none of whom are able to give consent. The privacy implications for familial DNA are pretty broad: this information might be used to sell or withhold products and services, expose family secrets, or implicate a future as-yet-unborn relative in a crime. I could email 23andme and ask them to delete my records, and they might eventually comply in a month or three. But my present and future relatives wouldn’t be able to do that, or even know that their privacy had been compromised at all.</p>
  186. <p><cite><em><a href="https://phirephoenix.com/blog/2021-05-03/privacy">left alone, together</a></em> (<a href="/david/cache/2021/9c4c83e66d9d0b259c17d0f87af70c69/">cache</a>)</cite></p>
  187. </blockquote>
  188. <p>Une personne proche n’avait pas eu conscience de divulguer une partie de l’information génétique de sa descendance en procédant à un séquençage. Et surtout, ne comprenait pas en quoi cette information pouvait être une donnée critique.</p>
  189. <p>Toute donnée stockée sera exploitée, tout recoupement possible sera effectué. Ce n’est qu’une question de temps.</p>
  190. </details>
  191. <h2><a href="/david/2021/08/12/" title="Lien permanent vers cet article">Musique</a> (2021-08-12)</h2>
  192. <details>
  193. <summary>Déplier pour lire le contenu de la publication</summary>
  194. <blockquote>
  195. <p>The reason I’m screwed is that Spotify listeners’ ability to access their collection in the far-out future will be contingent on the company maintaining its software, renewing its agreements with rights holders, and, well, not going out of business when something else <mark>inevitably supplants the current paradigm</mark> of music listening.</p>
  196. <p><cite><em><a href="https://www.theatlantic.com/culture/archive/2021/07/spotify-streaming-music-library/619453/">Spotify Has Changed Music Libraries Forever</a></em> (<a href="/david/cache/2021/d7c68808a59ee3965fa03168af5d764e/">cache</a>)</cite></p>
  197. </blockquote>
  198. <p>J’ai une collection de musiques que j’apprécie, en <abbr title="Free Lossless Audio Codec">FLAC</abbr>, et que je restreins à environ 200&#8239;Go. Cela peut paraître un peu anachronique en 2021, ou snob, ou les deux. Savoir que quelqu’un·e, quelque part, sait dans quel <em><a href="/david/2020/02/07/#mood">mood</a></em> je peux être à un moment donné me fait davantage flipper qu’un Pass sanitaire (aussi inutile soit-il).</p>
  199. <p>Aussi, le son et sa qualité ont une place particulière dans ma vie car j’ai une probabilité génétique assez importante d’être privé d’une partie de ce sens à moyen terme. Lorsqu’on sait ce que l’on va perdre, il est plus facile d’en profiter à sa juste valeur.</p>
  200. <blockquote>
  201. <p>Ultimately, it’s impossible to use Spotify without it processing your personal data. “To delete that personal data, <mark>you need to close your account</mark>,” Spotify’s settings say.</p>
  202. <p><cite><em><a href="https://www.wired.com/story/spotify-tracking-how-to-stop-it/">All the Ways Spotify Tracks You-and How to Stop It</a></em> (<a href="/david/cache/2021/55a2cd812fc17423f29937b213fe219b/">cache</a>)</cite></p>
  203. </blockquote>
  204. <figure>
  205. <a href="#grands-harles"
  206. title="Cliquer pour une version haute résolution">
  207. <img src="/static/david/2021/grands-harles.jpg" alt="Une mère Grand Harle et ses deux petits de l’année."
  208. loading="lazy" width="1600" height="1067" />
  209. </a>
  210. <a href="#_" class="lightbox" id="grands-harles">
  211. <img src="/static/david/2021/grands-harles.jpg" alt="Une mère Grand Harle et ses deux petits de l’année."
  212. loading="lazy" width="1600" height="1067" />
  213. </a>
  214. <figcaption>La finesse des sons de la forêt me manquera.</figcaption>
  215. </figure>
  216. </details>
  217. <h2><a href="/david/2021/07/14/" title="Lien permanent vers cet article">Livre ouvert</a> (2021-07-14)</h2>
  218. <details>
  219. <summary>Déplier pour lire le contenu de la publication</summary>
  220. <blockquote lang="en">
  221. <p>Another Facebook engineer used his employee access to dig up information on a woman with whom he had gone on a date after she stopped responding to his messages. In the company's systems, he had access to “years of private conversations with friends over Facebook messenger, events attended, photographs uploaded (including those she had deleted), and posts she had commented or clicked on,” the book said. Through the Facebook app the woman had installed on her phone, the book said, <mark>the engineer was also able to see her location in real time.</mark></p>
  222. <p><cite><em><a href="https://www.businessinsider.com/facebook-fired-dozens-abusing-access-user-data-an-ugly-truth-2021-7">Facebook Fired Dozens Over Abusing Access to User Data, New Book Says</a></em> (<a href="/david/cache/2021/6e36731348841db8712631851ee3467a/">cache</a>)</cite></p>
  223. </blockquote>
  224. <p>Si quelqu’un·e qui m’est proche était employé·e de Facebook (et si j’utilisais cet outil), je serais quand même prudent. C’est valable pour pas mal d’autres réseaux et outils en ligne mais celui-ci est particulièrement utilisé… et utilisable.</p>
  225. <p>Dans les <a href="/david/2020/02/07/">épisodes</a> <a href="/david/2020/02/14/">précédents</a> et <a href="/david/2020/06/25/#targets">nombreux</a>.</p>
  226. <p><a href="/david/2021/06/25/" title="Données">#Delete</a><a href="https://byebyefacebook.loupbrun.ca/fr/">Facebook</a>.</p>
  227. </details>
  228. <h2><a href="/david/2021/05/21/" title="Lien permanent vers cet article">Voiture espion</a> (2021-05-21)</h2>
  229. <details>
  230. <summary>Déplier pour lire le contenu de la publication</summary>
  231. <blockquote lang="en">
  232. <p>The kit, MSAB says, also has the ability to discover specific events that most car owners are probably unaware are even recorded, like “when and where a vehicle’s lights are turned on, and which doors are opened and closed at specific locations” as well as “gear shifts, odometer reads, ignition cycles, speed logs, and more.” <mark>This car-based surveillance, in other words, goes many miles beyond the car itself.</mark></p>
  233. <p>[…]</p>
  234. <p>Anyone who’s taken a spin in a new-ish vehicle and connected their phone — whether to place a hands-free call, listen to Spotify, or get directions — has probably been prompted to share their entire contact list, presented as a necessary step to place calls but without any warning that a perfect record of everyone they’ve ever known will now reside inside their car’s memory, sans password.</p>
  235. <p><cite><em><a href="https://theintercept.com/2021/05/03/car-surveillance-berla-msab-cbp/">Your Car Is Spying on You. A CBP Contract Shows the Risks.</a></em> (<a href="/david/cache/2021/ce7d120b6e5c13644a538f5116b4409b/">cache</a>)</cite></p>
  236. </blockquote>
  237. <p>C’est la double raison m’ayant (aussi) motivé à acheter une voiture ayant plus de 10&nbsp;ans d’une part, ce qui limite drastiquement le niveau d’électronique à bord. Et également à éviter les voitures de location modernes qui récupèrent autant de données à chaque rechargement de batterie du téléphone indispensable rendu impératif vu la consommation lors de l’usage du GPS.</p>
  238. <p>Je n’ai trouvé aucun moyen, selon les modèles, de refuser que tout soit envoyé vers la voiture. Et encore moins de tout effacer lorsqu’on rend le véhicule. C’est préoccupant et il <strong>faut</strong> y penser.</p>
  239. <blockquote>
  240. <p>— Il y a là une leçon également. À quoi servent de telles machines, en réalité&#8239;? À accroître le nombre de choses que nous pouvons faire sans y penser. Voilà le vrai danger… <mark>les choses que nous faisons sans y penser.</mark> Pense à tout le temps que tu as passé à parcourir ce désert avant de songer à mettre ton rabat en place.<br />
  241. — Vous auriez pu m’avertir&#8239;!<br />
  242. — Et resserrer ta dépendance&#8239;?</p>
  243. <p><cite><em><a href="/david/2020/12/21/#dune">Dune</a> IV. L’Empereur-Dieu de Dune</em>, Frank Herbert</cite></p>
  244. </blockquote>
  245. </details>
  246. <h2><a href="/david/2021/04/14/" title="Lien permanent vers cet article">Trending</a> (2021-04-14)</h2>
  247. <details>
  248. <summary>Déplier pour lire le contenu de la publication</summary>
  249. <blockquote lang="en">
  250. <p>The point of Twitter’s Trending Topics is ostensibly to surface significant news and Twitter commentary and invite others to ‘join the conversation.’ Left unsaid, of course, is that ‘the conversation’ at scale is complete garbage — an incomprehensible number of voices lecturing past each other. It didn’t matter how Hunt had intended the argument — whether it was cheeky fun or part of a high-minded indictment of the sci-fi horror industrial complex — it was amplified by others as ammunition to make whatever convenient point that interested parties wanted to make. As Ryan Broderick, who chronicles the internet in his excellent newsletter, Garbage Day, noted during the incident, <mark>“is this really how a website should function?”</mark></p>
  251. <p><cite><em><a href="https://warzel.substack.com/p/its-not-cancel-culture-its-a-platform">“It’s Not Cancel Culture - It’s A Platform Failure.”</a></em> (<a href="/david/cache/2021/bd15d74042626a6a1087ea5f32d22656/">cache</a>)</cite></p>
  252. </blockquote>
  253. <p>On en revient à cette notion de passage à l’échelle et d’<a href="/david/blog/2012/opinion-audience/">audience</a>. Et de notre acceptation d’une telle dépendance. Une forme de grégarité numérique en quelque sorte qui nous empêche d’explorer les autres champs des possibles.</p>
  254. <p>Si vous êtes sur Twitter, peut-être que vous pourriez envisager un <a href="https://laurakalbag.com/write-only-twitter/">usage en écriture seule</a> (<a href="/david/cache/2021/1fdec7eb6b2c3d889cbd789de3fb1d1d/">cache</a>)&#8239;?</p>
  255. <blockquote>
  256. <p>Préférer continuer de tolérer les instances d’appels à la mort, fussent-elles figuratives, sur des personnalités que l’on qualifie de publiques au seul moyen d’assertions calculatoires toujours possiblement mouvantes est une <mark>hypocrisie fondamentale</mark>, structurelle qui enferme le pilotage stratégique de ces systèmes sociaux dans la cage de leurs architectures techniques toxiques.</p>
  257. <p><cite><em><a href="https://www.affordance.info/mon_weblog/2021/03/mort-figurative.html">La mort figurative vous va si bien.</a></em> (<a href="/david/cache/2021/0acb9b97e82885d127fefb8266875754/">cache</a>)</cite></p>
  258. </blockquote>
  259. </details>
  260. <h2><a href="/david/2021/02/03/" title="Lien permanent vers cet article">Consentement</a> (2021-02-03)</h2>
  261. <details>
  262. <summary>Déplier pour lire le contenu de la publication</summary>
  263. <blockquote lang="en">
  264. <p>The Consentful Tech Project’s definition of good <mark>digital consent</mark> is adapted from Planned Parenthood’s definition of sexual consent, which abbreviates to the easy-to-remember, tasty acronym “FRIES.” According to this definition, consent must be:</p>
  265. <ul>
  266. <li><strong>Freely given.</strong> Doing something with someone is a decision that should be made without pressure, force, manipulation, or while incapacitated.</li>
  267. <li><strong>Reversible.</strong> Anyone can change their mind about what they want to do, at any time.</li>
  268. <li><strong>Informed.</strong> Be honest. For example, if someone says they’ll use protection and then they don’t, that’s not consent.</li>
  269. <li><strong>Enthusiastic.</strong> If someone isn’t excited, or really into it, that’s not consent.</li>
  270. <li><strong>Specific.</strong> Saying yes to one thing doesn’t mean they’ve said yes to others.</li>
  271. </ul>
  272. <p><cite><em><a href="https://www.consentfultech.io/">What is Consentful Tech?</a></em></cite></p>
  273. </blockquote>
  274. <p>Jolie découverte <a href="https://www.internetactu.net/2021/02/03/design-justice-repolitiser-le-design/">via un auto-commentaire</a> (<a href="/david/cache/2021/6faa32ba37a3b1232125db9858700627/">cache</a>) de la part d’Hubert Guillaud sur un article bien dense aussi. Il y a un <a href="http://www.consentfultech.io/wp-content/uploads/2019/10/Building-Consentful-Tech.pdf">PDF de 300&#8239;Ko</a> (<a href="/static/david/2021/Building-Consentful-Tech.pdf">cache</a>) qui vient compléter la définition et qui donne davantage de précisions — dont celle-ci en particulier&nbsp;:</p>
  275. <blockquote lang="en">
  276. <p>“Fail faster” is a maxim of application developers these days. It means putting something out into the world quickly and responding to user feedback in future iterations. This is a great way to optimize the value of your application to your users, by starting with something simple and experimenting until you get the right features.</p>
  277. <p>[…]</p>
  278. <p>It isn’t enough to iterate features in response to harm — <mark>we must also iterate the process that lead to those features being released</mark>. What would that process look like if it was centered around the privacy and security of survivors of violence? Of people from communities that are regularly subject to state surveillance?</p>
  279. </blockquote>
  280. <p>Les plateformes peuvent s’excuser <em>a posteriori</em> mais qu’en est-il de <a href="/david/2021/01/06/" title="Clown d’État">rendre des comptes</a> sur ce qui a été mis en place en interne pour ne pas reproduire de telles situations&#8239;? Voilà de quoi ajouter pas mal d’eau au moulin qui me sert de cerveau. Et pendant ce temps là, j’apprends qu’il y a des <q>chiens de garde de la vie privée</q> au Canada&nbsp;:</p>
  281. <blockquote>
  282. <p>Le rapport note entre autres que l’entreprise américaine a constitué une base de données de «&nbsp;plus de trois milliards d’images de visages&nbsp;», y compris ceux d’un grand nombre de Canadiens et d’enfants. Des forces policières y ont eu accès, tout comme des organisations commerciales, et ce, <mark>sans le consentement des personnes</mark>, déplorent le commissaire Daniel Therrien et ses homologues du Québec, de l’Alberta et de la Colombie-Britannique.</p>
  283. <p><cite><em><a href="https://www.ledevoir.com/societe/594536/reconnaissance-faciale-clearview-ai-a-viole-la-vie-privee-des-canadiens">Reconnaissance faciale: Clearview AI a violé la vie privée des Canadiens</a></em> (<a href="/david/cache/2021/0e0d866f920298fbc0624c03ddc83d24/">cache</a>)</cite></p>
  284. </blockquote>
  285. </details>
  286. <h2><a href="/david/2021/01/14/" title="Lien permanent vers cet article">Parler</a> (2021-01-14)</h2>
  287. <details>
  288. <summary>Déplier pour lire le contenu de la publication</summary>
  289. <p><em>Avertissement&nbsp;: je n’ai jamais utilisé cette application et je n’apprécie pas la nature des échanges nauséabonds qu’il semblait y avoir dessus.</em></p>
  290. <blockquote lang="en">
  291. <p>If one were looking for evidence to demonstrate that these tech behemoths are, in fact, monopolies that engage in anti-competitive behavior in violation of antitrust laws, and will obliterate any attempt to compete with them in the marketplace, it would be difficult to imagine anything more compelling than how they just used their unconstrained power to utterly <mark>destroy a rising competitor.</mark></p>
  292. <p><cite><em><a href="https://greenwald.substack.com/p/how-silicon-valley-in-a-show-of-monopolistic">How Silicon Valley, in a Show of Monopolistic Force, Destroyed Parler</a></em> (<a href="/david/cache/2021/765e28efb1fa6aa0dc9c15166f66cdf3/">cache</a>)</cite></p>
  293. </blockquote>
  294. <p>Je n’avais pas envisagé cette histoire sous cet angle là. Et s’il s’agissait «&nbsp;juste&nbsp;» de bâillonner un concurrent, <em>business as usual</em>&#8239;? J’ai presque envie de <a href="https://fr.wikipedia.org/wiki/Rasoir_de_Hanlon">me raser</a> avec&nbsp;:</p>
  295. <blockquote>
  296. <p>Ne jamais attribuer à une quelconque éthique ce que le capitalisme suffit à expliquer.</p>
  297. </blockquote>
  298. <p><strong>Les seuls outils qui seraient autorisés à concurrencer de tels monopoles seraient forcément décentralisés.</strong> C’est bien la raison pour laquelle ces plateformes sont <em>contre</em> le Web, il ne peut en être autrement car leur survie en dépend. Est-ce que Parler utilisant <a href="https://en.wikipedia.org/wiki/Secure_Scuttlebutt">Secure Scuttlebutt</a> aurait continué à fonctionner&#8239;? (<a href="/david/blog/2017/confiance-transparence/">Pour rappel.</a>) Probablement, en tout cas le bâillon n’aurait pas été aussi simple à nouer. Espérons (presque, dans un tel contexte) que ma conclusion tienne toujours&nbsp;: un tel réseau est trop beau pour percer.</p>
  299. <blockquote>
  300. <p>On ne soulignera jamais assez que la révolution ne sert à rien si elle n’est pas inspirée par son idéal ultime. Les méthodes révolutionnaires doivent être en harmonie avec les objectifs révolutionnaires. <mark>Les moyens utilisés pour approfondir la révolution doivent correspondre à ses buts.</mark> En d’autres termes, les valeurs éthiques que la révolution infusera dans la nouvelle société doivent être disséminées par les activités révolutionnaires de la période de transition. Cette dernière peut faciliter le passage à une vie meilleure mais seulement à condition qu’elle soit construite avec les mêmes matériaux que la nouvelle vie que l’on veut construire. La révolution est le miroir des jours qui suivent&#8239;; elle est l’enfant qui annonce l’Homme de demain.</p>
  301. <p><cite><em>My Desillusionment in Russia</em>, Emma Goldman</cite></p>
  302. </blockquote>
  303. </details>
  304. <h2><a href="/david/2021/01/06/" title="Lien permanent vers cet article">Clown d’État</a> (2021-01-06)</h2>
  305. <details>
  306. <summary>Déplier pour lire le contenu de la publication</summary>
  307. <blockquote>
  308. <p>I, for one, believe Facebook charted a course around this election primarily with Facebook’s continuing addictiveness in mind. But I <em>know</em> that whatever the reasons, they were ultimately <mark>determined by one person</mark>. That’s quite a thing.</p>
  309. <p><cite><em><a href="https://daringfireball.net/2020/12/facebook_unknowable_megascale">Facebook’s Unknowable Megascale</a></em> (<a href="/david/cache/2021/352d2966ecda7a68cbf97efbc691d017/">cache</a>)</cite></p>
  310. </blockquote>
  311. <p>Les voisins américains sont toujours aussi surprenants. Aujourd’hui, ils s’étaient donné rendez-vous au Capitole pour une petite <em>party</em> à base de drapeaux des États confédérés d’Amérique et de suprématie blanche. On peut difficilement faire plus équivoque pour une sortie de mandat.</p>
  312. <p>Le rôle des <a href="/david/2020/02/07/">GAFAM+</a> dans tout ça <a href="https://www.buzzfeednews.com/article/craigsilverman/facebook-ignore-political-manipulation-whistleblower-memo">est documenté</a> (<a href="/david/cache/2021/ab9f293c34ce421ab41465fcda8893fe/">cache</a>) mais c’est toujours grinçant d’en faire les frais. Je regardais hier une vidéo du gouvernement français sur la vaccination et je me retrouve avec des suggestions pleines de Raoult, de conspirationisme et d’<em>antivax</em>. À part des captures d’écran de peu de valeur, je n’ai aucun moyen de demander des comptes à ces plateformes (Google Youtube en l’occurence). Le fait que le gouvernement soit obligé de déposer des vidéos là-bas est une autre histoire.</p>
  313. <p>En mettant bout à bout ces deux faits récents, imaginez si les personnes à la tête des <abbr title="Google Apple Facebook Amazon Microsoft et compagnie">GAFAM+</abbr> étaient politisées.</p>
  314. <p><em>Mais comment pourraient-elles ne pas l’être&#8239;?</em></p>
  315. <p>Dans un mouvement pendulaire, je me demande s’il ne faudrait pas (ré)investir ces réseaux. <strong>Les <a href="/david/blog/2013/diete-tweets/">abandonner</a> n’a fait que laisser plus de place à la haine.</strong> Les fenêtres ouvertes vers l’extérieur se sont peut-être tellement réduites qu’il ne reste plus qu’une vaste chambre d’écho…</p>
  316. <blockquote>
  317. <p>Dans un ermitage, on se contente d’être aux loges de la forêt. Les fenêtres servent à accueillir la nature en soi, non à s’en protéger. On la contemple, on y prélève ce qu’il faut, mais on ne se nourrit pas de l’ambition de la soumettre. <mark>La cabane permet une posture, mais ne donne pas un statut.</mark> On joue à l’ermite, on ne peut se prétendre pionnier.</p>
  318. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  319. </blockquote>
  320. </details>
  321. <h2><a href="/david/2021/01/04/" title="Lien permanent vers cet article">Webing-lists</a> (2021-01-04)</h2>
  322. <details>
  323. <summary>Déplier pour lire le contenu de la publication</summary>
  324. <blockquote lang="en">
  325. <p><mark>Newsletters killed blogs</mark> because…</p>
  326. <ol>
  327. <li>They’re impossibly easy to publish.</li>
  328. <li>Your inbox is a notification stream.</li>
  329. <li>Writers can actually, ya know, get paid.</li>
  330. </ol>
  331. <p>Alternatively, websites today…</p>
  332. <ol>
  333. <li>Are difficult to make.</li>
  334. <li>Can’t notify people of new work.</li>
  335. <li>Aren’t able to pay writers easily.</li>
  336. </ol>
  337. <p><cite><em><a href="https://www.robinrendle.com/essays/newsletters">Newsletters</a></em> (<a href="/david/cache/2021/99c13c692ec7f2217311fdea482e8792/">cache</a>)</cite></p>
  338. </blockquote>
  339. <p>Il y a de petites graines dans ces réflexions. Ce qui est ironique c’est que les raisons évoquées sont d’ordre technique alors que techniquement elles ont été — plus ou moins bien — résolues. <strong>C’est l’usage qu’il manque.</strong> Et l’effet de mode (les deux étant liés de toute façon). Dans une liste de diffusion, il y a justement… la liste qui donne une métrique permettant à l’auteur·ice d’avoir un semblant de contrôle sur qui lit. Avec un <a href="/david/blog/2019/flux-rss/">flux RSS</a>, il est de plus en plus difficile de savoir qui lie<sup>*</sup> tellement tout cela se passe dans les boîtes noires que deviennent les réseaux sociaux.</p>
  340. <p>* on a là une différence importante également, l’impossibilité de lier vers un contenu qui a été envoyé par courriel, les listes de diffusion ne disposant pas toutes d’archives web.</p>
  341. <p>Aussi, mon navigateur est équipé d’extensions me permettant de bloquer l’enregistrement des mes actions relatives à une page. Ce n’est pas le cas de mon client email. C’est la <a href="/david/2020/02/07/#newsletters">raison pour laquelle</a> je me désabonne de beaucoup de listes de diffusion qui contiennent des liens destinés à me tracer. J’aimerais pouvoir dire à une personne que je l’ai lue et écoutée sans alimenter pour autant une usine à collecte de données personnelles. C’est peut-être là que réside l’innovation…</p>
  342. <p>Karl en parle aussi, le lendemain (des bienfaits d’une publication décalée 🙂)&nbsp;:</p>
  343. <blockquote>
  344. <p>L’email est un système de push et cela change beaucoup de choses. <mark>Il y a une notion d’intimité qui est importante et qui définit un plus grand contrôle.</mark> La newsletter n’atteint pas potentiellement tout le monde, uniquement ceux qui ont voulu s’inscrire (et potentiellement payer). Créer un site Web intime, c’est à dire gérer le contrôle d’accès est plus difficile.</p>
  345. <p><cite><em><a href="https://www.la-grange.net/2021/01/05/newsletter">cher vous</a></em> (<a href="/david/cache/2021/5f4b0220be54d83f711a78b356c73a68/">cache</a>)</cite></p>
  346. </blockquote>
  347. </details>
  348. </main>
  349. <hr>
  350. <footer>
  351. <p>
  352. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  353. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  354. </svg> Accueil</a> •
  355. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  356. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  357. </svg> Suivre</a> •
  358. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  359. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  360. </svg> Pro</a> •
  361. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  362. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  363. </svg> Email</a> •
  364. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  365. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  366. </svg> Légal</abbr>
  367. </p>
  368. <template id="theme-selector">
  369. <form>
  370. <fieldset>
  371. <legend><svg class="icon icon-brightness-contrast">
  372. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  373. </svg> Thème</legend>
  374. <label>
  375. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  376. </label>
  377. <label>
  378. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  379. </label>
  380. <label>
  381. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  382. </label>
  383. </fieldset>
  384. </form>
  385. </template>
  386. </footer>
  387. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  388. <script>
  389. function loadThemeForm(templateName) {
  390. const themeSelectorTemplate = document.querySelector(templateName)
  391. const form = themeSelectorTemplate.content.firstElementChild
  392. themeSelectorTemplate.replaceWith(form)
  393. form.addEventListener('change', (e) => {
  394. const chosenColorScheme = e.target.value
  395. localStorage.setItem('theme', chosenColorScheme)
  396. toggleTheme(chosenColorScheme)
  397. })
  398. const selectedTheme = localStorage.getItem('theme')
  399. if (selectedTheme && selectedTheme !== 'undefined') {
  400. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  401. }
  402. }
  403. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  404. window.addEventListener('load', () => {
  405. let hasDarkRules = false
  406. for (const styleSheet of Array.from(document.styleSheets)) {
  407. let mediaRules = []
  408. for (const cssRule of styleSheet.cssRules) {
  409. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  410. continue
  411. }
  412. // WARNING: Safari does not have/supports `conditionText`.
  413. if (cssRule.conditionText) {
  414. if (cssRule.conditionText !== prefersColorSchemeDark) {
  415. continue
  416. }
  417. } else {
  418. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  419. continue
  420. }
  421. }
  422. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  423. }
  424. // WARNING: do not try to insert a Rule to a styleSheet you are
  425. // currently iterating on, otherwise the browser will be stuck
  426. // in a infinite loop…
  427. for (const mediaRule of mediaRules) {
  428. styleSheet.insertRule(mediaRule.cssText)
  429. hasDarkRules = true
  430. }
  431. }
  432. if (hasDarkRules) {
  433. loadThemeForm('#theme-selector')
  434. }
  435. })
  436. </script>
  437. </body>
  438. </html>