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

index.html 20KB

4年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  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>Publications — David Larlet</title>
  13. <meta name="description" content="L’espace et le temps.">
  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>Publications</h1>
  55. </header>
  56. <nav>
  57. <p class="center">
  58. <a rel="prev" href="/david/2020/12/01/" title="Publication précédente : Compréhension">←</a> •
  59. <a href="/david/" title="Aller à l’accueil">🏠</a>
  60. • <a rel="next" href="/david/2020/12/15/" title="Publication suivante : Vidéos">→</a>
  61. </p>
  62. </nav>
  63. <hr>
  64. <main>
  65. <p><em>L’espace et le temps.</em></p>
  66. <h2 id="gemini">Gemini <a href="#gemini" title="Ancre vers cette partie">#</a></h2>
  67. <blockquote>
  68. <p>Gemini is a new application-level internet protocol for the distribution of arbitrary files, with some special consideration for serving a lightweight hypertext format which facilitates linking between files. You may think of Gemini as “the web, stripped right back to its essence” or as “Gopher, souped up and modernised a little”, depending upon your perspective.</p>
  69. <p><cite><em><a href="https://gemini.circumlunar.space/docs/faq.html">Project Gemini FAQ</a></em> (<a href="/david/cache/2020/74f036a4d135847bcfdcfab6664a5bf5/">cache</a>)</cite></p>
  70. </blockquote>
  71. <p>Sur le fond, c’est assez fabuleux de voir des personnes œuvrer pour simplifier des choses dans ce domaine. Il y a clairement un espace pour cette forme d’expressivité et je m’en réjouis.</p>
  72. <p>Mais alors sur la forme…</p>
  73. <blockquote>
  74. <p>Le rapport avec la convivialité est que cela implique que les logiciels libres sont, d’une certaine manière, plus égoïstes que les logiciels fermés (CSS). Une démangeaison personnelle implique de concevoir des logiciels pour ses propres besoins. Les exigences explicites sont donc moins nécessaires. Au sein d’un logiciel libre, ces exigences sont ensuite partagées avec une communauté de même sensibilité et l’outil individuel est affiné et amélioré pour le bénéfice de tous – <mark>au sein de cette communauté</mark>.</p>
  75. <p><cite><em><a href="https://write.as/troll/la-facilite-dutilisation-des-logiciels-open-source">La facilité d’utilisation des logiciels open source</a></em> (<a href="/david/cache/2020/f354723323c0ad6e282ed65e6f316cf5/">cache</a>)</cite></p>
  76. </blockquote>
  77. <p>Je crois que je suis de plus en plus sensible à cette forme d’ascendance de la technique sur l’utilisabilité et ce protocole semble en être le parfait exemple avec des techniciens qui s’en gargarisent et des clients tous plus inutilisables les uns que les autres. (Et hideux.)</p>
  78. <p>Cela m’attriste et ne m’incite guère à rejoindre une petite bulle élitiste. Le choix des espaces que l’on occupe est <a href="https://withblue.ink/2020/11/12/maybe-we-shouldnt-want-a-fully-decentralized-web.html">plus politique que jamais</a> (<a href="/david/cache/2020/306cf51e962c5b1a3019c47c3d5e2aed/">cache</a>).</p>
  79. <blockquote>
  80. <p>La bionique consiste à s’inspirer des inventions de la biologie pour les appliquer à la technique. Il faudrait fonder l’école de l’éthobionique. On s’inspirerait du comportement animal pour conduire nos actes. Au moment d’agir, au lieu de demander conseil à nos héros — qu’auraient décidé Marc Aurèle, Lancelot ou Geronimo — on se dirait : « Et maintenant, que ferait mon chien ? Et un cheval ? Et le tigre ? Et même l’huître (modèle de placidité) ? » Les bestiaires deviendraient nos livres de conduite. L’éthologie serait promue science morale.</p>
  81. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  82. </blockquote>
  83. <p>Qu’en penserait un criquet ?</p>
  84. <h2 id="couleur-science">Couleur Science <a href="#couleur-science" title="Ancre vers cette partie">#</a></h2>
  85. <blockquote>
  86. <p>Les pneus sont en caoutchouc et le caoutchouc réagit à la température : il présente une température de transition vitreuse au-dessous de laquelle il devient particulièrement dur et cassant.</p>
  87. <p><cite><em><a href="https://couleur-science.eu/?d=0b046e--pourquoi-y-a-t-il-des-pneus-ete-et-des-pneus-hiver">Pourquoi y a-t-il des pneus été et des pneus hiver ?</a></em> (<a href="/david/cache/2020/e4f89cfb95cd06d8ca5d2f4aa0834061/">cache</a>)</cite></p>
  88. </blockquote>
  89. <p>À chaque article de <a href="https://lehollandaisvolant.net/">Timo</a> j’apprends de nouvelles choses. Parfois, il s’agit de lointaines questions qui restaient irrésolues et soudain tout s’éclaire. <strong>Merci</strong>.</p>
  90. <h2 id="code-barriere">Code-barrière <a href="#code-barriere" title="Ancre vers cette partie">#</a></h2>
  91. <blockquote>
  92. <p>Comme l’a relevé avec sagacité notre confrère belge des éditions Vies parallèles, <mark>le fait de ne pas mettre le code-barre à l’extérieur du livre le rend inexploitable par (les robots d’) Amazon</mark>. Zones sensibles a donc décidé de placer ce code-barre en deuxième de couverture, au bas du colophon qui se trouve sur cette page, et ce à partir de notre prochaine parution, <em>Généalogie de la morale économique</em> de Sylvain Piron, prévue pour le 20 novembre. Il en sera de même pour tous nos ouvrages à venir. Cette simple et élégante solution — qui permet par ailleurs d’éviter de ruiner le graphisme de certaines couvertures en raison de l’inélégance du code-barre — fait que nos ouvrages ne seront donc plus commercialisés par Amazon.</p>
  93. <p><cite><em><a href="https://www.actualitte.com/article/tribunes/bye-bye-amazon-il-en-va-de-la-responsabilite-de-chaque-editeur/103699">Bye bye Amazon : “Il en va de la responsabilité de chaque éditeur”</a></em> (<a href="/david/cache/2020/b0d03b8040e6004631831aab3e8f1142/">cache</a>)</cite></p>
  94. </blockquote>
  95. <p>Je trouve fascinante cette lutte contre une forme de singularité <em>par la bêtise</em>. On finira par donner la possibilité aux robots de lire une deuxième de couverture mais en attendant on se retrouve avec cette toute petite longueur d’avance qu’il va falloir cultiver.</p>
  96. <h2 id="medium">Medium <a href="#medium" title="Ancre vers cette partie">#</a></h2>
  97. <blockquote lang="en">
  98. <p>The real reason for all this work is that I think that a personal site should be personal and to make it personal, one should <mark>solely be guided by one’s intuition and not by the mental models of available tools</mark> and the restrictions they impose on your thoughts.</p>
  99. <p><cite><em><a href="https://erikwinter.nl/articles/2020/why-i-built-my-own-shitty-static-site-generator/">Why I Built My Own Shitty Static Site Generator</a></em> (<a href="/david/cache/2020/57341e992c1478f0d90d61df71426372/">cache</a>)</cite></p>
  100. </blockquote>
  101. <p>Je me faisais la réflexion récente de faire beaucoup moins de liens vers la plateforme Medium et je m’en réjouis. J’ai la flemme de faire des statistiques mais 2020 semble vraiment être un tournant à ce niveau là. Peut-être que davantage de personnes sachant aligner des balises <abbr title="HyperText Markup Language">HTML</abbr> ont pris le temps pendant cette pandémie de s’aménager un espace. En tout cas c’est très encourageant !</p>
  102. <blockquote lang="en">
  103. <p>My favorite aspect of websites is their duality: they’re both subject and object at once. In other words, <mark>a website creator becomes both author and architect simultaneously</mark>. There are endless possibilities as to what a website could be. What kind of room is a website? Or is a website more like a house? A boat? A cloud? A garden? A puddle? Whatever it is, there’s potential for a self-reflexive feedback loop: when you put energy into a website, in turn the website helps form your own identity.</p>
  104. <p><cite><em><a href="https://thecreativeindependent.com/people/laurel-schwulst-my-website-is-a-shifting-house-next-to-a-river-of-knowledge-what-could-yours-be/">My website is a shifting house next to a river of knowledge. What could yours be?</a></em> (<a href="/david/cache/2020/23e4f276abb0903ed2c024d790630a91/">cache</a>)</cite></p>
  105. </blockquote>
  106. <h2 id="moderne">Moderne <a href="#moderne" title="Ancre vers cette partie">#</a></h2>
  107. <blockquote lang="en">
  108. <p>What? I just want to get my blog online. When did this become rocket science? I am done for the night. Going to bed. I will try again tomorrow.</p>
  109. <p><cite><em><a href="https://www.jpatters.com/the-modern-way/">Publishing a Website the Modern Way</a></em> (<a href="/david/cache/2020/c6b58ee70bb07534a3679661787bd702/">cache</a>)</cite></p>
  110. </blockquote>
  111. <p>On pourrait croire que cette description est caricaturale et pourtant elle rejoint pas mal de mes expériences avec de tels outils. J’apprécie le fait de lancer une seule commande compréhensible pour déployer cet espace. Cette commande se lance grâce à <a href="https://github.com/pyrates/minicli">minicli</a> dont je peux rapidement lire le code s’il y a un <em>bug</em>. Une fois sur le serveur, ça fait <code>git archive --remote={repository} master | tar -x -C larlet-fr</code> avec <code>repository</code> qui est le chemin local vers un des dépôts <em>git</em> qui me sert à versionner ce site. C’est probablement optimisable mais pour une publication hebdomadaire c’est bien suffisant.</p>
  112. <p>S’il y a un souci, je peux me connecter à la main sur le serveur en SSH pour tenter de comprendre ce qu’il se passe, il n’y a aucune action automatique réalisée sur l’ordinateur de quelqu’un d’autre. Si c’est hors de mes compétences, je peux me faire accompagner sur IRC par le support <a href="https://www.alwaysdata.com/">AlwaysData</a> qui est toujours présent et efficace. C’est certain qu’un <em>bucket S3</em> est moins cher mais en vrai — en tranquillité d’esprit et en simplicité — je gagne tellement que ça équilibre très largement.</p>
  113. <p>Pour rendre les choses encore plus légères et flexibles, je pourrais m’astreindre à un dépôt <a href="/david/2020/01/03/#arborescence">par an</a>. C’est en cours de réflexion pour 2021.</p>
  114. <h2 id="gaz">Gaz <a href="#gaz" title="Ancre vers cette partie">#</a></h2><p>J’écrivais <a href="https://mastodon.social/@dav/105221215337355511">récemment</a> :</p>
  115. <blockquote>
  116. <p>L’humain est un gaz : il prend tout l’espace disponible.</p>
  117. </blockquote>
  118. <p>Et je tombe hier sur cette citation dans les annexes de Dune :</p>
  119. <blockquote>
  120. <p>Au-delà d’un point critique dans un espace fini, la liberté décroît comme s’accroît le nombre. Cela est aussi vrai des humains dans l’espace fini d’un écosystème planétaire que des molécules d’un gaz dans un flacon scellé. La question qui se pose pour les humains n’est pas de savoir combien d’entre eux survivront dans le système mais quel sera le genre d’existence de ceux qui survivront.</p>
  121. <p><cite><em>Pardot Kynes, Premier Planétologiste d’Arrakis</em> (<a href="/david/2020/12/21/#dune">Dune</a>)</cite></p>
  122. </blockquote>
  123. <p>Je crois que c’est la raison pour laquelle j’aime autant cette série : les épigraphes sont aussi intéressantes que l’histoire. Si ce n’est plus, surtout pour une relecture.</p>
  124. <h2 id="reponses">Réponses <a href="#reponses" title="Ancre vers cette partie">#</a></h2><p><a href="https://oncletom.io/2020/12/01/comment-continuer-a-y-croire/">Chez Thomas</a> (<a href="/david/cache/2020/645536cc4af1f38cec67c44eaa3137bc/">cache</a>) tout d’abord :</p>
  125. <blockquote>
  126. <p>Lire de vieux livres me rappelle que le monde existait, vivait et souffrait avant même ma naissance. Ça me rappelle que la construction de ma compréhension du monde s’est faite <em>dans</em> ce même monde qui se construit.</p>
  127. </blockquote>
  128. <p>Puis <a href="https://www.la-grange.net/2020/12/01/bouillon">chez Karl</a> (<a href="/david/cache/2020/23d7d9b62bb1ffcf0ccb6c8e53e51e9e/">cache</a>) :</p>
  129. <blockquote>
  130. <p>Changer le monde sans le détruire prend beaucoup de temps.</p>
  131. </blockquote>
  132. <p>Je continue de publier pour cette qualité d’échanges. <em>Merci.</em> Partager une partie de son monde permet de faire pivoter celui du voisin ou de la voisine. J’en profite pour remercier les personnes qui continuent à échanger avec moi par courriel en dépit de mes réponses qui prennent parfois de longs mois…</p>
  133. <h2 id="journal">Journal <a href="#journal" title="Ancre vers cette partie">#</a></h2><p>Je rédige des sortes de journaux privés (et partagés avec l’équipe) pour mes travaux facturés. Je ne sais plus de quand date exactement cette pratique, au moins 5 ans je pense. Cela me sert de mémoire mais aussi de comptabilité des jours travaillés, ce qui me permet d’établir des factures à la fin du mois grâce à des <code>data-attributes</code> et quelques lignes de JavaScript.</p>
  134. <p>Mais au-delà de la technique, cette routine me permet de prendre du recul sur ce que je fais, ce que ça vaut, où on va ensemble. Dans un contexte de distance forcée, je trouve cela d’autant plus pertinent. Je peux y partager une humeur, un questionnement <em>a posteriori</em>, ce qu’il me reste à faire pour démarrer la fois suivante, synthétiser mon souvenir d’une discussion, faire des blagues, partager des liens à moitié innocents, etc.</p>
  135. <p>Je ne me souviens plus si c’était difficile au début mais aujourd’hui je pourrais difficilement m’en passer. Écrire du code n’est qu’une petite partie de mon récit quotidien.</p>
  136. </main>
  137. <nav>
  138. <p class="center">
  139. <a rel="prev" href="/david/2020/12/01/" title="Publication précédente : Compréhension">←</a> •
  140. <a href="/david/2020/" title="Liste des publications récentes">↑</a>
  141. • <a rel="next" href="/david/2020/12/15/" title="Publication suivante : Vidéos">→</a>
  142. </p>
  143. </nav>
  144. </article>
  145. <hr>
  146. <footer>
  147. <p>
  148. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  149. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  150. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  151. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  152. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  153. </p>
  154. <template id="theme-selector">
  155. <form>
  156. <fieldset>
  157. <legend>Thème</legend>
  158. <label>
  159. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  160. </label>
  161. <label>
  162. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  163. </label>
  164. <label>
  165. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  166. </label>
  167. </fieldset>
  168. </form>
  169. </template>
  170. </footer>
  171. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module" defer></script>
  172. <script type="text/javascript">
  173. function loadThemeForm(templateName) {
  174. const themeSelectorTemplate = document.querySelector(templateName)
  175. const form = themeSelectorTemplate.content.firstElementChild
  176. themeSelectorTemplate.replaceWith(form)
  177. form.addEventListener('change', (e) => {
  178. const chosenColorScheme = e.target.value
  179. localStorage.setItem('theme', chosenColorScheme)
  180. toggleTheme(chosenColorScheme)
  181. })
  182. const selectedTheme = localStorage.getItem('theme')
  183. if (selectedTheme && selectedTheme !== 'undefined') {
  184. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  185. }
  186. }
  187. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  188. window.addEventListener('load', () => {
  189. let hasDarkRules = false
  190. for (const styleSheet of Array.from(document.styleSheets)) {
  191. let mediaRules = []
  192. for (const cssRule of styleSheet.cssRules) {
  193. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  194. continue
  195. }
  196. // WARNING: Safari does not have/supports `conditionText`.
  197. if (cssRule.conditionText) {
  198. if (cssRule.conditionText !== prefersColorSchemeDark) {
  199. continue
  200. }
  201. } else {
  202. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  203. continue
  204. }
  205. }
  206. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  207. }
  208. // WARNING: do not try to insert a Rule to a styleSheet you are
  209. // currently iterating on, otherwise the browser will be stuck
  210. // in a infinite loop…
  211. for (const mediaRule of mediaRules) {
  212. styleSheet.insertRule(mediaRule.cssText)
  213. hasDarkRules = true
  214. }
  215. }
  216. if (hasDarkRules) {
  217. loadThemeForm('#theme-selector')
  218. }
  219. })
  220. </script>
  221. </body>
  222. </html>