Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 22KB

4 anni fa
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  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>
  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>Rentrée — David Larlet</title>
  13. <meta name="description" content="Plus envie de partager que de synthétiser ces temps-ci.">
  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="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <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>
  30. <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>
  31. <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>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  52. <article>
  53. <header>
  54. <h1>Rentrée</h1>
  55. </header>
  56. <nav>
  57. <p class="center">
  58. <a rel="prev" href="/david/2020/08/24/" title="Publication précédente : Personnes">←</a> •
  59. <a href="/david/" title="Aller à l’accueil">🏠</a>
  60. • <a rel="next" href="/david/2020/09/07/" title="Publication suivante : Rappels">→</a>
  61. </p>
  62. </nav>
  63. <hr>
  64. <main>
  65. <p><em>Plus envie de partager que de synthétiser ces temps-ci.</em></p>
  66. <h2 id="evenements">Évènements <a href="#evenements" title="Ancre vers cette partie">#</a></h2>
  67. <blockquote lang="en">
  68. <p>It’s time to re-visit the nuances of what we mean by building community. Having the technical and facilitation expertise to run online events is just one piece of the puzzle. Honestly, organizing events takes too much effort to simply move existing activities online without having chewed on these questions. I fear that community organizers will burn out faster than before, as it becomes more difficult to tangibly feel the fruits of our efforts.</p>
  69. <p><cite><em><a href="https://www.ripplet.org/weeknotes/2020/4/26/week-17-2020-on-meet-ups-moving-online">On meet-ups moving online</a></em> (<a href="/david/cache/2020/abc0dac647cbe1e8b4432fdba9cb3152/">cache</a>)</cite></p>
  70. </blockquote>
  71. <p>Tout est à réinventer et il y a un côté enthousiasmant, plus accessible sous certains aspects, beaucoup moins pour d’autres contextes. J’imagine que les personnes qui faisaient déjà des <em>podcasts</em> ou interviews ont énormément à nous apprendre, autant sur la production de contenus que sur l’interactivité liée à ces contenus pour créer des liens et faire communauté.</p>
  72. <blockquote lang="en">
  73. <p>The wider DRT audience includes plenty of (?) young mothers whose household schedules aren’t compatible with coming out to a multi-hour event after hours. Offering babysitting services is beyond our reach but perhaps a shorter online event could be the right mechanism that brings learning opportunities to them.</p>
  74. <p><cite><em>Ibid.</em></cite></p>
  75. </blockquote>
  76. <p>L’un des effets de bord qu’il pourrait être intéressant d’explorer.</p>
  77. <h2 id="design">Design <a href="#design" title="Ancre vers cette partie">#</a></h2>
  78. <blockquote lang="en">
  79. <p>In a design centered company, some people spend more time thinking about design than others, but <mark>everyone takes the importance of design to heart</mark>. Not only the design of the product itself, but of every way that the company touches a customer’s life.</p>
  80. <p><cite><em><a href="http://expletiveinserted.com/2014/08/15/the-role-of-design/">The Role of Design</a></em> (<a href="/david/cache/2020/4a058a01a70886c2b41f94783b946044/">cache</a>)</cite></p>
  81. </blockquote>
  82. <p>L’illustration parle d’elle-même, j’apprécie d’être dans une <a href="/david/blog/2019/faire-equipe/">équipe</a> où chaque voix est entendue et chaque personne impliquée dans ce processus. C’est suffisamment rare pour être salué et partagé.</p>
  83. <h2 id="email">Email <a href="#email" title="Ancre vers cette partie">#</a></h2>
  84. <blockquote lang="en">
  85. <p>How much work am I willing to put into changing address where it would need to be changed? Do I send an alert to everyone in my address book and let them know? How long before I’ve just redirected all my e-mail to a new place? What is my exit strategy when I’m locked in and really don’t like it?</p>
  86. <p>And if you are changing e-mail address, which in some contexts very well could prove to be a smart step, are there <em>other services that would suit you better</em>? This is the crucial question before taking the plunge. Because it will likely be some time before you’re prepared to move again.</p>
  87. <p><cite><em><a href="https://axbom.blog/hey-email-hype/">Hey, your e-mail matters more than hype</a></em> (<a href="/david/cache/2020/ff79ece116b91175ab716d0ea7ac3854/">cache</a>)</cite></p>
  88. </blockquote>
  89. <p>Très bon article sur le fait de changer de menottes numériques.</p>
  90. <p>Cela me fait envisager de changer d’adresse de courriel annuellement (toujours sur mon domaine !) <em>via</em> un suffixe par exemple, en donnant une priorité à l’adresse de l’année en cours ensuite dans mon client. Cela permettrait de faire le tri dans les services utilisés et l’attention que je leur porte. À préciser.</p>
  91. <h2 id="rythme">Rythme <a href="#rythme" title="Ancre vers cette partie">#</a></h2>
  92. <blockquote>
  93. <p>Le cercle est différent d’un système linéaire de temps dans lequel la vie est une course du point A, la naissance, au point B, la mort. Entre les deux, les études, la carrière, le couple, la maison, la famille, la retraite. Dans cet ordre.</p>
  94. <p>Combien de fois par jour dois-je me faire ce rappel ?</p>
  95. <p>La vie n’est pas une course.</p>
  96. <p>Parce que marcher autour de sprinteurs invétérés, c’est difficile. <mark>Prendre son temps, accepter son propre cercle, et ne pas mourir d’envie devant les autres qui foncent droit devant eux.</mark> Tu peux imaginer à quel point c’est confrontant. Surtout maintenant. Surtout parce que mon Marcorel a tellement besoin de moi. C’est lui qui rythme mon cercle. Souvent. Il dit qu’il m’aime et mon cercle prend de l’ampleur.</p>
  97. <p><cite><em>Shuni</em>, Naomi Fontaine</cite></p>
  98. </blockquote>
  99. <p>Mon rythme a changé lorsque je me promène en forêt.</p>
  100. <p>Fut un temps, je courrais à travers bois, attiré par la distance et les nombreux points de vue. Fut un temps, j’étais rapide et bruyant, par peur des ours et des moustiques, en m’éloignant le plus rapidement possible de la civilisation. Aujourd’hui, je prends le temps d’apprécier la monotonie des paysages qui m’entourent car là réside une part de son intérêt, je n’ai plus besoin de (par)courir la forêt car je cherche à <em>être</em> la forêt.</p>
  101. <blockquote>
  102. <p>Les déserts éloignent les gens qui ne savent pas regarder, ceux qui ont besoin de divertissement et d’agitation. Il ne reste alors, par élimination, que quelques passionnés amoureux de la nature et aventuriers dans l’âme ainsi que des prospecteurs miniers chinois qui se pressent aux portes de ces géants de sable et de rocaille.</p>
  103. <p><cite><em>Sauvage par nature</em>, Sarah Marquis</cite></p>
  104. </blockquote>
  105. <h2 id="difference">Différence <a href="#difference" title="Ancre vers cette partie">#</a></h2>
  106. <blockquote>
  107. <p>Alors je le dis haut et fort : <mark>je suis raciste</mark>. Le racisme ce n’est pas qu’une opinion qu’on clame, c’est aussi des pensées fluides qui pénètrent les esprits les mieux intentionnés, des cimetières indiens (et africains) sur lesquels on a construit notre présent, des institutions qui font partie de l’état de droit tout en étant, dans des mesures variables, racistes.</p>
  108. <p><cite><em><a href="https://voixdexils.ch/2020/07/09/voila-je-devais-le-dire-un-jour-je-suis-raciste/">« Voilà, je devais le dire un jour : je suis raciste »</a></em> (<a href="/david/cache/2020/75e6de14d16c3bed78799c91c67c0e09/">cache</a>)</cite></p>
  109. </blockquote>
  110. <p>Cela rejoint une réflexion que j’ai encore du mal à formuler. Je crois que l’on rejette ce qui est différent <em>par défaut</em> pour se protéger et qu’il est ensuite nécessaire de faire appel à sa culture, son expérience, son… humanité pour dépasser cette peur de ce qui n’est pas comme nous.</p>
  111. <p>Ce dépassement des <em>a priori</em> que l’on peut avoir, certain·e·s vont y arriver plus rapidement que d’autres en fonction de divers facteurs. C’est sur cette vélocité qu’il faut réussir à travailler (sur soi).</p>
  112. <h2 id="conscience">Conscience <a href="#conscience" title="Ancre vers cette partie">#</a></h2>
  113. <blockquote lang="en">
  114. <p>And 100,000 ping pong tables, awards, charitable donations, and free lunches won’t make up for one jot of it. If you are working for a capitalist organization, you are working for a bad one. It doesn’t make <em>you</em> a capitalist, or a bad person. But it will make you vulnerable to burnout.</p>
  115. <p>If you struggle with burnout, you are not alone. <mark>It’s the ones who don’t struggle with it, who need no more than a big paycheck and a pat on the back, who bother me.</mark></p>
  116. <p><cite><em><a href="https://heydonworks.com/article/marxian-alienation-and-web-development/">Marxian Alienation And Web Development</a></em> (<a href="/david/cache/2020/7122463445f458a915c93957300e63c9/">cache</a>)</cite></p>
  117. </blockquote>
  118. <p>J’ai souvent une pensée pour les milliers de personnes qui travaillent pour les <a href="/david/2020/02/07/">GAFAM+</a> en me demandant ce qui les préoccupe le soir dans leurs lits.</p>
  119. <ul>
  120. <li>De quel niveau de sécurité ces individus ont besoin ?</li>
  121. <li>Quels niveaux de sacrifices ont-ils ou elles fait pour en arriver là ?</li>
  122. <li>Est-ce qu’ils ou elles ont des regrets et quelles histoires se racontent ces personnes ?</li>
  123. <li>Pour quelle sensation de pouvoir et de considération ?</li>
  124. </ul>
  125. <h2 id="culture">Culture <a href="#culture" title="Ancre vers cette partie">#</a></h2>
  126. <blockquote lang="en">
  127. <p>It’s easy to dismiss these trolls as incel 4channers that we shun and don’t associate with. Lol no. <mark>These are your people.</mark> They work at your companies and write your code. They are harassing or doxxing your other employees. This toxic behavior is still very much a part of your tech culture, and you keep rewarding it.</p>
  128. <p><cite><em><a href="https://www.tinykat.cafe/on-all-that-fuckery">On all that fuckery</a></em> (<a href="/david/cache/2020/42b9ec3fa0736e788eb939e82a188879/">cache</a>)</cite></p>
  129. </blockquote>
  130. <p>C’est douloureux à lire. J’ose à peine imaginer à vivre. Quelle tristesse…</p>
  131. <h2 id="radium">Radium <a href="#radium" title="Ancre vers cette partie">#</a></h2>
  132. <blockquote lang="en">
  133. <p>Grace Fryer and Catherine Donohue — to name just two — are women we need to honor and salute as fearless champions. They shine through history with all that they achieved in their too-short lives. <mark>And they shine in other ways, too.</mark> For radium has a half-life of 1,600 years… and it is still embedded in their bones. The ghost girls will be glowing in their graves for a good while yet.</p>
  134. <p><cite><em><a href="https://www.buzzfeed.com/authorkatemoore/the-light-that-does-not-lie">The Forgotten Story Of The Radium Girls, Whose Deaths Saved Thousands Of Lives</a></em> (<a href="/david/cache/2020/0bdcd919935d2bc62634f2df3dedd06d/">cache</a>)</cite></p>
  135. </blockquote>
  136. <p>Je n’avais aucune connaissance de cette histoire. Quel est notre radium d’aujourd’hui ? Il y a <a href="https://ericwbailey.design/writing/the-radium-craze.html">des métaphores</a> (<a href="/david/cache/2020/740726bccca1dcd7c8adce3a89e6d933/">cache</a>) qui semblent un peu légères en comparaison.</p>
  137. <h2 id="statistiques">Statistiques <a href="#statistiques" title="Ancre vers cette partie">#</a></h2>
  138. <blockquote lang="en">
  139. <p>When you install GA on your site, <mark>you’re basically giving Google free rein to use any data they collect</mark> for whatever purpose they choose. One of these purposes Google is somewhat open about is ‘Ad personalization’ — this is where data collected from multiple sources is combined to build an ‘ad profile’ containing your demographic data and interests.</p>
  140. <p><cite><em><a href="https://iainbean.com/posts/2020/google-analytics-a-luxury-your-users-are-paying-for/">Google Analytics: A luxury your users are paying for</a></em> (<a href="/david/cache/2020/26ba07320555beed0e2fce554ab4ceae/">cache</a>)</cite></p>
  141. </blockquote>
  142. <p>Retour sur une <a href="https://mesconseilscovid.sante.gouv.fr/">utilisation récente</a> de Plausible :</p>
  143. <ul>
  144. <li>c’est <a href="https://github.com/plausible/analytics/blob/master/HOSTING.md">relativement</a> <a href="https://www.garron.blog/posts/how-to-install-plausible-analytics.html">facile</a> à <a href="https://plausible.io/blog/self-hosted-web-analytics-beta">installer</a> chez soi si l’on est familier de Docker (ce n’est pas mon cas, mais j’ai la chance de travailler avec <a href="https://ronan.amicel.net/">Ronan</a>) ;</li>
  145. <li>il est possible d’utiliser/modifier le petit bout de JavaScript qui fait le <code>ping</code> <a href="https://github.com/Delegation-numerique-en-sante/mesconseilscovid/commit/0b55209364fe5a4f2a19bf7fb271962d9d231707">depuis chez soi</a> pour répondre à ses besoins (<abbr title="Single Page App">SPA</abbr> par exemple) ;</li>
  146. <li>l’interface et les données collectées sont minimalistes (et c’est le but !) tout en restant pertinentes pour notre usage, l’adresse <abbr title="Internet Protocol">IP</abbr> n’est pas conservée.</li>
  147. </ul>
  148. <p>Même si la peinture n’est pas encore très sèche, c’est une alternative tout à fait valable pour ce que j’imagine être une majorité de cas. Un cadeau à faire à vos utilisateur·ice·s actuel·le·s et futur·e·s.</p>
  149. <blockquote lang="en">
  150. <p>If the IETF’s decisions affect the design of the Internet, and the Internet is political, the IETF’s decisions are sometimes political too. However, its decision-making processes presume that there is a technically correct answer to each problem. When that decision affects people and power in the actual world, <mark>rough consensus and running code are insufficient</mark>.</p>
  151. <p><cite><em><a href="https://www.mnot.net/blog/2020/08/28/for_the_users">RFC8890: The Internet is for End Users</a></em> (<a href="/david/cache/2020/0ca66318c85095c1406e42bb932f5e60/">cache</a>)</cite></p>
  152. </blockquote>
  153. <h2 id="penser">Penser <a href="#penser" title="Ancre vers cette partie">#</a></h2><p>Coïncidence intéressante, deux articles dans mes onglets qui encouragent à penser et à <em>faire</em> penser. Le <a href="https://ralphammer.com/make-me-think/">premier</a> (<a href="/david/cache/2020/82918fea8d8ed461aae66915dbed02c9/">cache</a>) — ponctué de superbes animations — qui montre l’importance de la complexité. Le <a href="https://blog.jim-nielsen.com/2020/make-me-think/">second</a> (<a href="/david/cache/2020/a8103eb4d28f54bf8d5e58905fa96c0a/">cache</a>) insistant sur les biais de nos cerveaux et l’intérêt de la friction pour certaines interfaces.</p>
  154. <h2 id="persona">Persona <a href="#persona" title="Ancre vers cette partie">#</a></h2>
  155. <blockquote>
  156. <p>Avoir se rapporte aux <em>choses</em>, et les choses sont constantes et <em>descriptibles</em>. Être se rapporte à l’<em>expérience</em>, et l’expérience humaine est en principe non descriptible. Ce qui est parfaitement descriptible, c’est notre <em>persona</em>, <mark>le masque que nous portons tous</mark>, le moi que nous présentons — car cette <em>persona</em> est en elle-même un objet. En revanche, l’être humain vivant n’est pas une image morte et ne peut absolument pas être décrit.</p>
  157. <p><cite><em><a href="/david/2020/12/21/#avoir-ou-etre">Avoir ou être</a></em>, Erich Fromm, 1976</cite></p>
  158. </blockquote>
  159. <p>Cette réflexion vient accompagner ce que j’ai envie de partager sur la forêt. Loin du matériel, m’intéresser davantage aux sensations et aux instants passés dans ces lieux. Et le partager en temps-réel, c’est déjà l’altérer (pas forcément pour le pire). Et le raconter, c’est déjà l’interpréter. Et le garder pour soi, c’est l’oublier.</p>
  160. <p>En parallèle de tout cela, avoir envie de témoigner d’un niveau de confort et de vie — au sens biosphère — qui ne sera plus si je me considère comme étant au pic de l’insouciance (pour rester poli/optimiste) de l’humanité.</p>
  161. <blockquote lang="en">
  162. <p>Stop thinking about this year as the warmest for the last 100 years, but the coolest one for the next 100. <a href="https://twitter.com/leschwartzberg/status/1297602595486228480">#</a></p>
  163. </blockquote>
  164. </main>
  165. <nav>
  166. <p class="center">
  167. <a rel="prev" href="/david/2020/08/24/" title="Publication précédente : Personnes">←</a> •
  168. <a href="/david/2020/" title="Liste des publications récentes">↑</a>
  169. • <a rel="next" href="/david/2020/09/07/" title="Publication suivante : Rappels">→</a>
  170. </p>
  171. </nav>
  172. </article>
  173. <hr>
  174. <footer>
  175. <p>
  176. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  177. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  178. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  179. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  180. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  181. </p>
  182. <template id="theme-selector">
  183. <form>
  184. <fieldset>
  185. <legend>Thème</legend>
  186. <label>
  187. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  188. </label>
  189. <label>
  190. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  191. </label>
  192. <label>
  193. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  194. </label>
  195. </fieldset>
  196. </form>
  197. </template>
  198. </footer>
  199. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module" defer></script>
  200. <script type="text/javascript">
  201. function loadThemeForm(templateName) {
  202. const themeSelectorTemplate = document.querySelector(templateName)
  203. const form = themeSelectorTemplate.content.firstElementChild
  204. themeSelectorTemplate.replaceWith(form)
  205. form.addEventListener('change', (e) => {
  206. const chosenColorScheme = e.target.value
  207. localStorage.setItem('theme', chosenColorScheme)
  208. toggleTheme(chosenColorScheme)
  209. })
  210. const selectedTheme = localStorage.getItem('theme')
  211. if (selectedTheme && selectedTheme !== 'undefined') {
  212. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  213. }
  214. }
  215. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  216. window.addEventListener('load', () => {
  217. let hasDarkRules = false
  218. for (const styleSheet of Array.from(document.styleSheets)) {
  219. let mediaRules = []
  220. for (const cssRule of styleSheet.cssRules) {
  221. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  222. continue
  223. }
  224. // WARNING: Safari does not have/supports `conditionText`.
  225. if (cssRule.conditionText) {
  226. if (cssRule.conditionText !== prefersColorSchemeDark) {
  227. continue
  228. }
  229. } else {
  230. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  231. continue
  232. }
  233. }
  234. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  235. }
  236. // WARNING: do not try to insert a Rule to a styleSheet you are
  237. // currently iterating on, otherwise the browser will be stuck
  238. // in a infinite loop…
  239. for (const mediaRule of mediaRules) {
  240. styleSheet.insertRule(mediaRule.cssText)
  241. hasDarkRules = true
  242. }
  243. }
  244. if (hasDarkRules) {
  245. loadThemeForm('#theme-selector')
  246. }
  247. })
  248. </script>
  249. </body>
  250. </html>