A place to cache linked articles (think custom and personal wayback machine)
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.

4 年之前
4 年之前
4 年之前
4 年之前
4 年之前
4 年之前
4 年之前
4 年之前
4 年之前
4 年之前
4 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  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>Fragments (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  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. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://nrkn.fr/blog/2020/01/19/fragments-9/">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Fragments</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://nrkn.fr/blog/2020/01/19/fragments-9/" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <h3>#1. Divide <span class="amp">&amp;</span> Conquer</h3>
  69. <p>Suffirait-il donc d’un bête rectangle de bois ? Et encore, pas du massif, un simple plaqué. Mais avec un joli rendu, une agréable texture. Des pieds apparemment solides, un petit tiroir entouré de deux niches guère plus vastes. Le tout posé sur un tapis gris, comme ça, en vrac dans le salon. Un petit bureau, donc. Qui pourra également faire office de table. Pour dessiner un peu, pour découper parfois, pour encadrer enfin. Et même pour manger, si besoin.</p>
  70. <p>Mais surtout un bureau pour écrire. Dans une pièce vide de tout écran, sauf celui discret du portable que je peux y inviter, ou non. Que je peux replier, surtout. Comme je tends à le faire plus souvent depuis cette nouvelle installation. J’ai décidé de tourner le dos au mur de photos. J’aurai ainsi mes visages familiers et amicaux qui veilleront sur moi, sur mon application à la tâche. Sortes d’anges gardiens silencieux et bienveillants.</p>
  71. <blockquote><p>Passant la nuit au temple du sommet des cimes<br/>levant la main, caressant astres et étoiles<br/>sans oser parler à haute voix<br/>de peur d’effrayer les êtres supérieurs du ciel</p><p>Li Po – « L’Exilé du ciel »</p></blockquote>
  72. <p>Je fais donc face à l’une des baies vitrées. Celle qui devait m’offrir cette vue réconfortante sur « mon » arbre. Mais il n’en sera plus ainsi, tristement. L’autre déversera les ondes rougeoyantes du couchant sans risquer de m’éblouir. À la nuit tombée, la lumière artificielle de cette pièce est indirecte, tamisée, plutôt douce et chaude. En franche opposition au choix que j’ai retenu pour le bureau. Quelques pas seulement séparent ces deux pièces. Quelques pas en guise de frontière aisément franchissable entre deux univers pourtant bien distincts.</p>
  73. <p>Oui, effectivement.<br/>Il suffit de presque rien.</p>
  74. <h3>#2. Parmi les pages ivoire</h3>
  75. <blockquote><p>Comment ne pas décevoir ?<br/>Peut-être en cessant de chercher à ne pas décevoir ?<br/>Apprendre à demeurer soi.</p><p>Tout simplement.</p><p>Mais sans brutalité.<br/>Et avec la plus grande attention pour l’autre.</p></blockquote>
  76. <p>Au passage, la plus grande des vanités ne tiendrait-elle pas dans l'auto-citation ?</p>
  77. <h3>#3. Lecture(s)</h3>
  78. <p>À de rares exceptions près, et hormis les livres techniques, j’ai très peu lu durant ma vie d’adulte laborieux (ou ma vie laborieuse d’adulte, à voir). Il n’y a bien que depuis quelques années que cette pratique s’est réveillée, sans que je ne sache vraiment ce qui a été à l’origine de cette bascule assez soudaine. Si le fait d’avoir débranché la télévision n’est pas étranger — ce geste n’étant jamais anodin, de mon point de vue —, j’ai également l’impression que ma lente adoption de la photographie et de l’écriture personnelles a participé à ce changement profond.</p>
  79. <p>Toujours est-il que depuis que je me suis engagé sur cette pente, mon volume de lectures n’a cessé d’augmenter d’année en année, au point de me conduire désormais à régulièrement m’interroger sur les réelles motivations sous-jacentes. De même, je n’ai pas su m’organiser ou développer des habitudes de suivi et de prise de notes au fil de l’eau. Bien que je consigne souvent quelques passages que je redistille sous forme de citations au gré de mes billets, tout cela reste bien artisanal et approximatif. Surtout, je procède d’une manière qui me permet difficilement de replacer mes lectures dans le temps.</p>
  80. <p>Léger souci que j’étais parvenu à remiser, ou presque, sans vraiment avoir pris le temps d’une vraie réflexion. Jusqu’à la lecture d’un récit billet.</p>
  81. <blockquote><p>Impossible donc de lister les lectures de l’année. C’est la même chose chaque année, je le déplore et je réitère la même erreur. La lecture prend toujours une place considérable dans ma vie, mais elle est devenue parcellaire, découpée entre blogs, presse, divers sites web et fils Twitter.</p><p>J’aimerais garder une trace de mes découvertes culturelles, des réflexions et des émotions liées et constituer progressivement un corpus de références et de ressources où me replonger plus tard si je le souhaite.</p><p>Llu - « <a href="https://bribesdereel.net/traces-de-lectures">Garder une trace de ses lectures</a> »</p></blockquote>
  82. <p>J’ai donc profité de la démarche entamée par Llu pour essayer de me faire une idée plus précise de ce qui pourrait me convenir. J’ai ressorti <a href="https://nrkn.fr/blog/2017/12/16/cahier-de-projet/">ce bon vieux cahier de projet</a> pour en noircir quelques pages supplémentaires. Je vous épargne une longue tirade sur le gros coup de déprime que je me suis pris en travers de la face. Le constat du gouffre flagrant entre le nombre d’idées consignées et la misère de leurs (tentatives de) réalisations m’a laissé un goût bien amer. En guise de réaction de pur orgueil, je me suis donc rapidement attelé à la maquette d’une possible solution qui me conviendrait. S’il est encore un peu trop tôt pour crier victoire, je suis pour l’instant relativement satisfait du résultat provisoire.</p>
  83. <p>Affaire à suivre.<br/>Avec plein de vieilles questions qui ne manqueront pas de refaire surface…</p>
  84. <h3>#4. Il n'est plus</h3>
  85. <p>C’était un matin de fraîcheur bleue. Perdu à la rencontre du résidu des brumes du réveil et de la cacophonie des pensées vagabondes naissantes, digne rituel matinal du perchoir, je ne lui ai guère prêté attention, à ce bonhomme tout encordé et casqué de rouge, se hissant au milieu de ces hautes branches sans vert. Je lui en ai un peu voulu de s’y trouver, d’ailleurs. De cette proximité incongrue, d’abord. D’avoir pris la place de mes amis les piafs, plus que tout. Tache criarde au milieu de mon habituel et paisible tableau de début de journée. « Petite taille avant le printemps… », me suis-je tout juste dit avant de m’en retourner à l’intérieur et partir m’installer à mon propre poste de travail.</p>
  86. <p>Pris par mon activité, je n’ai pas vu le temps passer. Guère plus n’ai-je perçu les bruits ambiants de l’extérieur. Jusqu’à ce besoin de lever la tête et de me changer un instant les idées.</p>
  87. <p>Là, alors, la circulation, la valse des tramways. Et le bruit persistant d’une tronçonneuse. Voyant l’heure, « Comment ça ? Encore ? ». Un doute rapide, une angoisse soudaine, une quasi-certitude douloureuse. Avec précipitation, je me dirigeai vers la cuisine. Le froid s’en était allé ou presque, c’est l’effroi qui me saisit. En contrebas, mon ami meurtri. Un misérable tronc dégarni et raccourci. De larges rondelles que des casques rouges et orange lançaient sans ménagement dans une broyeuse. Bientôt le coup de grâce. Bientôt d’arbre il ne resterait que souche.</p>
  88. <blockquote><p>Comme poussière<br/>sous les grands froids<br/>un homme est mort</p><p>— Takahama Kyoshi</p></blockquote>
  89. <p>Depuis ce lundi, je suis en deuil.<br/>Depuis ce lundi, je porte une nouvelle cicatrice.</p>
  90. </main>
  91. </article>
  92. <hr>
  93. <footer>
  94. <p>
  95. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  96. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  97. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  98. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  99. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  100. </p>
  101. <template id="theme-selector">
  102. <form>
  103. <fieldset>
  104. <legend>Thème</legend>
  105. <label>
  106. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  107. </label>
  108. <label>
  109. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  110. </label>
  111. <label>
  112. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  113. </label>
  114. </fieldset>
  115. </form>
  116. </template>
  117. </footer>
  118. <script type="text/javascript">
  119. function loadThemeForm(templateName) {
  120. const themeSelectorTemplate = document.querySelector(templateName)
  121. const form = themeSelectorTemplate.content.firstElementChild
  122. themeSelectorTemplate.replaceWith(form)
  123. form.addEventListener('change', (e) => {
  124. const chosenColorScheme = e.target.value
  125. localStorage.setItem('theme', chosenColorScheme)
  126. toggleTheme(chosenColorScheme)
  127. })
  128. const selectedTheme = localStorage.getItem('theme')
  129. if (selectedTheme && selectedTheme !== 'undefined') {
  130. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  131. }
  132. }
  133. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  134. window.addEventListener('load', () => {
  135. let hasDarkRules = false
  136. for (const styleSheet of Array.from(document.styleSheets)) {
  137. let mediaRules = []
  138. for (const cssRule of styleSheet.cssRules) {
  139. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  140. continue
  141. }
  142. // WARNING: Safari does not have/supports `conditionText`.
  143. if (cssRule.conditionText) {
  144. if (cssRule.conditionText !== prefersColorSchemeDark) {
  145. continue
  146. }
  147. } else {
  148. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  149. continue
  150. }
  151. }
  152. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  153. }
  154. // WARNING: do not try to insert a Rule to a styleSheet you are
  155. // currently iterating on, otherwise the browser will be stuck
  156. // in a infinite loop…
  157. for (const mediaRule of mediaRules) {
  158. styleSheet.insertRule(mediaRule.cssText)
  159. hasDarkRules = true
  160. }
  161. }
  162. if (hasDarkRules) {
  163. loadThemeForm('#theme-selector')
  164. }
  165. })
  166. </script>
  167. </body>
  168. </html>