Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 19KB

il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
il y a 4 ans
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  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>Service — David Larlet</title>
  13. <meta name="description" content="À quoi consacrer mon 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>Service</h1>
  55. </header>
  56. <nav>
  57. <p class="center">
  58. <a rel="prev" href="/david/2020/02/14/" title="Publication précédente : Espoirs">←</a> •
  59. <a href="/david/" title="Aller à l’accueil">🏠</a>
  60. • <a rel="next" href="/david/2020/03/13/" title="Publication suivante : Technique">→</a>
  61. </p>
  62. </nav>
  63. <hr>
  64. <main>
  65. <p><em>À quoi consacrer mon temps ?</em></p>
  66. <h2 id="vivre-avec">Vivre avec <a href="#vivre-avec" title="Ancre vers cette partie">#</a></h2>
  67. <blockquote>
  68. <p>Les termes par lesquels les langues modernes expriment en général la contrainte, observe-t-elle [Dorothy Lee], se retrouvent chez les Wintu en des tournures qui dénotent la coopération. C’est ainsi qu’une mère n’« emmène » pas son bébé à l’ombre ; elle y « va avec lui ». Un chef ne « dirige » pas son peuple ; il « se tient à ses côtés ». De toute façon, <mark>il n’est jamais plus qu’un conseiller</mark> et ne dispose d’aucun moyen de contrainte pour faire prévaloir ses vues. Les Wintu, note encore Dorothy Lee « ne disent jamais, et en fait ne pourraient pas dire, comme nous, “j’ai une sœur” ou “un fils” ou “un mari”. “<em>Vivre avec</em>” est l’expression qui leur sert habituellement à traduire ce que nous appelons la possession, et ils l’emploient pour tout ce qu’ils respectent ; si bien que l’on dira d’un homme qu’il vit avec son arc et ses flèches ».</p>
  69. <p><cite>Entretien dans la revue <em>Philosophica, vol XIII</em> en 1974, extrait de <em><a href="/david/2020/12/21/#pouvoir-de-detruire-pouvoir-de-creer">Pouvoir de détruire, pouvoir de créer</a></em>, Murray Bookchin</cite></p>
  70. </blockquote>
  71. <p>Cela résonne fort avec le fait de <a href="/david/stream/2015/10/31/">me sentir père</a> et d’essayer de <a href="/david/blog/2019/faire-famille/">faire famille</a> ou de <a href="/david/blog/2019/faire-equipe/">faire équipe</a>. Une question de posture, à la fois apaisée et apaisante. Lorsqu’il n’y a plus rien à imposer, il reste à faire ensemble.</p>
  72. <p><em>Et c’est là où je trouve mon contentement actuel.</em></p>
  73. <h2 id="environnementalisme">Environnementalisme <a href="#environnementalisme" title="Ancre vers cette partie">#</a></h2>
  74. <blockquote>
  75. <p>J’emploie le mot « environnementalisme » pour l’opposer à celui d’« écologie », et en particulier à l’écologie sociale. Alors que l’écologie sociale, de mon point de vue, cherche à éliminer la domination de l’humain sur l’humain, l’environnementalisme dénote une mentalité « instrumentale », ou technique, dans laquelle la nature est conçue simplement comme un habitat passif, un agrégat d’objets et de forces externes, qu’il s’agit de rendre plus « utilisables » par les humains, quelle que soit la nature des usages en question. En fait, <mark>l’environnementalisme, c’est simplement la gestion technique de la nature</mark>.</p>
  76. <p><cite><em>Lettre ouverte au mouvement écologiste</em>, février 1980, extrait de <em><a href="/david/2020/12/21/#pouvoir-de-detruire-pouvoir-de-creer">Pouvoir de détruire, pouvoir de créer</a></em>, Murray Bookchin</cite></p>
  77. </blockquote>
  78. <p>Cette distinction me parle, notamment car je me trouve actuellement dans une position où j’essaye de <a href="https://www.rtl.fr/actu/politique/reforme-des-retraites-comment-sont-traites-les-milliers-d-amendements-deposes-7800107173">régler des problèmes techniques</a> (<a href="/david/cache/2020/2857bcda24e61cd80229ec230ee3d2b1/">cache</a>) pour des fonctionnaires au service d’un gouvernement qui est loin de vouloir <cite>éliminer la domination de l’humain sur l’humain</cite>, bien au contraire…</p>
  79. <p>Vouloir protéger les faibles en aidant — à l’insu de mon plein gré — les forts, ça fait pas très Robin des bois.</p>
  80. <h2 id="webmasters">Webmasters <a href="#webmasters" title="Ancre vers cette partie">#</a></h2>
  81. <blockquote lang="en">
  82. <p>For better or worse, I am a document lover. All of my best intentions to try new digital tools eventually devolve to their most stable ur-forms of text files and spreadsheets. I think back to what hooked me on the web in 1996—our expectations are so often defined by our first loves. The primitive parts of me will always want websites to be editable documents with legible, marked up text on servers. <mark>I began making websites when mastery seemed so possible that people called themselves “webmasters.”</mark> Those expectations are laughable now.</p>
  83. <p><cite><em><a href="https://frankchimero.com/blog/2020/wants-and-needs/">Redesign: Wants and Needs</a></em> (<a href="/david/cache/2020/3006691afcf79e8a0fa83b2f0f64e91a/">cache</a>)</cite></p>
  84. </blockquote>
  85. <p>Un entretien récent me faisait prendre conscience du fait que j’aligne des balises <abbr title="HyperText Markup Language">HTML</abbr> depuis deux décennies. J’ai l’impression d’être passé du statut de <em>webmaster</em> à celui de <em>webservant</em> : ne plus maîtriser mais essayer de faire le moins de dégâts possible en publiant des pages. Avec j’espère moins d’arrogance, moins de choses à <em>me</em> prouver.</p>
  86. <p>Une documentation personnelle et sans prétention mais partagée qui pourrait parfois servir à d’autres.</p>
  87. <h2 id="hire-good-writers">Hire good writers <a href="#hire-good-writers" title="Ancre vers cette partie">#</a></h2>
  88. <blockquote lang="en">
  89. <p>If you are trying to decide between a few people to fill a position, always hire the better writer. It doesn’t matter if that person is a designer, programmer, marketer, salesperson, or whatever, the writing skills will pay off. Effective, concise writing and editing leads to effective, concise code, design, emails, instant messages, and more.</p>
  90. <p><mark>That’s because being a good writer is about more than words.</mark> Good writers know how to communicate. They make things easy to understand. They can put themselves in someone else’s shoes. They know what to omit. They think clearly. And those are the qualities you need.</p>
  91. <p><cite><em><a href="https://basecamp.com/gettingreal/08.6-wordsmiths">Wordsmiths | Getting Real</a></em> (<a href="/david/cache/2020/82e58e715a4ddb17b2f9e2a023005b1a/">cache</a>)</cite></p>
  92. </blockquote>
  93. <p>C’est assez vertigineux de se considérer comme étant un auteur. Je ne crois pas avoir ce sentiment. Je publie à voix haute des embryons d’idées tout au plus. Mais peut-être que c’est déjà beaucoup. En tout cas, si je n’étais plus en capacité de le faire, je me sentirais probablement frustré au point de vouloir le faire <em>via</em> un autre support.</p>
  94. <p><em>C’est peut-être cela « être auteur » finalement ?</em></p>
  95. <h2 id="unlocking-the-commons">Unlocking the commons <a href="#unlocking-the-commons" title="Ancre vers cette partie">#</a></h2>
  96. <blockquote lang="en">
  97. <p>I call this “unlocking the commons,” and it’s the same approach I’ve taken with my Patreon and newsletter. Fans support the person and the work. But it’s not a transaction, a fee for service. <mark>It’s a contribution that benefits everyone.</mark> Free-riders aren’t just welcome; free-riding is the <em>point</em>. This, I think, is key to understanding the psychology of patronage. […]</p>
  98. <p>This is one of the weird things about patronage. As a consumer, your first thought is to your own benefit. As a patron, it’s to the good of your beneficiary. Likewise, as an artisan supported by patronage, you tend to think more about what’s best for your patrons and audience than you do yourself. […]</p>
  99. <p>The most powerful and interesting media model will remain raising money from members who don’t just permit but <em>insist</em> that the product be given away for free. <mark>The value comes not just what they’re buying, but who they’re buying it from and who gets to enjoy it.</mark></p>
  100. <p><cite><em><a href="https://www.niemanlab.org/2019/01/unlocking-the-commons/">Unlocking the commons</a></em> (<a href="/david/cache/2020/dfada08049ab34a1200974e7e46cb646/">cache</a>)</cite></p>
  101. </blockquote>
  102. <p>C’est une chose que j’aimerais <a href="https://craigmod.com/essays/membership_programs/">explorer</a> (<a href="/david/cache/2020/4c5cc5e59531ef04e068c883a1a0e166/">cache</a>) à un moment de la vie de ces contenus. Je ne sais pas du tout quelle forme est-ce que cela pourrait prendre. S’il y a de l’argent en jeu, j’aimerais que ça ne devienne pas un club de riches/privilégiés. Ni avoir une position ascendante sur le groupe.</p>
  103. <p>C’est peut-être pour cela que je ne le fais pas en premier lieu :D. Mais quand même ça manque d’échanges. Tout cela en ayant du mal à répondre aux courriels intéressants… incohérences tenaces et gestion du temps compliquée en ce moment.</p>
  104. <p><em>Merci à toutes les personnes qui me font des retours sur ces publications ! 🙇</em></p>
  105. <h2 id="dix-pour-cent">Dix pour cent <a href="#dix-pour-cent" title="Ancre vers cette partie">#</a></h2>
  106. <blockquote>
  107. <p>C’est ce dont s’inquiète une série d’articles parus dans le <em>Armed Forces Journal</em>, le mensuel des officiers de l’armée américaine. 80 % du pétrole consommé par l’État américain l’est par les forces armées. Chaque jour, celles-ci requièrent 130 millions de barils pour leur fonctionnement. Le pétrole représente aujourd’hui 77 % des carburants employés par l’armée. 70 % du tonnage déplacé chaque jour sur les champs de bataille est du pétrole. Si l’on y ajoute l’eau, on atteint 90 %. Les munitions, en comparaison, représentent un tonnage relativement modeste. Plus généralement, <mark>10 % des émissions de carbone annuelles à l’échelle globale proviennent de l’activité militaire</mark> (toutes armées confondues).</p>
  108. <p><cite><em><a href="/david/2020/12/21/#la-nature-est-un-champ-de-bataille">La nature est un champ de bataille</a></em>, Razmig Keucheyan</cite></p>
  109. </blockquote>
  110. <p>C’est un fait que je vois très rarement discuté ou pointé du doigt. Un tabou de la défense (et de l’attaque !) qui est loin d’être négligeable. Lorsque le prix du baril de pétrole augmente, la facture des armées devient d’autant plus salée. Pour un service (?) équivalent.</p>
  111. <p>Je serais curieux de savoir sur ces 10 %, combien concernent uniquement l’entrainement. Et combien sont gaspillés en simple déplacement continu des effectifs/équipements.</p>
  112. <h2 id="surlignage">Surlignage <a href="#surlignage" title="Ancre vers cette partie">#</a></h2><p>J’ai cédé aux sirènes du surlignage avec l’élément HTML <code>mark</code> lors de <a href="/david/2020/02/14/">la dernière publication</a>, c’est un élément qui a l’air d’être populaire auprès des personnes que je suis en ce moment. Il y a des modes comme ça, l’année dernière c’était plutôt <code>hr</code> (j’avais cédé aussi !).</p>
  113. <p>Je me suis rendu compte en voulant le styler qu’il pouvait poser des <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/mark#Accessibilit%C3%A9">problèmes d’accessibilité</a>, aussi je suis arrivé à la CSS suivante :</p>
  114. <pre><code>mark {
  115. background: LightGoldenRodYellow;
  116. }
  117. mark::before,
  118. mark::after {
  119. clip-path: inset(100%);
  120. clip: rect(1px, 1px, 1px, 1px);
  121. height: 1px;
  122. overflow: hidden;
  123. position: absolute;
  124. white-space: nowrap;
  125. width: 1px;
  126. }
  127. mark::before {
  128. content: &quot; [highlight start] &quot;;
  129. }
  130. mark::after {
  131. content: &quot; [highlight end] &quot;;
  132. }
  133. *[lang=fr] mark::before {
  134. content: &quot; [début du surlignage] &quot;;
  135. }
  136. *[lang=fr] mark::after {
  137. content: &quot; [fin du surlignage] &quot;;
  138. }
  139. </code></pre>
  140. <p>En espérant que cela puisse servir à d’autres. Si vous utilisez un lecteur d’écran je serais curieux de savoir si cela vous est utile.</p>
  141. <hr />
  142. <p>Note : je trouve que la balise <code>mark</code> est pertinente pour pointer un court passage dans une citation plus longue, et comme je fais pas mal de citations je compte m’en servir par la suite. J’espère que les styles par défaut de votre <a href="/david/blog/2019/flux-rss/">agrégateur</a> ne sont pas trop agressifs…</p>
  143. <h2 id="consentement">Consentement <a href="#consentement" title="Ancre vers cette partie">#</a></h2>
  144. <blockquote>
  145. <p><em>[Discussion après avoir vu un clip d’Angèle chez des amis, en particulier <a href="https://www.youtube.com/watch?v=Hi7Rx3En7-k&amp;t=120">cette partie</a>]</em><br />
  146. — Mais alors dans La Belle au Bois Dormant, le Prince il devrait demander à la Princesse avant de l’embrasser ?</p>
  147. </blockquote>
  148. <p>#BalanceTonDisney</p>
  149. <p>(Il n’a jamais vu le dessin animé, on le lui a raconté.)</p>
  150. </main>
  151. <nav>
  152. <p class="center">
  153. <a rel="prev" href="/david/2020/02/14/" title="Publication précédente : Espoirs">←</a> •
  154. <a href="/david/2020/" title="Liste des publications récentes">↑</a>
  155. • <a rel="next" href="/david/2020/03/13/" title="Publication suivante : Technique">→</a>
  156. </p>
  157. </nav>
  158. </article>
  159. <hr>
  160. <footer>
  161. <p>
  162. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  163. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  164. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  165. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  166. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  167. </p>
  168. <template id="theme-selector">
  169. <form>
  170. <fieldset>
  171. <legend>Thème</legend>
  172. <label>
  173. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  174. </label>
  175. <label>
  176. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  177. </label>
  178. <label>
  179. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  180. </label>
  181. </fieldset>
  182. </form>
  183. </template>
  184. </footer>
  185. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module" defer></script>
  186. <script type="text/javascript">
  187. function loadThemeForm(templateName) {
  188. const themeSelectorTemplate = document.querySelector(templateName)
  189. const form = themeSelectorTemplate.content.firstElementChild
  190. themeSelectorTemplate.replaceWith(form)
  191. form.addEventListener('change', (e) => {
  192. const chosenColorScheme = e.target.value
  193. localStorage.setItem('theme', chosenColorScheme)
  194. toggleTheme(chosenColorScheme)
  195. })
  196. const selectedTheme = localStorage.getItem('theme')
  197. if (selectedTheme && selectedTheme !== 'undefined') {
  198. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  199. }
  200. }
  201. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  202. window.addEventListener('load', () => {
  203. let hasDarkRules = false
  204. for (const styleSheet of Array.from(document.styleSheets)) {
  205. let mediaRules = []
  206. for (const cssRule of styleSheet.cssRules) {
  207. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  208. continue
  209. }
  210. // WARNING: Safari does not have/supports `conditionText`.
  211. if (cssRule.conditionText) {
  212. if (cssRule.conditionText !== prefersColorSchemeDark) {
  213. continue
  214. }
  215. } else {
  216. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  217. continue
  218. }
  219. }
  220. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  221. }
  222. // WARNING: do not try to insert a Rule to a styleSheet you are
  223. // currently iterating on, otherwise the browser will be stuck
  224. // in a infinite loop…
  225. for (const mediaRule of mediaRules) {
  226. styleSheet.insertRule(mediaRule.cssText)
  227. hasDarkRules = true
  228. }
  229. }
  230. if (hasDarkRules) {
  231. loadThemeForm('#theme-selector')
  232. }
  233. })
  234. </script>
  235. </body>
  236. </html>