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.

index.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  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` element
  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>Contribution au monde et outils (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="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://nota-bene.org/Contribution-au-monde-et-outils">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Contribution au monde et outils</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://nota-bene.org/Contribution-au-monde-et-outils" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p><a href="https://www.guillemettesilvand.fr/" class="spip_out" rel="external">Guillemette</a> réfléchit à sa présence au monde, à son rôle, à son statut social d’une certaine manière, et aussi à son cheminement. Je me pose et j’écoute.</p>
  71. <p>Un extrait :</p>
  72. <blockquote cite="https://peertube.nogafa.org/videos/watch/cd2f84ce-c1bb-403f-a767-c36ef2360c30">
  73. <p>Ça n’a pas toujours été facile pour moi de répondre à la question « Qu’est-ce que tu fais dans la vie ? », « C’est quoi ton travail ? », mais aujourd’hui, voilà, je suis heureuse de pouvoir partager ça avec vous. J’ai trouvé, je me suis posé, j’ai passé plein d’étapes […].</p>
  74. <p>Aujourd’hui je sais ce que je fais […].</p>
  75. <p>J’ai longtemps confondu [ma contribution au monde] avec les outils que j’utilise pour apporter ma contribution. J’ai plusieurs outils, […].</p>
  76. <p>Parfois j’ai pensé que j’étais un outil, par exemple j’ai pensé que j’étais danseuse et que c’était ça ma mission de vie, ce que je devais apporter à ce monde. Et puis j’ai la photographie, aussi, donc je suis photographe. Et puis je fais aussi des pratiques énergétiques, et puis je fais aussi de la création plastique.</p>
  77. <p>Donc plein d’outils, et finalement j’ai compris que je ne me réduisais pas à un outil ni deux ni trois. J’ai compris que tout cela n’était que des outils, et que ce que j’apporte vraiment au monde c’est qui je suis.</p>
  78. </blockquote>
  79. <p>(C’est une vidéo non sous-titrée, je n’ai pas tout retranscrit malheureusement.)</p>
  80. <p>J’aime vraiment cette première réflexion<span class="spip_note_ref"> [<a href="#nb1" class="spip_note" rel="appendix" title="Je veux dire : c’est l’introduction de sa vidéo, ensuite elle développe sur ce (...)" id="nh1">1</a>]</span>. J’ai l’impression que nous tenons de nos parents et eux des leurs et ainsi de suite le schéma habituel qui voudrait que nous sommes ce que nous faisons pour gagner notre croûte — à tel point qu’on en vient à craindre qu’une personne qui s’identifie si fortement à son métier va s’étioler quand la retraite arrive<span class="spip_note_ref"> [<a href="#nb2" class="spip_note" rel="appendix" title="J’ai craint ça pour mon père, par exemple, et fort heureusement il n’en a rien (...)" id="nh2">2</a>]</span>.</p>
  81. <p>Avez-vous remarqué que quand vous rencontrez des gens, c’est confortable de leur demander ce qu’ils font, et de leur dire ce que nous faisons ? Alors que sur le fond, finalement, on s’en moque. Le travail ne devrait pas être une propriété définitoire, même si dans le meilleur des cas c’est celui qu’on a choisi et qui nous ressemble<span class="spip_note_ref"> [<a href="#nb3" class="spip_note" rel="appendix" title="Ou plutôt : qui nous ressemble un peu, et souvent, qui nous ressemble de (...)" id="nh3">3</a>]</span>. Qui es-tu ? Je suis Untel-Unetelle, j’aime telle musique, je prends telles photos, je viens de lire tel truc qui m’a amusé/fait réfléchir/fait suer. Bref, nous sommes un faisceau de plusieurs fibres, et quand on est chanceux au point de pouvoir les explorer, on a plein de fibres différentes qui toutes nous enrichissent.</p>
  82. <p>Au passage, j’aime bien cette expression, « j’ai pensé que j’étais un outil », qui croise assez la notion de « rouage » pour définir le rôle que la plupart d’entre-nous jouons dans notre boulot, je trouve.</p>
  83. <p>Et puis, pour finir et puisqu’on parle aussi de son activité de photographe, j’ai eu la chance que <a href="https://uneviedallegresse.wordpress.com/2019/02/24/sourire-51/" class="spip_out" rel="external">Guillemette me tire le portrait</a> dans sa série des Sourires. Les rencontres et les sourires, c’est la vie.</p>
  84. </article>
  85. <hr>
  86. <footer>
  87. <p>
  88. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  89. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  90. </svg> Accueil</a> •
  91. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  92. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  93. </svg> Suivre</a> •
  94. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  95. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  96. </svg> Pro</a> •
  97. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  98. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  99. </svg> Email</a> •
  100. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  101. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  102. </svg> Légal</abbr>
  103. </p>
  104. <template id="theme-selector">
  105. <form>
  106. <fieldset>
  107. <legend><svg class="icon icon-brightness-contrast">
  108. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  109. </svg> Thème</legend>
  110. <label>
  111. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  112. </label>
  113. <label>
  114. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  115. </label>
  116. <label>
  117. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  118. </label>
  119. </fieldset>
  120. </form>
  121. </template>
  122. </footer>
  123. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  124. <script>
  125. function loadThemeForm(templateName) {
  126. const themeSelectorTemplate = document.querySelector(templateName)
  127. const form = themeSelectorTemplate.content.firstElementChild
  128. themeSelectorTemplate.replaceWith(form)
  129. form.addEventListener('change', (e) => {
  130. const chosenColorScheme = e.target.value
  131. localStorage.setItem('theme', chosenColorScheme)
  132. toggleTheme(chosenColorScheme)
  133. })
  134. const selectedTheme = localStorage.getItem('theme')
  135. if (selectedTheme && selectedTheme !== 'undefined') {
  136. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  137. }
  138. }
  139. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  140. window.addEventListener('load', () => {
  141. let hasDarkRules = false
  142. for (const styleSheet of Array.from(document.styleSheets)) {
  143. let mediaRules = []
  144. for (const cssRule of styleSheet.cssRules) {
  145. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  146. continue
  147. }
  148. // WARNING: Safari does not have/supports `conditionText`.
  149. if (cssRule.conditionText) {
  150. if (cssRule.conditionText !== prefersColorSchemeDark) {
  151. continue
  152. }
  153. } else {
  154. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  155. continue
  156. }
  157. }
  158. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  159. }
  160. // WARNING: do not try to insert a Rule to a styleSheet you are
  161. // currently iterating on, otherwise the browser will be stuck
  162. // in a infinite loop…
  163. for (const mediaRule of mediaRules) {
  164. styleSheet.insertRule(mediaRule.cssText)
  165. hasDarkRules = true
  166. }
  167. }
  168. if (hasDarkRules) {
  169. loadThemeForm('#theme-selector')
  170. }
  171. })
  172. </script>
  173. </body>
  174. </html>