Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

index.html 193KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476
  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 #apprentissage
  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 #apprentissage">
  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. <style type="text/css">
  106. details[open] summary {
  107. display: none;
  108. }
  109. </style>
  110. <body data-instant-intensity="viewport-all">
  111. <article>
  112. <header>
  113. <hgroup>
  114. <h1>#apprentissage</h1>
  115. <p>Publications relatives à cette étiquette</p>
  116. </hgroup>
  117. </header>
  118. <nav>
  119. <p>
  120. <a href="/david/" title="Aller à l’accueil">
  121. Accueil</a>
  122. <a rel="tags"
  123. href="/david/2024/#tags"
  124. title="Liste de toutes les étiquettes">
  125. Étiquettes</a>
  126. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
  127. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  128. </p>
  129. </nav>
  130. <h2>
  131. <a href="/david/2024/05/31/" title="Lien permanent vers cet article">Technocritique</a> <time datetime="2024-05-31">31 mai 2024</time>
  132. </h2>
  133. <blockquote lang="en">
  134. <p>Given the extreme connectivity constraints at the South Pole, I wrote a Python script for publishing to S3 that worked well in the challenging environment. It uses the S3 API to upload assets in small chunks. It detects and resumes failed uploads without losing progress. It waits until everything is safely uploaded before publishing the new&nbsp;version.</p>
  135. <p>If I can do it, unpaid, working alone, for my silly little hobby blog, in 200&nbsp;lines of Python… <mark>surely your team of engineers can do so</mark> for your flagship&nbsp;webapp.</p>
  136. <p><cite><em><a data-link-domain="brr.fyi" href="https://brr.fyi/posts/engineering-for-slow-internet" hreflang="en"
  137. title="Consultation de l’article (anglais)">Engineering for Slow Internet</a>
  138. <a href="/david/cache/2024/9e9c6f97d732010e14201f1624782ddc/" hreflang="en"
  139. data-tippy data-description="How to minimize user frustration in Antarctica."
  140. data-source="https://brr.fyi/posts/engineering-for-slow-internet"
  141. data-date="2024-05-31"
  142. data-favicon="https://brr.fyi/favicon-32x32.png"
  143. data-domain="brr.fyi"
  144. ><svg xmlns="http://www.w3.org/2000/svg"
  145. width="24" height="24" viewBox="0 0 24 24" fill="none"
  146. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  147. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  148. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  149. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  150. </svg>
  151. <span class="sr-only">[archive]</span></a></em></cite></p>
  152. </blockquote>
  153. <p>En ce moment, suite à une mise à jour de l’application SONOS rendant mes enceintes inutilisables (n’achetez jamais cette marque…), je m’amuse à faire une interface web grâce au <a data-link-domain="github.com" href="https://github.com/avantrec/soco-cli/">serveur open-source</a> qui a été développé ces dernières&nbsp;années.</p>
  154. <p>C’est triste d’en arriver là, je ressens fort le pouvoir que me procurent mes capacités de développeur mais je sais aussi que la majorité subit l’emmerdification logicielle (c’était déjà pas terrible avant&#8239;!) sans avoir d’autre&nbsp;option.</p>
  155. <p>Ce n’est pas encore prêt à être utilisable par d’autres mais c’est stimulant d’ajouter des fonctionnalités au fil des besoins locaux. Je réalise à quel point le manque de réactivité de l’app de 175Mo n’est pas liée au <em>hardware</em> vu que j’arrive à avoir quelque chose d’immédiat avec quelques lignes de Python +&nbsp;JS/HTML.</p>
  156. <blockquote lang="en">
  157. <p>The <strong>only way</strong> I was able to get this done was by <strong>turning off the phone entirely</strong>, right before Internet access dropped, and then turning it back on when Internet access resumed at the next satellite pass. This tricked the phone into not giving up on the download, because it was totally off during the period without Internet. It never had a chance to fail. By doing this, I was able to spread out the download across multiple satellite passes, and I could complete the&nbsp;download.</p>
  158. <p>This is an absurd workaround! I should not have had to do&nbsp;this.</p>
  159. <p><cite><em>Ibid.</em></cite></p>
  160. </blockquote>
  161. <a href="#hr-175" title="Lien vers cette section de la page"><hr id="hr-175" /></a>
  162. <blockquote>
  163. <p>À chaque technologie qu’on vous propose, qui émerge dans le champ commercial, il s’agit toujours de se demander&nbsp;: en quoi cette tech va-t-elle nourrir ou appauvrir mon rapport aux autres, au monde et à moi-même&#8239;? Il est très facile de mesurer le pouvoir qu’une appli ou qu’un service numérique apporte, beaucoup plus insidieux de réaliser ce qu’elle nous fait perdre ou même dégrade dans nos relations et nos puissances propres&nbsp;: puissance de créer, de réfléchir, d’imaginer, d’être empathique, d’écouter, puissance physique de ressentir par soi-même, de se déplacer, de garder son énergie, etc.</p>
  164. <p><mark>La technocritique doit discriminer pouvoir (le faire faire) et puissance (le faire par soi-même, en autonomie),</mark> ouverture ou fermeture au monde, enrichissement ou effilochement des liens, impact sur l’écologie en amont et en aval, exhaustion des ressources, impacts sociaux sur les pays en développement, pollutions induites, pour notre Terre — mais aussi dans nos cerveaux avec le siphonnage permanent de notre attention, de nos temps libres par le numérique. Et elle doit aussi se demander&nbsp;: quels désirs doit-on encourager&#8239;? Quelle liberté ou émancipation la techno doit-elle nous aider à atteindre&#8239;? Le peut-elle seulement, et dans quel contexte&nbsp;d’usage&#8239;?</p>
  165. <p><cite><em><a data-link-domain="bonpote.com" href="https://bonpote.com/on-a-besoin-de-pirates-pour-saboter-les-datacenters-damazon-pour-bloquer-les-plateformes-duber-ou-de-airbnb/" hreflang="fr"
  166. title="Consultation de l’article">«&nbsp;On a besoin de pirates pour saboter les datacenters d’Amazon, pour bloquer les plateformes d’Uber ou de Airbnb&nbsp;»</a>
  167. <a href="/david/cache/2024/02acbf716d95797a371706c8983d6164/" hreflang="fr"
  168. data-tippy data-description="La Silicon Valley n’est qu’à la marge soucieuse de l’écologie. Mais c’est aussi qu’elle croit profondément au solutionnisme techno pour"
  169. data-source="https://bonpote.com/on-a-besoin-de-pirates-pour-saboter-les-datacenters-damazon-pour-bloquer-les-plateformes-duber-ou-de-airbnb/"
  170. data-date="2024-05-31"
  171. data-favicon="https://bonpote.com/wp-content/uploads/2024/01/ezez_1.ico"
  172. data-domain="bonpote.com"
  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><del>Martine</del> Alain aux&nbsp;US.</p>
  183. <a href="#hr-176" title="Lien vers cette section de la page"><hr id="hr-176" /></a>
  184. <blockquote lang="en">
  185. <p>Google utilizes cookie history, logged-in Chrome data, and pattern detection (referred to in the leak as “unsquashed” clicks versus “squashed” clicks) as effective means for fighting manual &amp; automated click spam. […]</p>
  186. <p>My anonymous source claimed that way back in 2005, <mark>Google wanted the full clickstream of billions of Internet users, and with Chrome, they’ve now got it.</mark> The API documents suggest Google calculates several types of metrics that can be called using Chrome views related to both individual pages and entire&nbsp;domains.</p>
  187. <p>This document, describing the features around how Google creates Sitelinks, is particularly interesting. It showcases a call named topUrl, which is “A list of top urls with highest two_level_score, i.e., chrome_trans_clicks.” My read is that Google likely uses the number of clicks on pages in Chrome browsers and uses that to determine the most popular/important URLs on a site, which go into the calculation of which to include in the sitelinks&nbsp;feature.</p>
  188. <p><cite><em><a data-link-domain="sparktoro.com" href="https://sparktoro.com/blog/an-anonymous-source-shared-thousands-of-leaked-google-search-api-documents-with-me-everyone-in-seo-should-see-them/" hreflang="en"
  189. title="Consultation de l’article (anglais)">An Anonymous Source Shared Thousands of Leaked Google Search API Documents with Me; Everyone in SEO Should See Them</a>
  190. <a href="/david/cache/2024/2eba81418d244e79cef08638976dbeae/" hreflang="en"
  191. data-tippy data-description="On Sunday, May 5th, I received an email from a person claiming to have access to a massive leak of API documentation from inside Google’s Search division."
  192. data-source="https://sparktoro.com/blog/an-anonymous-source-shared-thousands-of-leaked-google-search-api-documents-with-me-everyone-in-seo-should-see-them/"
  193. data-date="2024-05-31"
  194. data-favicon="https://sparktoro.com/favicon.ico"
  195. data-domain="sparktoro.com"
  196. ><svg xmlns="http://www.w3.org/2000/svg"
  197. width="24" height="24" viewBox="0 0 24 24" fill="none"
  198. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  199. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  200. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  201. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  202. </svg>
  203. <span class="sr-only">[archive]</span></a></em></cite></p>
  204. </blockquote>
  205. <p>Ce qui est bien avec les produits Google c’est qu’on n’est jamais&nbsp;surpris.</p>
  206. <a href="#hr-177" title="Lien vers cette section de la page"><hr id="hr-177" /></a>
  207. <blockquote>
  208. <p>En prenant un tout petit peu de recul Josh se rend compte que cette troupe ne comprend pas vraiment ce qu’est le Bluetooth, son fonctionnement SANS FIL justement. Josh a de son côté pris part à des développement dans ce format au cours de son activité professionnelle. Il a même remonté des bugs rencontrés sur ce format à Ericsson au début des années 2000. <mark>Comment, avec un diplôme d’informatique en poche, Josh peut-il avoir tord</mark> et comment ces gens qui ne comprennent pas le fonctionnement du Bluetooth peuvent-ils avoir&nbsp;raison&#8239;?</p>
  209. <p><cite><em><a data-link-domain="minimachines.net" href="https://www.minimachines.net/actu/casque-apple-lightning-bluetooth-127339" hreflang="fr"
  210. title="Consultation de l’article">L’aventurier du casque Bluetooth maudit</a>
  211. <a href="/david/cache/2024/acf33204fda8c91ac054bb26f99e8c59/" hreflang="fr"
  212. data-tippy data-description="Cette histoire est un témoignage étonnant d'un internaute qui ne comprend plus comment le Bluetooth - et notre monde - fonctionnent."
  213. data-source="https://www.minimachines.net/actu/casque-apple-lightning-bluetooth-127339"
  214. data-date="2024-05-31"
  215. data-favicon="https://www.minimachines.net/wp-content/uploads/2012/09/favicon1.png"
  216. data-domain="minimachines.net"
  217. ><svg xmlns="http://www.w3.org/2000/svg"
  218. width="24" height="24" viewBox="0 0 24 24" fill="none"
  219. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  220. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  221. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  222. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  223. </svg>
  224. <span class="sr-only">[archive]</span></a></em></cite></p>
  225. </blockquote>
  226. <p>Cette histoire peut être lue avec tellement d’angles —&nbsp;et de biais&nbsp;— possibles. Je me demande quel serait le bilan carbone des deux options sur du long terme en tenant compte de la production, du transport, de la durabilité, de la consommation, etc.</p>
  227. <a href="#hr-178" title="Lien vers cette section de la page"><hr id="hr-178" /></a>
  228. <blockquote lang="en">
  229. <p>This approach serves as a reminder of the constantly changing tactics of cybercriminals and, unfortunately, illustrates why you can never blindly trust what someone shares&nbsp;online.</p>
  230. <p>Instead, <mark>developers must verify the source of all packages they add to their projects,</mark> and even if it feels trustworthy, check the code (with word wrap enabled) for unusual or obfuscated commands that will be&nbsp;executed.</p>
  231. <p><cite><em><a data-link-domain="bleepingcomputer.com" href="https://www.bleepingcomputer.com/news/security/cybercriminals-pose-as-helpful-stack-overflow-users-to-push-malware/" hreflang="en"
  232. title="Consultation de l’article (anglais)">Cybercriminals pose as “helpful” Stack Overflow users to push malware</a>
  233. <a href="/david/cache/2024/1bff60d11f3a030aa5b3d1da84dce189/" hreflang="en"
  234. data-tippy data-description="Cybercriminals are abusing Stack Overflow in an interesting approach to spreading malware&mdash;answering users&#039; questions by promoting a malicious PyPi package that installs Windows information-stealing malware."
  235. data-source="https://www.bleepingcomputer.com/news/security/cybercriminals-pose-as-helpful-stack-overflow-users-to-push-malware/"
  236. data-date="2024-05-31"
  237. data-favicon="https://www.bleepstatic.com/favicon/bleeping.ico"
  238. data-domain="bleepingcomputer.com"
  239. ><svg xmlns="http://www.w3.org/2000/svg"
  240. width="24" height="24" viewBox="0 0 24 24" fill="none"
  241. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  242. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  243. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  244. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  245. </svg>
  246. <span class="sr-only">[archive]</span></a></em></cite></p>
  247. </blockquote>
  248. <p>Bon&nbsp;courage.</p>
  249. <a href="#hr-179" title="Lien vers cette section de la page"><hr id="hr-179" /></a>
  250. <blockquote>
  251. <p>J’ai appris qu’un produit beau avec des erreurs fonc­tionne mieux qu’un produit moche sans erreurs. <mark>C’est contre-intui­tif pour moi et pas dans mes attentes mais c’est la réalité du terrain.</mark> J’ai appris qu’au-delà du <em>beau</em>, l’ex­pé­rience utili­sa­teur dans la mani­pu­la­tion des inter­faces était une vraie exper­tise qui faisait toute la diffé­rence. J’ai appris que l’adé­qua­tion aux besoins métier primait encore plus sur tout&nbsp;ça.</p>
  252. <p><cite><em><a data-link-domain="n.survol.fr" href="https://n.survol.fr/n/quick-n-dirty" hreflang="fr"
  253. title="Consultation de l’article">Quick ‘n dirty - Carnet de notes</a>
  254. <a href="/david/cache/2024/23c807abc870219e09f41f92bc869d37/" hreflang="fr"
  255. data-tippy data-description="J'ai appris.En bon ingénieur j'ai beaucoup poussé l'idée qu'il faut un produit très bien foutu, sans erreur, sans zone d'ombre, performant et que, quand tout ça va, les utilisateurs vont ven"
  256. data-source="https://n.survol.fr/n/quick-n-dirty"
  257. data-date="2024-05-31"
  258. data-favicon=""
  259. data-domain="n.survol.fr"
  260. ><svg xmlns="http://www.w3.org/2000/svg"
  261. width="24" height="24" viewBox="0 0 24 24" fill="none"
  262. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  263. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  264. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  265. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  266. </svg>
  267. <span class="sr-only">[archive]</span></a></em></cite></p>
  268. </blockquote>
  269. <p>Oui. J’ai appris cela&nbsp;aussi.</p>
  270. <p>J’ai même appris que des gué-guerres politiques internes pouvaient sabrer la meilleure des&nbsp;techniques.</p>
  271. <nav>
  272. <p>
  273. <a href="/david/2024/apprentissage/"
  274. title="Liste de tous les articles 2024 associés à cette étiquette"
  275. rel="tag">#apprentissage</a>
  276. <a href="/david/2024/deception/"
  277. title="Liste de tous les articles 2024 associés à cette étiquette"
  278. rel="tag">#déception</a>
  279. <a href="/david/2024/dystopie/"
  280. title="Liste de tous les articles 2024 associés à cette étiquette"
  281. rel="tag">#dystopie</a>
  282. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  283. </p>
  284. </nav>
  285. <h2>
  286. <a href="/david/2024/05/20/" title="Lien permanent vers cet article">Stimulations</a> <time datetime="2024-05-20">20 mai 2024</time>
  287. </h2>
  288. <p><a href="/david/2024/05/12/" title="Alien">Je me suis demandé</a> en passant par la page sur le <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Stimming">Stimming</a> (<a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Auto-stimulation">Auto-stimulation</a> en français) après avoir couru s’il pouvait y avoir un lien avec les sports d’endurance. Je n’ai trouvé que <a data-link-domain="ncbi.nlm.nih.gov" href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8992823/">cet article</a> qui n’a pas été&nbsp;publié&nbsp;:</p>
  289. <blockquote lang="en">
  290. <p>Physical activity is beneficial for physical and mental health in the general population. Among autistic people, a range of physical and mental health conditions, particularly depression and anxiety, occur more frequently than in the general population. <mark>Physical activity interventions could help improve physical and mental health in autistic adults,</mark> but there is a lack of research in the area. The aim of this perspective article is to explore research into physical activity interventions for autistic adults, and identify gaps particularly in need of&nbsp;addressing.</p>
  291. </blockquote>
  292. <p>J’imagine que les mouvements de jambes à l’arrêt facilitent la récupération aussi d’une certaine&nbsp;manière&nbsp;😇.</p>
  293. <p><a href="/david/2024/04/13/#hr-148">Still</a> <a data-link-domain="relationalpsych.group" href="https://www.relationalpsych.group/articles/understanding-audhd-the-co-occurence-of-autism-and-adhd" hreflang="en"
  294. title="Consultation de l’article (anglais)">digging</a>
  295. <a href="/david/cache/2024/7f7afbfc0e4528838aadd7db4ba231cb/" hreflang="en"
  296. data-tippy data-description="Autism Assessment at Relational Psych involves comprehensive evaluations to diagnose Autism Spectrum Disorders (ASD). Our assessments are conducted by experienced professionals and are tailored to identify the unique needs and strengths of each individual."
  297. data-source="https://www.relationalpsych.group/articles/understanding-audhd-the-co-occurence-of-autism-and-adhd"
  298. data-date="2024-05-20"
  299. data-favicon="https://assets-global.website-files.com/638a47e8e6837e0de97565b0/63fc2dfc3efb72e41f561cf0_Exclude.png"
  300. data-domain="relationalpsych.group"
  301. ><svg xmlns="http://www.w3.org/2000/svg"
  302. width="24" height="24" viewBox="0 0 24 24" fill="none"
  303. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  304. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  305. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  306. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  307. </svg>
  308. <span class="sr-only">[archive]</span></a>&nbsp;⛏️.</p>
  309. <a href="#hr-160" title="Lien vers cette section de la page"><hr id="hr-160" /></a>
  310. <blockquote lang="en">
  311. <p>When you’re driving around in Google Maps, you’re piloting a spaceship in an ancient simulation of space&nbsp;warfare.</p>
  312. <p><cite><em><a data-link-domain="interconnected.org" href="https://interconnected.org/home/2024/05/17/arrow" hreflang="en"
  313. title="Consultation de l’article (anglais)">When you’re driving in Google Maps you’re re-enacting an ancient space combat sim</a>
  314. <a href="/david/cache/2024/37e471123bcb625e1ada602b1168a3dd/" hreflang="en"
  315. data-tippy data-description="Posted on Friday 17 May 2024. 1,259 words, 14 links. By Matt Webb."
  316. data-source="https://interconnected.org/home/2024/05/17/arrow"
  317. data-date="2024-05-20"
  318. data-favicon=""
  319. data-domain="interconnected.org"
  320. ><svg xmlns="http://www.w3.org/2000/svg"
  321. width="24" height="24" viewBox="0 0 24 24" fill="none"
  322. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  323. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  324. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  325. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  326. </svg>
  327. <span class="sr-only">[archive]</span></a></em></cite></p>
  328. </blockquote>
  329. <p>Matt Webb, un des meilleurs tisseurs du&nbsp;Web.</p>
  330. <a href="#hr-161" title="Lien vers cette section de la page"><hr id="hr-161" /></a>
  331. <blockquote>
  332. <p>Depuis quelques mois, je réalise des petites BD sur le même principe qu’Étymographie dans Le Combat syndicaliste, le journal de la CNT-F. <mark>Je les mets à l’occasion sur Instagram,</mark> mais je ne veux pas non plus totalement laisser mourir mon cher blog, d’autant qu’il y a peut-être une ou deux personnes qui y vont encore et boudent les réseaux sociaux, sait-on jamais… En voici donc&nbsp;trois</p>
  333. <p><cite><em><a data-link-domain="boutanox.blogspot.com" href="https://boutanox.blogspot.com/2024/04/melanailourologos-le-combat-syndicaliste.html" hreflang=""
  334. title="Consultation de l’article">Mélanaïlourologos - Le Combat syndicaliste</a>
  335. <a href="/david/cache/2024/8a50a4b5f8ead46ca899437425315367/" hreflang=""
  336. data-tippy data-description="Depuis quelques mois, je réalise des petites BD sur le même principe qu'Étymographie dans Le Combat syndicaliste , le journal de la CNT-F ...."
  337. data-source="https://boutanox.blogspot.com/2024/04/melanailourologos-le-combat-syndicaliste.html"
  338. data-date="2024-05-20"
  339. data-favicon="https://boutanox.blogspot.com/favicon.ico"
  340. data-domain="boutanox.blogspot.com"
  341. ><svg xmlns="http://www.w3.org/2000/svg"
  342. width="24" height="24" viewBox="0 0 24 24" fill="none"
  343. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  344. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  345. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  346. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  347. </svg>
  348. <span class="sr-only">[archive]</span></a></em></cite></p>
  349. </blockquote>
  350. <p>Merci aux auteur·ices qui publient aussi sur le web (même si c’est sur Google en&nbsp;l’occurence…).</p>
  351. <a href="#hr-162" title="Lien vers cette section de la page"><hr id="hr-162" /></a>
  352. <blockquote lang="en">
  353. <p>Libraries are essential for democracy. We provide librarians and their communities the necessary skills <mark>to turn our ideals into action,</mark> focused on issues like privacy, intellectual freedom, and information&nbsp;democracy.</p>
  354. <p><cite><em><a data-link-domain="libraryfreedom.org" href="https://libraryfreedom.org/">We are Library Freedom&nbsp;Project </a></em></cite></p>
  355. </blockquote>
  356. <p>📚✊</p>
  357. <a href="#hr-163" title="Lien vers cette section de la page"><hr id="hr-163" /></a>
  358. <blockquote>
  359. <p>Je ne connais pas bien l’analyse transactionnelle, mais je m’en méfie un peu, surement plus par ignorance que par&nbsp;connaissance.</p>
  360. <p>Je trouve cependant que les différents «&nbsp;P&nbsp;» (Protection, Permission, Puissance) qui sont proposés sont intéressants quand il s’agit de parler de confiance, de légitimité et de collaboration. Je suis content de rencontrer ces&nbsp;termes.</p>
  361. <p><cite><em><a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/oser-la-confiance.html" hreflang="fr"
  362. title="Consultation de l’article">Oser la confiance</a>
  363. <a href="/david/cache/2024/f0f339af451863ac8580a9fb65a58e99/" hreflang="fr"
  364. data-tippy data-description="On m’a conseillé ce livre, voici donc quelques notes."
  365. data-source="https://blog.notmyidea.org/oser-la-confiance.html"
  366. data-date="2024-05-20"
  367. data-favicon="https://blog.notmyidea.org/favicon-32x32.png"
  368. data-domain="blog.notmyidea.org"
  369. ><svg xmlns="http://www.w3.org/2000/svg"
  370. width="24" height="24" viewBox="0 0 24 24" fill="none"
  371. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  372. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  373. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  374. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  375. </svg>
  376. <span class="sr-only">[archive]</span></a></em></cite></p>
  377. </blockquote>
  378. <p>Cet article rai·ésonne <a href="/david/2024/05/13/" title="Tensions">particulièrement en ce moment</a>.</p>
  379. <a href="#hr-164" title="Lien vers cette section de la page"><hr id="hr-164" /></a>
  380. <blockquote>
  381. <p>Si je prends la parole aujourd’hui, c’est que je pense que mon parcours et mon cheminement intellectuel peuvent servir à d’autres confrères qui, je le sais, sont nombreux à être passés par mes différentes&nbsp;situations.</p>
  382. <p>Lorsque je suis entré en études d’ostéopathie, j’étais certain de commencer un cursus scientifique qui m’amènerait à être une profession de santé&nbsp;respectable.</p>
  383. <p><cite><em><a data-link-domain="scribe.rip" href="https://scribe.rip/@laurentlouat/ost%C3%A9opathe-je-nen-garderai-que-le-nom-fd14316bc871" hreflang="fr"
  384. title="Consultation de l’article">Ostéopathe, je n’en garderai que le nom</a>
  385. <a href="/david/cache/2024/b2c5ca7e92e2c0d461bc3c7da36e8d32/" hreflang="fr"
  386. data-tippy data-description="Cette rupture est symbolique. Mais les dérives sont quant à elles réelles. N’oubliez pas, ne pas se positionner, c’est cautionner."
  387. data-source="https://scribe.rip/@laurentlouat/ost%C3%A9opathe-je-nen-garderai-que-le-nom-fd14316bc871"
  388. data-date="2024-05-20"
  389. data-favicon="https://scribe.rip/favicon.ico"
  390. data-domain="scribe.rip"
  391. ><svg xmlns="http://www.w3.org/2000/svg"
  392. width="24" height="24" viewBox="0 0 24 24" fill="none"
  393. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  394. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  395. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  396. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  397. </svg>
  398. <span class="sr-only">[archive]</span></a></em></cite></p>
  399. </blockquote>
  400. <p>Merci aux personnes qui témoignent de&nbsp;l’intérieur.</p>
  401. <a href="#hr-165" title="Lien vers cette section de la page"><hr id="hr-165" /></a>
  402. <blockquote lang="en">
  403. <p>In our increasingly data-driven world, the ability to quickly and accurately access geospatial data can transform industries from public health to urban planning. Imagine being able to locate and analyze data from ‘within 10&nbsp;miles of the North Carolina coastline’ in mere seconds. Natural Language Geocoding makes this possible, <mark>bridging the gap between complex geospatial queries and user-friendly language.</mark> Let’s dive into how this innovative technology is changing the landscape of data analysis, making it more accessible and&nbsp;efficient.</p>
  404. <p><cite><em><a data-link-domain="element84.com" href="https://www.element84.com/machine-learning/natural-language-geocoding/" hreflang="en"
  405. title="Consultation de l’article (anglais)">Natural Language Geocoding</a>
  406. <a href="/david/cache/2024/7084f7b279604bc141fee03e01531eb7/" hreflang="en"
  407. data-tippy data-description="We discuss how natural language geocoding is changing the landscape of data analysis, making it more accessible and efficient."
  408. data-source="https://www.element84.com/machine-learning/natural-language-geocoding/"
  409. data-date="2024-05-20"
  410. data-favicon="https://www.element84.com/favicon-32x32.png?v=24e856d25e63af3f5b952cefe84a531f"
  411. data-domain="element84.com"
  412. ><svg xmlns="http://www.w3.org/2000/svg"
  413. width="24" height="24" viewBox="0 0 24 24" fill="none"
  414. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  415. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  416. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  417. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  418. </svg>
  419. <span class="sr-only">[archive]</span></a></em></cite></p>
  420. </blockquote>
  421. <p>L’AI s’immisce décidément partout. Je pensais naïvement être épargné dans ce domaine là. #enshAIttification (you saw it here&nbsp;first).</p>
  422. <a href="#hr-166" title="Lien vers cette section de la page"><hr id="hr-166" /></a>
  423. <blockquote lang="en">
  424. <p>A privacy-first, no-nonsense, super-fast <mark>blogging&nbsp;platform</mark></p>
  425. <p>No trackers, no javascript, no stylesheets. Just your&nbsp;words.</p>
  426. <p><cite><em><a data-link-domain="bearblog.dev" href="https://bearblog.dev/">ʕ•ᴥ•ʔ Bear&nbsp;Blog</a></em></cite></p>
  427. </blockquote>
  428. <a href="#hr-167" title="Lien vers cette section de la page"><hr id="hr-167" /></a>
  429. <blockquote>
  430. <p>Éducation sur le cannabis <mark>pour et par</mark> les Premières Nations, les Inuits et les&nbsp;Métis</p>
  431. <p><cite><em><a data-link-domain="nwaccannabised.ca" href="https://nwaccannabised.ca/fr">NWAC&nbsp;Cannabis</a></em></cite></p>
  432. </blockquote>
  433. <p>Je découvre au passage <a data-link-domain="deplume.ca" href="https://deplume.ca/">Design de Plume</a>.</p>
  434. <a href="#hr-168" title="Lien vers cette section de la page"><hr id="hr-168" /></a>
  435. <blockquote>
  436. <p>Peut-être que je viens de courir le 5k le plus rapide du reste de ma vie. 🏃💨</p>
  437. <p><cite><em><a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111133899699614778">Sur masto</a>, le 26&nbsp;septembre&nbsp;2023</em></cite></p>
  438. </blockquote>
  439. <p>Ce pouet va mal&nbsp;vieillir&nbsp;🫀🦵.</p>
  440. <nav>
  441. <p>
  442. <a href="/david/2024/apprentissage/"
  443. title="Liste de tous les articles 2024 associés à cette étiquette"
  444. rel="tag">#apprentissage</a>
  445. <a href="/david/2024/documentation/"
  446. title="Liste de tous les articles 2024 associés à cette étiquette"
  447. rel="tag">#documentation</a>
  448. <a href="/david/2024/liens/"
  449. title="Liste de tous les articles 2024 associés à cette étiquette"
  450. rel="tag">#liens</a>
  451. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  452. </p>
  453. </nav>
  454. <h2>
  455. <a href="/david/2024/05/12/" title="Lien permanent vers cet article">Alien</a> <time datetime="2024-05-12">12 mai 2024</time>
  456. </h2>
  457. <blockquote lang="en">
  458. <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>
  459. <p><cite><em><a data-link-domain="winnielim.org" href="https://winnielim.org/journal/am-i-actually-autistic/" hreflang="en"
  460. title="Consultation de l’article (anglais)">am i actually autistic?</a>
  461. <a href="/david/cache/2024/865fc8257c3ca8577312b09ee24d4c6d/" hreflang="en"
  462. 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..."
  463. data-source="https://winnielim.org/journal/am-i-actually-autistic/"
  464. data-date="2024-05-13"
  465. data-favicon="https://winnielim.org/favicon.ico"
  466. data-domain="winnielim.org"
  467. ><svg xmlns="http://www.w3.org/2000/svg"
  468. width="24" height="24" viewBox="0 0 24 24" fill="none"
  469. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  470. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  471. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  472. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  473. </svg>
  474. <span class="sr-only">[archive]</span></a></em></cite></p>
  475. </blockquote>
  476. <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>
  477. <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>
  478. <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>
  479. <blockquote>
  480. <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>
  481. <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>
  482. <p><cite><em>Citadelle</em>, Antoine de&nbsp;Saint-Exupéry</cite></p>
  483. </blockquote>
  484. <p>Ce sont les réparations en cours de route, lorsqu’on s’est habitué à la mer qui sont&nbsp;difficiles&nbsp;🤕.</p>
  485. <nav>
  486. <p>
  487. <a href="/david/2024/apprentissage/"
  488. title="Liste de tous les articles 2024 associés à cette étiquette"
  489. rel="tag">#apprentissage</a>
  490. <a href="/david/2024/introspection/"
  491. title="Liste de tous les articles 2024 associés à cette étiquette"
  492. rel="tag">#introspection</a>
  493. <a href="/david/2024/psychologie/"
  494. title="Liste de tous les articles 2024 associés à cette étiquette"
  495. rel="tag">#psychologie</a>
  496. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  497. </p>
  498. </nav>
  499. <h2>
  500. <a href="/david/2024/04/20/" title="Lien permanent vers cet article">Jour 1</a> <time datetime="2024-04-20">20 avril 2024</time>
  501. </h2>
  502. <p>Réveil à 5h30. Ce qui devait être une sortie <em>Légère &amp; Rapide</em> se révèle ne pas être si <em>Légère</em> (autour de 12kg) car j’ai 4&nbsp;jours de nourriture sur le dos et que des températures de -10°C sont annoncées ce qui décide de la taille (et donc poids) du duvet&nbsp;notamment.</p>
  503. <p>Niveau <em>Rapide</em>, si les premiers kilomètres se déroulent bien car la neige a fondue, dès que je passe dans la vallée suivante je me retrouve avec de la neige jusqu’aux genoux mais surtout qui casse sans prévenir pour atterrir dans le torrent de fonte en dessous. Je suis en baskets. La saisonnalité de mes erreurs me&nbsp;fatigue.</p>
  504. <p>Dès le 5<sup>e</sup> kilomètre, les pieds gelés et les chaussures trempées, je sens bien que ça ne va pas le faire. D’autant que je vais avoir du mal à faire sécher des chaussures avec les températures prévues en dormant dehors. Sans compter qu’à force de passer à travers la neige, j’ai ma cheville <a href="/david/2024/01/09/" title="Blessure">encore fragile</a> qui fatigue. Le vent se lève, il commence à grêler. Le moral&nbsp;flanche.</p>
  505. <p>Contre mauvaise fortune bon cœur, je décide de transformer ce Grand Tour en un Minuscule Tour à la journée. Il faut savoir ravaler son égo et accepter de revenir avec encore plus d’envie lorsque les conditions sont davantage acceptables —&nbsp;et surtout compatibles avec mes explorations du&nbsp;moment.</p>
  506. <p>J’ai&nbsp;appris&nbsp;:</p>
  507. <ul>
  508. <li>qu’il est possible de mettre chaque pied dans un sac type ZipLock pour essayer de garder ses chaussettes relativement sèches, attention une fois percés ça peut faire&nbsp;garrot&#8239;;</li>
  509. <li>qu’il est possible de faire sécher des chaussettes sur le sac et de faire un roulement à trois paires (toujours avoir une épingle à nourrice sur le sac) en changeant à chaque&nbsp;pause&#8239;;</li>
  510. <li>qu’il me faut des raquettes jusqu’à fin avril (je le réapprends tous les printemps, faudrait que ça commence à&nbsp;rentrer…)&#8239;;</li>
  511. <li>qu’il faut que je me rappelle que cette forêt a beaucoup plus de précipitations que ses voisines… et donc une période de fonte plus&nbsp;longue&#8239;;</li>
  512. <li>qu’il me faut trouver une meilleure manière de m’alimenter dans&nbsp;l’effort.</li>
  513. </ul>
  514. <p>Retour à la maison avec le physique pas trop amoché, il va falloir soigner le mental&nbsp;maintenant.</p>
  515. <nav>
  516. <p>
  517. <a href="/david/2024/apprentissage/"
  518. title="Liste de tous les articles 2024 associés à cette étiquette"
  519. rel="tag">#apprentissage</a>
  520. <a href="/david/2024/deception/"
  521. title="Liste de tous les articles 2024 associés à cette étiquette"
  522. rel="tag">#déception</a>
  523. <a href="/david/2024/foret/"
  524. title="Liste de tous les articles 2024 associés à cette étiquette"
  525. rel="tag">#forêt</a>
  526. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  527. </p>
  528. </nav>
  529. <h2>
  530. <a href="/david/2024/04/18/" title="Lien permanent vers cet article">Calme</a> <time datetime="2024-04-18">18 avril 2024</time>
  531. </h2>
  532. <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>
  533. <a href="#hr-152" title="Lien vers cette section de la page"><hr id="hr-152" /></a>
  534. <blockquote lang="en">
  535. <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>
  536. <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>
  537. <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>
  538. <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>
  539. <p><cite><em><a data-link-domain="justinjackson.ca" href="https://justinjackson.ca/calm-company" hreflang="en"
  540. title="Consultation de l’article (anglais)">We need more calm companies</a>
  541. <a href="/david/cache/2024/944899e3cafa6019bd2f285284a14dd7/" hreflang="en"
  542. data-tippy data-description="Calm companies are profitable, value freedom, have a purpose, and improve the team's lives. Frenzied companies are crisis-driven."
  543. data-source="https://justinjackson.ca/calm-company"
  544. data-date="2024-04-18"
  545. data-favicon="https://justinjackson.ca/img/asset/bWFpbi9icnV0YWwvanVzdGluLWphY2tzb24tZG90cy1jaXJjbGUucG5n?w=32&h=32&s=84e63e02be5161c4fdb75e2f8304ae35"
  546. data-domain="justinjackson.ca"
  547. ><svg xmlns="http://www.w3.org/2000/svg"
  548. width="24" height="24" viewBox="0 0 24 24" fill="none"
  549. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  550. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  551. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  552. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  553. </svg>
  554. <span class="sr-only">[archive]</span></a></em></cite></p>
  555. </blockquote>
  556. <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>
  557. <a href="#hr-153" title="Lien vers cette section de la page"><hr id="hr-153" /></a>
  558. <blockquote lang="en">
  559. <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>
  560. <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"
  561. title="Consultation de l’article (anglais)">Deep dive CSS: font metrics, line-height and vertical-align</a>
  562. <a href="/david/cache/2024/157e744e8062e5495ba700566e99f8f2/" hreflang="en"
  563. 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."
  564. data-source="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align"
  565. data-date="2024-04-18"
  566. data-favicon="https://iamvdo.me/images/favicon.png"
  567. data-domain="iamvdo.me"
  568. ><svg xmlns="http://www.w3.org/2000/svg"
  569. width="24" height="24" viewBox="0 0 24 24" fill="none"
  570. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  571. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  572. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  573. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  574. </svg>
  575. <span class="sr-only">[archive]</span></a></em></cite></p>
  576. </blockquote>
  577. <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"
  578. title="Consultation de l’article (anglais)">Voire impossible.</a>
  579. <a href="/david/cache/2024/4bda7c6500950716846bdeb6bddbafed/" hreflang="en"
  580. data-tippy data-description="Somehow we forgot how to center rectangles and must find our way back"
  581. data-source="https://tonsky.me/blog/centering/"
  582. data-date="2024-04-18"
  583. data-favicon="https://tonsky.me/i/favicon.png"
  584. data-domain="tonsky.me"
  585. ><svg xmlns="http://www.w3.org/2000/svg"
  586. width="24" height="24" viewBox="0 0 24 24" fill="none"
  587. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  588. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  589. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  590. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  591. </svg>
  592. <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"
  593. title="Consultation de l’article (anglais)">changer des choses</a>
  594. <a href="/david/cache/2024/c224a3174ad7a76fae1aaa8d174ec791/" hreflang="en"
  595. 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."
  596. data-source="https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/"
  597. data-date="2024-04-18"
  598. data-favicon="https://pawelgrzybek.com/icon.svg"
  599. data-domain="pawelgrzybek.com"
  600. ><svg xmlns="http://www.w3.org/2000/svg"
  601. width="24" height="24" viewBox="0 0 24 24" fill="none"
  602. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  603. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  604. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  605. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  606. </svg>
  607. <span class="sr-only">[archive]</span></a> à ce&nbsp;sujet.</p>
  608. <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"
  609. title="Consultation de l’article (anglais)">les CSS c’était devenu génial&#8239;?</a>
  610. <a href="/david/cache/2024/35c44c8d8b999faa625ed6009da60e99/" hreflang="en"
  611. 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."
  612. data-source="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/"
  613. data-date="2024-04-18"
  614. data-favicon="https://moderncss.dev/favicon.png"
  615. data-domain="moderncss.dev"
  616. ><svg xmlns="http://www.w3.org/2000/svg"
  617. width="24" height="24" viewBox="0 0 24 24" fill="none"
  618. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  619. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  620. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  621. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  622. </svg>
  623. <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>
  624. <a href="#hr-154" title="Lien vers cette section de la page"><hr id="hr-154" /></a>
  625. <blockquote lang="en">
  626. <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>
  627. <p>Here are some things I wish people allowed to continue to work in their web&nbsp;projects:</p>
  628. <p><cite><em><a data-link-domain="heather-buchel.com" href="https://heather-buchel.com/blog/2023/07/just-normal-web-things/" hreflang="en"
  629. title="Consultation de l’article (anglais)">Just normal web things.</a>
  630. <a href="/david/cache/2024/a20d47394f5c790270fd5af6faa58651/" hreflang="en"
  631. data-tippy data-description="A plea for us to get back to building websites that can do normal website things."
  632. data-source="https://heather-buchel.com/blog/2023/07/just-normal-web-things/"
  633. data-date="2024-04-18"
  634. data-favicon="https://heather-buchel.com/icon.svg"
  635. data-domain="heather-buchel.com"
  636. ><svg xmlns="http://www.w3.org/2000/svg"
  637. width="24" height="24" viewBox="0 0 24 24" fill="none"
  638. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  639. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  640. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  641. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  642. </svg>
  643. <span class="sr-only">[archive]</span></a></em></cite></p>
  644. </blockquote>
  645. <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>
  646. <a href="#hr-155" title="Lien vers cette section de la page"><hr id="hr-155" /></a>
  647. <blockquote lang="en">
  648. <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>
  649. <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>
  650. <p><cite><em><a data-link-domain="robinrendle.com" href="https://robinrendle.com/notes/vibe-driven-development/" hreflang="en"
  651. title="Consultation de l’article (anglais)">Vibe Driven Development</a>
  652. <a href="/david/cache/2024/2b6f113e6c47bf6d2b282fa0a48b48a6/" hreflang="en"
  653. data-tippy data-description="The website of Robin Rendle, a designer and writer from the UK."
  654. data-source="https://robinrendle.com/notes/vibe-driven-development/"
  655. data-date="2024-04-18"
  656. data-favicon="https://robinrendle.com/images/favicons3/favicon-32x32.png"
  657. data-domain="robinrendle.com"
  658. ><svg xmlns="http://www.w3.org/2000/svg"
  659. width="24" height="24" viewBox="0 0 24 24" fill="none"
  660. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  661. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  662. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  663. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  664. </svg>
  665. <span class="sr-only">[archive]</span></a></em></cite></p>
  666. </blockquote>
  667. <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>
  668. <a href="#hr-156" title="Lien vers cette section de la page"><hr id="hr-156" /></a>
  669. <blockquote lang="en">
  670. <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>
  671. <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"
  672. title="Consultation de l’article (anglais)">TechScape: How cheap, outsourced labour in Africa is shaping AI English</a>
  673. <a href="/david/cache/2024/3a28346225751986cc06aaadb8c8bb90/" hreflang="en"
  674. 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"
  675. data-source="https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt"
  676. data-date="2024-04-18"
  677. data-favicon="https://static.guim.co.uk/images/favicon-32x32.ico"
  678. data-domain="theguardian.com"
  679. ><svg xmlns="http://www.w3.org/2000/svg"
  680. width="24" height="24" viewBox="0 0 24 24" fill="none"
  681. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  682. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  683. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  684. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  685. </svg>
  686. <span class="sr-only">[archive]</span></a></em></cite></p>
  687. </blockquote>
  688. <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>
  689. <p><em>Via <a data-link-domain="simonwillison.net" href="https://simonwillison.net/2024/Apr/18/delve/" hreflang="en"
  690. title="Consultation de l’article (anglais)">Simon Willison</a>
  691. <a href="/david/cache/2024/1137631455ddd7b2acdd1f4071756ba6/" hreflang="en"
  692. 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 …"
  693. data-source="https://simonwillison.net/2024/Apr/18/delve/"
  694. data-date="2024-04-18"
  695. data-favicon="https://simonwillison.net/favicon.ico"
  696. data-domain="simonwillison.net"
  697. ><svg xmlns="http://www.w3.org/2000/svg"
  698. width="24" height="24" viewBox="0 0 24 24" fill="none"
  699. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  700. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  701. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  702. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  703. </svg>
  704. <span class="sr-only">[archive]</span></a>.</em></p>
  705. <nav>
  706. <p>
  707. <a href="/david/2024/apprentissage/"
  708. title="Liste de tous les articles 2024 associés à cette étiquette"
  709. rel="tag">#apprentissage</a>
  710. <a href="/david/2024/introspection/"
  711. title="Liste de tous les articles 2024 associés à cette étiquette"
  712. rel="tag">#introspection</a>
  713. <a href="/david/2024/technique/"
  714. title="Liste de tous les articles 2024 associés à cette étiquette"
  715. rel="tag">#technique</a>
  716. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  717. </p>
  718. </nav>
  719. <h2>
  720. <a href="/david/2024/03/26/" title="Lien permanent vers cet article">GPX Viewer</a> <time datetime="2024-03-26">26 mars 2024</time>
  721. </h2>
  722. <p><a href="/david/2024/03/25/" title="Inclusion">Suite de mes expérimentations</a> de la veille à la fois en cartographie et en <em>web components</em>. Je me suis demandé s’il était possible de faire un composant qui ne dépende pas de uMap pour afficher une trace GPX. Le fait d’avoir passé une heure à trouver la bonne <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">CSP</a> pour arriver à afficher une carte m’a d’une certaine manière motivé (c’était une journée&nbsp;galère).</p>
  723. <p>Il se trouve qu’il existe <a data-link-domain="github.com" href="https://github.com/mpetazzoni/leaflet-gpx">leaflet-gpx</a> qui fait exactement ce que je voulais. Il ne me restait «&nbsp;plus qu’à&nbsp;» en faire un composant web, ce que j’avais déjà <a data-link-domain="gitlab.com" href="https://gitlab.com/umap-project/leaflet-webcomponents/">fait par ailleurs</a>&nbsp;:</p>
  724. <gpx-viewer data-height="500px" data-width="800px">
  725. <p>
  726. Vous devriez voir s’afficher une carte de mon « Grand Tour de la forêt de Ouareau »,
  727. qui contient <a data-gpx href="/static/david/2024/grand_tour_de_la_foret_de_ouareau.gpx">cette trace GPX</a>,
  728. centrée sur <span data-latitude>46.2117</span>, <span data-longitude>-73.9335</span>
  729. avec un zoom de <span data-zoom>12</span>.
  730. Il est probable que cela ne s’exécute pas dans un agrégateur par exemple.
  731. </p>
  732. </gpx-viewer>
  733. <script type="module">
  734. import * as L from '/static/david/2024/leaflet.1.9.4/leaflet.1.9.4.js'
  735. window.L = L // Hack for leaflet-gpx, youpi.
  736. </script>
  737. <script type="module" nonce="oembed-web-component">
  738. class GPXViewer extends HTMLElement {
  739. static tagName = 'gpx-viewer'
  740. static register(tagName, registry) {
  741. if(!registry && ('customElements' in globalThis)) {
  742. registry = globalThis.customElements
  743. }
  744. registry?.define(tagName || this.tagName, this)
  745. }
  746. #attachCSS(path) {
  747. const linkElement = document.createElement('link')
  748. linkElement.setAttribute('rel', 'stylesheet')
  749. linkElement.setAttribute('href', path)
  750. this.shadowRoot.appendChild(linkElement)
  751. }
  752. #computeDimensions(mapContainer) {
  753. // There has to be a better way but I feel lazy tonight.
  754. let height = this.dataset.height
  755. let width = this.dataset.width
  756. // Size is in px so we strip these chars and convert to int.
  757. const heightValue = Number(height.slice(0, -2))
  758. const widthValue = Number(width.slice(0, -2))
  759. const mediaQueryMiddle = window.matchMedia(`(max-width: ${widthValue}px)`)
  760. const mediaQuerySmall = window.matchMedia(`(max-width: ${widthValue / 2}px)`)
  761. if (mediaQueryMiddle.matches) {
  762. height = `${heightValue / 2}px`
  763. width = `${widthValue / 2}px`
  764. }
  765. if (mediaQuerySmall.matches) {
  766. height = `${heightValue / 3}px`
  767. width = `${widthValue / 3}px`
  768. }
  769. mapContainer.style.height = height
  770. mapContainer.style.width = width
  771. }
  772. #createMapContainer() {
  773. const mapContainer = document.createElement('div')
  774. this.#computeDimensions(mapContainer)
  775. this.shadowRoot.appendChild(mapContainer)
  776. return mapContainer
  777. }
  778. #createMap(mapContainer) {
  779. const map = L.map(mapContainer).setView(
  780. [
  781. this.querySelector('[data-latitude]').textContent,
  782. this.querySelector('[data-longitude]').textContent,
  783. ],
  784. this.querySelector('[data-zoom]').textContent
  785. )
  786. L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  787. attribution:
  788. '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  789. }).addTo(map)
  790. return map
  791. }
  792. #attachGPX(map) {
  793. const gpxUrl = this.querySelector('[data-gpx]').href
  794. new GPX(gpxUrl, {
  795. async: true,
  796. marker_options: {
  797. startIconUrl: '/static/david/2024/leaflet-gpx.1.7.0-custom/pin-icon-start.png',
  798. endIconUrl: '/static/david/2024/leaflet-gpx.1.7.0-custom/pin-icon-end.png',
  799. shadowUrl: '/static/david/2024/leaflet-gpx.1.7.0-custom/pin-shadow.png'
  800. }
  801. }).on('loaded', (e) => {
  802. map.fitBounds(e.target.getBounds())
  803. }).addTo(map)
  804. }
  805. constructor() {
  806. super()
  807. this.attachShadow({ mode: 'open' })
  808. }
  809. async connectedCallback() {
  810. this.#attachCSS('/static/david/2024/leaflet.1.9.4/leaflet.css')
  811. const mapContainer = this.#createMapContainer()
  812. const map = this.#createMap(mapContainer)
  813. this.#attachGPX(map)
  814. }
  815. }
  816. import GPX from '/static/david/2024/leaflet-gpx.1.7.0-custom/gpx.1.7.0-custom.js'
  817. GPXViewer.register()
  818. </script>
  819. <p>Alors en fait, comme rien n’est jamais simple en JS, il a fallu que j’adapte le plugin qui n’était pas compatible avec les modules JS et que je fasse des galipettes pour que ça finisse par tomber en marche&nbsp;🤸. Cet écosystème est merveilleux (quel métier&#8239;!). J’ai quand même <a data-link-domain="github.com" href="https://github.com/mpetazzoni/leaflet-gpx/issues/153">remonté le problème</a>.</p>
  820. <p>Au passage, inspiré par <a data-link-domain="blog.k-nut.eu" href="https://blog.k-nut.eu/leaflet-microdata-html-webcomponent" hreflang="en"
  821. title="Consultation de l’article (anglais)">le travail de Knut Hühne</a>
  822. <a href="/david/cache/2024/65fba9cd025cd2403f932cb2c928cf14/" hreflang="en"
  823. data-tippy data-description="An example of using schema.org microdata to build a HTML Webcomponent for Leaflet"
  824. data-source="https://blog.k-nut.eu/leaflet-microdata-html-webcomponent"
  825. data-date="2024-03-25"
  826. data-favicon="https://blog.k-nut.eu/favicon-32x32.png"
  827. data-domain="blog.k-nut.eu"
  828. ><svg xmlns="http://www.w3.org/2000/svg"
  829. width="24" height="24" viewBox="0 0 24 24" fill="none"
  830. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  831. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  832. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  833. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  834. </svg>
  835. <span class="sr-only">[archive]</span></a> sur la sémantique des données d’une carte, je me suis demandé si j’allais définir un <a data-link-domain="schema.org" href="https://schema.org/itinerary">itinerary</a> pour un <a data-link-domain="schema.org" href="https://schema.org/Trip">Trip</a> avec des <a data-link-domain="schema.org" href="https://schema.org/GeoCoordinates">GeoCoordinates</a> mais ça m’a fait tirer un fil beaucoup trop long. Je garde l’idée sous le coude <a data-link-domain="umap-project.gitlab.io" href="https://umap-project.gitlab.io/leaflet-webcomponents/">pour mes propres recherches</a> dans le domaine cela&nbsp;dit.</p>
  836. <p>Un composant de plus, je ne suis pas très satisfait de celui-ci car j’avais l’espoir d’arriver à quelque chose de facilement réutilisable. J’aurais au moins commencé à mettre les doigts dans le XML du format GPX. Il est possible de définir plusieurs segments au sein d’une même trace. Il peut y avoir pas mal de métadonnées, notamment de mise en forme de la trace mais aussi de caractéristiques (biologiques, physiques, etc).</p>
  837. <a href="#hr-138" title="Lien vers cette section de la page"><hr id="hr-138" /></a>
  838. <blockquote lang="en">
  839. <p>The fact is that we can’t rely on any single website to hold the whole world’s knowledge, because it can be corrupted sooner or later. The only solution is a distributed architecture, with many smaller websites connecting with each other and sharing information. This is where ActivityPub comes in, the protocol used by Mastodon, Lemmy, Peertube and many other federated social media&nbsp;projects.</p>
  840. <p>I have worked on Lemmy for the past four years, bringing it from a prototype to a fully functional Reddit alternative. I wrote the entire federation code and became very familiar with the protocol. <mark>I realized that the same technology easily be used to create a federated encyclopedia.</mark> As no one else took up such a project, I finally decided to do it on my own and create Ibis. Thanks to my previous experience with the tech stack and the ActivityPub library I created, I was able to complete a proof of concept in a relatively short time of four&nbsp;months.</p>
  841. <p><cite><em><a data-link-domain="ibis.wiki" href="https://ibis.wiki/article/Announcing_Ibis,_the_federated_Wikipedia_Alternative@ibis.wiki" hreflang="en"
  842. title="Consultation de l’article (anglais)">Announcing Ibis, the federated Wikipedia Alternative</a>
  843. <a href="/david/cache/2024/691120ebac09f68413501b7f5daa2db7/" hreflang="en"
  844. data-tippy data-description=""
  845. data-source="https://ibis.wiki/article/Announcing_Ibis,_the_federated_Wikipedia_Alternative@ibis.wiki"
  846. data-date="2024-03-26"
  847. data-favicon=""
  848. data-domain="ibis.wiki"
  849. ><svg xmlns="http://www.w3.org/2000/svg"
  850. width="24" height="24" viewBox="0 0 24 24" fill="none"
  851. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  852. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  853. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  854. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  855. </svg>
  856. <span class="sr-only">[archive]</span></a></em></cite></p>
  857. </blockquote>
  858. <p>Wikipedia décentralisé, je dis oui&#8239;! Merci <a data-link-domain="alexsirac.com" href="https://alexsirac.com/activitypub-powered-wikis/" hreflang="fr"
  859. title="Consultation de l’article">Alex</a>
  860. <a href="/david/cache/2024/55c19feff784a41d2527b5f1589d931d/" hreflang="fr"
  861. data-tippy data-description=""
  862. data-source="https://alexsirac.com/activitypub-powered-wikis/"
  863. data-date="2024-03-26"
  864. data-favicon="https://alexsirac.com/wp-content/uploads/2023/01/cropped-cropped-portraitplante-32x32.webp"
  865. data-domain="alexsirac.com"
  866. ><svg xmlns="http://www.w3.org/2000/svg"
  867. width="24" height="24" viewBox="0 0 24 24" fill="none"
  868. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  869. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  870. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  871. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  872. </svg>
  873. <span class="sr-only">[archive]</span></a>.</p>
  874. <p>C’est important pour <a href="/david/2024/02/29/" title="Wikipédia">diverses</a> <a href="/david/2024/03/07/" title="Sondages">raisons</a>.</p>
  875. <a href="#hr-139" title="Lien vers cette section de la page"><hr id="hr-139" /></a>
  876. <blockquote lang="en">
  877. <p>I think it’s time to admit that my hobby is buying stuff for my new&nbsp;hobby.</p>
  878. <p><cite><em>Chris Hallbeck</em>, <a data-link-domain="mastodon.social" href="https://mastodon.social/@Chrishallbeck/112153815963114685">sur&nbsp;masto</a></cite></p>
  879. </blockquote>
  880. <p><em>Touché.</em></p>
  881. <nav>
  882. <p>
  883. <a href="/david/2024/apprentissage/"
  884. title="Liste de tous les articles 2024 associés à cette étiquette"
  885. rel="tag">#apprentissage</a>
  886. <a href="/david/2024/technique/"
  887. title="Liste de tous les articles 2024 associés à cette étiquette"
  888. rel="tag">#technique</a>
  889. <a href="/david/2024/web/"
  890. title="Liste de tous les articles 2024 associés à cette étiquette"
  891. rel="tag">#web</a>
  892. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  893. </p>
  894. </nav>
  895. <h2>
  896. <a href="/david/2024/03/19/" title="Lien permanent vers cet article">Excitation</a> <time datetime="2024-03-19">19 mars 2024</time>
  897. </h2>
  898. <p>Il y a cette petite étincelle qui s’allume lorsque j’entrevois la possibilité de démarrer un petit bout de code qui pourrait changer mon/le monde (en toute&nbsp;modestie).</p>
  899. <p>Idée du jour&nbsp;: faire un <em>web component</em> qui s’intitulerait <code>&lt;page-crypt&gt;</code> en s’inspirant grandement de <a data-link-domain="github.com" href="https://github.com/MaxLaumeister/PageCrypt/">PageCrypt</a> (et de sa <a data-link-domain="github.com" href="https://github.com/Greenheart/pagecrypt">version à jour</a>). La génération de la page chiffrée pourrait <a data-link-domain="github.com" href="https://github.com/MaxLaumeister/PageCrypt/blob/master/python/encrypt.py">se faire en Python</a>.</p>
  900. <p>Cela essayerait de résoudre une problématique d’accès à du contenu privé sur des pages pré-générées de manière statique. Il est probable que j’en ai besoin sous peu afin d’afficher une progression personnalisée d’informations sensibles dans un contexte pro, ce qui me motive d’autant&nbsp;plus.</p>
  901. <p>Je découvre au passage qu’il n’est pas trivial de <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem">convertir de l’unicode en base64 via JS</a>.</p>
  902. <p>Note&nbsp;: il existe aussi <a data-link-domain="github.com" href="https://github.com/robinmoisson/staticrypt">StatiCrypt</a>.</p>
  903. <a href="#hr-123" title="Lien vers cette section de la page"><hr id="hr-123" /></a>
  904. <blockquote lang="en">
  905. <p>If majority is always right – let’s eat shit… millions of flies can’t be&nbsp;wrong.</p>
  906. <p><cite><em>Statek</em>, Waldemar Łysiak, 1994</cite></p>
  907. </blockquote>
  908. <p>Cette citation aura fait ma&nbsp;journée.</p>
  909. <a href="#hr-124" title="Lien vers cette section de la page"><hr id="hr-124" /></a>
  910. <p>Je suis frustré par les capacités d’export des données de <a href="/david/2024/03/14/" title="Montre 2">la montre</a>. En inspectant, je pourrais récupérer les JSON qui passent avec Playwright mais c’est un peu la face nord. <em>Ça me fait glousser qu’un tel site utilise&nbsp;Vite.</em></p>
  911. <p>Il faut que je teste <a data-link-domain="github.com" href="https://github.com/xballoy/coros-api">coros-api</a> (TypeScript) et/ou <a data-link-domain="github.com" href="https://github.com/futoshita/Coros-Training-Hub-Exporter">Coros-Training-Hub-Exporter</a> (Java), je ne suis pas le seul à vouloir récupérer ces&nbsp;données.</p>
  912. <p>Aussi, il y a des données qui ne sont pas exposées par le TrainingHub mais auxquelles on semble avoir accès <a data-link-domain="tryterra.co" href="https://tryterra.co/integrations/coros">via une API tierce</a> (et très dispendieuse&#8239;!). Étrange et&nbsp;décevant…</p>
  913. <nav>
  914. <p>
  915. <a href="/david/2024/apprentissage/"
  916. title="Liste de tous les articles 2024 associés à cette étiquette"
  917. rel="tag">#apprentissage</a>
  918. <a href="/david/2024/enthousiasme/"
  919. title="Liste de tous les articles 2024 associés à cette étiquette"
  920. rel="tag">#enthousiasme</a>
  921. <a href="/david/2024/technique/"
  922. title="Liste de tous les articles 2024 associés à cette étiquette"
  923. rel="tag">#technique</a>
  924. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  925. </p>
  926. </nav>
  927. <h2>
  928. <a href="/david/2024/03/06/" title="Lien permanent vers cet article">Vannerie</a> <time datetime="2024-03-06">6 mars 2024</time>
  929. </h2>
  930. <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>
  931. <figure>
  932. <a href="/static/david/2024/2024-03-06-vannerie-panier.jpg"
  933. title="Cliquer pour une version haute résolution">
  934. <img
  935. src="/static/david/2024/2024-03-06-vannerie-panier.jpg"
  936. width="4032" height="3024"
  937. 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"
  938. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  939. loading="lazy"
  940. decoding="async"
  941. alt="Un panier en vannerie.">
  942. </a>
  943. <figcaption>Un panier en vannerie, ça m’a pris&nbsp;2h30.</figcaption>
  944. </figure>
  945. <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>
  946. <figure>
  947. <a href="/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg"
  948. title="Cliquer pour une version haute résolution">
  949. <img
  950. src="/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg"
  951. width="3024" height="4032"
  952. 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"
  953. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  954. loading="lazy"
  955. decoding="async"
  956. alt="Un sac à dos en vannerie.">
  957. </a>
  958. <figcaption>Un sac à dos en vannerie sur le dos de&nbsp;l’enfant.</figcaption>
  959. </figure>
  960. <p>Toujours cette sensation de créer des objets utiles à partir de pas grand chose et avec un minimum de&nbsp;matériel.</p>
  961. <a href="#hr-100" title="Lien vers cette section de la page"><hr id="hr-100" /></a>
  962. <blockquote lang="en">
  963. <p>Like Stimulus, but <em>a lot</em> smaller and a bit more&nbsp;webcomponenty?</p>
  964. <p><cite><em><a data-link-domain="github.com" href="https://github.com/johanhalse/musculus">Musculus</a></em></cite></p>
  965. </blockquote>
  966. <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>
  967. <a href="#hr-101" title="Lien vers cette section de la page"><hr id="hr-101" /></a>
  968. <blockquote>
  969. <p>End the battle. Use <code>infinity</code> to get the highest possible <code>z-index</code> and win&nbsp;forever.</p>
  970. <p>[…]</p>
  971. <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>
  972. <p><cite><em><a data-link-domain="codersblock.com" href="https://codersblock.com/blog/playing-with-infinity-in-css/" hreflang="en"
  973. title="Consultation de l’article (anglais)">Playing with Infinity in CSS</a>
  974. <a href="/david/cache/2024/1f4e359d100592aee6e46505a40b2a01/" hreflang="en"
  975. 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..."
  976. data-source="https://codersblock.com/blog/playing-with-infinity-in-css/"
  977. data-date="2024-03-06"
  978. data-favicon="https://codersblock.com/favicon-32x32.png"
  979. data-domain="codersblock.com"
  980. ><svg xmlns="http://www.w3.org/2000/svg"
  981. width="24" height="24" viewBox="0 0 24 24" fill="none"
  982. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  983. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  984. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  985. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  986. </svg>
  987. <span class="sr-only">[archive]</span></a></em></cite></p>
  988. </blockquote>
  989. <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>
  990. <nav>
  991. <p>
  992. <a href="/david/2024/apprentissage/"
  993. title="Liste de tous les articles 2024 associés à cette étiquette"
  994. rel="tag">#apprentissage</a>
  995. <a href="/david/2024/parentalite/"
  996. title="Liste de tous les articles 2024 associés à cette étiquette"
  997. rel="tag">#parentalité</a>
  998. <a href="/david/2024/protopie/"
  999. title="Liste de tous les articles 2024 associés à cette étiquette"
  1000. rel="tag">#protopie</a>
  1001. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  1002. </p>
  1003. </nav>
  1004. <h2>
  1005. <a href="/david/2024/02/23/" title="Lien permanent vers cet article">Préparatifs</a> <time datetime="2024-02-23">23 février 2024</time>
  1006. </h2>
  1007. <p>J’admire les personnes qui arrivent à prendre une photo de leur sac de manière éclatée avant de partir. J’ai toujours pas mal de choses à rajouter au dernier moment, j’essaye au moins d’avoir les basiques de façon&nbsp;certaine.</p>
  1008. <a href="#hr-86" title="Lien vers cette section de la page"><hr id="hr-86" /></a>
  1009. <blockquote lang="en">
  1010. <p>A utopia for web that I can envision would have <mark>rich component creation</mark> and manipulation capabilities in built as a part of spec and browsers implementing them. Hence, we won’t have to include any of the heavy third party libraries which will give faster load times to the users by saving the download costs by a huge&nbsp;amounts.</p>
  1011. <p><cite><em><a data-link-domain="codeburst.io" href="https://codeburst.io/generating-config-driven-dynamic-forms-using-web-components-7c8d400f7f2e" hreflang="en"
  1012. title="Consultation de l’article (anglais)">Generating Config driven Dynamic Forms using Web Components</a>
  1013. <a href="/david/cache/2024/5da390fa8d93278cd62233d3915729e7/" hreflang="en"
  1014. data-tippy data-description="Over the years, we as UI Developers have become so habitual of using the already available UI Frameworks and Libraries like React, Angular, Vue etc due to the increasing demand of shipping things…"
  1015. data-source="https://codeburst.io/generating-config-driven-dynamic-forms-using-web-components-7c8d400f7f2e"
  1016. data-date="2024-02-23"
  1017. data-favicon="https://miro.medium.com/v2/resize:fill:256:256/1*mNmxddJJTzkiBfK77mWuGA.png"
  1018. data-domain="codeburst.io"
  1019. ><svg xmlns="http://www.w3.org/2000/svg"
  1020. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1021. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1022. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1023. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1024. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1025. </svg>
  1026. <span class="sr-only">[archive]</span></a></em></cite></p>
  1027. </blockquote>
  1028. <p>Aujourd’hui, j’ai exploré les façons de faire des formulaires en assemblant des <em>Web Components</em>. Cet article de 2019&nbsp;donne un bon aperçu de ce qu’il est possible de faire. Il y a aussi <a data-link-domain="dev.to" href="https://dev.to/stuffbreaker/custom-forms-with-web-components-and-elementinternals-4jaj" hreflang="en"
  1029. title="Consultation de l’article (anglais)">cet autre article</a>
  1030. <a href="/david/cache/2024/2cadf792810f64540605c86a1431cb6b/" hreflang="en"
  1031. data-tippy data-description="The ElementInternals API allows us to create form-associated custom elements which we can use to make our own supercharged form fields."
  1032. data-source="https://dev.to/stuffbreaker/custom-forms-with-web-components-and-elementinternals-4jaj"
  1033. data-date="2024-02-23"
  1034. data-favicon="https://media.dev.to/cdn-cgi/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"
  1035. data-domain="dev.to"
  1036. ><svg xmlns="http://www.w3.org/2000/svg"
  1037. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1038. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1039. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1040. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1041. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1042. </svg>
  1043. <span class="sr-only">[archive]</span></a> qui m’a permis de découvrir <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals">ElementInternals</a>. Des frameworks comme Shoelace <a data-link-domain="shoelace.style" href="https://shoelace.style/getting-started/form-controls">pourraient être inspirants</a> dans le&nbsp;domaine.</p>
  1044. <a href="#hr-87" title="Lien vers cette section de la page"><hr id="hr-87" /></a>
  1045. <blockquote lang="en">
  1046. <p>RH uses GNOME 3. Ubuntu used Unity, alienated a lot of people who only knew how to use Windows-like desktops, and that made Mint a huge success. GNOME 2&nbsp;got forked as MATE, and Mint adopted it, helping a lot. Mint also built its own fork of GNOME 3, Cinnamon. Formerly tiny niche desktops like Xfce and LXDE got a <em>huge</em> boost. Debian adopted GNOME 3&nbsp;and systemd, annoying lots of its developers and causing the Devuan fork to&nbsp;happen.</p>
  1047. <p><cite><em><a data-link-domain="liam-on-linux.dreamwidth.org" href="https://liam-on-linux.dreamwidth.org/85359.html" hreflang="en"
  1048. title="Consultation de l’article (anglais)">Everyone seems to forget why GNOME and GNOME 3&nbsp;and Unity happened</a>
  1049. <a href="/david/cache/2024/ecae6fcce7e86066e432b5f38b2299ca/" hreflang="en"
  1050. data-tippy data-description="That is *what* it came from, yes, but not *why*."
  1051. data-source="https://liam-on-linux.dreamwidth.org/85359.html"
  1052. data-date="2024-02-23"
  1053. data-favicon="https://liam-on-linux.dreamwidth.org/favicon.ico"
  1054. data-domain="liam-on-linux.dreamwidth.org"
  1055. ><svg xmlns="http://www.w3.org/2000/svg"
  1056. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1057. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1058. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1059. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1060. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1061. </svg>
  1062. <span class="sr-only">[archive]</span></a></em></cite></p>
  1063. </blockquote>
  1064. <p>Fascinante&nbsp;histoire.</p>
  1065. <a href="#hr-88" title="Lien vers cette section de la page"><hr id="hr-88" /></a>
  1066. <blockquote lang="en">
  1067. <p>As of version 2.1.0&nbsp;this project will split into Plausible Community Edition and Plausible Enterprise Edition. The Community Edition (CE) will remain completely open source under the AGPLv3 license. The Enterprise Edition (EE) will contain extra features that will be published as source-available on Github, but we do not grant rights for anyone else to use, distribute or otherwise exploit these&nbsp;features.</p>
  1068. <p><cite><em><a data-link-domain="github.com" href="https://github.com/plausible/analytics/releases/tag/v2.1.0-rc.0">Release notes de Plausible&nbsp;2.1.0</a></em></cite></p>
  1069. </blockquote>
  1070. <p>Des <a data-link-domain="plausible.io" href="https://plausible.io/blog/community-edition" hreflang="en"
  1071. title="Consultation de l’article (anglais)">raisons un peu plus détaillées</a>
  1072. <a href="/david/cache/2024/d6e0a9beec0623cc66cede135fc7acdc/" hreflang="en"
  1073. data-tippy data-description="We’re introducing the “free as in beer”, self-hosted and AGPL-licensed Plausible Community Edition (CE)."
  1074. data-source="https://plausible.io/blog/community-edition"
  1075. data-date="2024-02-23"
  1076. data-favicon="https://plausible.io/assets/images/icon/favicon-16x16.png"
  1077. data-domain="plausible.io"
  1078. ><svg xmlns="http://www.w3.org/2000/svg"
  1079. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1080. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1081. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1082. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1083. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1084. </svg>
  1085. <span class="sr-only">[archive]</span></a> ayant motivé ce&nbsp;choix.</p>
  1086. <nav>
  1087. <p>
  1088. <a href="/david/2024/apprentissage/"
  1089. title="Liste de tous les articles 2024 associés à cette étiquette"
  1090. rel="tag">#apprentissage</a>
  1091. <a href="/david/2024/processus/"
  1092. title="Liste de tous les articles 2024 associés à cette étiquette"
  1093. rel="tag">#processus</a>
  1094. <a href="/david/2024/web/"
  1095. title="Liste de tous les articles 2024 associés à cette étiquette"
  1096. rel="tag">#web</a>
  1097. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  1098. </p>
  1099. </nav>
  1100. <h2>
  1101. <a href="/david/2024/02/19/" title="Lien permanent vers cet article">Injection</a> <time datetime="2024-02-19">19 février 2024</time>
  1102. </h2>
  1103. <blockquote lang="en">
  1104. <p>It’s fun to think of <mark>other possible uses…</mark> Perhaps you could pull in HTML modules along with their relevant CSS link. Or embed a tweet or code examples in documentation or a blog post. It could probably even be used to load and apply a regular <code>rel=stylesheet</code> link asynchronously, and at a low priority, which is otherwise surprisingly hard to do (note: I didn’t test this idea much to say for&nbsp;sure).</p>
  1105. <p><cite><em><a data-link-domain="filamentgroup.com" href="https://www.filamentgroup.com/lab/html-includes/" hreflang="en"
  1106. title="Consultation de l’article (anglais)">HTML Includes That Work Today</a>
  1107. <a href="/david/cache/2024/88df28660094efbc5a13bb09d70dfea6/" hreflang="en"
  1108. data-tippy data-description="Read this page on the Filament Group website"
  1109. data-source="https://www.filamentgroup.com/lab/html-includes/"
  1110. data-date="2024-02-19"
  1111. data-favicon="https://www.filamentgroup.com/images/icons/favicon-32x32.png"
  1112. data-domain="filamentgroup.com"
  1113. ><svg xmlns="http://www.w3.org/2000/svg"
  1114. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1115. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1116. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1117. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1118. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1119. </svg>
  1120. <span class="sr-only">[archive]</span></a></em></cite></p>
  1121. </blockquote>
  1122. <p>J’ai cette page ouverte dans un onglet depuis littéralement des années. C’est <a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/">Alexis</a> qui me l’a rappelé en partageant <a data-link-domain="leanrada.com" href="https://leanrada.com/htmz/">htmz</a> aujourd’hui qui va un tout petit peu plus&nbsp;loin.</p>
  1123. <p>Voilà le code en&nbsp;question&nbsp;:</p>
  1124. <pre><code>&lt;iframe
  1125. src=&quot;/static/david/2024/test-injection.html&quot;
  1126. onload=&quot;
  1127. this.before(
  1128. (
  1129. this.contentDocument.body||this.contentDocument
  1130. ).children[0]
  1131. );
  1132. this.remove()
  1133. &quot;
  1134. hidden&gt;
  1135. &lt;/iframe&gt;
  1136. </code></pre>
  1137. <p>En résumé, on prend le code l’<code>iframe</code> et on l’injecte au chargement dans le document en cours. Voici un exemple (pas sûr que ça fonctionne depuis un&nbsp;agrégateur…)&nbsp;:</p>
  1138. <iframe src="/static/david/2024/test-injection.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()" hidden></iframe>
  1139. <p>J’ai ajouté l’attribut <code>hidden</code> à la proposition initiale pour éviter le flash. Si vous inspectez le code, vous constatez que le paragraphe précédent tout à fait classique alors qu’il s’agissait d’une <code>iframe</code> (sauf si vous avez une extension qui bloque les <code>iframe</code> bien sûr). Jusque là c’est <a data-link-domain="css-tricks.com" href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/" hreflang="en"
  1140. title="Consultation de l’article (anglais)">une forme d’inclusion</a>
  1141. <a href="/david/cache/2024/6bfc6bd7bc1d9158aa7f6591123e7f4b/" hreflang="en"
  1142. data-tippy data-description="It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that"
  1143. data-source="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/"
  1144. data-date="2024-02-19"
  1145. data-favicon="https://css-tricks.com/favicon.svg"
  1146. data-domain="css-tricks.com"
  1147. ><svg xmlns="http://www.w3.org/2000/svg"
  1148. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1149. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1150. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1151. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1152. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1153. </svg>
  1154. <span class="sr-only">[archive]</span></a> mais rien de bien&nbsp;utile.</p>
  1155. <p>Ce qui devient un peu plus fou serait de pouvoir injecter un <em>Web Component</em> de cette façon&#8239;! Le problème étant que le <code>this.remove()</code> est exécuté avant le chargement du script de l’<code>iframe</code>… et si on le retire on conserve cet élément <code>hidden</code> dans le document. Ce n’est pas critique mais ce n’est pas très élégant non plus, d’autant que cela signifie que le composant est défini et instancié deux&nbsp;fois.</p>
  1156. <style>para-graph { background: paleturquoise; color: black; }</style>
  1157. <iframe src="/static/david/2024/test-injection-web-component.html" onload= "this.before((this.contentDocument.body||this.contentDocument).children[0]);this.before(this.contentDocument.scripts[0])" hidden></iframe>
  1158. <p>Il y a probablement des choses qui m’échappent mais il se fait&nbsp;tard.</p>
  1159. <p><em>To be&nbsp;continued…</em></p>
  1160. <a href="#hr-79" title="Lien vers cette section de la page"><hr id="hr-79" /></a>
  1161. <p>Découvertes du jour&nbsp;: <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base"><code>&lt;base&gt;</code></a> et <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis">globalThis</a>.</p>
  1162. <p>Aussi, il n’est <a data-link-domain="github.com" href="https://github.com/django/django/commit/b7f500396e05cd1f0bb8901fce16e2d8393d2779">pas forcément indiqué</a> de générer une <code>SECRET_KEY</code> avec Django, il vaut mieux le faire en Python&nbsp;directement&nbsp;:</p>
  1163. <pre><code>[depuis un shell]
  1164. $ python3 -c 'import secrets; print(secrets.token_hex(100))'
  1165. </code></pre>
  1166. <a href="#hr-80" title="Lien vers cette section de la page"><hr id="hr-80" /></a>
  1167. <blockquote lang="en">
  1168. <p>So, what’s the fun of writing on the internet anymore? Well, if your aim is to be respected as an author, there’s probably not much fun to be had here at all. Don’t write online for fame and glory. Oblivion, obscurity and exploitation are all but guaranteed. Write here because <em>ideas</em> matter, not authorship. Write here because the more robots, pirates, and single-minded trolls swallow up cyberspace, <mark>the more we need independent writing in order to think new thoughts in the future</mark> — even if your words are getting dished up and plated by an&nbsp;algorithm.</p>
  1169. <p><cite><em><a data-link-domain="jamesshelley.com" href="https://jamesshelley.com/blog/writing-on-the-internet.html" hreflang="en"
  1170. title="Consultation de l’article (anglais)">What’s the fun in writing on the internet anymore?</a>
  1171. <a href="/david/cache/2024/a005801f0e596f9ecb99037a992ecc1b/" hreflang="en"
  1172. data-tippy data-description="The moment you release your words, you relinquish all control."
  1173. data-source="https://jamesshelley.com/blog/writing-on-the-internet.html"
  1174. data-date="2024-02-19"
  1175. data-favicon="https://jamesshelley.com/images/favicon.png"
  1176. data-domain="jamesshelley.com"
  1177. ><svg xmlns="http://www.w3.org/2000/svg"
  1178. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1179. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1180. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1181. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1182. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1183. </svg>
  1184. <span class="sr-only">[archive]</span></a></em></cite></p>
  1185. </blockquote>
  1186. <p>Rester (et alimenter la machine) ou quitter (et laisser l’espace à la&nbsp;machine).</p>
  1187. <p>Je n’aime pas beaucoup la <a data-link-domain="maggieappleton.com" href="https://maggieappleton.com/ai-dark-forest" hreflang="en"
  1188. title="Consultation de l’article (anglais)">métaphore de la forêt noire</a>
  1189. <a href="/david/cache/2024/140458968f9f7da7d14e181d0a80e799/" hreflang="en"
  1190. data-tippy data-description="Proving you're a human on a web flooded with generative AI content"
  1191. data-source="https://maggieappleton.com/ai-dark-forest"
  1192. data-date="2024-02-19"
  1193. data-favicon="https://maggieappleton.com//images/favicon/favicon.ico"
  1194. data-domain="maggieappleton.com"
  1195. ><svg xmlns="http://www.w3.org/2000/svg"
  1196. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1197. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1198. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1199. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1200. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1201. </svg>
  1202. <span class="sr-only">[archive]</span></a> ces temps-ci car j’apprécie un peu trop les forêts pour ça. J’aurais davantage l’impression de faire partie d’une haie alors qu’il y a beaucoup de monoculture aux alentours. Avec les double sens que cette méta·phore&nbsp;implique.</p>
  1203. <nav>
  1204. <p>
  1205. <a href="/david/2024/apprentissage/"
  1206. title="Liste de tous les articles 2024 associés à cette étiquette"
  1207. rel="tag">#apprentissage</a>
  1208. <a href="/david/2024/laboratoire/"
  1209. title="Liste de tous les articles 2024 associés à cette étiquette"
  1210. rel="tag">#laboratoire</a>
  1211. <a href="/david/2024/web/"
  1212. title="Liste de tous les articles 2024 associés à cette étiquette"
  1213. rel="tag">#web</a>
  1214. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  1215. </p>
  1216. </nav>
  1217. <h2>
  1218. <a href="/david/2024/02/13/" title="Lien permanent vers cet article">Feutrage</a> <time datetime="2024-02-13">13 février 2024</time>
  1219. </h2>
  1220. <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>
  1221. <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>
  1222. <figure>
  1223. <a href="/static/david/2024/2024-02-13-laine-brute.jpg"
  1224. title="Cliquer pour une version haute résolution">
  1225. <img
  1226. src="/static/david/2024/2024-02-13-laine-brute.jpg"
  1227. width="2464" height="3285"
  1228. 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"
  1229. sizes="min(100vw, calc(100vh * 2464 / 3285))"
  1230. loading="lazy"
  1231. decoding="async"
  1232. alt="De la laine relativement brute.">
  1233. </a>
  1234. <figcaption>De la laine relativement&nbsp;brute.</figcaption>
  1235. </figure>
  1236. <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>
  1237. <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>
  1238. <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>
  1239. <ol>
  1240. <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>
  1241. <li>On pose le patron dans le bac, sur la natte + papier&nbsp;bulles.</li>
  1242. <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>
  1243. <li>On recouvre avec le tapis en plastique puis on arrose d’eau très chaude et de&nbsp;savon.</li>
  1244. <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>
  1245. <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>
  1246. <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>
  1247. <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>
  1248. <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>
  1249. <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>
  1250. <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>
  1251. <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>
  1252. <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>
  1253. <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>
  1254. </ol>
  1255. <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>
  1256. <figure>
  1257. <a href="/static/david/2024/2024-02-13-mitaines-feutrage.jpg"
  1258. title="Cliquer pour une version haute résolution">
  1259. <img
  1260. src="/static/david/2024/2024-02-13-mitaines-feutrage.jpg"
  1261. width="3024" height="4032"
  1262. 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"
  1263. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  1264. loading="lazy"
  1265. decoding="async"
  1266. alt="Les mitaines réalisées qui sèchent verticalement.">
  1267. </a>
  1268. <figcaption>Le résultat après 4 heures de travail et pas mal d’huile de&nbsp;coude.</figcaption>
  1269. </figure>
  1270. <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>
  1271. <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>
  1272. <nav>
  1273. <p>
  1274. <a href="/david/2024/apprentissage/"
  1275. title="Liste de tous les articles 2024 associés à cette étiquette"
  1276. rel="tag">#apprentissage</a>
  1277. <a href="/david/2024/processus/"
  1278. title="Liste de tous les articles 2024 associés à cette étiquette"
  1279. rel="tag">#processus</a>
  1280. <a href="/david/2024/protopie/"
  1281. title="Liste de tous les articles 2024 associés à cette étiquette"
  1282. rel="tag">#protopie</a>
  1283. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  1284. </p>
  1285. </nav>
  1286. <h2>
  1287. <a href="/david/2024/02/12/" title="Lien permanent vers cet article">Renards</a> <time datetime="2024-02-12">12 février 2024</time>
  1288. </h2>
  1289. <p>Entre chien et loup, le renard pointe le bout de son nez pointu. Après avoir attendu patiemment attendu que mon appareil photo arrive à ses limites, le voilà avançant vers moi d’un pas&nbsp;décidé.</p>
  1290. <figure>
  1291. <a href="/static/david/2024/2024-02-12-renards-1.jpg"
  1292. title="Cliquer pour une version haute résolution">
  1293. <img
  1294. src="/static/david/2024/2024-02-12-renards-1.jpg"
  1295. width="3456" height="2304"
  1296. srcset="/static/david/2024/2024-02-12-renards-1.jpg 3456w, /static/david/2024/2024-02-12-renards-1_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-1_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-1_1320x880.jpg 1320w"
  1297. sizes="min(100vw, calc(100vh * 3456 / 2304))"
  1298. loading="lazy"
  1299. decoding="async"
  1300. alt="Un renard trottinant sur la rivière gelée.">
  1301. </a>
  1302. <figcaption>Un renard trottinant sur la rivière&nbsp;gelée.</figcaption>
  1303. </figure>
  1304. <p>Même en poussant les réglages au maximum lors du développement, je me rends bien compte que je suis dans la nuit bientôt noire. Alors je tente d’utiliser l’éclairage de la ville, la pollution lumineuse se reflétant sur la neige m’offre de précieux <em>stops</em>&nbsp;photographiques.</p>
  1305. <figure>
  1306. <a href="/static/david/2024/2024-02-12-renards-2.jpg"
  1307. title="Cliquer pour une version haute résolution">
  1308. <img
  1309. src="/static/david/2024/2024-02-12-renards-2.jpg"
  1310. width="2560" height="3840"
  1311. srcset="/static/david/2024/2024-02-12-renards-2.jpg 2560w, /static/david/2024/2024-02-12-renards-2_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-2_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-2_1320x880.jpg 1320w"
  1312. sizes="min(100vw, calc(100vh * 2560 / 3840))"
  1313. loading="lazy"
  1314. decoding="async"
  1315. alt="Un renard sur la rivière gelée avec un pont en fond.">
  1316. </a>
  1317. <figcaption>Un renard sur la rivière gelée avec un pont en&nbsp;fond.</figcaption>
  1318. </figure>
  1319. <p>L’équivalent 800mm que je tiens à bout de bras n’aide pas à faire baisser les ISO, tant pis, je compte trop sur ma mobilité pour être capable de tenter une approche. La neige est bien trop gelée et bruyante pour que j’ai la moindre chance. Un skieur nocturne détourne leur&nbsp;attention.</p>
  1320. <figure>
  1321. <a href="/static/david/2024/2024-02-12-renards-3.jpg"
  1322. title="Cliquer pour une version haute résolution">
  1323. <img
  1324. src="/static/david/2024/2024-02-12-renards-3.jpg"
  1325. width="3840" height="2560"
  1326. srcset="/static/david/2024/2024-02-12-renards-3.jpg 3840w, /static/david/2024/2024-02-12-renards-3_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-3_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-3_1320x880.jpg 1320w"
  1327. sizes="min(100vw, calc(100vh * 3840 / 2560))"
  1328. loading="lazy"
  1329. decoding="async"
  1330. alt="Deux renards&nbsp;: l’un sur la rivière, l’autre sur un ponton abandonné.">
  1331. </a>
  1332. <figcaption>Deux renards : l’un sur la rivière, l’autre sur un ponton&nbsp;abandonné.</figcaption>
  1333. </figure>
  1334. <p>La luminosité est telle que je vois la lumière de mon autofocus qui se reflète, bien rouge, au fond de ses yeux à une cinquantaine de mètres. Iel m’attend. Je ne saurais jamais jusqu’à quelle distance est-ce que l’on se seraient acceptés car une coureuse met fin à ce tête-à-tête nocturne. Si nous sommes tous le deux routiniers, nous aurons certainement d’autres occasions de nous&nbsp;croiser.</p>
  1335. <figure>
  1336. <a href="/static/david/2024/2024-02-12-renards-4.jpg"
  1337. title="Cliquer pour une version haute résolution">
  1338. <img
  1339. src="/static/david/2024/2024-02-12-renards-4.jpg"
  1340. width="3840" height="2560"
  1341. srcset="/static/david/2024/2024-02-12-renards-4.jpg 3840w, /static/david/2024/2024-02-12-renards-4_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-4_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-4_1320x880.jpg 1320w"
  1342. sizes="min(100vw, calc(100vh * 3840 / 2560))"
  1343. loading="lazy"
  1344. decoding="async"
  1345. alt="Un renard qui me regarde depuis le chemin.">
  1346. </a>
  1347. <figcaption>Un renard qui me regarde depuis le&nbsp;chemin.</figcaption>
  1348. </figure>
  1349. <p>Photographiquement parlant, je crois que je préfère la prise floue de la veille. Une forme d’acceptation qu’il puisse encore y avoir des animaux libres d’une capture trop&nbsp;nette.</p>
  1350. <figure>
  1351. <a href="/static/david/2024/2024-02-12-renards-5.jpg"
  1352. title="Cliquer pour une version haute résolution">
  1353. <img
  1354. src="/static/david/2024/2024-02-12-renards-5.jpg"
  1355. width="3840" height="2560"
  1356. srcset="/static/david/2024/2024-02-12-renards-5.jpg 3840w, /static/david/2024/2024-02-12-renards-5_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-5_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-5_1320x880.jpg 1320w"
  1357. sizes="min(100vw, calc(100vh * 3840 / 2560))"
  1358. loading="lazy"
  1359. decoding="async"
  1360. alt="Un renard flou qui se reflète dans l’eau de la rivière qui fond.">
  1361. </a>
  1362. <figcaption>Vais-je passer à travers ? Je ne suis pas le seul à me poser ces&nbsp;questions…</figcaption>
  1363. </figure>
  1364. <p>Merci au parent devant l’école qui m’a dit qu’il n’y avait pas de renards dans le parc cette année. Mon esprit de con·tradiction a fait le&nbsp;reste.</p>
  1365. <a href="#hr-71" title="Lien vers cette section de la page"><hr id="hr-71" /></a>
  1366. <blockquote>
  1367. <p>Les carnets Web servent également à faire rêver les autres de façon inattendue et la plupart du temps silencieusement. N’hésitez pas à publier. Vous toucherez le cœur et l’imagination d’une personne quelque part dans le&nbsp;monde.</p>
  1368. <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/02/04/enfant" hreflang="fr"
  1369. title="Consultation de l’article">D’un enfant à l’autre</a>
  1370. <a href="/david/cache/2024/40a1a0f90d7ac25a6150e6e27ac310d4/" hreflang="fr"
  1371. data-tippy data-description=""
  1372. data-source="https://www.la-grange.net/2024/02/04/enfant"
  1373. data-date="2024-02-12"
  1374. data-favicon="https://www.la-grange.net/favicon.ico"
  1375. data-domain="la-grange.net"
  1376. ><svg xmlns="http://www.w3.org/2000/svg"
  1377. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1378. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1379. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1380. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1381. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1382. </svg>
  1383. <span class="sr-only">[archive]</span></a></em></cite></p>
  1384. </blockquote>
  1385. <p>🧡</p>
  1386. <nav>
  1387. <p>
  1388. <a href="/david/2024/apprentissage/"
  1389. title="Liste de tous les articles 2024 associés à cette étiquette"
  1390. rel="tag">#apprentissage</a>
  1391. <a href="/david/2024/echanges/"
  1392. title="Liste de tous les articles 2024 associés à cette étiquette"
  1393. rel="tag">#échanges</a>
  1394. <a href="/david/2024/photographie/"
  1395. title="Liste de tous les articles 2024 associés à cette étiquette"
  1396. rel="tag">#photographie</a>
  1397. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  1398. </p>
  1399. </nav>
  1400. <h2>
  1401. <a href="/david/2024/02/09/" title="Lien permanent vers cet article">Version</a> <time datetime="2024-02-09">9 février 2024</time>
  1402. </h2>
  1403. <p>Il y a cette appréhension à sortir une version&nbsp;2&nbsp;qui est bloquante sur pas mal de projets / produits / outils. Réduire ses ambitions quitte à planifier les versions 3&nbsp;et 4&nbsp;par la même occasion est un moyen de faire baisser la pression de ses propres attentes. Ce n’est plus <strong>l</strong>’évènement mais <em>un</em> évènement parmi les suivants qui vient s’intégrer dans une dynamique plus&nbsp;globale.</p>
  1404. <p>Il y a d’un côté l’<a href="/david/2024/01/19/#hr-38">effort pour les personnes qui vont l’utiliser</a> et de l’autre <a data-link-domain="yolover.org" href="https://yolover.org/" hreflang="en"
  1405. title="Consultation de l’article (anglais)">la motivation</a>
  1406. <a href="/david/cache/2024/959374400b4bb6d58c74116ffd08281b/" hreflang="en"
  1407. data-tippy data-description="Realistic versioning for modern software."
  1408. data-source="https://yolover.org/"
  1409. data-date="2024-02-09"
  1410. data-favicon="https://yolover.org/favicon.png"
  1411. data-domain="yolover.org"
  1412. ><svg xmlns="http://www.w3.org/2000/svg"
  1413. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1414. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1415. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1416. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1417. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1418. </svg>
  1419. <span class="sr-only">[archive]</span></a> pour les personnes qui vont développer et maintenir le&nbsp;produit.</p>
  1420. <p>Je caricature mais on est&nbsp;vendredi.</p>
  1421. <nav>
  1422. <p>
  1423. <a href="/david/2024/apprentissage/"
  1424. title="Liste de tous les articles 2024 associés à cette étiquette"
  1425. rel="tag">#apprentissage</a>
  1426. <a href="/david/2024/decision/"
  1427. title="Liste de tous les articles 2024 associés à cette étiquette"
  1428. rel="tag">#décision</a>
  1429. <a href="/david/2024/opensource/"
  1430. title="Liste de tous les articles 2024 associés à cette étiquette"
  1431. rel="tag">#opensource</a>
  1432. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  1433. </p>
  1434. </nav>
  1435. <h2>
  1436. <a href="/david/2024/02/08/" title="Lien permanent vers cet article">Écoute</a> <time datetime="2024-02-08">8 février 2024</time>
  1437. </h2>
  1438. <blockquote>
  1439. <p>Ceci est tellement vrai que nous sommes seuls au monde dans la communication que, lorsque quelqu’un écoute et lorsque la communication réussit, c’est un miracle étincelant. […] C’est tellement rare, c’est tellement improbable, c’est tellement miraculeux que c’est peut-être ça la civilisation et la culture. <mark>Rencontrer quelqu’un qui&nbsp;écoute.</mark></p>
  1440. <p><cite><em>Le Bonheur possible</em>, Michel Serres&nbsp;(1997)</cite></p>
  1441. </blockquote>
  1442. <p>Exercice de mise en forme des <a href="/david/2024/02/02/" title="Valeurs">valeurs</a> émergeantes des valeurs de Scopyleft aujourd’hui. Je suis content d’y reconnaître chaque personne et <em>en même temps</em> un collectif qui se découvre et qui apprend à faire ensemble. Avoir 8&nbsp;valeurs qui se démarquent dans 3&nbsp;contextes différents me donne davantage d’information et d’envie qu’une poignée affichée sur un site web. Un maillage de compréhension réciproque est en train d’être tissé entre&nbsp;nous.</p>
  1443. <blockquote>
  1444. <p>Ce besoin de venir (re)questionner la manière de faire ensemble est nécessaire à ces collectifs. Ce n’est pas dans l’objectif d’un travail évaluatif des bonnes ou mauvaises pratiques, mais bien dans un désir d’entretenir la flamme collective. Ces collectifs ont besoin de se questionner sans cesse sur leurs pratiques. Sur les raisons qui les poussent à faire ensemble. Sans quoi, l’activité du groupe piétine et ses membres peuvent se dégager du projet commun. C’est une manière de redonner de l’élan et de la motivation au collectif. Ce besoin de se redire&nbsp;: «&nbsp;pourquoi nous sommes-nous mis ensemble et où voulions-nous&nbsp;aller&#8239;?&nbsp;»</p>
  1445. <p><cite><em><a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/lart-de-conter-nos-experiences-collectives.html" hreflang="fr"
  1446. title="Consultation de l’article">L’art de conter nos expériences collectives</a>
  1447. <a href="/david/cache/2024/bd0c3ccce5c3f229f84c6c132ebdaca9/" hreflang="fr"
  1448. data-tippy data-description="Faire récit à l'heure du storytelling par Benjamin Roux"
  1449. data-source="https://blog.notmyidea.org/lart-de-conter-nos-experiences-collectives.html"
  1450. data-date="2024-02-08"
  1451. data-favicon=""
  1452. data-domain="blog.notmyidea.org"
  1453. ><svg xmlns="http://www.w3.org/2000/svg"
  1454. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1455. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1456. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1457. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1458. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1459. </svg>
  1460. <span class="sr-only">[archive]</span></a></em></cite></p>
  1461. </blockquote>
  1462. <nav>
  1463. <p>
  1464. <a href="/david/2024/apprentissage/"
  1465. title="Liste de tous les articles 2024 associés à cette étiquette"
  1466. rel="tag">#apprentissage</a>
  1467. <a href="/david/2024/equipe/"
  1468. title="Liste de tous les articles 2024 associés à cette étiquette"
  1469. rel="tag">#équipe</a>
  1470. <a href="/david/2024/evolution/"
  1471. title="Liste de tous les articles 2024 associés à cette étiquette"
  1472. rel="tag">#évolution</a>
  1473. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  1474. </p>
  1475. </nav>
  1476. <h2>
  1477. <a href="/david/2024/02/04/" title="Lien permanent vers cet article">Tooltipopover</a> <time datetime="2024-02-04">4 février 2024</time>
  1478. </h2>
  1479. <blockquote lang="en">
  1480. <p><a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a> – This provides a declarative mechanism to create content that always renders in the topmost-layer, so that it overlays other web page content. <mark>This can be useful for building features like tooltips</mark> and notifications. Support for popover was the #1&nbsp;author request in the recent State of HTML&nbsp;survey.</p>
  1481. <p><cite><em><a data-link-domain="hacks.mozilla.org" href="https://hacks.mozilla.org/2024/02/announcing-interop-2024/" hreflang="en"
  1482. title="Consultation de l’article (anglais)">Announcing Interop 2024</a>
  1483. <a href="/david/cache/2024/0deb984b2f799d391607afcaa488446d/" hreflang="en"
  1484. data-tippy data-description="Following the success of Interop 2023, we are pleased to confirm that the project will continue in 2024 with a new selection of focus areas."
  1485. data-source="https://hacks.mozilla.org/2024/02/announcing-interop-2024/"
  1486. data-date="2024-02-03"
  1487. data-favicon="https://hacks.mozilla.org/wp-content/themes/Hax/favicon.ico"
  1488. data-domain="hacks.mozilla.org"
  1489. ><svg xmlns="http://www.w3.org/2000/svg"
  1490. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1491. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1492. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1493. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1494. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1495. </svg>
  1496. <span class="sr-only">[archive]</span></a></em></cite></p>
  1497. </blockquote>
  1498. <p>Ma première intuition pour enrichir les liens de la version archivée était de passer par des éléments natifs (comme toujours). Initialement, j’ai même envisagé un <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog">élément <code>&lt;dialog&gt;</code></a> qui est déjà mieux supporté mais ça rentrait mal dans le DOM là où je voulais l’insérer. Je me met alors en quête d’un <em><a data-link-domain="github.com" href="https://github.com/oddbird/popover-polyfill">polyfill</a></em> pour la Popover API qui pourrait convenir mais j’ai un peu peur des effets de bord vu que je découvre et qu’il y a quand même <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using">pas mal de possibilités</a>. J’en suis même à me <a data-link-domain="open-ui.org" href="https://open-ui.org/components/popover.research.explainer/" hreflang="en"
  1499. title="Consultation de l’article (anglais)">lire une bonne page de doc</a>
  1500. <a href="/david/cache/2024/bf61b62532f71e39e7b92c76dc36bb0f/" hreflang="en"
  1501. data-tippy data-description="A very common UI pattern on the Web, for which there is no native API, is “popover UI”, also sometimes called “popovers”, “pop up UI”, or “popovers”. Popovers are a general class of UI that have three common behaviors"
  1502. data-source="https://open-ui.org/components/popover.research.explainer/"
  1503. data-date="2024-02-03"
  1504. data-favicon="https://open-ui.org/images/favicon-32x32.png"
  1505. data-domain="open-ui.org"
  1506. ><svg xmlns="http://www.w3.org/2000/svg"
  1507. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1508. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1509. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1510. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1511. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1512. </svg>
  1513. <span class="sr-only">[archive]</span></a> pour essayer de comprendre la distinction entre les&nbsp;deux.</p>
  1514. <p>Je finis par abandonner cette piste et je me dis que ça pourrait être un <em>Web Component</em> intéressant. Je m’arrache les cheveux un bon petit moment sur le positionnement et je capitule en me disant qu’il y a déjà des personnes qui ont produit des outils comme <a data-link-domain="floating-ui.com" href="https://floating-ui.com/">Floating UI</a> ou <a data-link-domain="atomiks.github.io" href="https://atomiks.github.io/tippyjs/">Tippy.js</a>. Choisir c’est renoncer… et j’ai fait les deux à la fois en optant pour Tippy qui <a data-link-domain="atomiks.github.io" href="https://atomiks.github.io/tippyjs/v6/accessibility/" hreflang="en"
  1515. title="Consultation de l’article (anglais)">prend soin de l’accessibilité</a>
  1516. <a href="/david/cache/2024/af0aee71fef1821c89ce368622f9a464/" hreflang="en"
  1517. data-tippy data-description="Tooltip and popovers are usually not mouse-only UI elements. If vital functionality or information is contained within them, they should be accessible to keyboard and touch inputs so that users who navigate interfaces without using a mouse are not locked out."
  1518. data-source="https://atomiks.github.io/tippyjs/v6/accessibility/"
  1519. data-date="2024-02-03"
  1520. data-favicon="https://atomiks.github.io/tippyjs/favicon-32x32.png?v=68cd85fe631cbce4dad8be8ef26f93f3"
  1521. data-domain="atomiks.github.io"
  1522. ><svg xmlns="http://www.w3.org/2000/svg"
  1523. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1524. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1525. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1526. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1527. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1528. </svg>
  1529. <span class="sr-only">[archive]</span></a>. J’ai trop besoin d’avoir <em>l’expérience de l’interface</em> pour pouvoir affiner par la suite et faire les choses à ma&nbsp;sauce.</p>
  1530. <p>N’hésitez pas à jouer avec et à me faire des retours, c’est amené à&nbsp;évoluer.</p>
  1531. <a href="#hr-65" title="Lien vers cette section de la page"><hr id="hr-65" /></a>
  1532. <blockquote lang="en">
  1533. <p>My recipe for fiction set ten years in the future used to be 90% already-here, 9% not-here-yet but predictable, and 1% who-ordered-that. But <mark>unfortunately the ratios have changed.</mark> I think we're now down to maybe 80% already-here —climate change takes a huge toll on infrastructure— then 15% not-here-yet but predictable, and a whopping 5% of utterly unpredictable deep&nbsp;craziness.</p>
  1534. <p><cite><em><a data-link-domain="antipope.org" href="https://www.antipope.org/charlie/blog-static/2018/01/dude-you-broke-the-future.html" hreflang="en"
  1535. title="Consultation de l’article (anglais)">Dude, you broke the future!</a>
  1536. <a href="/david/cache/2024/71b177818657a209fc76f23c08c21d25/" hreflang="en"
  1537. data-tippy data-description="In this talk, author Charles Stross will give a rambling, discursive, and angry tour of what went wrong with the 21st century, why we didn't see it coming, where we can expect it to go next, and a few suggestions for what to do about it if we don't like it."
  1538. data-source="https://www.antipope.org/charlie/blog-static/2018/01/dude-you-broke-the-future.html"
  1539. data-date="2024-02-03"
  1540. data-favicon="https://www.antipope.org/favicon.ico"
  1541. data-domain="antipope.org"
  1542. ><svg xmlns="http://www.w3.org/2000/svg"
  1543. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1544. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1545. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1546. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1547. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1548. </svg>
  1549. <span class="sr-only">[archive]</span></a></em></cite></p>
  1550. </blockquote>
  1551. <p>Cela me rappelle une discussion récente au sujet du manque de pertinence de la météo et de la difficulté à faire de la prédiction sur des données rendues obsolètes par le changement climatique. Les modèles ne sont pas (encore&#8239;?) adaptés à un tel&nbsp;chaos.</p>
  1552. <p>Manifestement, les écrivains non&nbsp;plus.</p>
  1553. <blockquote lang="en">
  1554. <p>Someone out there is working on it: a geolocation-aware social media scraping deep learning application, that uses a gamified, competitive interface to reward its “players” for joining in acts of mob violence against whoever the app developer hates. Probably it has an inoccuous-seeming but highly addictive training mode to get the users accustomed to working in teams and obeying the app's instructions—think Ingress or Pokemon Go. Then, at some pre-planned zero hour, <mark>it switches mode and starts rewarding players for violence</mark>—players who have been primed to think of their targets as vermin, by a steady drip-feed of micro-targeted dehumanizing propaganda delivered over a period of&nbsp;months.</p>
  1555. <p><cite><em>Ibid.</em></cite></p>
  1556. </blockquote>
  1557. <p>Ah si en&nbsp;fait&nbsp;😬.</p>
  1558. <a href="#hr-66" title="Lien vers cette section de la page"><hr id="hr-66" /></a>
  1559. <blockquote lang="en">
  1560. <p>If we want a system that is consistent with the flourishing of life on earth, we will need a system that mimics nature. Our current economic model doesn’t - for many reasons - and needs to change. Looking at nature, including our own human nature in our private lives, gives us many ideas for what this new, harmonious system could look&nbsp;like.</p>
  1561. <p><cite><em><a data-link-domain="erinremblance.substack.com" href="https://erinremblance.substack.com/p/we-are-all-socialists-in-our-private" hreflang="en"
  1562. title="Consultation de l’article (anglais)">“We Are All Socialists in Our Private Lives”</a>
  1563. <a href="/david/cache/2024/f5b5c3dff862cc55318684cf434b8d74/" hreflang="en"
  1564. data-tippy data-description="David Graeber gets to the heart of human (and more than human) nature."
  1565. data-source="https://erinremblance.substack.com/p/we-are-all-socialists-in-our-private"
  1566. data-date="2024-02-03"
  1567. data-favicon="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F79e3e832-517f-4ca3-989b-41eb1c8249d7%2Ffavicon-16x16.png"
  1568. data-domain="erinremblance.substack.com"
  1569. ><svg xmlns="http://www.w3.org/2000/svg"
  1570. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1571. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1572. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1573. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1574. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1575. </svg>
  1576. <span class="sr-only">[archive]</span></a></em></cite></p>
  1577. </blockquote>
  1578. <p>Il n’y a que les classes moyennes qui peuvent être socialistes. C’était tout l’enjeu de leur destruction pour n’avoir plus que des personnes qui aient peur de perdre le <em>trop peu</em> ou le <em>vraiment beaucoup</em> qu’elles ont. Et la peur rend la manipulation tellement plus&nbsp;facile…</p>
  1579. <blockquote lang="en">
  1580. <p>If a monkey hoarded more bananas than it could eat, while most of the other monkeys starved, scientists would study that monkey to figure out what the heck was wrong with it. When humans do it, we put them on the cover of&nbsp;Forbes.</p>
  1581. <p><cite><em>Ibid.</em></cite></p>
  1582. </blockquote>
  1583. <p>🙈</p>
  1584. <nav>
  1585. <p>
  1586. <a href="/david/2024/apprentissage/"
  1587. title="Liste de tous les articles 2024 associés à cette étiquette"
  1588. rel="tag">#apprentissage</a>
  1589. <a href="/david/2024/technique/"
  1590. title="Liste de tous les articles 2024 associés à cette étiquette"
  1591. rel="tag">#technique</a>
  1592. <a href="/david/2024/web/"
  1593. title="Liste de tous les articles 2024 associés à cette étiquette"
  1594. rel="tag">#web</a>
  1595. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  1596. </p>
  1597. </nav>
  1598. <h2>
  1599. <a href="/david/2024/01/30/" title="Lien permanent vers cet article">Équipe</a> <time datetime="2024-01-30">30 janvier 2024</time>
  1600. </h2>
  1601. <blockquote lang="en">
  1602. <p>We can typically break down collaboration groups into three&nbsp;types:</p>
  1603. <ul>
  1604. <li><strong>Real teams</strong> are all about solving the hardest, most complex problems. A diverse set of perspectives and skills is required to untangle these sorts of problems, for which there is no obvious solution. […]</li>
  1605. <li><strong>Working groups</strong> are all about efficiency. Most people spend most of their productive time in working groups. We’ll say it again: there is nothing wrong with being in a working group. […]</li>
  1606. <li><strong>Teams-in-name-only</strong> are groups that claim to be a team, but lack emotional commitment and shared purpose. They are like working groups, but without the efficient processes and individual responsibility. […]</li>
  1607. </ul>
  1608. <p>Although most people are told that they’re part of a team, the reality is that, more often than not, they’re members of a&nbsp;team-in-name-only.</p>
  1609. <p><cite><em><a data-link-domain="strategy-business.com" href="https://www.strategy-business.com/article/Teaming-is-hard-because-youre-probably-not-really-on-a-team" hreflang="en"
  1610. title="Consultation de l’article (anglais)">Teaming is hard because you’re probably not really on a team</a>
  1611. <a href="/david/cache/2024/9b4b5364526390ba1db9c4a651ea8311/" hreflang="en"
  1612. data-tippy data-description="Hybrid and remote work are complicating many of the collaborative challenges that were present long before the pandemic arrived."
  1613. data-source="https://www.strategy-business.com/article/Teaming-is-hard-because-youre-probably-not-really-on-a-team"
  1614. data-date="2024-01-29"
  1615. data-favicon="https://www.strategy-business.com/media/image/favicon22-16x16.png"
  1616. data-domain="strategy-business.com"
  1617. ><svg xmlns="http://www.w3.org/2000/svg"
  1618. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1619. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1620. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1621. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1622. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1623. </svg>
  1624. <span class="sr-only">[archive]</span></a></em></cite></p>
  1625. </blockquote>
  1626. <p>Devenir une (vraie) équipe prend du temps. Il faut même pouvoir envisager que cela ne devienne jamais le cas. Et ce n’est peut-être pas un souci si on n’a pas ces attentes… ou qu’on peut les&nbsp;attendre.</p>
  1627. <a href="#hr-56" title="Lien vers cette section de la page"><hr id="hr-56" /></a>
  1628. <p><a data-link-domain="github.com" href="https://github.com/zedeus/nitter/issues/1155#issuecomment-1913361757">Nitter est mort.</a> C’était le seul moyen qu’il me restait pour suivre les <em>drama</em> dans la communauté des échecs pro (et ils sont si&nbsp;nombreux&#8239;!).</p>
  1629. <p>Ce n’est pas si&nbsp;grave.</p>
  1630. <a href="#hr-57" title="Lien vers cette section de la page"><hr id="hr-57" /></a>
  1631. <figure>
  1632. <a href="/static/david/2024/2024-01-30-grande-boucle-hauts-sommets-st-donat.jpg"
  1633. title="Cliquer pour une version haute résolution">
  1634. <img
  1635. src="/static/david/2024/2024-01-30-grande-boucle-hauts-sommets-st-donat.jpg"
  1636. width="2560" height="1536"
  1637. srcset="/static/david/2024/2024-01-30-grande-boucle-hauts-sommets-st-donat.jpg 2560w, /static/david/2024/2024-01-30-grande-boucle-hauts-sommets-st-donat_660x440.jpg 660w, /static/david/2024/2024-01-30-grande-boucle-hauts-sommets-st-donat_990x660.jpg 990w, /static/david/2024/2024-01-30-grande-boucle-hauts-sommets-st-donat_1320x880.jpg 1320w"
  1638. sizes="min(100vw, calc(100vh * 2560 / 1536))"
  1639. loading="lazy"
  1640. decoding="async"
  1641. alt="Une carte de la grande boucle des hauts sommets de St-Donat.">
  1642. </a>
  1643. <figcaption>La grande boucle des hauts sommets de St-Donat. 84 km de sentiers. Je cherche encore les hauts sommets&nbsp;🙊.</figcaption>
  1644. </figure>
  1645. <p>Un autre lieu où il serait possible de <a href="/david/2024/01/19/" title="Marcher">marcher</a> en parlant, ou l’inverse. Il est même possible de prolonger en suivant le sentier inter-centre vers&nbsp;Mont-Tremblant.</p>
  1646. <a href="#hr-58" title="Lien vers cette section de la page"><hr id="hr-58" /></a>
  1647. <blockquote>
  1648. <p>Si j’écrivais <strong>faire ensemble</strong>, ça serait <em>faux</em>. C’est une combinaison de <strong>expérimenter des chemins vers un monde auquel j’aspire</strong> et de <strong>les partager</strong>. Ça m’intéresse de le faire, et ça ne m’intéresse pas si c’est juste pour moi. Le prompt, c’est écouter mes dissonnances cognitives et suivre le fil. Y cogiter à plusieurs, lire à ces sujets, tester seul ou à plusieurs, le restituer/mettre en œuvre. Arrêter, continuer, recommencer.</p>
  1649. <p><cite><em><a data-link-domain="détour.studio" href="https://d%C3%A9tour.studio/yearnotes/4/">Yearnotes #4 •&nbsp;détour.studio</a></em></cite></p>
  1650. </blockquote>
  1651. <p>J’aime beaucoup la mélodie des <em>Year</em>notes de&nbsp;Thomas.</p>
  1652. <nav>
  1653. <p>
  1654. <a href="/david/2024/apprentissage/"
  1655. title="Liste de tous les articles 2024 associés à cette étiquette"
  1656. rel="tag">#apprentissage</a>
  1657. <a href="/david/2024/equipe/"
  1658. title="Liste de tous les articles 2024 associés à cette étiquette"
  1659. rel="tag">#équipe</a>
  1660. <a href="/david/2024/processus/"
  1661. title="Liste de tous les articles 2024 associés à cette étiquette"
  1662. rel="tag">#processus</a>
  1663. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  1664. </p>
  1665. </nav>
  1666. <h2>
  1667. <a href="/david/2024/01/25/" title="Lien permanent vers cet article">Stratégie</a> <time datetime="2024-01-25">25 janvier 2024</time>
  1668. </h2>
  1669. <blockquote>
  1670. <p>La notion de stratégie revêt une dimension temporelle axée sur l’avenir. Mais lorsque nous tentons de nous engager sur l’avenir, nous nous retrouvons sur un terrain glissant. Trop souvent, la stratégie d’entreprise repose sur le principe erroné selon lequel il est possible de prédire l’avenir d’une manière fiable. Nassim Nicholas Taleb, l’un des auteurs les plus brillants sur l’illusion de la prédictibilité, a dit&nbsp;: «&nbsp;Nous ne pouvons pas vraiment planifier parce que nous ne comprenons pas l’avenir — mais ce n’est pas nécessairement une mauvaise nouvelle. Nous pourrions le faire <em>en gardant à l’esprit ces limitations.</em> Cela requiert simplement du&nbsp;courage.&nbsp;»</p>
  1671. <p>Eric Beinhocker va dans le même sens&nbsp;: «&nbsp;On s’attend à ce que les dirigeants d’entreprise se comportent en généraux courageux capables de prédire l’avenir, d’échafauder de grandes stratégies, de mener leurs troupes à une bataille couronnée de succès — puis ils sont virés à la première escarmouche perdue. Il faut des dirigeants courageux pour faire reculer cet état d’esprit, admettre l’incertitude inhérente à l’avenir et privilégier l’apprentissage et l’adaptation au détriment de la prédiction et de la&nbsp;planification.&nbsp;»</p>
  1672. <p>Comme le soulignent Taleb et Beinhocker, dans la plupart des organisations conventionnelles, la stratégie est l’essence même de l’approche prévision-contrôle — en déterminant une stratégie, nous fixons les bons objectifs, puis choisissons un itinéraire pour les atteindre. Toute cette approche repose sur un faux raisonnement. <mark>Bien qu’il soit possible de prévoir certaines choses, celles qu’il est impossible de prévoir sont bien plus nombreuses.</mark> Nous ne pouvons connaître la future situation économique ou celle de notre secteur d’activité, prévoir les innovations qui vont perturber le marché ou les opportunités susceptibles d’apparaître. Il serait plus facile de dresser la toute petite liste de ce que nous pouvons prévoir en toute fiabilité que d’énumérer l’imprévisible, que nous nous évertuons malgré tout trop souvent à essayer&nbsp;d’envisager.</p>
  1673. <p>Lorsque nous tentons de prédire l’avenir dans un univers imprévisible, nous nous berçons non seulement d’illusions, mais pire, nous diminuons notre faculté à détecter et nous ajuster à la réalité du&nbsp;moment.</p>
  1674. <p><cite><em>La révolution Holacracy</em>, Brian J. Robertson</cite></p>
  1675. </blockquote>
  1676. <p>Se donner les moyens et les conditions d’être à l’écoute est loin d’être trivial. Une fois le nez dans le guidon, il est facile de laisser pousser des œillères et de réduire son champ des possibles. Après tout, pourquoi avoir envie de faire évoluer une situation qui fonctionne bien&#8239;? Pourquoi envisager de nouveaux chemins avec leurs lots d’incertitudes et de dangers&#8239;? Mais c’est ce confort qui est le plus dangereux, celui qui fait manquer des rencontres, des occasions d’apprendre ou de découvrir de nouveaux domaines. Ce confort rend les entreprises séniles très&nbsp;rapidement.</p>
  1677. <p>J’aime bien la métaphore du vélo proposée par ce livre pour décrire la différence entre un plan à 5&nbsp;ans et une adaptation continue au contexte&nbsp;changeant.</p>
  1678. <blockquote>
  1679. <p>Imaginez que vous fassiez du vélo comme on gère la plupart des organisations modernes. Vous organiseriez une grande réunion afin de décider l’angle que doit présenter le guidon. Vous détailleriez le plus possible votre itinéraire en répertoriant tous les obstacles connus, le moment précis où vous devrez les éviter, ainsi que la trajectoire nécessaire pour cela. Puis vous enfourcheriez votre vélo, tiendriez fermement le guidon selon l’angle défini, fermeriez les yeux, puis rouleriez conformément au plan. Vous n’avez pratiquement aucune chance d’atteindre votre objectif, même si vous parveniez à garder le vélo bien droit pendant tout le parcours. Et lorsque vous tombez, vous vous demandez probablement, «&nbsp;Pourquoi n’y sommes-nous pas arrivés la première fois&#8239;?&nbsp;», voire «&nbsp;Qui a&nbsp;merdé&#8239;?&nbsp;»</p>
  1680. <p>Cette approche ridicule n’est pas loin de correspondre à l’approche adoptée par de nombreuses organisations pour leur planification stratégique. En revanche, Holacracy aide une organisation à fonctionner à la manière dont nous faisons habituellement du vélo, selon un paradigme de pilotage dynamique, à savoir un ajustement permanent selon les retours obtenus, faisant ainsi naître un cheminement plus organique. Si vous observez un cycliste très doué, vous constaterez une oscillation permanente car il reçoit sans arrêt des informations sensorielles sur sa situation et son environnement lui permettant de corriger légèrement sa direction, sa vitesse, son équilibre et son aérodynamisme. Cette oscillation intervient car il maintient un équilibre dynamique tout en avançant. Les informations qu’il reçoit rapidement lui permettent de respecter les contraintes de l’environnement et de son matériel. Au lieu de perdre beaucoup de temps et d’énergie à prévoir précisément à l’avance le «&nbsp;bon&nbsp;» itinéraire, il garde son but en tête, reste focalisé sur l’instant présent et avance le plus naturellement du monde. Cela ne signifie pas qu’il n’a aucun plan ou tout du moins aucune idée de son itinéraire, mais qu’il parvient à mieux contrôler sa progression en se livrant en permanence à la réalité ambiante et en se fiant à sa capacité à ressentir les choses et à réagir instantanément. De même, l’occasion s’offre à nous d’afficher un meilleur contrôle dans nos organisations en affrontant la réalité et en nous adaptant, en&nbsp;permanence.</p>
  1681. <p>Lorsque nous nous attachons à un résultat précis prévu à l’avance, nous risquons de nous retrouver à combattre la réalité quand celle-ci ne correspond pas à notre prévision. Si nous constatons que nous avons dévié du bon cap, nous pouvons en conclure, parfois inconsciemment, que nous sommes très certainement dans l’erreur. <mark>Juger ainsi la réalité nuit à notre capacité d’adaptation et nous incite à lutter contre la vérité indésirable, à essayer de forcer la réalité à être conforme à la vision que nous avions.</mark> Il s’agit là d’une stratégie loin d’être efficace pour gérer la complexité fluctuante du monde des affaires actuel. Lorsque la réalité entre en conflit avec nos plans les mieux échafaudés, c’est généralement la réalité qui&nbsp;l’emporte.</p>
  1682. <p>Je dois faire remarquer qu’adopter une approche plus dynamique pour gagner en contrôle ne revient pas à «&nbsp;ne rien prévoir&nbsp;», tout comme on n’avance pas à vélo «&nbsp;sans piloter&nbsp;». Il s’agit de modifier notre relation aux prévisions et plans, en les considérant parfois comme des faux raisonnements utiles et non comme des outils essentiels pour contrôler l’organisation. Et il s’agit d’être en phase avec l’instant présent afin de toujours pouvoir piloter en fonction de la&nbsp;réalité.</p>
  1683. <p><cite><em>Ibid.</em></cite></p>
  1684. </blockquote>
  1685. <a href="#hr-48" title="Lien vers cette section de la page"><hr id="hr-48" /></a>
  1686. <blockquote>
  1687. <p>Alors que le malaise dans lequel sont aujourd’hui plongées les sociétés occidentales n’en finit plus d’être commenté, est-il néanmoins possible de dessiner les contours d’une société idéale, une utopie réaliste, susceptible de constituer, pour les Français, un avenir désirable&#8239;? C’est précisément pour apporter des éléments de réponses à cette question qu’a été lancé en 2019&nbsp;l’Observatoire des perspectives utopiques. Dans le sillage de ces deux années de pandémie et à la veille de l’élection présidentielle, il nous est apparu utile de reconduire cette enquête, pour saisir où en sont les Français et évaluer dans quelle mesure leurs représentations et aspirations ont&nbsp;évolué.</p>
  1688. <p><cite><em><a data-link-domain="lobsoco.com" href="https://lobsoco.com/perspectives-utopiques-vague-3/" hreflang="fr"
  1689. title="Consultation de l’article">L’Observatoire des perspectives utopiques</a>
  1690. <a href="/david/cache/2024/7ed7f4aefae1b5af33b3ec1f607a633f/" hreflang="fr"
  1691. data-tippy data-description="Avec le soutien de nos partenaires Accédez ci-dessous aux principaux enseignements (classés par thématiques) de l’Observatoire."
  1692. data-source="https://lobsoco.com/perspectives-utopiques-vague-3/"
  1693. data-date="2024-01-24"
  1694. data-favicon="https://lobsoco.com/wp-content/uploads/2020/09/cropped-FAVICON-01-32x32.png"
  1695. data-domain="lobsoco.com"
  1696. ><svg xmlns="http://www.w3.org/2000/svg"
  1697. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1698. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1699. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1700. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1701. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1702. </svg>
  1703. <span class="sr-only">[archive]</span></a></em></cite></p>
  1704. </blockquote>
  1705. <p>Il y a des choses intéressantes qui ressortent de cet observatoire, notamment en comparant les résultats au cours du temps. Je me demande ce que pourraient donner les résultats de ce même sondage au&nbsp;Québec.</p>
  1706. <a href="#hr-49" title="Lien vers cette section de la page"><hr id="hr-49" /></a>
  1707. <p>Mot du jour&nbsp;: <a data-link-domain="fr.wiktionary.org" href="https://fr.wiktionary.org/wiki/cyn%C3%A9g%C3%A9tophobie">cynégétophobie</a>.</p>
  1708. <nav>
  1709. <p>
  1710. <a href="/david/2024/apprentissage/"
  1711. title="Liste de tous les articles 2024 associés à cette étiquette"
  1712. rel="tag">#apprentissage</a>
  1713. <a href="/david/2024/equipe/"
  1714. title="Liste de tous les articles 2024 associés à cette étiquette"
  1715. rel="tag">#équipe</a>
  1716. <a href="/david/2024/velo/"
  1717. title="Liste de tous les articles 2024 associés à cette étiquette"
  1718. rel="tag">#vélo</a>
  1719. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  1720. </p>
  1721. </nav>
  1722. <h2>
  1723. <a href="/david/2024/01/21/" title="Lien permanent vers cet article">Bois</a> <time datetime="2024-01-21">21 janvier 2024</time>
  1724. </h2>
  1725. <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>
  1726. <figure>
  1727. <a href="/static/david/2024/2024-01-20-tour-a-bois.jpg"
  1728. title="Cliquer pour une version haute résolution">
  1729. <img
  1730. src="/static/david/2024/2024-01-20-tour-a-bois.jpg"
  1731. width="3024" height="4032"
  1732. 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"
  1733. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  1734. loading="lazy"
  1735. decoding="async"
  1736. alt="Une assiette, un bol et une cuillère en bois à côté du livre cité avec des plantes en fond.">
  1737. </a>
  1738. <figcaption>6 heures de travail non-stop pour faire cette assiette et ce&nbsp;bol.</figcaption>
  1739. </figure>
  1740. <blockquote>
  1741. <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>
  1742. <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>
  1743. <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>
  1744. </blockquote>
  1745. <figure>
  1746. <a href="/static/david/2024/2024-01-20-vie-secrete-arbres.jpg"
  1747. title="Cliquer pour une version haute résolution">
  1748. <img
  1749. src="/static/david/2024/2024-01-20-vie-secrete-arbres.jpg"
  1750. width="3024" height="4032"
  1751. 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"
  1752. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  1753. loading="lazy"
  1754. decoding="async"
  1755. alt="Extrait du livre «&nbsp;La vie secrète des arbres&nbsp;» dont est issue la citation ci-dessus.">
  1756. </a>
  1757. <figcaption>J’aime beaucoup des livres transformés en BD, je trouve que l’image leur donne une autre&nbsp;dimension.</figcaption>
  1758. </figure>
  1759. <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>
  1760. <nav>
  1761. <p>
  1762. <a href="/david/2024/apprentissage/"
  1763. title="Liste de tous les articles 2024 associés à cette étiquette"
  1764. rel="tag">#apprentissage</a>
  1765. <a href="/david/2024/foret/"
  1766. title="Liste de tous les articles 2024 associés à cette étiquette"
  1767. rel="tag">#forêt</a>
  1768. <a href="/david/2024/protopie/"
  1769. title="Liste de tous les articles 2024 associés à cette étiquette"
  1770. rel="tag">#protopie</a>
  1771. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  1772. </p>
  1773. </nav>
  1774. <h2>
  1775. <a href="/david/2024/01/10/" title="Lien permanent vers cet article">Écriture</a> <time datetime="2024-01-10">10 janvier 2024</time>
  1776. </h2>
  1777. <blockquote lang="en">
  1778. <p>And, I’ll assume we all agree that owning your own website is a <em>good thing</em>, and we all want more people to do&nbsp;it.</p>
  1779. <p>But here’s the thing: we need more tools for it. We need simpler tools for it. And we need to make installing and using them <em>trivially simple</em>.</p>
  1780. <p>We need more self-hosted platforms for personal publishing that <em>aren’t Wordpress</em>. <mark>And don’t point me to Hugo or Netlify or Eleventy or all those things - all of them are great, but none of them are simple enough.</mark> We need web publishing tools that do not require users to open the Terminal <em>at all</em>. And we need lots of&nbsp;them.</p>
  1781. <p>We need a whole <em>galaxy</em> of&nbsp;options.</p>
  1782. <p><cite><em><a data-link-domain="gilest.org" href="https://gilest.org/indie-easy.html" hreflang="en"
  1783. title="Consultation de l’article (anglais)">Let’s make the indie web easier</a>
  1784. <a href="/david/cache/2024/faa1d8cae94da6838ff9351e5df791ca/" hreflang="en"
  1785. data-tippy data-description=""
  1786. data-source="https://gilest.org/indie-easy.html"
  1787. data-date="2024-01-09"
  1788. data-favicon="https://gilest.org/favicon.ico"
  1789. data-domain="gilest.org"
  1790. ><svg xmlns="http://www.w3.org/2000/svg"
  1791. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1792. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1793. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1794. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1795. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1796. </svg>
  1797. <span class="sr-only">[archive]</span></a></em></cite></p>
  1798. </blockquote>
  1799. <p>Quelques étoiles dans la&nbsp;galaxie&nbsp;:</p>
  1800. <ul>
  1801. <li><a data-link-domain="atelier.scribouilli.org" href="https://atelier.scribouilli.org/">Scribouilli</a> (<a data-link-domain="github.com" href="https://github.com/Scribouilli/scribouilli">code</a>) par <a data-link-domain="lechappeebelle.team" href="https://lechappeebelle.team/">L’Échappée Belle</a>&#8239;;</li>
  1802. <li><a data-link-domain="write.as" href="https://write.as/">Write.as</a> (<a data-link-domain="writefreely.org" href="https://writefreely.org/">open-source</a>) est le plus proche que je pourrais conseiller avec un support commercial de <a data-link-domain="musing.studio" href="https://musing.studio/">Musing Studio</a>&#8239;;</li>
  1803. <li><a data-link-domain="masto.host" href="https://masto.host/">mastohost</a> —&nbsp;que <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/">j’utilise</a>&nbsp;— permet d’avoir son propre domaine aussi sans vraiment de connaissance technique, le support est&nbsp;réactif&#8239;;</li>
  1804. <li><a data-link-domain="carrd.co" href="https://carrd.co/">Carrd</a> est revenu plusieurs fois dans ma bulle ces derniers&nbsp;temps&#8239;;</li>
  1805. <li><a data-link-domain="pika.page" href="https://pika.page/">Pika</a> aussi avec une saveur plus&nbsp;humaine.</li>
  1806. </ul>
  1807. <p>Il y a une bonne liste dans <a data-link-domain="mastodon.social" href="https://mastodon.social/@matthiasott/111557355056827064">cette discussion</a> et une autre <a data-link-domain="robertkingett.com" href="https://robertkingett.com/links/">par ici</a> (section <q lang="en">Managed Static site hosts or Blogging platforms</q>).</p>
  1808. <a href="#hr-21" title="Lien vers cette section de la page"><hr id="hr-21" /></a>
  1809. <blockquote lang="en">
  1810. <p>Among its suggestions: write a longer headline; split a six-sentence paragraph up because it’s “too long”; and replace “too complex” words like “invariably,” “notoriety,” and “modification.” Dozens of sentences were flagged as being confusing (I disagree) — and it really hated em dashes. I rewrote my prose over and over, but it didn’t seem to satisfy my robot grader. I finally chose one thought per sentence, broke up paragraphs, and replaced words with suggested keywords to get rid of the red dots signaling&nbsp;problems.</p>
  1811. <p><mark>The result feels like an AI summary of my story</mark> — at any moment, a paragraph could start with “In conclusion…” or “The next thing to consider is…” The nuance, voice, and unexpected twists and turns have been snuffed out. I’m sure some people would prefer this uncomplicated, beat-by-beat version of the story, but it’s gone from being a story written by a real person to a clinical, stiff series of&nbsp;sentences.</p>
  1812. <p><cite><em><a data-link-domain="theverge.com" href="https://www.theverge.com/c/23998379/google-search-seo-algorithm-webpage-optimization" hreflang="en"
  1813. title="Consultation de l’article (anglais)">The Perfect Web Page</a>
  1814. <a href="/david/cache/2024/3debc675a055d691b32c7d6904531eb4/" hreflang="en"
  1815. data-tippy data-description="How the internet reshaped itself around Google’s search algorithms — and into a world where websites look the same."
  1816. data-source="https://www.theverge.com/c/23998379/google-search-seo-algorithm-webpage-optimization"
  1817. data-date="2024-01-09"
  1818. data-favicon="https://cdn.vox-cdn.com/uploads/chorus_asset/file/23989695/favicon_32x32.png"
  1819. data-domain="theverge.com"
  1820. ><svg xmlns="http://www.w3.org/2000/svg"
  1821. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1822. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1823. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1824. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1825. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1826. </svg>
  1827. <span class="sr-only">[archive]</span></a></em></cite></p>
  1828. </blockquote>
  1829. <p>Un article de TheVerge qui risque de ne pas être très bien référencé. Le moment où l’on s’adapte pour nourrir les robots n’est pas nouveau, on a «&nbsp;juste&nbsp;» mis une nouvelle étiquette dessus en 2023&nbsp;qui permet aux robots / algorithmes de se battre entre eux de manière&nbsp;explicite.</p>
  1830. <p>Pas sûr de vouloir <a data-link-domain="darkvisitors.com" href="https://darkvisitors.com/robots-txt-builder">entrer sur le ring</a> sans m’épuiser très&nbsp;vite.</p>
  1831. <blockquote lang="en">
  1832. <p>I propose <mark>Data Luddism</mark> as a radical response to the productive power of big data and predictive algorithms. My starting point is not the Romantic neo-Luddism of Kirkpatrick Sale but the historical Luddism of 1811-1816, and the Luddites' own rhetoric regarding their resistance to 'obnoxious&nbsp;machines'.</p>
  1833. <p><cite><em><a data-link-domain="danmcquillan.org" href="https://www.danmcquillan.org/dataluddism.html" hreflang="en"
  1834. title="Consultation de l’article (anglais)">Data Luddism</a>
  1835. <a href="/david/cache/2024/b1da1249f2db388d7e84d6ad23c2fc5d/" hreflang="en"
  1836. data-tippy data-description=""
  1837. data-source="https://www.danmcquillan.org/dataluddism.html"
  1838. data-date="2024-01-09"
  1839. data-favicon=""
  1840. data-domain="danmcquillan.org"
  1841. ><svg xmlns="http://www.w3.org/2000/svg"
  1842. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1843. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1844. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1845. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1846. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1847. </svg>
  1848. <span class="sr-only">[archive]</span></a></em></cite></p>
  1849. </blockquote>
  1850. <a href="#hr-22" title="Lien vers cette section de la page"><hr id="hr-22" /></a>
  1851. <blockquote lang="en">
  1852. <p>The <code>everything</code> package and its 3,000+ sub-packages have caused a Denial of Service (DOS) for anyone who installs it. We’re talking about storage space running out and system resource&nbsp;exhaustion.</p>
  1853. <p>But that’s not all. The creator took their prank to the next level by setting up http://everything.npm.lol, showcasing the chaos they unleashed. They even included a meme from Skyrim, adding some humor (or mockery, depending on your perspective) to the&nbsp;situation.</p>
  1854. <p><cite><em><a data-link-domain="socket.dev" href="https://socket.dev/blog/when-everything-becomes-too-much" hreflang="en"
  1855. title="Consultation de l’article (anglais)">When “Everything” Becomes Too Much: The npm Package Chaos of 2024</a>
  1856. <a href="/david/cache/2024/4a56aa5497e68df0c5bb1d5331203219/" hreflang="en"
  1857. data-tippy data-description="An NPM user named PatrickJS launched a troll campaign with a package called everything, which depends on all public npm packages."
  1858. data-source="https://socket.dev/blog/when-everything-becomes-too-much"
  1859. data-date="2024-01-09"
  1860. data-favicon="https://socket.dev/favicon-32x32.png"
  1861. data-domain="socket.dev"
  1862. ><svg xmlns="http://www.w3.org/2000/svg"
  1863. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1864. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1865. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1866. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1867. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1868. </svg>
  1869. <span class="sr-only">[archive]</span></a></em></cite></p>
  1870. </blockquote>
  1871. <p><code>npm install lol</code> 🤣</p>
  1872. <p>En <a data-link-domain="jop2024.lol" href="https://jop2024.lol/">parlant de lol</a>…</p>
  1873. <a href="#hr-23" title="Lien vers cette section de la page"><hr id="hr-23" /></a>
  1874. <blockquote>
  1875. <p>Si les fictions, celles qu’on s’invente, celles que nous souffle notre inconscient comme celles qu’on lit, ont un rôle majeur à jouer dans la fabrique de notre rapport au monde, alors voilà qui plaide pour redoubler d’ardeur quand il s’agit de nourrir soigneusement nos imaginaires. Quand on voit les déferlements de violence et le virilisme qui caractérisent les héros modernes, on ne peut que s’interroger sur le type de rapport au monde que cela crée. C’est la raison pour laquelle <mark>la bataille culturelle passe aussi par la création de nouvelles utopies,</mark> ni niaises ni naïves, qui puissent donner d’autres matières à rêver qu’un monde dévasté et peuplé de soldats&nbsp;augmentés.</p>
  1876. <p>[…] Nous avons besoin d’autres cadres de pensée dans lesquels évoluer. Nous avons besoin d’<em>ailleurs culturels</em> pour sortir de l’ornière et nous&nbsp;dérouter.</p>
  1877. <p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
  1878. </blockquote>
  1879. <p>Nous accueillons une nouvelle personne chez Scopyleft, l’occasion de former une <a href="/david/2021/03/17/">nouvelle équipe</a>. Ces <em>ailleurs culturels</em> doivent pouvoir être partagés et inspirer pour réussir à&nbsp;essaimer.</p>
  1880. <p>C’est l’une de mes frustrations à ne plus <a href="/david/2021/01/26/">participer à des regroupements</a>, ne pas partager par ce biais là les expériences menées depuis 11&nbsp;ans en matière d’horizontalité et de travail en&nbsp;commun·s.</p>
  1881. <a href="#hr-24" title="Lien vers cette section de la page"><hr id="hr-24" /></a>
  1882. <blockquote lang="en">
  1883. <p>So when we wonder where all the websites have gone, know it’s the <em>curators</em> we’re nostalgic for because the curators showed us the best the web had to offer once upon a time. And the curators— the tenders, aggregators, collectors, and connectors— can bring us back to something better. Because it’s still out there, we just have to find&nbsp;it.</p>
  1884. <p>Here’s the best part. <mark>You can be that curator right now, at this very moment.</mark> You can start to rebuild the interconnectivity that made the web fun to explore. And you don’t need to be a computer scientist to do&nbsp;it.</p>
  1885. <p><cite><em><a data-link-domain="fromjason.xyz" href="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/" hreflang="en"
  1886. title="Consultation de l’article (anglais)">Where have all the websites gone?</a>
  1887. <a href="/david/cache/2024/c3272392d462da90874d32841e5caac8/" hreflang="en"
  1888. data-tippy data-description="It feels like all the cool websites from the late 2000s are gone. But maybe we are looking at this the wrong way. Maybe it is us who vanished."
  1889. data-source="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/"
  1890. data-date="2024-01-09"
  1891. data-favicon="https://www.fromjason.xyz/img/favicon.png"
  1892. data-domain="fromjason.xyz"
  1893. ><svg xmlns="http://www.w3.org/2000/svg"
  1894. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1895. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1896. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1897. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1898. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1899. </svg>
  1900. <span class="sr-only">[archive]</span></a></em></cite></p>
  1901. </blockquote>
  1902. <p>Dixième jour que j’ai l’impression de faire des billets trop longs. Beaucoup d’éparpillement suite à un cumul d’onglets ouverts, parfois depuis bien longtemps. Ça vous laisse un petit exercice de <q lang="en">curation</q> vous&nbsp;aussi&nbsp;:).</p>
  1903. <nav>
  1904. <p>
  1905. <a href="/david/2024/apprentissage/"
  1906. title="Liste de tous les articles 2024 associés à cette étiquette"
  1907. rel="tag">#apprentissage</a>
  1908. <a href="/david/2024/ecriture/"
  1909. title="Liste de tous les articles 2024 associés à cette étiquette"
  1910. rel="tag">#écriture</a>
  1911. <a href="/david/2024/ia/"
  1912. title="Liste de tous les articles 2024 associés à cette étiquette"
  1913. rel="tag">#IA</a>
  1914. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  1915. </p>
  1916. </nav>
  1917. <h2>
  1918. <a href="/david/2024/01/07/" title="Lien permanent vers cet article">Dons</a> <time datetime="2024-01-07">7 janvier 2024</time>
  1919. </h2>
  1920. <blockquote>
  1921. <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
  1922. <p>Vu le succès de <a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
  1923. <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark>&nbsp;[…]</p>
  1924. <p><cite><a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
  1925. </blockquote>
  1926. <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&nbsp;personnel.</p>
  1927. <p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a data-link-domain="saq.com" href="https://www.saq.com/">SAQ</a>.</p>
  1928. <a href="#hr-13" title="Lien vers cette section de la page"><hr id="hr-13" /></a>
  1929. <p>Pensée (genrée) du jour&nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&nbsp;cuisine.</p>
  1930. <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&nbsp;déguisée.</p>
  1931. <a href="#hr-14" title="Lien vers cette section de la page"><hr id="hr-14" /></a>
  1932. <p>Masto comme un <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
  1933. <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a data-link-domain="ricaud.me" href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
  1934. <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de&nbsp;thème&nbsp;😅.</p>
  1935. <p><em>Bientôt 500&nbsp;lignes de&nbsp;CSS.</em></p>
  1936. <a href="#hr-15" title="Lien vers cette section de la page"><hr id="hr-15" /></a>
  1937. <blockquote>
  1938. <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p>
  1939. <p>Je suis&nbsp;impressionné.</p>
  1940. <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/06/ebauche" hreflang="fr"
  1941. title="Consultation de l’article">plaisir d’ébauche</a>
  1942. <a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" hreflang="fr"
  1943. data-tippy data-description=""
  1944. data-source="https://www.la-grange.net/2024/01/06/ebauche"
  1945. data-date="2024-01-07"
  1946. data-favicon="https://www.la-grange.net/favicon.ico"
  1947. data-domain="la-grange.net"
  1948. ><svg xmlns="http://www.w3.org/2000/svg"
  1949. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1950. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1951. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1952. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1953. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1954. </svg>
  1955. <span class="sr-only">[archive]</span></a></em></cite></p>
  1956. </blockquote>
  1957. <p>Ce&nbsp;titre&nbsp;:)</p>
  1958. <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2&nbsp;minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3&nbsp;ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses&nbsp;inspirantes.</p>
  1959. <a href="#hr-16" title="Lien vers cette section de la page"><hr id="hr-16" /></a>
  1960. <blockquote lang="en">
  1961. <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any&nbsp;more.</mark></p>
  1962. <p>We are primarily in the business of search and we’d like to stay focused on&nbsp;that.</p>
  1963. <p><cite><em><a data-link-domain="kagifeedback.org" href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6" hreflang="en"
  1964. title="Consultation de l’article (anglais)">Vlad (admin Kagi) répondant</a>
  1965. <a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" hreflang="en"
  1966. data-tippy data-description="Brave, as you know, is led by Brendan Eich. s homophobia is so disgusting that he was forced to resign as the leader..."
  1967. data-source="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6"
  1968. data-date="2024-01-07"
  1969. data-favicon="https://kagifeedback.org/assets/favicon-bmwk4ltf.png"
  1970. data-domain="kagifeedback.org"
  1971. ><svg xmlns="http://www.w3.org/2000/svg"
  1972. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1973. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1974. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1975. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1976. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1977. </svg>
  1978. <span class="sr-only">[archive]</span></a> à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
  1979. </blockquote>
  1980. <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez&nbsp;terrible.</p>
  1981. <p><a data-link-domain="theverge.com" href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy" hreflang="en"
  1982. title="Consultation de l’article (anglais)">Pas de politique au travail</a>
  1983. <a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" hreflang="en"
  1984. data-tippy data-description="Basecamp announced it would ban “societal and political discussions” at work. But the hardest conversations at work were about the company itself. Platformer’s Casey Newton spoke with half a dozen employees about the controversy."
  1985. data-source="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy"
  1986. data-date="2024-01-07"
  1987. data-favicon="https://www.theverge.com/icons/favicon_32x32.png"
  1988. data-domain="theverge.com"
  1989. ><svg xmlns="http://www.w3.org/2000/svg"
  1990. width="24" height="24" viewBox="0 0 24 24" fill="none"
  1991. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  1992. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  1993. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  1994. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  1995. </svg>
  1996. <span class="sr-only">[archive]</span></a> est ma nouvelle&nbsp;cryptonite.</p>
  1997. <nav>
  1998. <p>
  1999. <a href="/david/2024/apprentissage/"
  2000. title="Liste de tous les articles 2024 associés à cette étiquette"
  2001. rel="tag">#apprentissage</a>
  2002. <a href="/david/2024/communaute/"
  2003. title="Liste de tous les articles 2024 associés à cette étiquette"
  2004. rel="tag">#communauté</a>
  2005. <a href="/david/2024/fediverse/"
  2006. title="Liste de tous les articles 2024 associés à cette étiquette"
  2007. rel="tag">#fédiverse</a>
  2008. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  2009. </p>
  2010. </nav>
  2011. <h2>
  2012. <a href="/david/2024/01/05/" title="Lien permanent vers cet article">Vocabulaire</a> <time datetime="2024-01-05">5 janvier 2024</time>
  2013. </h2>
  2014. <blockquote>
  2015. <p>Les tensions et processer les tensions. Essayez de remplacer les termes «&nbsp;problèmes&nbsp;» et «&nbsp;solutions&nbsp;» par «&nbsp;tensions&nbsp;» et «&nbsp;processer&nbsp;». Les êtres humains semblent être enclins de manière innée à attendre la dernière minute pour gérer ce qu’ils perçoivent comme des problèmes. Par conséquent, l’emploi de ce langage «&nbsp;négatif&nbsp;» dans le monde de l’entreprise peut donner naissance à une culture de l’évitement ou de l’inquiétude inutile. Le terme «&nbsp;tension&nbsp;», comme employé en <em>Holacracy</em>, est neutre et signifie simplement <em>la perception d’un écart entre la réalité et ce qu’elle pourrait&nbsp;être.</em></p>
  2016. <p>Une tension n’est pas un «&nbsp;problème&nbsp;» et n’induit pas nécessairement une «&nbsp;solution&nbsp;». Elle met en lumière une occasion de rapprocher la situation actuelle de ce qu’elle pourrait être — ce qui sous-entend généralement une amélioration. <mark>Holacracy emploie le terme «&nbsp;processer&nbsp;» pour décrire ce phénomène, qui évite la notion de résultat fixe et définitif et illustre un cheminement fait d’une adaptation et de progrès&nbsp;permanents.</mark></p>
  2017. <p>Des propositions plutôt que des problèmes. Le changement qui va de pair avec celui que je viens de décrire est de prendre l’habitude de faire des «&nbsp;propositions&nbsp;» au lieu de se contenter de se lamenter. Lorsque vous ressentez une tension, demandez-vous&nbsp;: «&nbsp;Qu’est-ce qui pourrait améliorer la situation&#8239;? Que pourrais-je proposer&#8239;?&nbsp;» Encouragez votre équipe à en faire de même. La proposition ne se doit pas d’être une «&nbsp;solution&nbsp;» parfaite — c’est un moyen d’entamer la conversation de manière proactive et créative, et non&nbsp;négative.</p>
  2018. <p><cite><em>La révolution Holacracy</em>, Brian J. Robertson, chapitre «&nbsp;Changez votre langage, changez votre&nbsp;culture&nbsp;»</cite></p>
  2019. </blockquote>
  2020. <p>On pourrait y voir de la <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer —&nbsp;peut-être temporairement&nbsp;— une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces&nbsp;pratiques.</p>
  2021. <p>J’apprécie particulièrement le couple proposition / objections. Difficile de sortir d’une forme de confort une fois celui-ci établi. Peut-être que le <em>refus de confort</em> pourrait être une notion au même titre que le <a href="/david/2020/10/08/"><em>refus de parvenir</em></a>&#8239;? Accepter le risque de l’inconnu pour ne pas se perdre dans un hier déjà expérimenté, déjà&nbsp;dé·fini.</p>
  2022. <blockquote>
  2023. <p>Des objections&#8239;? La prochaine fois que vous recherchez l’adhésion de votre équipe à une décision, modifiez votre mode de communication. Ne demandez pas&nbsp;: «&nbsp;Est-ce que tout le monde est d’accord&#8239;?&nbsp;» ou «&nbsp;Ma proposition plaît-elle à tout le monde&#8239;?&nbsp;». Ces questions débouchent sur une discussion longue et pénible. Demandez-leur plutôt&nbsp;: <mark>«&nbsp;Y a-t-il des objections à l’adoption de cette proposition&#8239;?&nbsp;»</mark> Et définissez une objection comme «&nbsp;une raison pour laquelle l’adoption de cette proposition causerait du tort ou nous ferait&nbsp;régresser&#8239;?&nbsp;»</p>
  2024. <p>Voici une autre formulation&nbsp;: «&nbsp;Est-ce que quelqu’un considère la mise en œuvre de cette proposition comme pas assez sûre, sachant que nous pourrons revoir cette décision si elle ne porte pas ses fruits&#8239;?&nbsp;» Ce simple changement de langage peut vous faire gagner beaucoup de temps et alléger considérablement le processus&nbsp;décisionnel.</p>
  2025. <p><cite><em>Ibid.</em></cite></p>
  2026. </blockquote>
  2027. <a href="#hr-7" title="Lien vers cette section de la page"><hr id="hr-7" /></a>
  2028. <p><a data-link-domain="piaille.fr" href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a data-link-domain="mamot.fr" href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions&#8239;?) en commun à ce&nbsp;sujet.</p>
  2029. <p>J’essaye de rendre l’épaisseur du soulignement des liens dynamique, lié à la fluidité de la taille du texte&nbsp;🧑‍🔬, peut-être que je devrais rendre la taille des bordures dynamiques aussi&#8239;? Parfois la contrainte technique peut devenir une contrainte éditoriale acceptable. <strong>Cet espace est suffisamment sur-pensé comme&nbsp;ça.</strong></p>
  2030. <p>Je commence un thème sombre qui réagit à celui du système d’exploitation par défaut. Surtout pour un besoin personnel pour l’instant, mes yeux en ont besoin. Cela me pousse à ajouter des variables CSS pour les&nbsp;couleurs.</p>
  2031. <p>Plus tard, <a data-link-domain="mamot.fr" href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller&#8239;? Oui, mais il faudra toujours finir par le&nbsp;décortiquer.</p>
  2032. <p>La CSS progresse, 426&nbsp;lignes ce soir… et un seul <code>breakpoint</code> défini pour forcer une variable maximale sur les grands écrans. J’aime bien cette&nbsp;idée.</p>
  2033. <a href="#hr-8" title="Lien vers cette section de la page"><hr id="hr-8" /></a>
  2034. <p>Randonnée de 8&#8239;km en famille aujourd’hui, parfois je ne me rends plus trop compte des distances —&nbsp;qui plus est sur un sol difficile. Je voulais surtout savoir jusqu’à quels refuges je pouvais envisager des aventures avec l’enfant dans des conditions hivernales. Chaque année, de nouveaux horizons&nbsp;s’ouvrent.</p>
  2035. <a href="#hr-9" title="Lien vers cette section de la page"><hr id="hr-9" /></a>
  2036. <blockquote>
  2037. <p>— Comment appelle-t-on un groupe de faisans&#8239;? demande Anna.<br />
  2038. — Un bouquet, répond Isobel. Un groupe d’étourneaux&#8239;?<br />
  2039. — Un murmure.<br />
  2040. — De flamants&#8239;?<br />
  2041. — Une flamboyance de flamants. De hiboux&#8239;?<br />
  2042. Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place&nbsp;:<br />
  2043. — On dit un parlement de hiboux.<br />
  2044. — Très bien. Plus difficile alors. Comment appelle-t-on un groupe d’alouettes&#8239;?<br />
  2045. — Une exaltation.<br />
  2046. — Et de papillons&#8239;?<br />
  2047. — Un kaléidoscope de&nbsp;papillons.</p>
  2048. <p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel Darleux citant Dominique Fortier sur Emily Dickinson, <em>Les Villes de&nbsp;papiers</em></cite></p>
  2049. </blockquote>
  2050. <p>💚 Quand l’ornithologie fait de la&nbsp;poésie.</p>
  2051. <nav>
  2052. <p>
  2053. <a href="/david/2024/apprentissage/"
  2054. title="Liste de tous les articles 2024 associés à cette étiquette"
  2055. rel="tag">#apprentissage</a>
  2056. <a href="/david/2024/decision/"
  2057. title="Liste de tous les articles 2024 associés à cette étiquette"
  2058. rel="tag">#décision</a>
  2059. <a href="/david/2024/equipe/"
  2060. title="Liste de tous les articles 2024 associés à cette étiquette"
  2061. rel="tag">#équipe</a>
  2062. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  2063. </p>
  2064. </nav>
  2065. <form action="/david/recherche/" method="get">
  2066. <fieldset>
  2067. <legend>Recherche</legend>
  2068. <label for="input-search">Termes de votre recherche :</label>
  2069. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  2070. <input type="submit" value="Chercher">
  2071. <p id="indexation-infos">
  2072. <small>
  2073. Seuls les contenus de ces 8 dernières années sont indexés.
  2074. </small>
  2075. </p>
  2076. </fieldset>
  2077. </form>
  2078. <aside>
  2079. <theme-toggle></theme-toggle>
  2080. </aside>
  2081. </article>
  2082. <hr>
  2083. <footer>
  2084. <p>
  2085. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  2086. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  2087. <a href="http://larlet.com"
  2088. title="Go to my English profile"
  2089. data-instant>Pro</a>
  2090. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  2091. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  2092. </p>
  2093. <template id="theme-selector">
  2094. <form>
  2095. <style type="text/css">
  2096. fieldset div {
  2097. text-align: center;
  2098. }
  2099. </style>
  2100. <fieldset>
  2101. <legend>Thème</legend>
  2102. <div>
  2103. <label>
  2104. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  2105. Auto
  2106. </label>
  2107. <label>
  2108. <input type="radio" value="dark" name="chosen-color-scheme">
  2109. Foncé
  2110. </label>
  2111. <label>
  2112. <input type="radio" value="light" name="chosen-color-scheme">
  2113. Clair
  2114. </label>
  2115. </div>
  2116. </fieldset>
  2117. </form>
  2118. </template>
  2119. </footer>
  2120. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  2121. <script>
  2122. class ThemeToggle extends HTMLElement {
  2123. constructor() {
  2124. super()
  2125. const themeSelectorTemplate = document.querySelector('#theme-selector')
  2126. const form = themeSelectorTemplate.content.firstElementChild
  2127. this.attachShadow({ mode: 'open' })
  2128. this.shadowRoot.appendChild(form.cloneNode(true))
  2129. }
  2130. connectedCallback() {
  2131. const form = this.shadowRoot.querySelector('form')
  2132. form.addEventListener('change', (e) => {
  2133. const chosenColorScheme = e.target.value
  2134. localStorage.setItem('theme', chosenColorScheme)
  2135. toggleTheme(chosenColorScheme)
  2136. })
  2137. const selectedTheme = localStorage.getItem('theme')
  2138. if (selectedTheme && selectedTheme !== 'undefined') {
  2139. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  2140. }
  2141. }
  2142. }
  2143. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  2144. window.addEventListener('load', () => {
  2145. let colorsLayer = undefined
  2146. let hasDarkRules = false
  2147. for (const styleSheet of Array.from(document.styleSheets)) {
  2148. let mediaRules = []
  2149. for (const layerRule of styleSheet.cssRules) {
  2150. if (!(layerRule instanceof CSSLayerBlockRule)) {
  2151. continue
  2152. }
  2153. if (layerRule.name === 'colors') {
  2154. colorsLayer = layerRule
  2155. }
  2156. for (const cssRule of layerRule.cssRules) {
  2157. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  2158. continue
  2159. }
  2160. // WARNING: Safari does not have/supports `conditionText`.
  2161. if (cssRule.conditionText) {
  2162. if (cssRule.conditionText !== prefersColorSchemeDark) {
  2163. continue
  2164. }
  2165. } else {
  2166. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  2167. continue
  2168. }
  2169. }
  2170. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  2171. }
  2172. }
  2173. // WARNING: do not try to insert a Rule to a styleSheet you are
  2174. // currently iterating on, otherwise the browser will be stuck
  2175. // in a infinite loop…
  2176. for (const mediaRule of mediaRules) {
  2177. // Safari requires the `0` second parameter (even if default).
  2178. colorsLayer.insertRule(mediaRule.cssText, 0)
  2179. hasDarkRules = true
  2180. }
  2181. }
  2182. if (hasDarkRules) {
  2183. if ('customElements' in window && !customElements.get('theme-toggle')) {
  2184. customElements.define('theme-toggle', ThemeToggle)
  2185. }
  2186. }
  2187. })
  2188. </script>
  2189. </body>
  2190. </html>