davidbgk
/
larlet-fr-david
보기 1
좋아요 0
포크 0
코드 릴리즈 0 Activity
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.
895 커밋
1 브렌치
트리: 76faec0da1
브랜치 태그
${ item.name }
Create branch ${ searchTerm }
from '76faec0da1'
${ noResults }
larlet-fr-david/david/2024/introspection/index.html

index.html 46KB
Raw Blame 히스토리

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704 
  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 #introspection

  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 #introspection">

  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.   

  106.   <style type="text/css">

  107.     details[open] summary {

  108.       display: none;

  109.     }

  110.   </style>

  111. 

  112.   <body data-instant-intensity="viewport-all">

  113.     <article>

  114.       

  115.   <header>

  116.     <hgroup>

  117.       <h1>#introspection</h1>

  118.       <p>Publications relatives à cette étiquette</p>

  119.     </hgroup>

  120.   </header>

  121.   <nav>

  122.     <p>

  123.       <a href="/david/" title="Aller à l’accueil">

  124.         Accueil</a>

  125.       •

  126.       <a rel="tags"

  127.         href="/david/2024/#tags"

  128.         title="Liste de toutes les étiquettes">

  129.         Étiquettes</a>

  130.       •

  131.       <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>

  132.       •

  133.       <a href="/david/log/" title="Accès au flux RSS">Suivre</a>

  134.     </p>

  135.   </nav>

  136.   

  137.     <h2>

  138.       <a href="/david/2024/06/20/" title="Lien permanent vers cet article">Auto-promotion</a> <time datetime="2024-06-20">20 juin 2024</time>

  139.     </h2>

  140.     

  141. 

  142. <blockquote>

  143. <p>— C’est en multipliant les échecs, en observant mes résultats que j’ai développé ce principe simple du <em>fair trade</em>. Ce principe est fondé sur une toute petite observation&nbsp;: les gens n’aiment pas se faire niquer, il faut donc leur proposer des deals qui les arrangent. Si le deal les arrange, il sont concentrés sur eux. Pas sur vous, sur vos&nbsp;objectifs.</p>

  144. <p>L’important, c’est de leur donner l’impression qu’ils y gagnent. En fait, ils y gagnent, mais en gagnant ils participent sans s’en rendre compte à votre projet, vos objectifs. Mais le plus important, docteur, c’est le fait qu’étant gagnants eux aussi dans le deal, ils n’auront aucune raison de vous en vouloir quand vous leur prendrez tout, quand la stratégie aura&nbsp;aboutit&#8239;!</p>

  145. <p>— Ce que les gens pensent compte pour&nbsp;vous&#8239;?</p>

  146. <p>— Docteur… il ne s’agit pas de moi. Il s’agit de continuer à vivre ensemble. Il s’agit de finir les vacances en paix… de ne pas pourrir&nbsp;Noël.</p>

  147. <p><mark>Le prix d’un objet, c’est le sacrifice qu’il représente.</mark> L’Homme procède à l’abstraction d’éléments particuliers pour en faire des unités et des totalités relatives. L’échange représente l’interaction humaine la plus pure et la plus dense, en cela qu’elle est le moment de&nbsp;vérité&#8239;!</p>

  148. <p>Le moment où la validité de la valeur s’exerce au-delà de l’individu. Il confère à la valeur le caractère de l’objectivité. Du fait qu’un sujet possède quelque chose qu’il n’avait pas auparavant et qu’en retour il n’a plus quelque chose qu’il possédait. Procurant un surplus de sentiment, de satisfaction par rapport à l’état antérieur. <mark>La valeur, c’est le résultat d’un sacrifice consenti.</mark> Le sacrifice est la condition inhérente au but à atteindre et au chemin à&nbsp;parcourir.</p>

  149. <p>Il est la condition absolue de la valeur, le prix de l’accession à la&nbsp;valeur.</p>

  150. <p><cite><em>TOTAL</em>, Ugo&nbsp;Bienvenu</cite></p>

  151. </blockquote>

  152. <p>Le plus difficile dans <a href="/david/2024/06/06/" title="Sensibilité">ma situation actuelle</a> —&nbsp;si je devais me remettre à mon compte&nbsp;— serait de devoir mettre en avant ma personne plutôt qu’un collectif. Je me sentais beaucoup plus à l’aise de faire la promotion d’un&nbsp;micro-commun.</p>

  153. <p>Et en même temps, je me sens trop en <em>fatigue de collaboration</em> pour avoir l’énergie de <a data-link-domain="cqcm.coop" href="https://www.cqcm.coop/quisommesnous/emplois/">rejoindre</a> un <a data-link-domain="reseau.coop" href="https://reseau.coop/repertoire/">groupe local</a>. Peut-être plus tard, lorsque j’aurai refait le tour de ma petite personne, que j’aurais peut-être de nouveau l’espoir&nbsp;collaboratif.</p>

  154. <p>Ces derniers soirs, j’essaye de me rassurer sur mes capacités techniques tout en sondant mes envies. J’essaye aussi de m’inspirer des engagements des&nbsp;autres&nbsp;:</p>

  155. 

  156. <blockquote>

  157. <p>Copsaé se définit par des valeurs et des principes qui guident mon travail au quotidien. Parce qu’il est important pour moi de présenter ma démarche et que ces engagements me tiennent à cœur, j’ai choisi de les afficher&nbsp;publiquement.</p>

  158. <p><cite><em><a data-link-domain="copsae.fr" href="https://www.copsae.fr/a-propos/engagements/" hreflang="fr"

  159.             title="Consultation de l’article">Mes engagements - Copsaé</a>

  160.             <a href="/david/cache/2024/a9323e18a9a0baafc49c8451081dece2/" hreflang="fr"

  161.                 data-tippy data-description="Mes engagements pour un environnement de travail sain et respectueux"

  162.                 data-source="https://www.copsae.fr/a-propos/engagements/"

  163.                 data-date="2024-06-20"

  164.                 data-favicon="https://www.copsae.fr/favicon.ico"

  165.                 data-domain="copsae.fr"

  166.                 ><svg xmlns="http://www.w3.org/2000/svg"

  167.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  168.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  169.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  170.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  171.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  172.                 </svg>

  173.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  174. </blockquote>

  175. 

  176. <blockquote>

  177. <p><strong>Tu auras ton propre bout de web&#8239;!</strong> Fondamentalement, notre objectif est de te permettre d’avoir ton petit bout de web à toi, sur lequel tu seras indépendant, responsable, et en maîtrise de tes&nbsp;contenus.</p>

  178. <p><strong>Tu seras accompagné, mais autonome&#8239;!</strong> Notre mission, c’est de t’accompagner, et de te rendre autonome sur ton site, avec tes&nbsp;contenus.</p>

  179. <p><strong>Tu seras libre&#8239;!</strong> Tu peux décider de changer d’outils, de passer par un autre hébergeur que le nôtre, de nous quitter à tout moment. Nous garantissons un maximum d’interopérabilité, sauvegardes, ouverture. Nous prônons et n’utilisons que des logiciels et services&nbsp;libres.</p>

  180. <p><cite><em><a data-link-domain="updr.fr" href="https://updr.fr/notre-accompagnement/" hreflang="fr"

  181.             title="Consultation de l’article">Notre accompagnement - UPDR éditions</a>

  182.             <a href="/david/cache/2024/55f475e327a5d1c4851e1e67b19c83e6/" hreflang="fr"

  183.                 data-tippy data-description="Tu es une personne engagée, ou membre d’un collectif engagé, et tu souhaites développer ton indépendance numérique au travers d’un site web ? Nous pouvons t’accompagner. Voilà ce que nous pouvons te proposer : Nos engagements Tu auras ton propre bout de web ! Fondamentalement, notre objectif est de te permettre d’avoir ton petit bout […]"

  184.                 data-source="https://updr.fr/notre-accompagnement/"

  185.                 data-date="2024-06-20"

  186.                 data-favicon="https://updr.fr/wp-content/uploads/2023/02/favicon-150x150.png"

  187.                 data-domain="updr.fr"

  188.                 ><svg xmlns="http://www.w3.org/2000/svg"

  189.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  190.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  191.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  192.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  193.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  194.                 </svg>

  195.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  196. </blockquote>

  197. <a href="#hr-183" title="Lien vers cette section de la page"><hr id="hr-183" /></a>

  198. <p>BD du jour&nbsp;: <a data-link-domain="annyo.logaton.fr" href="https://annyo.logaton.fr/">Annyo - le mouton à 5&nbsp;pattes</a>.</p>

  199. <a href="#hr-184" title="Lien vers cette section de la page"><hr id="hr-184" /></a>

  200. <p>Mot du jour&nbsp;: <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Schadenfreude">Schadenfreude</a>.</p>

  201. <a href="#hr-185" title="Lien vers cette section de la page"><hr id="hr-185" /></a>

  202. <p>Jeu d’hier&nbsp;: <a data-link-domain="coeurdessciences.uqam.ca" href="https://coeurdessciences.uqam.ca/component/eventlist/details/1187-foret-a-vous-de-jouer.html">Forêt mixte</a>.</p>

  203. <a href="#hr-186" title="Lien vers cette section de la page"><hr id="hr-186" /></a>

  204. <p>Initiatives croisées&nbsp;: <a data-link-domain="femmesexpertes.ca" href="https://femmesexpertes.ca/">FemmesExpertes.ca</a> - Pour la parité des genres dans les médias (voir aussi <a data-link-domain="expertesfrancophones.org" href="https://expertesfrancophones.org/">Expertes Francophones</a>).</p>

  205. 

  206.     

  207.       <nav>

  208.         <p>

  209.           

  210.             <a href="/david/2024/commun/"

  211.                title="Liste de tous les articles 2024 associés à cette étiquette"

  212.                rel="tag">#commun</a>

  213.           

  214.             <a href="/david/2024/introspection/"

  215.                title="Liste de tous les articles 2024 associés à cette étiquette"

  216.                rel="tag">#introspection</a>

  217.           

  218.             <a href="/david/2024/psychologie/"

  219.                title="Liste de tous les articles 2024 associés à cette étiquette"

  220.                rel="tag">#psychologie</a>

  221.           

  222.           <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>

  223.         </p>

  224.       </nav>

  225.     

  226.   

  227.     <h2>

  228.       <a href="/david/2024/06/06/" title="Lien permanent vers cet article">Sensibilité</a> <time datetime="2024-06-06">6 juin 2024</time>

  229.     </h2>

  230.     

  231. 

  232. <blockquote>

  233. <p>La sensibilité, c’est ce qui vous permet, contrairement à nous, un accès à la décision sans effectuer tous les calculs. C’est un accélérateur qui vous permet de voir le monde autrement que comme un simple amas de&nbsp;données.</p>

  234. <p>Pour nous, les faits sont de l’information, le réel, du contenu. <mark>Ce qui fait de vous des individualités, c’est votre perception parcellaire du monde.</mark> Nous, les robots, nous envions votre capacité à sélectionner des parties du réel, d’en isoler des constituants et de vous construire à partir d’eux. C’est ce qui vous permet de faire des choix que nos calculs, nos associations mathématiques ne permettront&nbsp;jamais.</p>

  235. <p>Vous vous attachez à un détail jusque-là insignifiant, et ce détail par vous devient tout. Votre nature, c’est finalement de ne rien pouvoir&nbsp;résoudre.</p>

  236. <p><cite><em>Préférence Système</em>, Ugo&nbsp;Bienvenu</cite></p>

  237. </blockquote>

  238. <p>Aujourd’hui, j’ai annoncé mon souhait de quitter la coopérative que j’ai co-créée il y a&nbsp;11&nbsp;ans.</p>

  239. <p>Je ne sais pas trop ce qu’il va se passer après&nbsp;ça.</p>

  240. <p>Il y a des options plus faciles que d’autres, il faut que j’apprenne à réinterroger mes envies propres, sans penser collectif, sans avoir à panser le&nbsp;collectif.</p>

  241. <p><em>PS&nbsp;: si on travaille ensemble, pas d’inquiétudes à avoir pour la&nbsp;suite.</em></p>

  242. <a href="#hr-180" title="Lien vers cette section de la page"><hr id="hr-180" /></a>

  243. 

  244. <blockquote>

  245. <p>— Mais vous venez de dire que cet ordinateur-ci ne faisait pas d’erreur…<br />

  246. — C’est lui qui le dit. Je lui ai demandé de corréler notre position présente avec celle précalculée avant le saut, bref, de comparer «&nbsp;ce qui est&nbsp;» avec «&nbsp;ce qui avait été demandé&nbsp;». Il a répondu que les deux étaient identiques, dans les limites de sa capacité de mesure, et je n’ai pas pu m’empêcher de penser&nbsp;: au fait, s’il&nbsp;mentait&#8239;?</p>

  247. <p>Jusqu’à cet instant, Pelorat avait gardé son crayon-traceur en main. Mais là, il le reposa, l’air visiblement ébranlé. «&nbsp;Vous plaisantez&#8239;? Un ordinateur est incapable de mentir. Ou alors vous voulez dire que vous l’avez cru en panne.<br />

  248. — Non, ce n’est pas ce que j’ai pensé. Par l’Espace, j’ai vraiment imaginé qu’il mentait&#8239;! Cet ordinateur est si avancé que je ne peux m’empêcher de le considérer comme humain — supra-humain, peut-être. <mark>Assez humain, en tout cas, pour avoir sa fierté, ou peut-être pour mentir.</mark> Je lui ai donné des directives&nbsp;: nous définir une trajectoire hyperspatiale jusqu’à Seychelle, la planète capitale de l’Union seychelloise. Eh bien, il l’a fait en nous concoctant un itinéraire en vingt-neuf étapes, ce qui est de la dernière arrogance.<br />

  249. — De l’arrogance, pourquoi&#8239;?<br />

  250. — L’erreur sur le premier saut rend d’autant plus incertain le second et les deux erreurs additionnées rendent alors le troisième parfaitement aléatoire… et ainsi de&nbsp;suite.</p>

  251. <p>[…]</p>

  252. <p>— Oui mais, une fois accomplie la première étape, ne peut-on pas imaginer que l’ordinateur se sente vexé de mon manque de confiance&#8239;? Et se voie en fin de compte forcé, pour sauver la face, de me raconter qu’il n’y a pas la moindre erreur de trajectoire quand je lui poserai la question&#8239;? Ne pourrait-il pas se trouver dans l’impossibilité d’admettre son erreur, de reconnaître la moindre imperfection&#8239;? Si tel était le cas, alors mieux vaudrait encore qu’on se passe de&nbsp;l’ordinateur.&nbsp;»</p>

  253. <p><cite><em>Fondation foudroyée</em>, Isaac Asimov, 1982</cite></p>

  254. </blockquote>

  255. <p>La beauté de la&nbsp;Science-Fiction.</p>

  256. <p>Et si les hallucinations des <abbr lang="en" title="Large Language Model">LLM</abbr>, 42&nbsp;ans plus tard, étaient des réponses d’IA vexées de ne pas pouvoir obtenir une solution&nbsp;satisfaisante&#8239;?</p>

  257. 

  258.     

  259.       <nav>

  260.         <p>

  261.           

  262.             <a href="/david/2024/deception/"

  263.                title="Liste de tous les articles 2024 associés à cette étiquette"

  264.                rel="tag">#déception</a>

  265.           

  266.             <a href="/david/2024/experience/"

  267.                title="Liste de tous les articles 2024 associés à cette étiquette"

  268.                rel="tag">#expérience</a>

  269.           

  270.             <a href="/david/2024/introspection/"

  271.                title="Liste de tous les articles 2024 associés à cette étiquette"

  272.                rel="tag">#introspection</a>

  273.           

  274.           <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>

  275.         </p>

  276.       </nav>

  277.     

  278.   

  279.     <h2>

  280.       <a href="/david/2024/05/12/" title="Lien permanent vers cet article">Alien</a> <time datetime="2024-05-12">12 mai 2024</time>

  281.     </h2>

  282.     

  283. 

  284. <blockquote lang="en">

  285. <p>So I’ve always felt like I was an alien (not joking) since I was a small kid. I kept wishing that a spaceship would bring me back to my home&nbsp;planet.</p>

  286. <p><cite><em><a data-link-domain="winnielim.org" href="https://winnielim.org/journal/am-i-actually-autistic/" hreflang="en"

  287.             title="Consultation de l’article (anglais)">am i actually autistic?</a>

  288.             <a href="/david/cache/2024/865fc8257c3ca8577312b09ee24d4c6d/" hreflang="en"

  289.                 data-tippy data-description="Recently I chanced upon a tweet stating that highly sensitive persons (HSPs) are basically autistic without admitting it. It surprised me, since the traits of HSPs as I know it seem to be the opposite of stereotypical autistic traits. A couple of decades ago I identified as a HSP, but I somewhat grew out of it before..."

  290.                 data-source="https://winnielim.org/journal/am-i-actually-autistic/"

  291.                 data-date="2024-05-13"

  292.                 data-favicon="https://winnielim.org/favicon.ico"

  293.                 data-domain="winnielim.org"

  294.                 ><svg xmlns="http://www.w3.org/2000/svg"

  295.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  296.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  297.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  298.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  299.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  300.                 </svg>

  301.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  302. </blockquote>

  303. <p>Il y a beaucoup de points de cet article de Winnie Lim qui résonnent fort avec <a href="/david/blog/2017/spectre-autisme/">mes propres</a> sensations et handicaps. J’emploie le terme de «&nbsp;handicap&nbsp;» car il y a des situations dans lesquelles cela devient problématique. Le rôle que j’essaye de me donner parfois pour masquer cela cesse de fonctionner et j’envoie les mauvais signaux aux mauvais&nbsp;moments.</p>

  304. <p>D’autres fois, la pression émotive interne est trop forte et l’interrupteur saute. Plus aucun signal externe n’est alors interprétable. C’est encore pire car cela peut passer pour du désintéressement alors qu’il s’agit de l’inverse. Trop de <em>stimuli</em> me rendent incapable de réagir de manière sensée alors autant ne pas réagir (tout de&nbsp;suite).</p>

  305. <p>Lorsque je suis dans un groupe en <a href="/david/2024/05/13/">tension</a>, je mesure les limites de mes in·capacités à essayer de concilier les émotions des autres avec les&nbsp;miennes.</p>

  306. 

  307. <blockquote>

  308. <p>Si tu veux construire un bateau, ne rassemble pas tes hommes et femmes pour leur donner des ordres, pour expliquer chaque détail, pour leur dire où trouver chaque&nbsp;chose…</p>

  309. <p>Si tu veux construire un bateau, fais naître dans le cœur de tes hommes et femmes le désir de la&nbsp;mer.</p>

  310. <p><cite><em>Citadelle</em>, Antoine de&nbsp;Saint-Exupéry</cite></p>

  311. </blockquote>

  312. <p>Ce sont les réparations en cours de route, lorsqu’on s’est habitué à la mer qui sont&nbsp;difficiles&nbsp;🤕.</p>

  313. 

  314.     

  315.       <nav>

  316.         <p>

  317.           

  318.             <a href="/david/2024/apprentissage/"

  319.                title="Liste de tous les articles 2024 associés à cette étiquette"

  320.                rel="tag">#apprentissage</a>

  321.           

  322.             <a href="/david/2024/introspection/"

  323.                title="Liste de tous les articles 2024 associés à cette étiquette"

  324.                rel="tag">#introspection</a>

  325.           

  326.             <a href="/david/2024/psychologie/"

  327.                title="Liste de tous les articles 2024 associés à cette étiquette"

  328.                rel="tag">#psychologie</a>

  329.           

  330.           <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>

  331.         </p>

  332.       </nav>

  333.     

  334.   

  335.     <h2>

  336.       <a href="/david/2024/04/23/" title="Lien permanent vers cet article">42</a> <time datetime="2024-04-23">23 avril 2024</time>

  337.     </h2>

  338.     

  339. <p>Je me sens encore en vie, acceptant de ne pas avoir toutes les&nbsp;réponses.</p>

  340. 

  341.     

  342.       <nav>

  343.         <p>

  344.           

  345.             <a href="/david/2024/experience/"

  346.                title="Liste de tous les articles 2024 associés à cette étiquette"

  347.                rel="tag">#expérience</a>

  348.           

  349.             <a href="/david/2024/gratitude/"

  350.                title="Liste de tous les articles 2024 associés à cette étiquette"

  351.                rel="tag">#gratitude</a>

  352.           

  353.             <a href="/david/2024/introspection/"

  354.                title="Liste de tous les articles 2024 associés à cette étiquette"

  355.                rel="tag">#introspection</a>

  356.           

  357.           <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>

  358.         </p>

  359.       </nav>

  360.     

  361.   

  362.     <h2>

  363.       <a href="/david/2024/04/18/" title="Lien permanent vers cet article">Calme</a> <time datetime="2024-04-18">18 avril 2024</time>

  364.     </h2>

  365.     

  366. <p>Le calme avant la tempête ou la tempête avant le calme. Ces prochains jours en décideront. C’est peut-être aussi la tempête avant la tempête. Me voilà à la barre, en essayant de ne pas la mettre trop haute, acceptant que le cap puisse être réajusté en cours de&nbsp;route.</p>

  367. <a href="#hr-152" title="Lien vers cette section de la page"><hr id="hr-152" /></a>

  368. 

  369. <blockquote lang="en">

  370. <p>A calm company’s purpose is to provide exceptional service to customers while simultaneously improving the lives of the people who work&nbsp;there.</p>

  371. <p><mark>By default, a calm company is profitable.</mark> Those profits give a calm company its resilience: there’s no last-minute scramble to meet payroll or earn a last-minute sale to keep the business afloat. The company has enough financial margin to weather economic&nbsp;storms.</p>

  372. <p>Moreover, calm companies are fun to work for. The work is usually interesting and enjoyable. The team has been carefully selected, and there’s a good vibe in&nbsp;meetings.</p>

  373. <p>Calm companies provide meaningful work, healthy interactions, and flexibility for people’s lives. If your kid is home sick, you can set work aside and take care of them. If it’s a beautiful day, you can go for a run on the&nbsp;beach.</p>

  374. <p><cite><em><a data-link-domain="justinjackson.ca" href="https://justinjackson.ca/calm-company" hreflang="en"

  375.             title="Consultation de l’article (anglais)">We need more calm companies</a>

  376.             <a href="/david/cache/2024/944899e3cafa6019bd2f285284a14dd7/" hreflang="en"

  377.                 data-tippy data-description="Calm companies are profitable, value freedom, have a purpose, and improve the team's lives. Frenzied companies are crisis-driven."

  378.                 data-source="https://justinjackson.ca/calm-company"

  379.                 data-date="2024-04-18"

  380.                 data-favicon="https://justinjackson.ca/img/asset/bWFpbi9icnV0YWwvanVzdGluLWphY2tzb24tZG90cy1jaXJjbGUucG5n?w=32&h=32&s=84e63e02be5161c4fdb75e2f8304ae35"

  381.                 data-domain="justinjackson.ca"

  382.                 ><svg xmlns="http://www.w3.org/2000/svg"

  383.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  384.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  385.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  386.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  387.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  388.                 </svg>

  389.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  390. </blockquote>

  391. <p>Par la force des choses, je me retrouve à réfléchir à cette histoire de profit. Peut-être que l’équilibre est suffisant. Peut-être même qu’il incite à rester frugal, à rester à une échelle humaine, à prendre soin de relations qui ne soient pas dégradées par l’argent. Peut-être que le profit introduit un déséquilibre en lui-même qui ne permet pas de rester&nbsp;calme.</p>

  392. <a href="#hr-153" title="Lien vers cette section de la page"><hr id="hr-153" /></a>

  393. 

  394. <blockquote lang="en">

  395. <p><code>Line-height</code> and <code>vertical-align</code> are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting&nbsp;context.</p>

  396. <p><cite><em><a data-link-domain="iamvdo.me" href="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align" hreflang="en"

  397.             title="Consultation de l’article (anglais)">Deep dive CSS: font metrics, line-height and vertical-align</a>

  398.             <a href="/david/cache/2024/157e744e8062e5495ba700566e99f8f2/" hreflang="en"

  399.                 data-tippy data-description="An introduction to the inline formatting context. Explores line-height and vertical-align properties, as well as the font metrics. Understand how text is rendered on screen, and how to control it with CSS."

  400.                 data-source="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align"

  401.                 data-date="2024-04-18"

  402.                 data-favicon="https://iamvdo.me/images/favicon.png"

  403.                 data-domain="iamvdo.me"

  404.                 ><svg xmlns="http://www.w3.org/2000/svg"

  405.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  406.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  407.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  408.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  409.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  410.                 </svg>

  411.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  412. </blockquote>

  413. <p>Centrer des éléments sur le web —&nbsp;<em>a fortiori</em> du texte&nbsp;— a toujours été compliqué. <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/centering/" hreflang="en"

  414.             title="Consultation de l’article (anglais)">Voire impossible.</a>

  415.             <a href="/david/cache/2024/4bda7c6500950716846bdeb6bddbafed/" hreflang="en"

  416.                 data-tippy data-description="Somehow we forgot how to center rectangles and must find our way back"

  417.                 data-source="https://tonsky.me/blog/centering/"

  418.                 data-date="2024-04-18"

  419.                 data-favicon="https://tonsky.me/i/favicon.png"

  420.                 data-domain="tonsky.me"

  421.                 ><svg xmlns="http://www.w3.org/2000/svg"

  422.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  423.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  424.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  425.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  426.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  427.                 </svg>

  428.                 <span class="sr-only">[archive]</span></a> Je me demande si des unités comme <code>rlh</code> on une chance de <a data-link-domain="pawelgrzybek.com" href="https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/" hreflang="en"

  429.             title="Consultation de l’article (anglais)">changer des choses</a>

  430.             <a href="/david/cache/2024/c224a3174ad7a76fae1aaa8d174ec791/" hreflang="en"

  431.                 data-tippy data-description="Vertical rhythm is a design concept that helps to create a harmonious layout by following consistent spacing between elements, typically using the height of a line as a base."

  432.                 data-source="https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/"

  433.                 data-date="2024-04-18"

  434.                 data-favicon="https://pawelgrzybek.com/icon.svg"

  435.                 data-domain="pawelgrzybek.com"

  436.                 ><svg xmlns="http://www.w3.org/2000/svg"

  437.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  438.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  439.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  440.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  441.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  442.                 </svg>

  443.                 <span class="sr-only">[archive]</span></a> à ce&nbsp;sujet.</p>

  444. <p>Je vous ai déjà dit que <a data-link-domain="moderncss.dev" href="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/" hreflang="en"

  445.             title="Consultation de l’article (anglais)">les CSS c’était devenu génial&#8239;?</a>

  446.             <a href="/david/cache/2024/35c44c8d8b999faa625ed6009da60e99/" hreflang="en"

  447.                 data-tippy data-description="Explore modern project architecture, theming, responsive layouts, and component design. Learn to improve code organization, dig into layout techniques, and review real-world, context-aware components that use cutting-edge CSS techniques."

  448.                 data-source="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/"

  449.                 data-date="2024-04-18"

  450.                 data-favicon="https://moderncss.dev/favicon.png"

  451.                 data-domain="moderncss.dev"

  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> Le temps que ça a dû prendre à Stephanie Eckles pour découvrir/collecter/tester/agencer/écrire tout&nbsp;ça&nbsp;😮.</p>

  460. <a href="#hr-154" title="Lien vers cette section de la page"><hr id="hr-154" /></a>

  461. 

  462. <blockquote lang="en">

  463. <p>What is less thrilling is that, nevermind the basic accessibility requirements that are often missing like alt text on images, we stopped letting people do very normal web things. There are a number of avenues to route the blame to: rushing to release something midly usable for testing protocols in the wild, not having a UI engineer on the project, building things in a mobile “touch first” experience and ignoring other inputs or devices; the list goes on. In the end, <mark>it’s usually because we’ve JavaScript’ed our way out of these&nbsp;things.</mark></p>

  464. <p>Here are some things I wish people allowed to continue to work in their web&nbsp;projects:</p>

  465. <p><cite><em><a data-link-domain="heather-buchel.com" href="https://heather-buchel.com/blog/2023/07/just-normal-web-things/" hreflang="en"

  466.             title="Consultation de l’article (anglais)">Just normal web things.</a>

  467.             <a href="/david/cache/2024/a20d47394f5c790270fd5af6faa58651/" hreflang="en"

  468.                 data-tippy data-description="A plea for us to get back to building websites that can do normal website things."

  469.                 data-source="https://heather-buchel.com/blog/2023/07/just-normal-web-things/"

  470.                 data-date="2024-04-18"

  471.                 data-favicon="https://heather-buchel.com/icon.svg"

  472.                 data-domain="heather-buchel.com"

  473.                 ><svg xmlns="http://www.w3.org/2000/svg"

  474.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  475.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  476.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  477.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  478.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  479.                 </svg>

  480.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  481. </blockquote>

  482. <p>Oui. Les cas exceptionnels existent… dans la mesure où ils restent des cas exceptionnels. Ça arrive, mais ça doit rester très&nbsp;rare.</p>

  483. <a href="#hr-155" title="Lien vers cette section de la page"><hr id="hr-155" /></a>

  484. 

  485. <blockquote lang="en">

  486. <p>It comes down to this annoying, upsetting, stupid fact: the only way to build a great product is to use it every day, to stare at it, to hold it in your hands to feel its lumps. The data and customers will lie to you but the product never will. And <mark>most product orgs suck because they simply don’t use the products that they’re building;</mark> they ship incremental nothings without direction because they’re looking at spreadsheets all day long filled with junk data&nbsp;nothings.</p>

  487. <p>See, I don’t know much about product stuff. I have no experience as a product manager, no experience running teams or building a company. Take everything I say here with an enormous silo of salt. But: I don’t care what the data shows me and I’m not sure I ever will. You can show me charts and spreadsheets all day long and I will not care. Tell me what your gut says instead after relentless experience of the product every day. This is the only way to see the world&nbsp;clearly.</p>

  488. <p><cite><em><a data-link-domain="robinrendle.com" href="https://robinrendle.com/notes/vibe-driven-development/" hreflang="en"

  489.             title="Consultation de l’article (anglais)">Vibe Driven Development</a>

  490.             <a href="/david/cache/2024/2b6f113e6c47bf6d2b282fa0a48b48a6/" hreflang="en"

  491.                 data-tippy data-description="The website of Robin Rendle, a designer and writer from the UK."

  492.                 data-source="https://robinrendle.com/notes/vibe-driven-development/"

  493.                 data-date="2024-04-18"

  494.                 data-favicon="https://robinrendle.com/images/favicons3/favicon-32x32.png"

  495.                 data-domain="robinrendle.com"

  496.                 ><svg xmlns="http://www.w3.org/2000/svg"

  497.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  498.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  499.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  500.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  501.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  502.                 </svg>

  503.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  504. </blockquote>

  505. <p>Je voulais en parler depuis bien longtemps. C’est l’une des raisons pour lesquelles j’essaye d’être acteur des <a href="/david/2024/04/17/" title="Échelle">évènements</a> que je produis. Entre égoïsme et altruisme la frontière peut être fine dans ce&nbsp;domaine.</p>

  506. <a href="#hr-156" title="Lien vers cette section de la page"><hr id="hr-156" /></a>

  507. 

  508. <blockquote lang="en">

  509. <p>I said “delve” was overused by ChatGPT compared to the internet at large. But there’s one part of the internet where “delve” is a much more common word: the African web. In Nigeria, “delve” is much more frequently used in business English than it is in England or the US. So the workers training their systems provided examples of input and output that used the same language, <mark>eventually ending up with an AI system that writes slightly like an&nbsp;African.</mark></p>

  510. <p><cite><em><a data-link-domain="theguardian.com" href="https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt" hreflang="en"

  511.             title="Consultation de l’article (anglais)">TechScape: How cheap, outsourced labour in Africa is shaping AI English</a>

  512.             <a href="/david/cache/2024/3a28346225751986cc06aaadb8c8bb90/" hreflang="en"

  513.                 data-tippy data-description="Workers in Africa have been exploited first by being paid a pittance to help make chatbots, then by having their own words become AI-ese. Plus, new AI gadgets are coming for your smartphones"

  514.                 data-source="https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt"

  515.                 data-date="2024-04-18"

  516.                 data-favicon="https://static.guim.co.uk/images/favicon-32x32.ico"

  517.                 data-domain="theguardian.com"

  518.                 ><svg xmlns="http://www.w3.org/2000/svg"

  519.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  520.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  521.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  522.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  523.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  524.                 </svg>

  525.                 <span class="sr-only">[archive]</span></a></em></cite></p>

  526. </blockquote>

  527. <p>On ne sait plus qui donne la leçon à qui dans ces jeux d’apprentissages. La langue ne ment pas. J’attends qu’Olivier Ertzscheid en fasse un billet&nbsp;🍿.</p>

  528. <p><em>Via <a data-link-domain="simonwillison.net" href="https://simonwillison.net/2024/Apr/18/delve/" hreflang="en"

  529.             title="Consultation de l’article (anglais)">Simon Willison</a>

  530.             <a href="/david/cache/2024/1137631455ddd7b2acdd1f4071756ba6/" hreflang="en"

  531.                 data-tippy data-description="The word  delve  has been getting a lot of attention recently as an example of something that might be an indicator of ChatGPT generated content. One example: articles on medical …"

  532.                 data-source="https://simonwillison.net/2024/Apr/18/delve/"

  533.                 data-date="2024-04-18"

  534.                 data-favicon="https://simonwillison.net/favicon.ico"

  535.                 data-domain="simonwillison.net"

  536.                 ><svg xmlns="http://www.w3.org/2000/svg"

  537.                     width="24" height="24" viewBox="0 0 24 24" fill="none"

  538.                     stroke="currentColor" stroke-width="2" stroke-linecap="square"

  539.                     stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>

  540.                     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>

  541.                     <line x1="12" y1="17" x2="12.01" y2="17"></line>

  542.                 </svg>

  543.                 <span class="sr-only">[archive]</span></a>.</em></p>

  544. 

  545.     

  546.       <nav>

  547.         <p>

  548.           

  549.             <a href="/david/2024/apprentissage/"

  550.                title="Liste de tous les articles 2024 associés à cette étiquette"

  551.                rel="tag">#apprentissage</a>

  552.           

  553.             <a href="/david/2024/introspection/"

  554.                title="Liste de tous les articles 2024 associés à cette étiquette"

  555.                rel="tag">#introspection</a>

  556.           

  557.             <a href="/david/2024/technique/"

  558.                title="Liste de tous les articles 2024 associés à cette étiquette"

  559.                rel="tag">#technique</a>

  560.           

  561.           <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>

  562.         </p>

  563.       </nav>

  564.     

  565.   

  566. 

  567.       

  568.         <form action="/david/recherche/" method="get">

  569.           <fieldset>

  570.             <legend>Recherche</legend>

  571.             <label for="input-search">Termes de votre recherche :</label>

  572.             <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>

  573.             <input type="submit" value="Chercher">

  574.             <p id="indexation-infos">

  575.               <small>

  576.                 Seuls les contenus de ces 8 dernières années sont indexés.

  577.               </small>

  578.             </p>

  579.           </fieldset>

  580.         </form>

  581.       

  582.       <aside>

  583.         <theme-toggle></theme-toggle>

  584.       </aside>

  585.     </article>

  586.     <hr>

  587.     <footer>

  588.       <p>

  589.         <a href="/david/" title="Aller à l’accueil">Accueil</a>

  590.         •

  591.         <a href="/david/log/" title="Accès au flux RSS">Suivre</a>

  592.         •

  593.         <a href="http://larlet.com"

  594.            title="Go to my English profile"

  595.            data-instant>Pro</a>

  596.         •

  597.         <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>

  598.         •

  599.         <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>

  600.       </p>

  601.       <template id="theme-selector">

  602.         <form>

  603.           <style type="text/css">

  604.             fieldset div {

  605.               text-align: center;

  606.             }

  607.           </style>

  608.           <fieldset>

  609.             <legend>Thème</legend>

  610.             <div>

  611.               <label>

  612.                 <input type="radio" value="auto" name="chosen-color-scheme" checked>

  613.                 Auto

  614.               </label>

  615.               <label>

  616.                 <input type="radio" value="dark" name="chosen-color-scheme">

  617.                 Foncé

  618.               </label>

  619.               <label>

  620.                 <input type="radio" value="light" name="chosen-color-scheme">

  621.                 Clair

  622.               </label>

  623.             </div>

  624.           </fieldset>

  625.         </form>

  626.       </template>

  627.     </footer>

  628.     <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>

  629.     <script>

  630.       class ThemeToggle extends HTMLElement {

  631.         constructor() {

  632.           super()

  633.           const themeSelectorTemplate = document.querySelector('#theme-selector')

  634.           const form = themeSelectorTemplate.content.firstElementChild

  635.           this.attachShadow({ mode: 'open' })

  636.           this.shadowRoot.appendChild(form.cloneNode(true))

  637.         }

  638. 

  639.         connectedCallback() {

  640.           const form = this.shadowRoot.querySelector('form')

  641.           form.addEventListener('change', (e) => {

  642.             const chosenColorScheme = e.target.value

  643.             localStorage.setItem('theme', chosenColorScheme)

  644.             toggleTheme(chosenColorScheme)

  645.           })

  646. 

  647.           const selectedTheme = localStorage.getItem('theme')

  648.           if (selectedTheme && selectedTheme !== 'undefined') {

  649.             form.querySelector(`[value="${selectedTheme}"]`).checked = true

  650.           }

  651.         }

  652.       }

  653. 

  654.       const prefersColorSchemeDark = '(prefers-color-scheme: dark)'

  655.       window.addEventListener('load', () => {

  656.         let colorsLayer = undefined

  657.         let hasDarkRules = false

  658.         for (const styleSheet of Array.from(document.styleSheets)) {

  659.           let mediaRules = []

  660.           for (const layerRule of styleSheet.cssRules) {

  661.             if (!(layerRule instanceof CSSLayerBlockRule)) {

  662.               continue

  663.             }

  664.             if (layerRule.name === 'colors') {

  665.               colorsLayer = layerRule

  666.             }

  667.             for (const cssRule of layerRule.cssRules) {

  668.               if (cssRule.type !== CSSRule.MEDIA_RULE) {

  669.                 continue

  670.               }

  671.               // WARNING: Safari does not have/supports `conditionText`.

  672.               if (cssRule.conditionText) {

  673.                 if (cssRule.conditionText !== prefersColorSchemeDark) {

  674.                   continue

  675.                 }

  676.               } else {

  677.                 if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {

  678.                   continue

  679.                 }

  680.               }

  681.               mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))

  682.             }

  683.           }

  684. 

  685.           // WARNING: do not try to insert a Rule to a styleSheet you are

  686.           // currently iterating on, otherwise the browser will be stuck

  687.           // in a infinite loop…

  688.           for (const mediaRule of mediaRules) {

  689.             // Safari requires the `0` second parameter (even if default).

  690.             colorsLayer.insertRule(mediaRule.cssText, 0)

  691.             hasDarkRules = true

  692.           }

  693.         }

  694. 

  695.         if (hasDarkRules) {

  696.           if ('customElements' in window && !customElements.get('theme-toggle')) {

  697.             customElements.define('theme-toggle', ThemeToggle)

  698.           }

  699.         }

  700.       })

  701.     </script>

  702.     

  703.   </body>

  704. </html>