Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 90KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253
  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 #protopie
  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 #protopie">
  71. <!-- That good ol' feed, subscribe :). -->
  72. <link rel="alternate"
  73. type="application/atom+xml"
  74. title="Feed"
  75. href="/david/log/">
  76. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  77. <link rel="apple-touch-icon"
  78. sizes="180x180"
  79. href="/static/david/icons2/apple-touch-icon.png">
  80. <link rel="icon"
  81. type="image/png"
  82. sizes="32x32"
  83. href="/static/david/icons2/favicon-32x32.png">
  84. <link rel="icon"
  85. type="image/png"
  86. sizes="16x16"
  87. href="/static/david/icons2/favicon-16x16.png">
  88. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  89. <link rel="mask-icon"
  90. href="/static/david/icons2/safari-pinned-tab.svg"
  91. color="#07486c">
  92. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  93. <meta name="msapplication-TileColor" content="#f7f7f7">
  94. <meta name="msapplication-config"
  95. content="/static/david/icons2/browserconfig.xml">
  96. <meta name="theme-color"
  97. content="#f7f7f7"
  98. media="(prefers-color-scheme: light)">
  99. <meta name="theme-color"
  100. content="#272727"
  101. media="(prefers-color-scheme: dark)">
  102. <!-- Is that even respected? Retrospectively? What a shAItshow…
  103. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  104. <meta name="robots" content="noai, noimageai">
  105. <!-- To get attribution when linking on mastodon. -->
  106. <meta name="fediverse:creator" content="@david@larlet.fr">
  107. <style type="text/css">
  108. details[open] summary {
  109. display: none;
  110. }
  111. </style>
  112. <body data-instant-intensity="viewport-all">
  113. <article>
  114. <header>
  115. <hgroup>
  116. <h1>#protopie</h1>
  117. <p>Publications relatives à cette étiquette</p>
  118. </hgroup>
  119. </header>
  120. <nav>
  121. <p>
  122. <a href="/david/" title="Aller à l’accueil">
  123. Accueil</a>
  124. <a rel="tags"
  125. href="/david/2024/#tags"
  126. title="Liste de toutes les étiquettes">
  127. Étiquettes</a>
  128. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
  129. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  130. </p>
  131. </nav>
  132. <h2>
  133. <a href="/david/2024/06/09/" title="Lien permanent vers cet article">Possibilités</a> <time datetime="2024-06-09">9 juin 2024</time>
  134. </h2>
  135. <p>Prendre et communiquer <a href="/david/2024/06/06/" title="Sensibilité">cette décision</a> m’a autorisé à envisager de nouvelles pistes que j’excluais jusque là pour ne pas biaiser mon choix. Depuis, mon cerveau est en effervescence, surtout la nuit. J’aimerais me laisser le temps d’explorer ce que j’ai envie de faire et avec qui, m’extraire un moment de la relative facilité de me remettre à mon compte en tant que développeur offrant sa lance au plus offrant pour imaginer d’autres possibles. Peut-être même plusieurs activités en&nbsp;parallèle&#8239;?</p>
  136. <p>Une des contraintes qu’il faut que je garde en tête c’est que je ne supporterais probablement plus la&nbsp;subordination…</p>
  137. <a href="#hr-181" title="Lien vers cette section de la page"><hr id="hr-181" /></a>
  138. <blockquote lang="en">
  139. <p>But I have this dream for barefoot developers that is like the barefoot&nbsp;doctor.</p>
  140. <p>These people are deeply embedded in their communities, so they understand the needs and problems of the people around&nbsp;them.</p>
  141. <p>So <mark>they are perfectly placed to solve local&nbsp;problems.</mark></p>
  142. <p>If given access to the right training and tools, they could provide the equivalent of basic healthcare, but instead, it’s basic software&nbsp;care.</p>
  143. <p>And they could become an unofficial, distributed, emergent public&nbsp;service.</p>
  144. <p><cite><em><a data-link-domain="maggieappleton.com" href="https://maggieappleton.com/home-cooked-software" hreflang="en"
  145. title="Consultation de l’article (anglais)">Home-Cooked Software and Barefoot Developers</a>
  146. <a href="/david/cache/2024/2076d04718bb00f7824155298c32c216/" hreflang="en"
  147. data-tippy data-description="The emerging golden age of home-cooked software, barefoot developers, and why the local-first community should help build it"
  148. data-source="https://maggieappleton.com/home-cooked-software"
  149. data-date="2024-06-09"
  150. data-favicon="https://maggieappleton.com/images/favicon/favicon.ico"
  151. data-domain="maggieappleton.com"
  152. ><svg xmlns="http://www.w3.org/2000/svg"
  153. width="24" height="24" viewBox="0 0 24 24" fill="none"
  154. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  155. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  156. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  157. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  158. </svg>
  159. <span class="sr-only">[archive]</span></a></em></cite></p>
  160. </blockquote>
  161. <p>En parlant de possibilités, cette intervention de Maggie Appleton est vraiment inspirante. Il y a des <abbr lang="en" title="Large Language Model">LLM</abbr> au milieu et il y a très certainement d’autres façons d’envisager des <em>barefoot developers</em>. Il y a beaucoup de personnes auxquelles il ne manquerait pas grand chose pour envisager un ordre de grandeur de plus en terme de littératie / écriture / création numérique. Comment devenir ce&nbsp;marche-pied&#8239;?</p>
  162. <a href="#hr-182" title="Lien vers cette section de la page"><hr id="hr-182" /></a>
  163. <blockquote>
  164. <p>Plus il est autonome (dans sa responsabilité au monde), moins il sera bloqué par ma lenteur du&nbsp;monde.</p>
  165. <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/04/15/pilea" hreflang="fr"
  166. title="Consultation de l’article">pilea - Carnets Web de La Grange</a>
  167. <a href="/david/cache/2024/b0a65aa568c958e4dae4f3aa1613ab6b/" hreflang="fr"
  168. data-tippy data-description=""
  169. data-source="https://www.la-grange.net/2024/04/15/pilea"
  170. data-date="2024-06-09"
  171. data-favicon="https://www.la-grange.net/favicon.ico"
  172. data-domain="la-grange.net"
  173. ><svg xmlns="http://www.w3.org/2000/svg"
  174. width="24" height="24" viewBox="0 0 24 24" fill="none"
  175. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  176. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  177. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  178. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  179. </svg>
  180. <span class="sr-only">[archive]</span></a></em></cite></p>
  181. </blockquote>
  182. <p>💚</p>
  183. <nav>
  184. <p>
  185. <a href="/david/2024/evolution/"
  186. title="Liste de tous les articles 2024 associés à cette étiquette"
  187. rel="tag">#évolution</a>
  188. <a href="/david/2024/processus/"
  189. title="Liste de tous les articles 2024 associés à cette étiquette"
  190. rel="tag">#processus</a>
  191. <a href="/david/2024/protopie/"
  192. title="Liste de tous les articles 2024 associés à cette étiquette"
  193. rel="tag">#protopie</a>
  194. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  195. </p>
  196. </nav>
  197. <h2>
  198. <a href="/david/2024/04/17/" title="Lien permanent vers cet article">Échelle</a> <time datetime="2024-04-17">17 avril 2024</time>
  199. </h2>
  200. <blockquote lang="en">
  201. <p>We have been obsessed with this scalability as the single differentiating factor that will tell us how well something will adapt to the changing requirements of an organization and increasing, diverse technical demand. But for businesses, scaling means that output remains the same or only slightly degrades while production costs&nbsp;lower.</p>
  202. <p><mark>Scalability has become the leading differentiator, the Leitdifferenz, of almost everything in our industry.</mark> From the tech we develop with, for, and on to what, how, and who we design for It’s almost like a trance that we keep repeating to ourselves.“But will it scale?” is first and foremost a matter of business. But in development and design, it also refers to other factors. Yet when it comes to matters of industrialization, these factors remain&nbsp;secondary.</p>
  203. <p><cite><em><a data-link-domain="helloyes.dev" href="https://helloyes.dev/blog/2023/craft-vs-industry/" hreflang="en"
  204. title="Consultation de l’article (anglais)">Craft vs Industry: Separating Concerns</a>
  205. <a href="/david/cache/2024/f000099cbb33176d35e7aeccdab687b3/" hreflang="en"
  206. data-tippy data-description="We have long referred to our niche of the web as the web industry but never has the term been more congruent than it is right now. I believe this throws us into some conflicts, that we are left deal with alone."
  207. data-source="https://helloyes.dev/blog/2023/craft-vs-industry/"
  208. data-date="2024-04-17"
  209. data-favicon="https://helloyes.dev/assets/favicons/illusion/icon.svg"
  210. data-domain="helloyes.dev"
  211. ><svg xmlns="http://www.w3.org/2000/svg"
  212. width="24" height="24" viewBox="0 0 24 24" fill="none"
  213. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  214. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  215. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  216. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  217. </svg>
  218. <span class="sr-only">[archive]</span></a></em></cite></p>
  219. </blockquote>
  220. <p>C’est la raison pour laquelle je suis de plus en plus attiré par de petits évènements (voir ci-dessous) qui peuvent avoir lieu dans des endroits différents —&nbsp;de manière distribuée&nbsp;— par des communautés qui peuvent y mettre leurs propres échelles pour embarquer de nouvelles&nbsp;personnes.</p>
  221. <a href="#hr-149" title="Lien vers cette section de la page"><hr id="hr-149" /></a>
  222. <blockquote lang="en">
  223. <p>I don’t think we <em>need</em> new metaphors for the things we do with computers. But I like thinking about <mark>creating software as organizing an event.</mark> Here are some reasons why I think <em>event</em> is a better metaphor than <em>product</em>:</p>
  224. <p><cite><em><a data-link-domain="kooslooijesteijn.net" href="https://www.kooslooijesteijn.net/blog/app-website-is-not-product" hreflang="en"
  225. title="Consultation de l’article (anglais)">Your app is not a product</a>
  226. <a href="/david/cache/2024/e8ab525499d79428bb5674609dc486dc/" hreflang="en"
  227. data-tippy data-description="… and neither is your website."
  228. data-source="https://www.kooslooijesteijn.net/blog/app-website-is-not-product"
  229. data-date="2024-04-17"
  230. data-favicon="https://www.kooslooijesteijn.net/favicon/favicon.svg"
  231. data-domain="kooslooijesteijn.net"
  232. ><svg xmlns="http://www.w3.org/2000/svg"
  233. width="24" height="24" viewBox="0 0 24 24" fill="none"
  234. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  235. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  236. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  237. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  238. </svg>
  239. <span class="sr-only">[archive]</span></a></em></cite></p>
  240. </blockquote>
  241. <p>Je ne vais pas énumérer toute la liste ici mais il y a de bonnes choses à aller picorer pour alimenter mes propres réflexions à ce&nbsp;sujet.</p>
  242. <a href="#hr-150" title="Lien vers cette section de la page"><hr id="hr-150" /></a>
  243. <blockquote lang="en">
  244. <p>Ecology knows that shifting baselines dampen collective urgency and deepen generational divides. People who care about internet monoculture and control are often told they’re nostalgists harkening back to a pioneer era. But it’s fiendishly hard to regenerate an open and competitive infrastructure for younger generations who’ve been raised to assume that two or three platforms, two app stores, two operating systems, two browsers, one cloud/mega-store and a single search engine for the world comprise the internet. If <em>the internet</em> for you is the massive sky-scraping silo you happen to live inside and the only thing you can see outside is the single, other massive sky-scraping silo, then <mark>how can you imagine anything&nbsp;else?</mark></p>
  245. <p>[…] For tech giants, the long period of open internet evolution is over. Their internet is not an ecosystem. It’s a&nbsp;zoo.</p>
  246. <p><cite><em><a data-link-domain="noemamag.com" href="https://www.noemamag.com/we-need-to-rewild-the-internet/" hreflang="en"
  247. title="Consultation de l’article (anglais)">We Need To Rewild The Internet</a>
  248. <a href="/david/cache/2024/21f1fc65a0499d19ded2b8d326791fee/" hreflang="en"
  249. data-tippy data-description="The internet has become an extractive and fragile monoculture. But we can revitalize it using lessons learned by ecologists."
  250. data-source="https://www.noemamag.com/we-need-to-rewild-the-internet/"
  251. data-date="2024-04-17"
  252. data-favicon="https://www.noemamag.com/wp-content/uploads/2020/06/cropped-ms-icon-310x310-1-32x32.png"
  253. data-domain="noemamag.com"
  254. ><svg xmlns="http://www.w3.org/2000/svg"
  255. width="24" height="24" viewBox="0 0 24 24" fill="none"
  256. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  257. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  258. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  259. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  260. </svg>
  261. <span class="sr-only">[archive]</span></a></em></cite></p>
  262. </blockquote>
  263. <p>Ce troisième lien est lui aussi une métaphore, combinant <em>forêt</em> et <em>web</em>. Lorsqu’on constate ce qu’il advient de nos forêts, je ne sais pas trop s’il est possible d’être optimiste à ce&nbsp;sujet…</p>
  264. <a href="#hr-151" title="Lien vers cette section de la page"><hr id="hr-151" /></a>
  265. <blockquote>
  266. <p>Nous sommes un groupe d’étudiants dans les métiers du multimédia et de l’Internet. Pourtant nous n’avons pas numérisé. Il y a un an, <mark>nous nous empressions</mark> de faire une solution numérique éco conçue pour répondre à un&nbsp;problème.</p>
  267. <p>Aujourd’hui, avec du recul, des connaissances supplémentaires et une nouvelle vision, nous nous demandons s’il est nécessaire de&nbsp;numériser.</p>
  268. <p><cite><em><a data-link-domain="nousnavonspasnumerise.mmibordeaux.com" href="https://nousnavonspasnumerise.mmibordeaux.com/autopsie/" hreflang="fr"
  269. title="Consultation de l’article">Nous n’avons pas numérisé.</a>
  270. <a href="/david/cache/2024/6fd58c8dcf1738605fb932bb83f4411a/" hreflang="fr"
  271. data-tippy data-description="L’écran captive plus facilement les enfants que le papier"
  272. data-source="https://nousnavonspasnumerise.mmibordeaux.com/autopsie/"
  273. data-date="2024-04-17"
  274. data-favicon="https://nousnavonspasnumerise.mmibordeaux.com/assets/images/favicons/favicon.png"
  275. data-domain="nousnavonspasnumerise.mmibordeaux.com"
  276. ><svg xmlns="http://www.w3.org/2000/svg"
  277. width="24" height="24" viewBox="0 0 24 24" fill="none"
  278. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  279. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  280. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  281. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  282. </svg>
  283. <span class="sr-only">[archive]</span></a></em></cite></p>
  284. </blockquote>
  285. <p>Un peu d’espoir tout de&nbsp;même.</p>
  286. <nav>
  287. <p>
  288. <a href="/david/2024/commun/"
  289. title="Liste de tous les articles 2024 associés à cette étiquette"
  290. rel="tag">#commun</a>
  291. <a href="/david/2024/decentralisation/"
  292. title="Liste de tous les articles 2024 associés à cette étiquette"
  293. rel="tag">#décentralisation</a>
  294. <a href="/david/2024/protopie/"
  295. title="Liste de tous les articles 2024 associés à cette étiquette"
  296. rel="tag">#protopie</a>
  297. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  298. </p>
  299. </nav>
  300. <h2>
  301. <a href="/david/2024/04/02/" title="Lien permanent vers cet article">Porte</a> <time datetime="2024-04-02">2 avril 2024</time>
  302. </h2>
  303. <blockquote lang="en">
  304. <p>For me, the two big lessons from #XZ were first, the lack of resources supporting crucial Open-Source infrastructure, but then and especially, the demonstration that the attackers are numerous, skilled <em>and patient</em>. We already knew about numerous and skilled but this episode, where the attacker was already well-embedded in the project by May 2022, opened a few eyes, including&nbsp;mine.</p>
  305. <p>The advantage, to various flavors of malefactor, of subverting core pieces of Open-Source infrastructure, is incalculable. <mark>#XZ was the one we caught; how many have we&nbsp;missed?</mark></p>
  306. <p><cite><em><a data-link-domain="tbray.org" href="https://www.tbray.org/ongoing/When/202x/2024/04/01/OSQI" hreflang="en"
  307. title="Consultation de l’article (anglais)">ongoing by Tim Bray · OSQI</a>
  308. <a href="/david/cache/2024/8ffe1e30cd3dd6446468bd6d03550457/" hreflang="en"
  309. data-tippy data-description=""
  310. data-source="https://www.tbray.org/ongoing/When/202x/2024/04/01/OSQI"
  311. data-date="2024-04-04"
  312. data-favicon="https://www.tbray.org/favicon.ico"
  313. data-domain="tbray.org"
  314. ><svg xmlns="http://www.w3.org/2000/svg"
  315. width="24" height="24" viewBox="0 0 24 24" fill="none"
  316. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  317. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  318. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  319. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  320. </svg>
  321. <span class="sr-only">[archive]</span></a></em></cite></p>
  322. </blockquote>
  323. <p>J’ai laissé le web 2&nbsp;jours et hop, une <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Porte_d%C3%A9rob%C3%A9e">porte dérobée</a> a été fermée à temps. C’est <a data-link-domain="boehs.org" href="https://boehs.org/node/everything-i-know-about-the-xz-backdoor" hreflang="en"
  324. title="Consultation de l’article (anglais)">la chronologie</a>
  325. <a href="/david/cache/2024/b4d0d377662e30cef4e944448d41338c/" hreflang="en"
  326. data-tippy data-description="Please note: This is being updated in real-time. The intent is to make sense of lots of simultaneous discoveries"
  327. data-source="https://boehs.org/node/everything-i-know-about-the-xz-backdoor"
  328. data-date="2024-04-04"
  329. data-favicon="https://boehs.org/favicon.ico"
  330. data-domain="boehs.org"
  331. ><svg xmlns="http://www.w3.org/2000/svg"
  332. width="24" height="24" viewBox="0 0 24 24" fill="none"
  333. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  334. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  335. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  336. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  337. </svg>
  338. <span class="sr-only">[archive]</span></a> qui est surprenante dans sa durée et pose immédiatement la question de savoir s’il s’agit d’une exception ou s’il y a déjà des portes un peu partout, exploitées par plus ou moins de&nbsp;monde.</p>
  339. <p>Lorsqu’on voit ce que <a href="/david/2024/03/28/#hr-140">sont prêts à faire les GAFAM+</a>, je n’ai aucun doute sur le fait qu’ils se rueraient sur de telles «&nbsp;opportunités&nbsp;». On parle souvent de malveillance dans ces cas là, je pense que l’on peut facilement mettre tout ce qui est <em>growth hacking</em> et <em>marketing</em> dans ce&nbsp;périmètre.</p>
  340. <p>Pour en revenir à des OSQI (Open Source Quality Institutes) nationaux, cela me rappelle des initiatives comme <a data-link-domain="copiepublique.fr" href="https://copiepublique.fr/">copie publique</a> ou cette idée de <a href="/david/2023/01/11/">MécénatDeCompétencesPublic</a>&#8239;.</p>
  341. <p>Transformer l’Open-Source en bien commun est peut-être le chantier de la décennie à venir. J’espère en faire partie à mon&nbsp;échelle.</p>
  342. <blockquote lang="en">
  343. <p>Tuesday, Hans-Christoph Steiner, a longtime developer of F-Droid, explained that a very similar situation nearly led F-Droid to push an update that would have introduced a security vulnerability into the product three years ago: “Three years ago, F-Droid had a similar kind of attempt as the Xz backdoor,” he posted on Mastodon. “A new contributor submitted a merge request to improve the search, which was oft requested but the maintainers hadn’t found time to work on. There was also pressure from other random accounts to merge it. In the end, it became clear that it added a SQL injection vulnerability. In this case, we managed to catch it before it was merged. Since similar tactics were used, I think it’s relevant&nbsp;now.”</p>
  344. <p>Other open source developers and security experts have pointed to the dynamic of bullying and the general reliance on a small number of volunteer developers. They explained that it’s a problem across much of the open source software ecosystem, and is definitely a problem for the large tech companies and infrastructure who rely on these often volunteer-led projects to build their for-profit software on top&nbsp;of.</p>
  345. <p><cite><em><a data-link-domain="404media.co" href="https://www.404media.co/xz-backdoor-bullying-in-open-source-software-is-a-massive-security-vulnerability/" hreflang="en"
  346. title="Consultation de l’article (anglais)">Bullying in Open Source Software Is a Massive Security Vulnerability</a>
  347. <a href="/david/cache/2024/14da9039de50c54f159f333ea3dc73f1/" hreflang="en"
  348. data-tippy data-description="The Xz backdoor and a near miss on the F-Droid app store show how the entitled attitude of some people in the open source community can be used to push malicious or insecure code."
  349. data-source="https://www.404media.co/xz-backdoor-bullying-in-open-source-software-is-a-massive-security-vulnerability/"
  350. data-date="2024-04-04"
  351. data-favicon="https://www.404media.co/content/images/size/w256h256/format/png/2023/08/favicon-3.svg"
  352. data-domain="404media.co"
  353. ><svg xmlns="http://www.w3.org/2000/svg"
  354. width="24" height="24" viewBox="0 0 24 24" fill="none"
  355. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  356. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  357. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  358. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  359. </svg>
  360. <span class="sr-only">[archive]</span></a></em></cite></p>
  361. </blockquote>
  362. <nav>
  363. <p>
  364. <a href="/david/2024/commun/"
  365. title="Liste de tous les articles 2024 associés à cette étiquette"
  366. rel="tag">#commun</a>
  367. <a href="/david/2024/opensource/"
  368. title="Liste de tous les articles 2024 associés à cette étiquette"
  369. rel="tag">#opensource</a>
  370. <a href="/david/2024/protopie/"
  371. title="Liste de tous les articles 2024 associés à cette étiquette"
  372. rel="tag">#protopie</a>
  373. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  374. </p>
  375. </nav>
  376. <h2>
  377. <a href="/david/2024/03/28/" title="Lien permanent vers cet article">Collectif</a> <time datetime="2024-03-28">28 mars 2024</time>
  378. </h2>
  379. <p>Il est parfois difficile pour un collectif existant <em>de fait</em> de définir ce qui le relie (encore), de travailler sur sa raison d’être et/ou ses valeurs. Le regroupement a pu être économique, idéologique, par affinités, un peu des trois à la fois sûrement et à un moment on se retrouve devant le fait accompli. Presque surpris de se retrouver ensemble, à se demander&nbsp;pourquoi.</p>
  380. <p>Cela m’arrive dans trois situations à la fois en ce moment. À différentes échelles mais le parallèle est frappant. Le plus difficile (pour moi) est de se retenir d’être le seul moteur du groupe car le temps individuel est aussi important que l’action collective qu’il&nbsp;précède.</p>
  381. <p>Je vais aller m’épuiser sur ces sages paroles en forêt. Seul.</p>
  382. <a href="#hr-140" title="Lien vers cette section de la page"><hr id="hr-140" /></a>
  383. <blockquote lang="en">
  384. <p>In 2016, Facebook launched a secret project designed to intercept and decrypt the network traffic between people using Snapchat’s app and its servers. The goal was to understand users’ behavior and help Facebook compete with Snapchat, according to newly unsealed court documents. Facebook called this “Project Ghostbusters,” in a clear reference to Snapchat’s ghost-like&nbsp;logo.</p>
  385. <p>On Tuesday, a federal court in California released new documents discovered as part of the class action lawsuit between consumers and Meta, Facebook’s parent&nbsp;company.</p>
  386. <p>The newly released documents reveal how Meta tried to gain a competitive advantage over its competitors, including Snapchat and later Amazon and YouTube, <mark>by analyzing the network traffic of how its users were interacting with Meta’s competitors.</mark> Given these apps’ use of encryption, Facebook needed to develop special technology to get around&nbsp;it.</p>
  387. <p><cite><em><a data-link-domain="techcrunch.com" href="https://techcrunch.com/2024/03/26/facebook-secret-project-snooped-snapchat-user-traffic/" hreflang="en"
  388. title="Consultation de l’article (anglais)">Facebook snooped on users’ Snapchat traffic in secret project, documents reveal</a>
  389. <a href="/david/cache/2024/2de5f6111316a8158795d70666b55a95/" hreflang="en"
  390. data-tippy data-description="A secret program called Project Ghostbusters saw Facebook devise a way to intercept and decrypt the encrypted network traffic of Snapchat users to study their behavior."
  391. data-source="https://techcrunch.com/2024/03/26/facebook-secret-project-snooped-snapchat-user-traffic/"
  392. data-date="2024-03-28"
  393. data-favicon="https://techcrunch.com/wp-content/uploads/2015/02/cropped-cropped-favicon-gradient.png?w=32"
  394. data-domain="techcrunch.com"
  395. ><svg xmlns="http://www.w3.org/2000/svg"
  396. width="24" height="24" viewBox="0 0 24 24" fill="none"
  397. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  398. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  399. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  400. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  401. </svg>
  402. <span class="sr-only">[archive]</span></a></em></cite></p>
  403. </blockquote>
  404. <p>J’ai du mal à réaliser que je suis en train de faire un lien vers TechCrunch mais c’est trop gros pour laisser passer. Je ne vois pas comment un tel stratagème pourrait être justifiable, et si les GAFAM+ en sont là ça fait froid dans le&nbsp;dos.</p>
  405. <p>Le manque de déontologie dans ma profession m’attriste. Savoir que cette nouvelle ne va rien changer aux monopoles actuels&nbsp;m’achève.</p>
  406. <blockquote lang="en">
  407. <p>People who point out what needs to be improved are generally disappointed optimists. Only an optimist would believe that pointing out what has gone wrong could ever result in said issue being fixed. Only somebody who believes that software could be universally useful to everybody in society is going to spend time discovering and highlighting accessibility&nbsp;issues.</p>
  408. <p>You don’t spend years of your life figuring out how the flaws of the web can be fixed unless you thinks the web has massive unfulfilled&nbsp;potential.</p>
  409. <p><mark>We’re not cynics.</mark> If we were, we wouldn’t waste so much energy being&nbsp;hopeful.</p>
  410. <p><cite><em><a data-link-domain="baldurbjarnason.com" href="https://www.baldurbjarnason.com/2024/the-software-crisis-easter-sale/" hreflang="en"
  411. title="Consultation de l’article (anglais)">“I’m not a cynic, I’m disappointed”</a>
  412. <a href="/david/cache/2024/a11451e038f3aedba0ae55ff242e1ed5/" hreflang="en"
  413. data-tippy data-description="Most people don’t realise just how few of the “critics” in tech are genuine cynics.You don’t spend a good part of your life shouting about bad websites or broken software and how they could be fixed if you’re a cynic."
  414. data-source="https://www.baldurbjarnason.com/2024/the-software-crisis-easter-sale/"
  415. data-date="2024-03-28"
  416. data-favicon="https://www.baldurbjarnason.com/dark-bird.svg"
  417. data-domain="baldurbjarnason.com"
  418. ><svg xmlns="http://www.w3.org/2000/svg"
  419. width="24" height="24" viewBox="0 0 24 24" fill="none"
  420. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  421. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  422. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  423. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  424. </svg>
  425. <span class="sr-only">[archive]</span></a></em></cite></p>
  426. </blockquote>
  427. <a href="#hr-141" title="Lien vers cette section de la page"><hr id="hr-141" /></a>
  428. <blockquote lang="en">
  429. <p>As such, I’ve become more attuned to what my goal really <em>should be</em> with Buttondown. Most tech companies have a goal centered around some flavor of maximalism: disrupting an industry, revolutionizing a process, that kind of thing. Buttondown is not that kind of product; <mark>I am not that kind of&nbsp;person.</mark></p>
  430. <p><cite><em><a data-link-domain="jmduke.com" href="https://jmduke.com/posts/microblog/why-should-a-company/" hreflang="en"
  431. title="Consultation de l’article (anglais)">Why should a company? · Applied Cartography</a>
  432. <a href="/david/cache/2024/c2a852eced710f481135a1f61cb67a26/" hreflang="en"
  433. data-tippy data-description=""
  434. data-source="https://jmduke.com/posts/microblog/why-should-a-company/"
  435. data-date="2024-03-28"
  436. data-favicon="https://jmduke.com/favicon.ico"
  437. data-domain="jmduke.com"
  438. ><svg xmlns="http://www.w3.org/2000/svg"
  439. width="24" height="24" viewBox="0 0 24 24" fill="none"
  440. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  441. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  442. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  443. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  444. </svg>
  445. <span class="sr-only">[archive]</span></a></em></cite></p>
  446. </blockquote>
  447. <p>Et puis soudain un peu d’espoir. Tout n’est pas si terrible finalement. Quelques villages ici et là résistent. Quelques personnes et collectifs font la&nbsp;différence.</p>
  448. <blockquote lang="en">
  449. <p>But it’s our fault. Our as a society. We celebrate when Apple becomes the first trillion-dollar company but we don’t celebrate when someone says <mark>“You know what? I think I have&nbsp;enough”.</mark></p>
  450. <p><cite><em><a data-link-domain="manuelmoreale.com" href="https://manuelmoreale.com/growth-is-a-mind-cancer" hreflang="en"
  451. title="Consultation de l’article (anglais)">Growth is a mind cancer</a>
  452. <a href="/david/cache/2024/422adbcbb23d5d87eb9d9f07f21e6e52/" hreflang="en"
  453. data-tippy data-description="I'm following with somewhat vague interest the various legal battles Apple is currently involved in. Reading their response to the EU's DMA makes me …"
  454. data-source="https://manuelmoreale.com/growth-is-a-mind-cancer"
  455. data-date="2024-03-28"
  456. data-favicon="https://manuelmoreale.com/favicon.ico"
  457. data-domain="manuelmoreale.com"
  458. ><svg xmlns="http://www.w3.org/2000/svg"
  459. width="24" height="24" viewBox="0 0 24 24" fill="none"
  460. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  461. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  462. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  463. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  464. </svg>
  465. <span class="sr-only">[archive]</span></a></em></cite></p>
  466. </blockquote>
  467. <a href="#hr-142" title="Lien vers cette section de la page"><hr id="hr-142" /></a>
  468. <blockquote>
  469. <p>À l’origine, Make est un outil conçu pour le développement de logiciels&nbsp;: il sert à automatiser la fabrication de programmes exécutables à partir de fichiers contenant du&nbsp;code.</p>
  470. <p>Mais en réalité, <mark>Make peut être utilisé pour gérer toutes sortes de projets.</mark> En tant que langage, il permet de définir des processus de manière très simple (encore plus simple que les scripts shell). Et en tant qu’outil, il permet de gagner du temps, avec une gestion efficace des états des fichiers qui fait économiser du travail aussi bien à l’humain qu’à la&nbsp;machine.</p>
  471. <p><cite><em><a data-link-domain="arthurperret.fr" href="https://www.arthurperret.fr/cours/make.html" hreflang="fr"
  472. title="Consultation de l’article">Make</a>
  473. <a href="/david/cache/2024/821fa933883f080d23c0a6d9d0b3721a/" hreflang="fr"
  474. data-tippy data-description="Cette page présente le logiciel Make, un outil simple et fiable pour automatiser des tâches."
  475. data-source="https://www.arthurperret.fr/cours/make.html"
  476. data-date="2024-03-28"
  477. data-favicon="https://www.arthurperret.fr/cours/favicon-32x32.png"
  478. data-domain="arthurperret.fr"
  479. ><svg xmlns="http://www.w3.org/2000/svg"
  480. width="24" height="24" viewBox="0 0 24 24" fill="none"
  481. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  482. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  483. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  484. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  485. </svg>
  486. <span class="sr-only">[archive]</span></a></em></cite></p>
  487. </blockquote>
  488. <p>Superbe cours par Arthur Perret, j’ai appris plein de choses en le relisant. J’emploie <code>make</code> au quotidien, ne serait-ce que pour construire ce site et pourtant il y a pas mal de complexité/raccourcis vers lesquels je ne suis pas encore&nbsp;allé.</p>
  489. <nav>
  490. <p>
  491. <a href="/david/2024/commun/"
  492. title="Liste de tous les articles 2024 associés à cette étiquette"
  493. rel="tag">#commun</a>
  494. <a href="/david/2024/equipe/"
  495. title="Liste de tous les articles 2024 associés à cette étiquette"
  496. rel="tag">#équipe</a>
  497. <a href="/david/2024/protopie/"
  498. title="Liste de tous les articles 2024 associés à cette étiquette"
  499. rel="tag">#protopie</a>
  500. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  501. </p>
  502. </nav>
  503. <h2>
  504. <a href="/david/2024/03/06/" title="Lien permanent vers cet article">Vannerie</a> <time datetime="2024-03-06">6 mars 2024</time>
  505. </h2>
  506. <p>L’atelier du jour était une initiation à la vannerie, cette fois-ci avec / pour l’enfant. Depuis le temps qu’il veut m’accompagner, j’ai sauté sur l’occasion lorsqu’une animatrice d’atelier — ancienne enseignante, ça doit jouer&nbsp;— acceptât les personnes de son&nbsp;âge.</p>
  507. <figure>
  508. <a href="/static/david/2024/2024-03-06-vannerie-panier.jpg"
  509. title="Cliquer pour une version haute résolution">
  510. <img
  511. src="/static/david/2024/2024-03-06-vannerie-panier.jpg"
  512. width="4032" height="3024"
  513. srcset="/static/david/2024/2024-03-06-vannerie-panier.jpg 4032w, /static/david/2024/2024-03-06-vannerie-panier_660x440.jpg 660w, /static/david/2024/2024-03-06-vannerie-panier_990x660.jpg 990w, /static/david/2024/2024-03-06-vannerie-panier_1320x880.jpg 1320w"
  514. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  515. loading="lazy"
  516. decoding="async"
  517. alt="Un panier en vannerie.">
  518. </a>
  519. <figcaption>Un panier en vannerie, ça m’a pris&nbsp;2h30.</figcaption>
  520. </figure>
  521. <p>Le <em>twist</em>, c’est que j’ai pu le faire aussi vu que nous étions les seuls présents pour la session au final. Autant dire qu’avec un cours particulier on a pu apprendre encore plus de choses&#8239;! Sur un spectre allant des techniques d’assouplissement à l’appropriation culturelle, on a passé un bon moment d’échanges. J’ai appris que la préparation du frêne noir utilisé dans la vannerie par les Premières Nations prend plusieurs mois, ce qui explique sa rareté (et son&nbsp;prix).</p>
  522. <figure>
  523. <a href="/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg"
  524. title="Cliquer pour une version haute résolution">
  525. <img
  526. src="/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg"
  527. width="3024" height="4032"
  528. srcset="/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg 3024w, /static/david/2024/2024-03-06-vannerie-sac-a-dos_660x440.jpg 660w, /static/david/2024/2024-03-06-vannerie-sac-a-dos_990x660.jpg 990w, /static/david/2024/2024-03-06-vannerie-sac-a-dos_1320x880.jpg 1320w"
  529. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  530. loading="lazy"
  531. decoding="async"
  532. alt="Un sac à dos en vannerie.">
  533. </a>
  534. <figcaption>Un sac à dos en vannerie sur le dos de&nbsp;l’enfant.</figcaption>
  535. </figure>
  536. <p>Toujours cette sensation de créer des objets utiles à partir de pas grand chose et avec un minimum de&nbsp;matériel.</p>
  537. <a href="#hr-100" title="Lien vers cette section de la page"><hr id="hr-100" /></a>
  538. <blockquote lang="en">
  539. <p>Like Stimulus, but <em>a lot</em> smaller and a bit more&nbsp;webcomponenty?</p>
  540. <p><cite><em><a data-link-domain="github.com" href="https://github.com/johanhalse/musculus">Musculus</a></em></cite></p>
  541. </blockquote>
  542. <p>Découverte du jour que je trouve très inspirante. J’avais dans un coin de tête de tester des choses dans cette voie. Réussir à faire le pont entre les deux serait une très bonne combinaison. J’apprécie qu’une solution de test soit proposée, même si elle est légère (en terme de fiabilité) j’en peux plus d’attendre&nbsp;Playwright.</p>
  543. <a href="#hr-101" title="Lien vers cette section de la page"><hr id="hr-101" /></a>
  544. <blockquote>
  545. <p>End the battle. Use <code>infinity</code> to get the highest possible <code>z-index</code> and win&nbsp;forever.</p>
  546. <p>[…]</p>
  547. <p>But is <code>infinity</code> really any better than some arbitrarily big value like <code>9999px</code>? Functionally, no. Same end result. But I think <mark>it does help make code more self-documenting,</mark> because <code>infinity</code> conveys intent. It expresses that it’s all about the magnitude, not a specific magic&nbsp;number.</p>
  548. <p><cite><em><a data-link-domain="codersblock.com" href="https://codersblock.com/blog/playing-with-infinity-in-css/" hreflang="en"
  549. title="Consultation de l’article (anglais)">Playing with Infinity in CSS</a>
  550. <a href="/david/cache/2024/1f4e359d100592aee6e46505a40b2a01/" hreflang="en"
  551. data-tippy data-description="CSS has an infinity constant. When I first learned about this, my brain lit up with all kinds of absurd possibilities. Let’s discuss! There might even be some..."
  552. data-source="https://codersblock.com/blog/playing-with-infinity-in-css/"
  553. data-date="2024-03-06"
  554. data-favicon="https://codersblock.com/favicon-32x32.png"
  555. data-domain="codersblock.com"
  556. ><svg xmlns="http://www.w3.org/2000/svg"
  557. width="24" height="24" viewBox="0 0 24 24" fill="none"
  558. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  559. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  560. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  561. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  562. </svg>
  563. <span class="sr-only">[archive]</span></a></em></cite></p>
  564. </blockquote>
  565. <p>Autre découverte du jour. J’aime bien l’idée de pouvoir évacuer certaines valeurs magiques de manière explicite. J’ai la flemme de tester ce qu’un <code>calc(infinity - 1)</code> donnerait sur un <code>z-index</code>&nbsp;🤭.</p>
  566. <nav>
  567. <p>
  568. <a href="/david/2024/apprentissage/"
  569. title="Liste de tous les articles 2024 associés à cette étiquette"
  570. rel="tag">#apprentissage</a>
  571. <a href="/david/2024/parentalite/"
  572. title="Liste de tous les articles 2024 associés à cette étiquette"
  573. rel="tag">#parentalité</a>
  574. <a href="/david/2024/protopie/"
  575. title="Liste de tous les articles 2024 associés à cette étiquette"
  576. rel="tag">#protopie</a>
  577. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  578. </p>
  579. </nav>
  580. <h2>
  581. <a href="/david/2024/02/20/" title="Lien permanent vers cet article">Véhicule</a> <time datetime="2024-02-20">20 février 2024</time>
  582. </h2>
  583. <blockquote>
  584. <p>John Burroughs est d’avis que l’étude expérimentale des animaux en captivité est totalement futile. Leur caractère, leurs habitudes, leur appétit changent complètement lorsqu’ils sont arrachés à leur habitat naturel. Comment pourrions-nous donc envisager les potentialités de la nature humaine alors qu’elle est confinée dans un espace restreint et contrainte quotidiennement à la&nbsp;soumission&#8239;?</p>
  585. <p>Seuls la liberté, l’épanouissement, la chance et, par-dessous tout, la paix et la sérénité peuvent nous renseigner sur les véritables facteurs dominants de la nature humaine et toutes ses merveilleuses&nbsp;possibilités.</p>
  586. <p>L’anarchisme représente donc essentiellement la libération de l’esprit de la domination religieuse&#8239;; la libération du corps du joug de la propriété&#8239;; la libération de l’individu des entraves et des restrictions du gouvernement. L’anarchisme représente un ordre social fondé sur <mark>le regroupement volontaire des individus en vue de produire une véritable richesse sociale</mark>&#8239;; un ordre qui garantira à tout être humain le libre accès à la terre et la pleine jouissance des nécessités de la vie, selon les désirs, les goûts et les inclinations de&nbsp;chacun.</p>
  587. <p><cite><em>Ce que l’anarchisme représente vraiment</em>, Emma Goldman, 1911</cite></p>
  588. </blockquote>
  589. <p>L’exercice Scopyleft du jour était d’imaginer et de partager le véhicule que représente la coopérative pour chacun·e d’entre nous aujourd’hui. J’ai été agréablement surpris que nous proposions tou·tes quelque chose de différent. Les questions n’ont pas besoin d’être très élaborées pour apporter des éclairages personnels sur une même&nbsp;situation.</p>
  590. <a href="#hr-81" title="Lien vers cette section de la page"><hr id="hr-81" /></a>
  591. <blockquote lang="en">
  592. <p>Your AI-free Content Deserves a&nbsp;Badge</p>
  593. <p>Artificial Intelligence (AI) is trained using human-created content. If humans stop producing new content and rely solely on AI, online content across the world may become repetitive and&nbsp;stagnant.</p>
  594. <p>If your content is not AI-generated, add the badge to your work, with&nbsp;pride.</p>
  595. <p><cite><em><a data-link-domain="notbyai.fyi" href="https://notbyai.fyi/">not by&nbsp;AI</a></em></cite></p>
  596. </blockquote>
  597. <p>De <a href="/david/2024/02/19/#hr-80">même qu’hier</a>, je m’interroge beaucoup sur le notion de plagIAt. Je copie-colle des citations, j’explore des idées déjà connues, je crée un <em>patchwork</em> quotidien, quelle différence avec un algorithme suffisamment bien&nbsp;nourri&#8239;?</p>
  598. <a href="#hr-82" title="Lien vers cette section de la page"><hr id="hr-82" /></a>
  599. <blockquote>
  600. <p>Depuis plus de dix ans, l’Ouvre-Boîtes a mis en place les prêts Coopitalistes. Le principe est simple&nbsp;: des citoyennes et citoyens ou associations investissent de l’argent à l’Ouvre-Boîtes pour sept&nbsp;ans.</p>
  601. <p>En captant cette épargne solidaire, <mark>la coopérative se créée une banque interne</mark> qui finance des projets&nbsp;comme&nbsp;:</p>
  602. <ul>
  603. <li>Des projets collectifs&nbsp;: travaux pour aménager un lieu à disposition des entrepreneur·es (le Grand&nbsp;Bain),</li>
  604. <li>Des investissements pour des entrepreneur·es qui en ont besoin pour lancer leur activité&nbsp;: vélos, voiture, appareil photos, ordinateurs, outils de&nbsp;jardinage…</li>
  605. <li>Des besoins exceptionnels de&nbsp;trésorerie</li>
  606. </ul>
  607. <p><cite><em><a data-link-domain="ouvre-boites.coop" href="https://www.ouvre-boites.coop/les-coopitalistes" hreflang="fr"
  608. title="Consultation de l’article">Les Coopitalistes</a>
  609. <a href="/david/cache/2024/865257313ae3d6aca13284128d6523d5/" hreflang="fr"
  610. data-tippy data-description="Depuis plus de dix ans, l’Ouvre-Boîtes a mis en place les prêts Coopitalistes."
  611. data-source="https://www.ouvre-boites.coop/les-coopitalistes"
  612. data-date="2024-02-20"
  613. data-favicon="https://www.ouvre-boites.coop/themes/custom/front/favicon.ico"
  614. data-domain="ouvre-boites.coop"
  615. ><svg xmlns="http://www.w3.org/2000/svg"
  616. width="24" height="24" viewBox="0 0 24 24" fill="none"
  617. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  618. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  619. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  620. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  621. </svg>
  622. <span class="sr-only">[archive]</span></a></em></cite></p>
  623. </blockquote>
  624. <p>Les alternatives existent, elles sont moins faciles à trouver mais elles existent. Et elles&nbsp;inspirent.</p>
  625. <nav>
  626. <p>
  627. <a href="/david/2024/echanges/"
  628. title="Liste de tous les articles 2024 associés à cette étiquette"
  629. rel="tag">#échanges</a>
  630. <a href="/david/2024/laboratoire/"
  631. title="Liste de tous les articles 2024 associés à cette étiquette"
  632. rel="tag">#laboratoire</a>
  633. <a href="/david/2024/protopie/"
  634. title="Liste de tous les articles 2024 associés à cette étiquette"
  635. rel="tag">#protopie</a>
  636. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  637. </p>
  638. </nav>
  639. <h2>
  640. <a href="/david/2024/02/13/" title="Lien permanent vers cet article">Feutrage</a> <time datetime="2024-02-13">13 février 2024</time>
  641. </h2>
  642. <p>Atelier du soir avec <a data-link-domain="wiseoakwilderness.com" href="https://wiseoakwilderness.com/">Jesse</a> que je connaissais pour ses autres activités et c’était une surprise de retomber sur lui&#8239;! C’est une bonne personne&nbsp;😊. Le problème des <a data-link-domain="les-affutes.ca" href="https://www.les-affutes.ca/">Affûtés</a> c’est qu’iels arrivent un peu trop bien à me <a href="/david/2024/01/21/" title="Bois">cibler</a>&#8239;!</p>
  643. <p>L’objectif était de faire une paire de mitaines à partir de laine brute, c’est une approche qui m’intéresse beaucoup car je n’arrive pas à accrocher au tricotage et j’ai pourtant de gros besoins à ce sujet (je ne taris pas d’éloge au sujet de <a data-link-domain="nature.larlet.fr" href="https://nature.larlet.fr/habillage/#laine">cette matière</a> par ailleurs, je ne vais pas me répéter ici). Je n’avais aucune idée de cette technique&nbsp;auparavant.</p>
  644. <figure>
  645. <a href="/static/david/2024/2024-02-13-laine-brute.jpg"
  646. title="Cliquer pour une version haute résolution">
  647. <img
  648. src="/static/david/2024/2024-02-13-laine-brute.jpg"
  649. width="2464" height="3285"
  650. srcset="/static/david/2024/2024-02-13-laine-brute.jpg 2464w, /static/david/2024/2024-02-13-laine-brute_660x440.jpg 660w, /static/david/2024/2024-02-13-laine-brute_990x660.jpg 990w, /static/david/2024/2024-02-13-laine-brute_1320x880.jpg 1320w"
  651. sizes="min(100vw, calc(100vh * 2464 / 3285))"
  652. loading="lazy"
  653. decoding="async"
  654. alt="De la laine relativement brute.">
  655. </a>
  656. <figcaption>De la laine relativement&nbsp;brute.</figcaption>
  657. </figure>
  658. <p>La laine provenait de la <a data-link-domain="etsy.com" href="https://www.etsy.com/ca/market/bure_bure">boutique BureBure</a> sur Etsy, ce qui a l’avantage de pouvoir s’en procurer facilement de manière indépendante. Pour une option plus locale, certaines évoquaient <a data-link-domain="lavieenalpaga.com" href="https://www.lavieenalpaga.com/">La Vie en Alpaga</a> mais c’est une laine plus fine qu’il vaut mieux couper d’après Jesse pour qu’elle arrive à feutrer plus facilement. J’ai appris qu’une bonne partie de la laine qui serait utilisable au Québec ne l’est pas faute de rentabilité. À moi de trouver une source&nbsp;locale.</p>
  659. <p>Je vais documenter la méthode car c’est faisable dans sa cuisine sans nécessiter d’outillage particulier et je compte bien continuer cet apprentissage. Cela demande quelques étapes et un petit tour de main, l’atelier était vraiment important pour devenir&nbsp;autonome.</p>
  660. <p>Matériel&nbsp;: un bac étanche, un natte pour faire des <em>maki</em> (véridique), un rectangle de papier bulles, un rectangle en plastique avec des trous (type rideau ou tapis de vaisselle). Le tout dimensionné pour le patron choisi qui peut être découpé dans un sac de course en plastique rigide. Ensuite, il ne faut que de l’eau chaude, du savon et du vinaigre. Autant dire que ce n’est pas le matériel qui coûte&nbsp;cher.</p>
  661. <ol>
  662. <li>On fait un patron ayant une taille d’environ 130% par rapport au résultat attendu, le principe est que la laine va s’agréger et donc réduire sa taille de manière significative lors du&nbsp;processus.</li>
  663. <li>On pose le patron dans le bac, sur la natte + papier&nbsp;bulles.</li>
  664. <li>On ajoute trois couches de laine en commençant par la fibre à l’horizontale puis en croisant les fibres, on fait en sorte que ça dépasse pour pouvoir faire la jonction avec la face arrière du&nbsp;patron.</li>
  665. <li>On recouvre avec le tapis en plastique puis on arrose d’eau très chaude et de&nbsp;savon.</li>
  666. <li>On masse avec tendresse pour ne pas faire de trous au début, c’est cette action qui va relier les différents filaments de laine progressivement (c’est le feutrage à proprement&nbsp;parler).</li>
  667. <li>On retourne et on replie l’excédent sur les bords du patron avant d’ajouter nos trois couches de laine sur cette nouvelle&nbsp;face.</li>
  668. <li>Arrivé à cette étape, on a notre structure et on n’ajoutera plus de laine (à part souci). La simplicité du processus est&nbsp;incroyable.</li>
  669. <li>On fait bien le détourage du pouce dans le cas d’une mitaine. Ne pas oublier de replier le bord en bas, il faut laisser un trou pour le passage de la&nbsp;main&#8239;!</li>
  670. <li>On continue de masser recto-verso un très grand nombre de fois en ajoutant de l’eau chaude et du savon (le foulage) jusqu’à ce que ça tienne bien et que l’on puisse extraire le&nbsp;patron.</li>
  671. <li>On peut maintenant rouler nos <em>maki</em>&#8239;! Cela permet de masser le rouleau et d’avoir d’autres angles pour les fibres. Il faut aussi se concentrer sur les bords pour arrondir les angles et commencer à former la&nbsp;mitaine.</li>
  672. <li>Au bout d’un moment —&nbsp;ces premières étapes ont pris une bonne heure&nbsp;— on passe à la deuxième mitaine, retour à l’étape&nbsp;2…</li>
  673. <li>Avec les deux mitaines en main, on peut les feutrer/fouler réciproquement en se frottant les mains toujours en ajoutant du savon et de l’eau brulante (c’est un atelier vraiment propre) pendant là aussi de longues minutes, l’objectif est d’arriver à approcher de la taille finale désirée. On frotte dans le sens où on veut réduire la taille, par exemple en horizontal sur l’ouverture pour&nbsp;resserrer.</li>
  674. <li>On termine en rinçant abondamment le savon et en plongeant la pièce dans une solution vinaigrée pour changer le pH, ce qui fixe le tout et adouci la&nbsp;laine.</li>
  675. <li>(Optionnel) Il est possible de réduire encore <em>a posteriori</em> en remouillant avec du savon MAIS il n’est pas possible de revenir en arrière donc il vaut mieux s’arrêter trop tôt plutôt que trop tard, d’autant que ça rétrécit au&nbsp;séchage.</li>
  676. </ol>
  677. <p>Il y a très peu de pertes dans le processus même si ça prend beaucoup de savon. Le gros intérêt de la technique, c’est que la pièce est vraiment adaptée au support sur laquelle on la feutre+foule (ici mes mains). Il est possible de couper le surplus en bas pour égaliser mais je préfère que ça remonte plus haut sur l’avant-bras. Le résultat est un peu rigide car j’ai privilégié la chaleur (et les erreurs de débutant) mais il est possible de mettre moins de laine. J’arrive néanmoins à tenir un bâton de ski sans&nbsp;forcer.</p>
  678. <figure>
  679. <a href="/static/david/2024/2024-02-13-mitaines-feutrage.jpg"
  680. title="Cliquer pour une version haute résolution">
  681. <img
  682. src="/static/david/2024/2024-02-13-mitaines-feutrage.jpg"
  683. width="3024" height="4032"
  684. srcset="/static/david/2024/2024-02-13-mitaines-feutrage.jpg 3024w, /static/david/2024/2024-02-13-mitaines-feutrage_660x440.jpg 660w, /static/david/2024/2024-02-13-mitaines-feutrage_990x660.jpg 990w, /static/david/2024/2024-02-13-mitaines-feutrage_1320x880.jpg 1320w"
  685. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  686. loading="lazy"
  687. decoding="async"
  688. alt="Les mitaines réalisées qui sèchent verticalement.">
  689. </a>
  690. <figcaption>Le résultat après 4 heures de travail et pas mal d’huile de&nbsp;coude.</figcaption>
  691. </figure>
  692. <p>Anecdote&nbsp;: j’étais le plus jeune et le seul homme, c’était intéressant d’être au sein de cette <em>sororité des aînées</em>, il ne manquait qu’une cheminée pour avoir une soirée d’anecdotes québécoises au coin du&nbsp;feu&nbsp;🤗.</p>
  693. <p>Au retour, après avoir essoré les mitaines pour qu’elles ne gouttent pas trop, j’ai pu les mettre pour qu’elles affrontent leur première tempête de neige improvisée. Même mouillées et dégoulinantes, j’arrivais à garder mes mains au chaud à l’intérieur… ah, la laine&nbsp;&lt;3. J’ai hâte de tester avec avec une sous-couche et/ou une sur-couche, ça tombe bien car les températures redescendent&nbsp;enfin.</p>
  694. <nav>
  695. <p>
  696. <a href="/david/2024/apprentissage/"
  697. title="Liste de tous les articles 2024 associés à cette étiquette"
  698. rel="tag">#apprentissage</a>
  699. <a href="/david/2024/processus/"
  700. title="Liste de tous les articles 2024 associés à cette étiquette"
  701. rel="tag">#processus</a>
  702. <a href="/david/2024/protopie/"
  703. title="Liste de tous les articles 2024 associés à cette étiquette"
  704. rel="tag">#protopie</a>
  705. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  706. </p>
  707. </nav>
  708. <h2>
  709. <a href="/david/2024/02/02/" title="Lien permanent vers cet article">Valeurs</a> <time datetime="2024-02-02">2 février 2024</time>
  710. </h2>
  711. <blockquote>
  712. <p><em>Performatif</em>, c’est ce qu’on dit d’un verbe dont l’énonciation constitue simultanément l’action qu’il exprime. Par exemple <em>Je promets</em>, <em>Je m’excuse</em> ou <em>La séance est ouverte</em>&nbsp;: le dire, c’est le faire. Dans le champ de l’action, prendre le tournant du registre <em>performatif</em> revient à acter le caractère de plus en plus inopérant du plaidoyer et de l’action revendicative, face à des pouvoirs et lobbies désespérément hermétiques à la nécessité de changement. L’action performative n’a pas besoin de faire la une ni de se soucier des sirènes médiatiques&nbsp;: <mark>elle est sa propre fin.</mark> Sont performatives des actions qui ont un impact immédiat et direct sur le réel, qui ne visent pas à pousser une revendication ou à peser sur une autorité&nbsp;: dont l’effet est contenu dans leur propre réalisation. […]</p>
  713. <p>Pour toutes ces raisons, j’accorde beaucoup d’intérêt à l’émergence de mouvements autonomes, organiques et composites, qui ne confondent pas radicalité et radicalisme, polémique et action politique. Des collectifs qui n’opposent pas le cerveau et les mains, la lutte et la gentillesse, la théorie et la pratique. Qui, par leur nature indisciplinée, et affranchis des enjeux des élections, peuvent échapper aux carcans des institutions. Des réseaux qui ont appris à se satisfaire de la multiplicité des tactiques et des cultures politiques, à archipéliser les îlots qui tentent de s’organiser différemment, en dehors du système, et qui allient dans un même mouvement justice sociale, combat écologique et défense du&nbsp;vivant.</p>
  714. <p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
  715. </blockquote>
  716. <p><em>Prise de notes brutes pendant une séance avec <a data-link-domain="scopyleft.fr" href="http://scopyleft.fr/">Scopyleft</a> accompagnée par <a data-link-domain="acumeo.fr" href="https://www.acumeo.fr/">Olivier Arnould</a>. Nous avions préalablement communiqué nos valeurs personnelles, les valeurs de la culture actuelle et les valeurs de la culture&nbsp;désirée.</em></p>
  717. <p>La culture c’est un système immunitaire, c’est ce qui est souhaité des membres pour garantir la stabilité du système. La culture dans son intention est positive, elle est là pour protéger le système. Le seul moyen de faire évoluer une culture de manière intentionnelle c’est par des actes rituels mais c’est un système qui a une grande inertie. Tout le reste est de la&nbsp;propagande.</p>
  718. <p>Il y a un lien de causalité entre valeurs choisies, croyances que l’on a et comportements que l’on&nbsp;adopte.</p>
  719. <figure>
  720. <a href="/static/david/2024/2024-02-02-les-sept-niveaux-de-conscience-de-r-barrett.png"
  721. title="Cliquer pour une version haute résolution">
  722. <img
  723. src="/static/david/2024/2024-02-02-les-sept-niveaux-de-conscience-de-r-barrett.png"
  724. width="2672" height="2000"
  725. srcset="/static/david/2024/2024-02-02-les-sept-niveaux-de-conscience-de-r-barrett.png 2672w, /static/david/2024/2024-02-02-les-sept-niveaux-de-conscience-de-r-barrett.png 660w, /static/david/2024/2024-02-02-les-sept-niveaux-de-conscience-de-r-barrett.png 990w, /static/david/2024/2024-02-02-les-sept-niveaux-de-conscience-de-r-barrett.png 1320w"
  726. sizes="min(100vw, calc(100vh * 2672 / 2000))"
  727. loading="lazy"
  728. decoding="async"
  729. alt="Le sablier des Sept niveaux de conscience définis par Richard Barrett.">
  730. </a>
  731. <figcaption>Le sablier des Sept niveaux de conscience définis par Richard&nbsp;Barrett.</figcaption>
  732. </figure>
  733. <p>On explore les <em>Sept niveaux de conscience</em> des CTT (<em>Cultural Transformation Tools</em>) de Richard Barrett. Les valeurs appartiennent à de grands domaines. Une organisation fonctionne bien lorsque l’ensemble des domaines sont couverts. Pas de domaine plus important qu’un autre, malgré la représentation en sablier (qui montre un point de pivot intéressant&nbsp;néanmoins)&nbsp;:</p>
  734. <ol>
  735. <li>Survie&nbsp;: les basiques de la pyramide de Maslow, si la boîte meurt ça ne sert plus à rien de parler&nbsp;culture.</li>
  736. <li>Relations&nbsp;: communication entre individus qui soit efficace (pas de notion d’équipe à ce&nbsp;stade)</li>
  737. <li>Estime de Soi&nbsp;: c’est un peu l’archétype masculin (croissance, performance, qualité, etc)</li>
  738. <li>Transformation&nbsp;: se questionner, changer ses&nbsp;habitudes</li>
  739. <li>Cohésion Interne&nbsp;: le collectif fonctionne bien, partage des valeurs et des engagements (faire équipe, potentiellement avec le&nbsp;client)</li>
  740. <li>Faire la Différence&nbsp;: avoir un impact significatif sur l’extérieur, qui déborde de&nbsp;l’organisation</li>
  741. <li>Service&nbsp;: responsabilité sociétale, vision à long terme d’avoir un impact positif sur la société et la&nbsp;planète</li>
  742. </ol>
  743. <p>On peut les&nbsp;grouper&nbsp;:</p>
  744. <ul>
  745. <li>1 + 2 + 3&nbsp;: socle d’oxygène positif pour pouvoir&nbsp;avancer</li>
  746. <li>4&nbsp;: se remettre en question pour pouvoir&nbsp;évoluer</li>
  747. <li>5 + 6 + 7&nbsp;: dimension collective de cette&nbsp;évolution</li>
  748. </ul>
  749. <p>Une valeur majoritaire se trouve à la fois dans les valeurs personnelles et les valeurs de la culture&nbsp;actuelle&nbsp;:</p>
  750. <ul>
  751. <li>écoute</li>
  752. </ul>
  753. <p>Trois valeurs majoritaires sont à la fois dans les valeurs de la culture actuelle et celles de la culture&nbsp;désirée&nbsp;:</p>
  754. <ul>
  755. <li>agilité</li>
  756. <li>attention, bienveillance, prendre&nbsp;soin</li>
  757. <li>coopération</li>
  758. </ul>
  759. <p>C’est un alignement déjà très élevé et il n’y a pas de valeurs qui freinent l’entreprise (baronnie, etc).</p>
  760. <p>Ce qui apparait dans les nouvelles valeurs majoritaires de la culture&nbsp;désirée&nbsp;:</p>
  761. <ul>
  762. <li>amélioration&nbsp;continue</li>
  763. <li>développement durable, pérennité</li>
  764. <li>initiative, prendre des&nbsp;initiatives</li>
  765. <li>responsabilité&nbsp;sociétale</li>
  766. <li>vision&nbsp;partagée</li>
  767. </ul>
  768. <p>Nous sommes globalement sur la même longueur d’onde. Il y a parfois des valeurs-antidotes qui apparaissent dans la culture désirée, ce qu’on voit peu dans nos&nbsp;résultats.</p>
  769. <p>Ce genre d’exercice n’est qu’un prétexte à enclencher des&nbsp;échanges&nbsp;:</p>
  770. <ul>
  771. <li>Il n’y a pas grand chose autour de 1 (Survie / solidité financière) et 3 (Estime de Soi / performance). Est-ce que c’est OK pour&nbsp;nous&#8239;?</li>
  772. <li>Quels comportements adopter pour avoir la sensation de répondre à ces valeurs&nbsp;désirées&#8239;?</li>
  773. </ul>
  774. <p>Prendre l’initiative c’est créer une perturbation dans le système par <em>une partie</em> du groupe, se démarquer. La vision partagée fait appel par contre au collectif. Il s’agit de construire un système ensemble qui autorise à faire des choses dans le cadre de cette vision partagée. Il serait pertinent d’éclairer la tensions entre initiatives locales et impact global (coucou <del>René Dubos</del>&nbsp;<a href="/david/stream/2015/11/22/">Jacques Ellul</a>). On a le véhicule, il faut choisir où il va maintenant grâce à un cadre collectivement&nbsp;consenti.</p>
  775. <p>Pour progresser, on pourrait travailler sur des prises de décisions concrètes, engageantes. Il faut accepter / souhaiter que ça va déstabiliser le système (immunitaire). Hop, retour à&nbsp;l’intro.</p>
  776. <p>Note&nbsp;: l’Holacracy est un bon business pour les consultant·es, la Sociocratie ouvre d’autres possibilités au sujet du consentement. Voir aussi <em><a data-link-domain="iapop.com" href="https://iapop.com/deep-democracy/" hreflang="en"
  777. title="Consultation de l’article (anglais)">Deep Democracy</a>
  778. <a href="/david/cache/2024/1d60fc5548a6fe61da80a4e16892fa0c/" hreflang="en"
  779. data-tippy data-description="Definition of Deep Democracy The concept of Deep Democracy was developed by Arnold Mindell. It is defined as an attitude and a principle. Attitude: Deep Democracy is an attitude that […]"
  780. data-source="https://iapop.com/deep-democracy/"
  781. data-date="2024-01-31"
  782. data-favicon="https://iapop.com/wp-content/uploads/2018/03/iapop_world_icon-blue-150px-tiny.png"
  783. data-domain="iapop.com"
  784. ><svg xmlns="http://www.w3.org/2000/svg"
  785. width="24" height="24" viewBox="0 0 24 24" fill="none"
  786. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  787. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  788. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  789. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  790. </svg>
  791. <span class="sr-only">[archive]</span></a></em> et <em>Inside The NO: Five Steps to Decisions That Last</em> par Myrna&nbsp;Lewis.</p>
  792. <blockquote>
  793. <p>Et puis il faudra parfois redescendre sur terre et revenir à soi pour se sentir fier de ses actes et de ses choix. Bien sûr, il ne s’agit pas de remplacer une injonction par une autre, et on a parfaitement le droit de trouver qu’il n’y a rien à sauver dans la médiocrité ambiante, d’envoyer au diable l’espoir, la joie et la résilience et, simplement, comme je l’ai lu quelque part, «&nbsp;d’en chier sans avoir à en faire une&nbsp;danse&nbsp;».</p>
  794. <p>Mais ça ne fait pas une vie. <mark>Nous avons besoin, chacune et chacun à sa manière, de ces confins où la disgrâce du monde ne peut plus nous engloutir.</mark> De lieux où se retirer en silence, d’espaces où il est possible de rêver plus loin, de terriers où s’inventer d’autres réalités, de livres qui évadent ou élèvent la pensée, et de poches bien profondes où enfoncer les mains. Autant d’<em>ailleurs</em> intimes ou collectifs, réels ou fictifs, de confins qui peuvent être proches comme lointains car il n’est pas nécessaire de se déplacer pour changer de perspective&nbsp;: c’est un bougé en&nbsp;soi.</p>
  795. <p><cite><em>Ibid.</em></cite></p>
  796. </blockquote>
  797. <a href="#hr-61" title="Lien vers cette section de la page"><hr id="hr-61" /></a>
  798. <blockquote>
  799. <p>Après 13&nbsp;éditions d’un événement qui a beaucoup (beaucoup) grandi, ​nous ressentons le besoin d’expérimenter quelque chose d’un peu ​différent en&nbsp;2024.</p>
  800. <p>Nous souhaitons donc vous proposer un festival éphémère à taille (un ​peu plus) humaine, un temps suspendu où imaginaire positif et ​pragmatisme se rejoignent pour façonner un futur soutenable. ​Quelles pratiques dans nos métiers, comment voulons nous ​entreprendre, travailler, communiquer, quelle industrie voulons nous ​pour&nbsp;demain&#8239;?</p>
  801. <p><cite><em><a data-link-domain="etdemain.co" href="https://etdemain.co/#note-d-intention">Et demain&#8239;? (note&nbsp;d’intention)</a></em></cite></p>
  802. </blockquote>
  803. <p>Des évolutions locales sont en cours ici et ailleurs, c’est&nbsp;stimulant.</p>
  804. <nav>
  805. <p>
  806. <a href="/david/2024/equipe/"
  807. title="Liste de tous les articles 2024 associés à cette étiquette"
  808. rel="tag">#équipe</a>
  809. <a href="/david/2024/processus/"
  810. title="Liste de tous les articles 2024 associés à cette étiquette"
  811. rel="tag">#processus</a>
  812. <a href="/david/2024/protopie/"
  813. title="Liste de tous les articles 2024 associés à cette étiquette"
  814. rel="tag">#protopie</a>
  815. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  816. </p>
  817. </nav>
  818. <h2>
  819. <a href="/david/2024/01/21/" title="Lien permanent vers cet article">Bois</a> <time datetime="2024-01-21">21 janvier 2024</time>
  820. </h2>
  821. <p>La dissonance cognitive du jour&nbsp;: faire un atelier de tour à bois et lire dans la foulée <em>La vie secrète des arbre</em> de Peter Wohlleben brillamment mise en version BD par Fred Bernard et Benjamin&nbsp;Flao.</p>
  822. <figure>
  823. <a href="/static/david/2024/2024-01-20-tour-a-bois.jpg"
  824. title="Cliquer pour une version haute résolution">
  825. <img
  826. src="/static/david/2024/2024-01-20-tour-a-bois.jpg"
  827. width="3024" height="4032"
  828. srcset="/static/david/2024/2024-01-20-tour-a-bois.jpg 3024w, /static/david/2024/2024-01-20-tour-a-bois_660x440.jpg 660w, /static/david/2024/2024-01-20-tour-a-bois_990x660.jpg 990w, /static/david/2024/2024-01-20-tour-a-bois_1320x880.jpg 1320w"
  829. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  830. loading="lazy"
  831. decoding="async"
  832. alt="Une assiette, un bol et une cuillère en bois à côté du livre cité avec des plantes en fond.">
  833. </a>
  834. <figcaption>6 heures de travail non-stop pour faire cette assiette et ce&nbsp;bol.</figcaption>
  835. </figure>
  836. <blockquote>
  837. <p>Lorsque je marche en foret, je sens que je fais partie intégrante du vivant. Je suis, nous sommes naturellement, unis au minéral, aux bactéries, aux virus, aux champignons aux plantes, aux chenilles, aux papillons, à tous les&nbsp;animaux.</p>
  838. <p>Nous sommes tous reliés et <mark>ne faisons que passer sur cette mince pellicule de vie</mark> qui couvre miraculeusement la terre. Tout le vivant est constitue des mêmes atomes présents sur notre planète depuis sa&nbsp;création.</p>
  839. <p>Je porte en moi des particules qui ont constitue des arbres du crétacé, des légionnaires romains, des plants de tomates rapportés d’Amérique par les conquistadors… rien ne se crée, tout se transforme, dit-on. Rien n’est plus&nbsp;vrai.</p>
  840. </blockquote>
  841. <figure>
  842. <a href="/static/david/2024/2024-01-20-vie-secrete-arbres.jpg"
  843. title="Cliquer pour une version haute résolution">
  844. <img
  845. src="/static/david/2024/2024-01-20-vie-secrete-arbres.jpg"
  846. width="3024" height="4032"
  847. srcset="/static/david/2024/2024-01-20-vie-secrete-arbres.jpg 3024w, /static/david/2024/2024-01-20-vie-secrete-arbres_660x440.jpg 660w, /static/david/2024/2024-01-20-vie-secrete-arbres_990x660.jpg 990w, /static/david/2024/2024-01-20-vie-secrete-arbres_1320x880.jpg 1320w"
  848. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  849. loading="lazy"
  850. decoding="async"
  851. alt="Extrait du livre «&nbsp;La vie secrète des arbres&nbsp;» dont est issue la citation ci-dessus.">
  852. </a>
  853. <figcaption>J’aime beaucoup des livres transformés en BD, je trouve que l’image leur donne une autre&nbsp;dimension.</figcaption>
  854. </figure>
  855. <p>D’autant plus motivé pour trouver un bout de forêt à préserver —&nbsp;des chasseurs, de l’exploitation, de la pollution, etc.&nbsp;— dans le coin. Un de mes objectifs&nbsp;2024.</p>
  856. <nav>
  857. <p>
  858. <a href="/david/2024/apprentissage/"
  859. title="Liste de tous les articles 2024 associés à cette étiquette"
  860. rel="tag">#apprentissage</a>
  861. <a href="/david/2024/foret/"
  862. title="Liste de tous les articles 2024 associés à cette étiquette"
  863. rel="tag">#forêt</a>
  864. <a href="/david/2024/protopie/"
  865. title="Liste de tous les articles 2024 associés à cette étiquette"
  866. rel="tag">#protopie</a>
  867. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  868. </p>
  869. </nav>
  870. <h2>
  871. <a href="/david/2024/01/14/" title="Lien permanent vers cet article">Fiction</a> <time datetime="2024-01-14">14 janvier 2024</time>
  872. </h2>
  873. <blockquote>
  874. <p>Ces <em>moments perspectivistes</em>, qu’ils soient activés par un voyage ou par une lecture, sont déroutants mais ils sont salutaires. Ils développent la capacité à comprendre d’autres points de vue que le sien ou, du moins, faute de comprendre, à toucher du doigt la multiplicité des rapports au monde et à accepter la relativité de nos perceptions. Le réel n’est pas un. Et on ne perd jamais en humanité à se mettre dans la peau de&nbsp;l’autre.</p>
  875. <p><mark>La fiction peut nous y aider, c’est le lieu par excellence de tous les possibles; saisissons-nous-en comme d’un terrain d’expérimentation.</mark> Tout n’a pas été écrit&nbsp;: tant que de l’inédit surgit, il reste de la place pour la création. Les mutations du monde nous obligent à repenser le fond comme la forme de nos récits. Il y a des sujets à traiter qui ne l’ont pas été par le passé, des questions qu’on ne s’était jamais posées, de nouveaux enjeux dont il faut s’emparer. Il y a des arcs littéraires à inventer qui ne suivent pas les schémas narratifs classiques et s’affranchissent du syndrome de la grande quête. On doit pouvoir brûler les étapes sans attendre le dénouement. On doit pouvoir brouiller les&nbsp;frontières.</p>
  876. <p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
  877. </blockquote>
  878. <p><a href="/david/2024/01/13/" title="Wuwei">Suite</a> de mes lectures et de mes aspirations à écrire —&nbsp;et donc transmettre&nbsp;— différemment. Une autre forme de travail des idées consistant à décrire un à-venir enviable qu’il reste à construire, en commun, avec l’espoir que <q lang="fr">la fiction déplace la réalité</q>.</p>
  879. <p>De <a href="/david/2024/01/09/" title="Blessure">l’immobilisation</a> nait la&nbsp;créativité&#8239;?</p>
  880. <blockquote>
  881. <p>Je crois de plus en plus que nous devons nous entraîner à <em>habiter le trouble</em> comme l’a formulé Donna Haraway, c’est-à-dire à tenir «&nbsp;pour acquis que les modes d’ordre établis se sont effondrés ou sont en voie d’effondrement, et qu’il devient à la fois urgent et possible d’envisager autre chose&nbsp;». Vivre dans un monde en train de disparaître sans savoir ce qui va émerger n’est pas simple, mais <mark>il ne tient qu’à nous de nous ouvrir à d’autres géographies,</mark> d’autres cultures, à toucher aux confins civilisationnels pour imaginer «&nbsp;des façons plus florissantes, plus robustes, moins meurtrières de vivre les uns avec les autres&nbsp;», ailleurs, quand notre propre réalité nous fait&nbsp;défaut.</p>
  882. <p><cite><em>Ibid.</em></cite></p>
  883. </blockquote>
  884. <a href="#hr-30" title="Lien vers cette section de la page"><hr id="hr-30" /></a>
  885. <p>Je prends le temps de décliner le nouveau style pour les pages d’étiquettes 2024. Il va rester la page d’accueil, la plus difficile. Elle comporte actuellement&nbsp;270&nbsp;liens.</p>
  886. <p>Quelle éditorialisation proposer pour éviter la surcharge tout en facilitant l’exploration&#8239;? Offrir une boussole sans proposer de&nbsp;cap.</p>
  887. <blockquote lang="en">
  888. <p>When the right approach reveals itself, it feels obvious. <mark>But only in retrospect.</mark> <strong>Design is only obvious in retrospect.</strong> It takes iteration and discipline to get there. But when you do get there, it’s much easier to explain your design decisions to others. You know why the design is the right one and can frame your rationale in the context of the problem you are trying to&nbsp;solve.</p>
  889. <p><cite><em><a data-link-domain="lukew.com" href="https://lukew.com/ff/entry.asp?2036" hreflang="en"
  890. title="Consultation de l’article (anglais)">Until the Right Design Emerges…</a>
  891. <a href="/david/cache/2024/84f8caf3e7f7b3de9e18281749c3687f/" hreflang="en"
  892. data-tippy data-description="Too often, the process of design is cut short. When faced with user needs or product requirements, many designers draft a mockup or wireframe informed by what they've seen or experienced before"
  893. data-source="https://lukew.com/ff/entry.asp?2036"
  894. data-date="2024-01-13"
  895. data-favicon="https://static.lukew.com/lukew.ico"
  896. data-domain="lukew.com"
  897. ><svg xmlns="http://www.w3.org/2000/svg"
  898. width="24" height="24" viewBox="0 0 24 24" fill="none"
  899. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  900. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  901. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  902. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  903. </svg>
  904. <span class="sr-only">[archive]</span></a></em></cite></p>
  905. </blockquote>
  906. <p><a href="/david/2024/01/13/" title="Wuwei">Non</a>, pas <a data-link-domain="lukew.com" href="https://lukew.com/ff/entry.asp?2008" hreflang="en"
  907. title="Consultation de l’article (anglais)">cette direction</a>
  908. <a href="/david/cache/2024/ea2cfc9aa425a6967d2cacd9f96ceb9e/" hreflang="en"
  909. data-tippy data-description="Large language (AI) models allow us to rethink how to build software and design user interfaces. To that end, we made use of these new capabilities to create a different way of interacting with this site"
  910. data-source="https://lukew.com/ff/entry.asp?2008"
  911. data-date="2024-01-13"
  912. data-favicon="https://static.lukew.com/lukew.ico"
  913. data-domain="lukew.com"
  914. ><svg xmlns="http://www.w3.org/2000/svg"
  915. width="24" height="24" viewBox="0 0 24 24" fill="none"
  916. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  917. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  918. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  919. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  920. </svg>
  921. <span class="sr-only">[archive]</span></a> par&nbsp;contre.</p>
  922. <a href="#hr-31" title="Lien vers cette section de la page"><hr id="hr-31" /></a>
  923. <p>Découvertes culinaires du&nbsp;jour&nbsp;:</p>
  924. <ul>
  925. <li><a data-link-domain="cooked.wiki" href="https://cooked.wiki/">cooked.wiki</a> pour préfixer les recettes&nbsp;(merci <a data-link-domain="mastodon.tetaneutral.net" href="https://mastodon.tetaneutral.net/@newick/111749530608709450">@newick</a>)</li>
  926. <li><a data-link-domain="github.com" href="https://github.com/mealie-recipes/mealie">mealie</a> pour stocker les recettes (merci <a data-link-domain="mamot.fr" href="https://mamot.fr/@aspyrine">@aspyrine</a>)</li>
  927. </ul>
  928. <nav>
  929. <p>
  930. <a href="/david/2024/ecriture/"
  931. title="Liste de tous les articles 2024 associés à cette étiquette"
  932. rel="tag">#écriture</a>
  933. <a href="/david/2024/experience/"
  934. title="Liste de tous les articles 2024 associés à cette étiquette"
  935. rel="tag">#expérience</a>
  936. <a href="/david/2024/protopie/"
  937. title="Liste de tous les articles 2024 associés à cette étiquette"
  938. rel="tag">#protopie</a>
  939. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  940. </p>
  941. </nav>
  942. <h2>
  943. <a href="/david/2024/01/01/" title="Lien permanent vers cet article">Dryear(s)</a> <time datetime="2024-01-01">1 janvier 2024</time>
  944. </h2>
  945. <blockquote>
  946. <p>33&#8239;% de 44&nbsp;millions de consommateurs vont faire le Dry January<br />
  947. 22&#8239;% des consommateurs ont une conso excessive, c’est-à-dire 10&nbsp;verres/semaine max et plus de deux&nbsp;verres/jour.</p>
  948. <p>Les seniors sont aussi très touché·es.<br />
  949. <mark>L’alcool est une drogue.</mark>.
  950. On peut faire la fête sans alcool et&nbsp;s’éclater.</p>
  951. <p>Quand on arrête&nbsp;: bienfaits sur le foie, la peau, le coeur, etc…<br />
  952. Pb&nbsp;: mémoire, troubles cognitifs, responsable de cancer, pb sommeil, décompensation de maladie psy,…<br />
  953. 41000&nbsp;décès par an en&nbsp;France.</p>
  954. <p>Les cinq symptômes définissent un problème de&nbsp;dépendance&nbsp;:</p>
  955. <ul>
  956. <li>Perte de&nbsp;contrôle</li>
  957. <li>Usage&nbsp;compulsif</li>
  958. <li>Envie&nbsp;répressive</li>
  959. <li>Usage&nbsp;chronique</li>
  960. <li>Conséquences psychiques, physiques, sociales,…</li>
  961. </ul>
  962. <p>Bon Dry J. pour celleux qui le font&#8239;! Moi j’en&nbsp;suis&#8239;!</p>
  963. <p><cite><a data-link-domain="framapiaf.org" href="https://framapiaf.org/@Air/111681709094993435">@Air@framapiaf.org</a></cite></p>
  964. </blockquote>
  965. <p>Dans mon entourage, de plus en plus de personnes que j’estime ne boivent pas d’alcool, de plus en plus de personnes qui vieillissent en deviennent dépendantes. Je suis davantage attiré par la première option… et pas pour un seul&nbsp;mois.</p>
  966. <p>Je me sens prêt, on verra bien où cela me&nbsp;mène.</p>
  967. <a href="#hr-1" title="Lien vers cette section de la page"><hr id="hr-1" /></a>
  968. <p>Grosse envie de reprendre la CSS par ici en ce début d’année. Avec le dilemme de faire chuter cette motivation si je publie dès maintenant avec l’ancienne (qui restera effective sur les anciens articles). Je vais essayer de me&nbsp;retenir.</p>
  969. <nav>
  970. <p>
  971. <a href="/david/2024/addiction/"
  972. title="Liste de tous les articles 2024 associés à cette étiquette"
  973. rel="tag">#addiction</a>
  974. <a href="/david/2024/experience/"
  975. title="Liste de tous les articles 2024 associés à cette étiquette"
  976. rel="tag">#expérience</a>
  977. <a href="/david/2024/protopie/"
  978. title="Liste de tous les articles 2024 associés à cette étiquette"
  979. rel="tag">#protopie</a>
  980. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  981. </p>
  982. </nav>
  983. <form action="/david/recherche/" method="get">
  984. <fieldset>
  985. <legend>Recherche</legend>
  986. <label for="input-search">Termes de votre recherche :</label>
  987. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  988. <input type="submit" value="Chercher">
  989. <p id="indexation-infos">
  990. <small>
  991. Seuls les contenus de ces 8 dernières années sont indexés.
  992. </small>
  993. </p>
  994. </fieldset>
  995. </form>
  996. <aside>
  997. <theme-toggle></theme-toggle>
  998. </aside>
  999. </article>
  1000. <hr>
  1001. <footer>
  1002. <p>
  1003. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  1004. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  1005. <a href="http://larlet.com"
  1006. title="Go to my English profile"
  1007. data-instant>Pro</a>
  1008. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  1009. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  1010. </p>
  1011. <template id="theme-selector">
  1012. <form>
  1013. <style type="text/css">
  1014. fieldset div {
  1015. text-align: center;
  1016. }
  1017. </style>
  1018. <fieldset>
  1019. <legend>Thème</legend>
  1020. <div>
  1021. <label>
  1022. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  1023. Auto
  1024. </label>
  1025. <label>
  1026. <input type="radio" value="dark" name="chosen-color-scheme">
  1027. Foncé
  1028. </label>
  1029. <label>
  1030. <input type="radio" value="light" name="chosen-color-scheme">
  1031. Clair
  1032. </label>
  1033. </div>
  1034. </fieldset>
  1035. </form>
  1036. </template>
  1037. </footer>
  1038. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  1039. <script>
  1040. class ThemeToggle extends HTMLElement {
  1041. constructor() {
  1042. super()
  1043. const themeSelectorTemplate = document.querySelector('#theme-selector')
  1044. const form = themeSelectorTemplate.content.firstElementChild
  1045. this.attachShadow({ mode: 'open' })
  1046. this.shadowRoot.appendChild(form.cloneNode(true))
  1047. }
  1048. connectedCallback() {
  1049. const form = this.shadowRoot.querySelector('form')
  1050. form.addEventListener('change', (e) => {
  1051. const chosenColorScheme = e.target.value
  1052. localStorage.setItem('theme', chosenColorScheme)
  1053. toggleTheme(chosenColorScheme)
  1054. })
  1055. const selectedTheme = localStorage.getItem('theme')
  1056. if (selectedTheme && selectedTheme !== 'undefined') {
  1057. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  1058. }
  1059. }
  1060. }
  1061. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  1062. window.addEventListener('load', () => {
  1063. let colorsLayer = undefined
  1064. let hasDarkRules = false
  1065. for (const styleSheet of Array.from(document.styleSheets)) {
  1066. let mediaRules = []
  1067. for (const layerRule of styleSheet.cssRules) {
  1068. if (!(layerRule instanceof CSSLayerBlockRule)) {
  1069. continue
  1070. }
  1071. if (layerRule.name === 'colors') {
  1072. colorsLayer = layerRule
  1073. }
  1074. for (const cssRule of layerRule.cssRules) {
  1075. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  1076. continue
  1077. }
  1078. // WARNING: Safari does not have/supports `conditionText`.
  1079. if (cssRule.conditionText) {
  1080. if (cssRule.conditionText !== prefersColorSchemeDark) {
  1081. continue
  1082. }
  1083. } else {
  1084. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  1085. continue
  1086. }
  1087. }
  1088. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  1089. }
  1090. }
  1091. // WARNING: do not try to insert a Rule to a styleSheet you are
  1092. // currently iterating on, otherwise the browser will be stuck
  1093. // in a infinite loop…
  1094. for (const mediaRule of mediaRules) {
  1095. // Safari requires the `0` second parameter (even if default).
  1096. colorsLayer.insertRule(mediaRule.cssText, 0)
  1097. hasDarkRules = true
  1098. }
  1099. }
  1100. if (hasDarkRules) {
  1101. if ('customElements' in window && !customElements.get('theme-toggle')) {
  1102. customElements.define('theme-toggle', ThemeToggle)
  1103. }
  1104. }
  1105. })
  1106. </script>
  1107. </body>
  1108. </html>