Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 14KB

3 years ago
2 years ago
3 years ago
3 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  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>Écriture — David Larlet</title>
  13. <!-- That good ol' feed, subscribe :). -->
  14. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  15. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  16. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  17. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  18. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  19. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  20. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  21. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  22. <meta name="msapplication-TileColor" content="#f0f0ea">
  23. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- Documented, feel free to shoot an email. -->
  26. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  27. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  28. <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>
  29. <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>
  30. <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>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <script type="text/javascript">
  35. function toggleTheme(themeName) {
  36. document.documentElement.classList.toggle(
  37. 'forced-dark',
  38. themeName === 'dark'
  39. )
  40. document.documentElement.classList.toggle(
  41. 'forced-light',
  42. themeName === 'light'
  43. )
  44. }
  45. const selectedTheme = localStorage.getItem('theme')
  46. if (selectedTheme !== 'undefined') {
  47. toggleTheme(selectedTheme)
  48. }
  49. </script>
  50. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  51. <article>
  52. <h1>Écriture</h1>
  53. <nav>
  54. <p class="center">
  55. <a rel="prev" href="/david/2020/01/03/" title="Publication précédente : Briques">←</a> •
  56. <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  57. • <a rel="next" href="/david/2020/01/10/" title="Publication suivante : Travail">→</a>
  58. </p>
  59. </nav>
  60. <hr>
  61. <p><em>De l’importance d’écrire au quotidien. Pour pratiquer, pour soi, pour les autres.</em></p>
  62. <h2 id="page-blanche">Page blanche <a href="#page-blanche" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>Il y a un plaisir certain à repartir d’une page blanche. Je remarque que j’ai souvent envie d’une nouvelle façon d’agencer mes idées sur cet espace en début d’année. Probablement forcé par le besoin car il faut de toute façon adapter l’outil de l’année précédente. Parfois, cela se solde aussi par un nouveau « design » lorsque j’atteins mon propre <a href="https://omarabid.com/the-modern-web">point de rupture</a> (<a href="/david/cache/2020/685842ac9d1a3206af33dbd51d08cbf0/">cache</a>).</p>
  63. <p><em>Ce qui me fait penser qu’il faudra que je parle de saisonnalité à un moment.</em></p>
  64. <p>J’avais commencé à me rapprocher d’un rendu proche de <a href="https://commonmark.org/">CommonMark</a> sur mon <a href="http://larlet.com/">profil pro</a> et je m’y suis finalement attaché au point de vouloir le décliner ici. J’apprécie ce côté relativement minimaliste qui se rapproche de l’expérience d’écriture que j’ai. Un grand merci à <a href="https://fvsch.com/">Florens</a> pour <a href="https://fvsch.github.io/remarkdown/">remarkdown</a> dont la documentation est remarkable :-).</p>
  65. <h2 id="writing">Writing &gt; * <a href="#writing" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
  66. <blockquote lang="en">
  67. <p>Writing solidifies, chat dissolves. Substantial decisions start and end with an exchange of complete thoughts, not one-line-at-a-time jousts. If it's important, critical, or fundamental, write it up, don't chat it down.</p>
  68. <p>[…]</p>
  69. <p>Five people in a room for an hour isn't a one hour meeting, it's a five hour meeting. Be mindful of the tradeoffs.</p>
  70. <p><cite><em><a href="https://basecamp.com/guides/how-we-communicate">Guide to Internal Communication, the Basecamp Way</a></em> (<a href="/david/cache/2020/322e7a8997c732a5fdca0baaea7b9ede/">cache</a>)</cite></p>
  71. </blockquote>
  72. <p>De l’importance de l’écriture dans une organisation. Une culture asynchrone et distribuée ne peut pas passer par l’oralité uniquement. Les personnes localisées au même endroit ont du mal à se rendre compte de ce problème. À part peut-être lors du départ d’un·e collègue, ce qui est déjà trop tard.</p>
  73. <blockquote lang="en">
  74. <p>Speaking only helps who’s in the room, writing helps everyone. This includes people who's couldn't make it, or future employees who join years from now.</p>
  75. <p><cite><em>Ibid.</em></cite></p>
  76. </blockquote>
  77. <p>J’accorde de plus en plus d’importance aux traces écrites qui accompagnent la vie d’un produit. Peut-être depuis que j’ai <a href="/david/blog/2013/utilite-code/">pris conscience</a> du fait que <cite>Je produis du jetable qui peut accidentellement durer longtemps</cite>.</p>
  78. <p>Ce qu’il en reste : l’expérience vécue et l’histoire que l’on a pu écrire ensemble le long du chemin. On en revient à <a href="/david/stream/2019/12/10/">l’importance d’un journal</a> pour consigner ces épisodes de vie.</p>
  79. <h2 id="rss-readers">RSS readers <a href="#rss-readers" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
  80. <blockquote lang="en">
  81. <p>I think it would be reasonable to guess that the number of people who use an RSS reader is probably greater than a million, and could be several million people.</p>
  82. <p><cite><em><a href="https://inessential.com/2020/01/03/estimating_netnewswire_for_ios_demand">Estimating NetNewsWire for iOS Demand</a></em> (<a href="/david/cache/2020/ceecad22409cbd161b85bf5f18b09413/">cache</a>)</cite></p>
  83. </blockquote>
  84. <p>En tant que personne produisant un <a href="/david/blog/2019/flux-rss/">flux RSS</a>, cela me réjouis. En tant que personne motivée par un Web acentré, cela me réjouis. En tant que lecteur, cela me réjouis.</p>
  85. <p>Si vous produisez du contenu sur une plateforme ne produisant pas de RSS, cela m’attriste. Peut-être est-ce même la définition d’une plateforme…</p>
  86. <h2 id="meditation">Meditation <a href="#meditation" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
  87. <blockquote lang="en">
  88. <p>Meditation teaches humility and patience, because you must constantly confront that most disappointing person: yourself.</p>
  89. <p>[…]</p>
  90. <p>Of those who practice meditation, some give up, because trying to still the mind is futile and absurd. Others continue meditating, because trying to still the mind is futile and absurd, but they have a taste for absurdity.</p>
  91. <p><cite><em><a href="https://www.thesunmagazine.org/issues/529/sparrows-guide-to-meditation">Sparrow’s Guide To Meditation</a></em> (<a href="/david/cache/2020/fb2849b42586654e0c899bf1a31fa5a5/">cache</a>)</cite></p>
  92. </blockquote>
  93. <p>Ce guide me donne envie de tenter la méditation. Ou l’écriture caustique. Les deux vont peut-être de pair ?</p>
  94. <p>La méditation serait probablement pour moi une anti-écriture, un moment où je n’essaye plus de recoller les morceaux. Il me semble que c’est un état auquel j’arrive lorsque je suis dans un <em>flow</em> sportif. Épuiser le corps pour apaiser l’esprit.</p>
  95. <h2 id="impermanence">Impermanence <a href="#impermanence" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
  96. <blockquote>
  97. <p>Si nous n’acceptons pas le fait que tout change, nous ne pouvons trouver la parfaite sérénité. C’est la vérité, mais nous avons malheureusement du mal à l’accepter. Comme nous ne pouvons accepter la vérité de l’impermanence, nous souffrons. La cause de la souffrance est donc notre refus d’accepter la vérité.</p>
  98. <p>[…]</p>
  99. <p>C’est l’enseignement fondamental du bouddhisme. Le plaisir n’est pas différent de la difficulté. Le bon n’est pas différent du mauvais. Mauvais est bon ; bon est mauvais. Ce sont les deux côtés d’une même pièce. L’illumination devrait donc être dans la pratique. C’est cela, bien comprendre la pratique, et bien comprendre notre vie. Trouver le plaisir au milieu de la souffrance est donc la seule manière d’accepter la vérité et l’impermanence. Si vous ne comprenez pas comment accepter cette vérité, nous ne pouvez vivre dans ce monde.</p>
  100. <p><cite><em><a href="/david/2020/12/21/#esprit-zen-esprit-neuf">Esprit Zen, esprit neuf</a></em>, Shunryu Suzuki</cite></p>
  101. </blockquote>
  102. <p>Il est beaucoup question de pratique dans ce livre sur le bouddhisme. Et de son lien étroit avec la <a href="/david/stream/2015/09/22/">posture</a> et la <a href="/david/stream/2015/09/02/">respiration</a> qui sont les deux axes d’amélioration dans ma pratique sportive. J’ai parfois l’impression de faire <em>zazen</em> <a href="/david/stream/2015/09/25/">en mouvement</a>, je ne sais pas si cela est possible et/ou si je n’ai rien compris en fait.</p>
  103. <nav>
  104. <p class="center">
  105. <a rel="prev" href="/david/2020/01/03/" title="Publication précédente : Briques">←</a> •
  106. <a href="/david/2020/" title="Liste des publications récentes">↑</a>
  107. • <a rel="next" href="/david/2020/01/10/" title="Publication suivante : Travail">→</a>
  108. </p>
  109. </nav>
  110. </article>
  111. <hr>
  112. <footer>
  113. <p>
  114. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  115. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  116. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  117. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  118. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  119. </p>
  120. <template id="theme-selector">
  121. <form>
  122. <fieldset>
  123. <legend>Thème</legend>
  124. <label>
  125. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  126. </label>
  127. <label>
  128. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  129. </label>
  130. <label>
  131. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  132. </label>
  133. </fieldset>
  134. </form>
  135. </template>
  136. </footer>
  137. <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
  138. <script type="text/javascript">
  139. function loadThemeForm(templateName) {
  140. const themeSelectorTemplate = document.querySelector(templateName)
  141. const form = themeSelectorTemplate.content.firstElementChild
  142. themeSelectorTemplate.replaceWith(form)
  143. form.addEventListener('change', (e) => {
  144. const chosenColorScheme = e.target.value
  145. localStorage.setItem('theme', chosenColorScheme)
  146. toggleTheme(chosenColorScheme)
  147. })
  148. const selectedTheme = localStorage.getItem('theme')
  149. if (selectedTheme !== 'undefined') {
  150. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  151. toggleTheme(selectedTheme)
  152. }
  153. }
  154. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  155. window.addEventListener('load', () => {
  156. let hasDarkRules = false
  157. for (const styleSheet of Array.from(document.styleSheets)) {
  158. let mediaRules = []
  159. for (const cssRule of styleSheet.cssRules) {
  160. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  161. continue
  162. }
  163. // WARNING: Safari does not have/supports `conditionText`.
  164. if (cssRule.conditionText) {
  165. if (cssRule.conditionText !== prefersColorSchemeDark) {
  166. continue
  167. }
  168. } else {
  169. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  170. continue
  171. }
  172. }
  173. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  174. }
  175. // WARNING: do not try to insert a Rule to a styleSheet you are
  176. // currently iterating on, otherwise the browser will be stuck
  177. // in a infinite loop…
  178. for (const mediaRule of mediaRules) {
  179. styleSheet.insertRule(mediaRule.cssText)
  180. hasDarkRules = true
  181. }
  182. }
  183. if (hasDarkRules) {
  184. loadThemeForm('#theme-selector')
  185. }
  186. })
  187. </script>
  188. </body>
  189. </html>