Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 19KB

4年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Confetti — David Larlet</title>
  13. <meta name="description" content="Des réflexions sans liens apparents.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  52. <article>
  53. <header>
  54. <h1>Confetti</h1>
  55. </header>
  56. <nav>
  57. <p class="center">
  58. <a rel="prev" href="/david/2020/06/25/" title="Publication précédente : Ouvertance">←</a> •
  59. <a href="/david/" title="Aller à l’accueil">🏠</a>
  60. • <a rel="next" href="/david/2020/07/13/" title="Publication suivante : Bilan">→</a>
  61. </p>
  62. </nav>
  63. <hr>
  64. <main>
  65. <p><em>Des réflexions sans liens apparents.</em></p>
  66. <h2 id="probleme">Problème <a href="#probleme" title="Ancre vers cette partie">#</a></h2>
  67. <blockquote>
  68. <p>Le style de discours le plus récent dénote le haut degré d’aliénation qui prévaut aujourd’hui. En disant « j’<em>ai</em> un problème » au lieu de « je <em>suis</em> perplexe », j’élimine l’expérience subjective ; le <em>je</em> de l’expérience est remplacé par le <em>ça</em> de la possession. <mark>J’ai transformé mon sentiment en quelque chose que je possède : le problème.</mark> Mais « problème » est une notion abstraite qui exprime toutes sortes de difficultés. Je ne peux pas <em>avoir</em> un problème, parce que ça n’est pas un objet qui peut être possédé ; mais le problème peut m’avoir. Cela revient à dire que je me suis transformé <em>moi-même</em> en « problème » et que je suis maintenant possédé par ma création. Cette façon de s’exprimer trahit une aliénation cachée, inconsciente.</p>
  69. <p><cite><em><a href="/david/2020/12/21/#avoir-ou-etre">Avoir ou être</a></em>, Erich Fromm</cite></p>
  70. </blockquote>
  71. <p>En ce moment, mes lectures sont relativement éparpillées, en tout cas plus que d’habitude. J’arrive tout de même à en extraire certaines pépites. Je ne sais plus qui m’a recommandé cet ouvrage mais merci si tu es en train de me lire :-).</p>
  72. <h2 id="anarchisme">Anarchisme <a href="#anarchisme" title="Ancre vers cette partie">#</a></h2>
  73. <blockquote>
  74. <p>Mikhaïl Bakounine disait que « la liberté sans le socialisme, c’est le privilège et l’injustice, et le socialisme sans la liberté, c’est l’esclavage et la brutalité ». Je pense également que si le terme « libertaire » n’est pas étroitement associé à ceux de « socialisme » ou de « communisme », alors la société qu’on souhaite construire ne m’intéresse pas. <mark>Elle ne m’intéresse d’ailleurs pas du tout, si elle n’est pas aussi féministe et écologiste.</mark> Et justement, l’anarchisme a ceci d’incomparable avec les autres courants qui se positionnent à gauche : il s’oppose farouchement à toutes formes de dominations, quelles qu’elles soient.</p>
  75. <p><cite><em><a href="https://www.revue-ballast.fr/isabelle-attard-lecologie-doit-sinscrire-au-sein-du-mouvement-revolutionnaire">Isabelle Attard : « L’écologie doit s’inscrire au sein du mouvement révolutionnaire »</a></em> (<a href="/david/cache/2020/703ceb55d78ebb11d4a3035b68d9f956/">cache</a>)</cite></p>
  76. </blockquote>
  77. <p>Je suis vraiment admiratif du cheminement d’Isabelle Attard. J’aimerais trouver son livre « <a href="https://www.seuil.com/ouvrage/comment-je-suis-devenue-anarchiste-isabelle-attard/9782021440355">Comment je suis devenue anarchiste</a> » au Québec.</p>
  78. <p><em>Suggestions bienvenues.</em></p>
  79. <h2 id="artiste">Artiste <a href="#artiste" title="Ancre vers cette partie">#</a></h2>
  80. <blockquote>
  81. <p>I write code in order to express myself, and I consider what I code an artifact, rather than just something useful to get things done. I would say that what I write is useful just as a side effect, but my first goal is to make something that is, in some way, beautiful. In essence, <mark>I would rather be remembered as a bad artist than a good programmer.</mark></p>
  82. <p><cite><em><a href="http://antirez.com/news/133">The end of the Redis adventure</a></em> (<a href="/david/cache/2020/5e366e8fe10507c713ca8d581daeb17c/">cache</a>)</cite></p>
  83. </blockquote>
  84. <p>Cet article de Salvatore Sanfilippo est inspirant. Décider de se retirer d’un tel produit doit être une option difficile à envisager compte-tenu de sa popularité et des enjeux. Je n’ai jamais mis le nez dans le code de Redis mais son API est probablement l’une des plus claires à laquelle j’ai eu à m’adresser dans ma carrière.</p>
  85. <p><em>Juste merci.</em></p>
  86. <p>Note : cela me rappelle <a href="/david/biologeek/archives/20080613-artiste-qui-sommeille-en-chaque-geek/">un vieux billet</a>.</p>
  87. <h2 id="contradictions">Contradictions <a href="#contradictions" title="Ancre vers cette partie">#</a></h2>
  88. <blockquote>
  89. <p>At time of writing, this blog is hosted on Github Pages, signaling that I prioritize keeping a consistent coding/deployment platform over divesting from a company that works with ICE. <mark>I know I need to fix my shit.</mark> I’d prefer that Github fixed their shit instead, but I can’t control that.</p>
  90. <p><cite><em><a href="https://vgpena.github.io/on-priorities/">On Priorities</a></em> (<a href="/david/cache/2020/2020e2b3c28d37ec6cf7eabfa607ffe2/">cache</a>)</cite></p>
  91. </blockquote>
  92. <p>À un moment où il est beaucoup question de <a href="https://github.com/chancancode/branch-rename/blob/main/README.md">renommer</a> (<a href="/david/cache/2020/240b647e699da81b505d43af39257996/">cache</a>) sa branche <code>master</code> en <code>main</code> ou <code>live</code> pour la référence à l’esclavagisme (et je pense effectivement que <a href="https://boris.schapira.dev/notes/2020-06-des-termes-problematiques/">certains termes sont problématiques</a> (<a href="/david/cache/2020/bdffc3b5eb59b81d90d9fa1d7e21ce11/">cache</a>)), si c’est pour ensuite la pousser sur Microsoft Github, est-ce qu’on ne loupe pas un truc ?</p>
  93. <p>Aussi <a href="https://mastodon.social/@dav/104440340432636471">je pouettais</a> il y a peu :</p>
  94. <blockquote>
  95. <p>À quel point est-ce que l’apprentissage de Microsoft Github et Microsoft NPM va devenir un pré-requis au même titre que les Microsoft Word et Microsoft Excel de ma génération ?</p>
  96. </blockquote>
  97. <p>J’ai amené des personnes à utiliser Github, au même titre que j’en ai aidé d’autres à ouvrir un compte Gmail fut un temps. Quelle part de responsabilité/culpabilité dans ces transmissions ?</p>
  98. <h2 id="enseigner">Enseigner <a href="#enseigner" title="Ancre vers cette partie">#</a></h2>
  99. <blockquote>
  100. <p>Writing is a good way to understand things, and to learn things. People mostly think of writing as a way to teach and explain, and I am glad when my posts can do that. But I also really value the <mark>feedback loop</mark> of learning as I explain, and the deeper understanding I find when I teach.</p>
  101. <p><cite><em><a href="https://nedbatchelder.com//blog/202006/2500.html">Ned Batchelder: 2500</a></em> (<a href="/david/cache/2020/b7f574586eccd0b9c844876c18ac0ca5/">cache</a>)</cite></p>
  102. </blockquote>
  103. <p>Ce billet me rappelle que je n’<a href="/david/pro/enseignement/">enseigne</a> plus et d’une certaine manière cela me manque. Notamment pour rester connecté à une réalité qui n’est plus la mienne mais que je considère être importante pour pouvoir continuer à ressentir de l’empathie.</p>
  104. <h2 id="preparation">Préparation <a href="#preparation" title="Ancre vers cette partie">#</a></h2>
  105. <blockquote>
  106. <p>Early in the lockdown, when the future of the supply chain was uncertain and everyone was panic shopping, <mark>I imagined all the doomsday preppers out there must have been feeling pretty smug</mark>. While the rest of the world freaked out, I pictured them calmly swinging their bunker doors shut and gazing fetishistically at their stockpiles of food, fuel, and ammunition, secure in their self-sufficiency. But how self-sufficient are they really? Did they grow and can that food? Did they smelt the steel and fashion their firearms from it? Did they mix the gunpowder? Did they build the internal combustion engines that power their generators? Did they extract and refine the oil that powers those engines?</p>
  107. <p><cite><em><a href="https://v7.robweychert.com/blog/2020/06/v7-on-dependency/">On dependency</a></em> (<a href="/david/cache/2020/959add1c9fe6dc27e1ee1ee8960b930b/">cache</a>)</cite></p>
  108. </blockquote>
  109. <p>Je crois que le fait d’être un peu plus préparé/confiant permet de moins céder à la panique et donc de ne pas avoir des actions (trop) irréfléchies. Que ce soit dans la gestion de son capital — au sens large — ou de l’évaluation du risque et de son évitement.</p>
  110. <p>Dans ces situations, j’ai la croyance que de prendre des décisions un peu moins « instinctives » que son voisin peut faire la différence. Ne pas se protéger des autres mais de ses propres réactions en somme.</p>
  111. <blockquote>
  112. <p>But the ritual of counting and stacking and sorting the cans—like so many rituals of faith—offered something more abstract than physical sustenance: peace of mind, a sense of hope, something to grip while the world is unraveling.</p>
  113. <p><cite><em><a href="https://www.theatlantic.com/politics/archive/2020/03/stockpile-food-my-garage/608290/">How to Stockpile Food</a></em> (<a href="/david/cache/2020/0a6f84ae641abbb6a46cbe9ebaec4a8c/">cache</a>)</cite></p>
  114. </blockquote>
  115. <h2 id="argumenter">Argumenter <a href="#argumenter" title="Ancre vers cette partie">#</a></h2>
  116. <blockquote>
  117. <p><a href="https://argdown.org/">argdown</a>. Une syntaxe texte pour décrire et gérer un débat à propos d’un sujet. Il est possible de voir une représentation graphique du débat.</p>
  118. <p><cite><em><a href="https://www.la-grange.net/2020/07/01/affranchi">lion affranchi</a></em> (<a href="/david/cache/2020/613da2c8a82cb70c50391a34565800c4/">cache</a>)</cite></p>
  119. </blockquote>
  120. <p>Je découvre grâce à Karl que cet outil peut au moins être utilisé pour représenter des <a href="http://kvark.github.io/tech/arguments/2020/06/30/technical-discussions.html">discussions techniques</a> (<a href="/david/cache/2020/892a6dcf591157833a162335d4878043/">cache</a>) mais je l’imagine déjà pour visualiser des débats <a href="/david/2020/04/18/">parlementaires</a> ou <a href="https://fr.wikipedia.org/wiki/Convention_citoyenne_pour_le_climat">de société</a>.</p>
  121. <p>J’ai encore un peu de mal à prendre en main la syntaxe mais c’est probablement par manque de culture/vocabulaire dans le domaine. Il faudrait que je me fasse la main sur un sujet facile.</p>
  122. <h2 id="banlieue">Banlieue <a href="#banlieue" title="Ancre vers cette partie">#</a></h2>
  123. <blockquote>
  124. <p>Il y a un principe d’identité fort exprimé par Myriam Ségal : le Québec est une banlieue, et vivre en banlieue c’est aller au Costco. La radio de Québec nous l’enseigne depuis longtemps, il y a le vrai monde qui travaille et consomme, et les hippies du centre-ville qui critiquent les premiers en se pognant le beigne. Ils sont à la fois pauvres et snobs, ils n’ont pas de char ou pas de famille ou pas des deux, et donc ne vont pas au Costco.</p>
  125. <p><cite><em><a href="https://www.leteignoir.com/2020/06/fuck-costco.html">Fuck Costco</a></em> (<a href="/david/cache/2020/c039e15f24fb1dc53a5cae21c30a2bf7/">cache</a>)</cite></p>
  126. </blockquote>
  127. <p>Il faudrait que je me décide à aller faire un tour à Costco, au moins pour ma culture. Après bientôt 4 ans sur le territoire québécois je n’ai toujours pas de char. Ceci expliquant peut-être cela.</p>
  128. <h2 id="carbone">Carbone <a href="#carbone" title="Ancre vers cette partie">#</a></h2>
  129. <blockquote>
  130. <p>So in total, this puts us at ~820 tCO2e for 2019.</p>
  131. <p><cite><em><a href="https://m.signalvnoise.com/towards-carbon-negativity/">Towards carbon negativity</a></em> (<a href="/david/cache/2020/8ecfc6fbf4a4d3293144458db9c8a57d/">cache</a>)</cite></p>
  132. </blockquote>
  133. <p>Comment mesurer le coût du JavaScript (aussi minimaliste qu’il soit) qui tourne chez les 3,3 millions de clients annoncés ? Qui est responsable de ce CO<sub>2</sub> là ?</p>
  134. <h2 id="liberte">Liberté <a href="#liberte" title="Ancre vers cette partie">#</a></h2>
  135. <blockquote>
  136. <p><em>[Après lui avoir demandé de faire un truc.]</em><br />
  137. — Je suis <em>libre</em>, je ne suis pas un chien en laisse, je suis un loup !</p>
  138. </blockquote>
  139. <p>Comment ne pas saccager l’innocence de l’enfance ? Comment partager le fait que l’autonomie est un moyen de couper la laisse ?</p>
  140. </main>
  141. <nav>
  142. <p class="center">
  143. <a rel="prev" href="/david/2020/06/25/" title="Publication précédente : Ouvertance">←</a> •
  144. <a href="/david/2020/" title="Liste des publications récentes">↑</a>
  145. • <a rel="next" href="/david/2020/07/13/" title="Publication suivante : Bilan">→</a>
  146. </p>
  147. </nav>
  148. </article>
  149. <hr>
  150. <footer>
  151. <p>
  152. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  153. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  154. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  155. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  156. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  157. </p>
  158. <template id="theme-selector">
  159. <form>
  160. <fieldset>
  161. <legend>Thème</legend>
  162. <label>
  163. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  164. </label>
  165. <label>
  166. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  167. </label>
  168. <label>
  169. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  170. </label>
  171. </fieldset>
  172. </form>
  173. </template>
  174. </footer>
  175. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module" defer></script>
  176. <script type="text/javascript">
  177. function loadThemeForm(templateName) {
  178. const themeSelectorTemplate = document.querySelector(templateName)
  179. const form = themeSelectorTemplate.content.firstElementChild
  180. themeSelectorTemplate.replaceWith(form)
  181. form.addEventListener('change', (e) => {
  182. const chosenColorScheme = e.target.value
  183. localStorage.setItem('theme', chosenColorScheme)
  184. toggleTheme(chosenColorScheme)
  185. })
  186. const selectedTheme = localStorage.getItem('theme')
  187. if (selectedTheme && selectedTheme !== 'undefined') {
  188. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  189. }
  190. }
  191. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  192. window.addEventListener('load', () => {
  193. let hasDarkRules = false
  194. for (const styleSheet of Array.from(document.styleSheets)) {
  195. let mediaRules = []
  196. for (const cssRule of styleSheet.cssRules) {
  197. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  198. continue
  199. }
  200. // WARNING: Safari does not have/supports `conditionText`.
  201. if (cssRule.conditionText) {
  202. if (cssRule.conditionText !== prefersColorSchemeDark) {
  203. continue
  204. }
  205. } else {
  206. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  207. continue
  208. }
  209. }
  210. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  211. }
  212. // WARNING: do not try to insert a Rule to a styleSheet you are
  213. // currently iterating on, otherwise the browser will be stuck
  214. // in a infinite loop…
  215. for (const mediaRule of mediaRules) {
  216. styleSheet.insertRule(mediaRule.cssText)
  217. hasDarkRules = true
  218. }
  219. }
  220. if (hasDarkRules) {
  221. loadThemeForm('#theme-selector')
  222. }
  223. })
  224. </script>
  225. </body>
  226. </html>