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 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  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>Regard — David Larlet</title>
  13. <meta name="description" content="And, as many of my students have told me, their lives seem richer because they are seeing better and seeing more. It’s helpful to remember that we don’t teach reading and writing to produce only poets and writers, but rather to improve thinking.">
  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. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  53. <article>
  54. <header>
  55. <h1>Regard</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2022/06/30/" title="Publication précédente : Valeur(s)">← Précédent</a> •
  60. <nobr>
  61. <a href="/david/" title="Aller à l’accueil"
  62. ><svg class="icon icon-home">
  63. <use
  64. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  65. ></use>
  66. </svg>
  67. Accueil</a
  68. >
  69. </nobr>
  70. <nobr>
  71. <a href="/david/recherche/" title="Aller à la page de recherche"
  72. ><svg class="icon icon-search">
  73. <use
  74. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
  75. ></use>
  76. </svg>
  77. Recherche</a
  78. >
  79. </nobr>
  80. • <a rel="next" href="/david/2022/07/08/" title="Publication suivante : LudoviCovid">Suivant →</a>
  81. </p>
  82. </nav>
  83. <hr>
  84. <blockquote lang="en">
  85. <p>And, as many of my students have told me, their lives seem richer because they are <em>seeing better and seeing more</em>. It’s helpful to remember that we don’t teach reading and writing to produce only poets and writers, but rather <mark>to improve&nbsp;thinking.</mark></p>
  86. <p><cite><em>The New Drawing on the Right Side of the Brain</em>, Betty&nbsp;Edwards</cite></p>
  87. </blockquote>
  88. <p>Si la photographie m’a permis d’être attentif à la composition, à la couleur, au mouvement, à l’émotion, le dessin me fait regarder d’autres choses comme les ombres, les textures, l’in·attention aux détails, le choix de représentation. Une autre forme —&nbsp;non pas de capture&nbsp;— mais de témoignage du monde, une forme de souvenance non-écrite dont on retient la finalité mais aussi le contexte de sa&nbsp;production.</p>
  89. <p>Je n’ai pas l’impression de savoir mieux dessiner aujourd’hui (en dépit du temps passé à faire <a href="https://drawabox.com/">des exercices</a>) mais je sais probablement mieux regarder ce qui m’entoure. L’important n’étant pas de voir la matrice dans laquelle nous évoluons mais d’être en capacité de la&nbsp;re·créer.</p>
  90. <p>Merci à Antoine pour l’inspiration il y a quelques années… et à tou·tes les autres le long du&nbsp;chemin.</p>
  91. <blockquote>
  92. <p>Ça se passerait ailleurs. Si tant est que la création soit une quantité d’énergie disponible. Alors allons voir ailleurs plutôt que rien du tout. Hésiter, c’est vraiment rater. L’échec est un bel essai. Il faut négocier avec l’univers créé. Celui-ci n’est pas détaché du reste. S’il y a un reste. Tout se réagençait déjà. Les carnets cachaient les métamorphoses à l’œuvre. L’urgence de&nbsp;s’écouter.</p>
  93. <p><cite><em><a href="https://www.quaternum.net/2020/02/29/epuiser-la-pratique/">Épuiser la pratique</a></em>&nbsp;(<a href="/david/cache/2020/fd776407232cd6fd7627bac7dba39755/">cache</a>)</cite></p>
  94. </blockquote>
  95. <blockquote>
  96. <p>🤗 Je n’ai pas d’objectif noble, ni de message à transmettre. J’ai un besoin égoïste de collectionneuse. Peu importe le médium s’il permet de capturer au mieux ce que je sens et ce que je ressens. Je n’ai pas peur des accidents dans mon processus, ils expriment le jeu du hasard dans la vie. Les accepter transforme mon travail en pratique&nbsp;spirituelle.</p>
  97. <p><cite><em><a href="https://ynote.hk/humeur/explorartise">Pourquoi je dessine&#8239;?</a></em>&nbsp;(<a href="/david/cache/2022/08eb28d8ecab162cb267257c5352b791/">cache</a>)</cite></p>
  98. </blockquote>
  99. <blockquote lang="en">
  100. <p>🙇 I feel like most of my life I spent learning how to use my mind, now I am learning how to use my hands, my body, my senses. It makes me feel more present compared to living perpetually on the internet. I’m grateful to have the time and opportunity to learn how to cook. <mark>It feels like something that I can be learning for a very long time, and still not be very good at it.</mark> Which is a great choice of skill to develop to experience the joy of learning, in my opinion. It can be really easy with the right tools, and as difficult as we want it to&nbsp;be.</p>
  101. <p><cite><em><a href="https://winnielim.org/journal/what-deepened-my-joy-in-cooking/">what deepened my joy in cooking</a></em>&nbsp;(<a href="/david/cache/2022/43474059e42ea4b1555375daa85d50a5/">cache</a>)</cite></p>
  102. </blockquote>
  103. <blockquote>
  104. <p>🖐 Pour penser le geste dans son rapport au corps et à ce qui peut être projeté d’expression sur ce dernier, les créations devaient décliner les rencontres entre plusieurs niveaux de matière et donc, pour faire chair, de&nbsp;visibilité.</p>
  105. <p><cite><em><a href="https://blank.blue/creas/scanner-a-genoux/">Scanner à genoux</a></em>&nbsp;(<a href="/david/cache/2022/3a5ff20d8606e8299d06914cb4c6a37d/">cache</a>)</cite></p>
  106. </blockquote>
  107. <blockquote>
  108. <p>🙆 L’art est ce qui donne un sens humain au travail. Il est même, selon la version morrissienne du socialisme, «&nbsp;une nécessité de la vie humaine&nbsp;», «&nbsp;la finalité de la vie&nbsp;», parce qu’il permet, seul, «&nbsp;l’emploi agréable de nos énergies&nbsp;». Ce que Morris appelle «&nbsp;l’idéal socialiste de l’art&nbsp;», c’est que «&nbsp;l’art doit faire partie intégrante de tous les objets manufacturés possédant une forme bien précise et destinés à durer.&nbsp;» Pour lui, les hommes se nourrissent d’art comme producteur et comme consommateur, puisqu’ils ne peuvent exprimer la plénitude de leurs facultés que dans un travail créatif et qu’<mark>ils ne peuvent trouver de plaisir dans l’usage d’objets que si ceux-ci suscitent de l’admiration et du&nbsp;respect.</mark></p>
  109. <p><cite><em><a href="http://www.journaldumauss.net/?William-Morris-penseur-et-artisan-de-l-autonomie-et-de-la-beaute">William Morris, penseur et artisan de l’autonomie et de la beauté</a></em>&nbsp;(<a href="/david/cache/2022/39043b7bdcd5355a2e255d9f06237e72/">cache</a>)</cite></p>
  110. </blockquote>
  111. <blockquote>
  112. <p>🔔 Quand vous lisez ce livre, quand vous méditez, ce n’est pas dans le but d’acquérir des notions ou des idées. En fait, c’est pour lâcher prise sur des notions et des idées. Ne vous contentez pas de remplacer vos notions et vos idées familières par de nouvelles. Cessez de courir après les notions de bonheur, les unes après les autres, remplaçant une idée par une&nbsp;autre.</p>
  113. <p><cite><em>Les bienfaits du silence</em>, Thich Nhat&nbsp;Hanh</cite></p>
  114. </blockquote>
  115. <nav>
  116. <p class="center">
  117. <a rel="prev" href="/david/2022/06/30/" title="Publication précédente : Valeur(s)">← Précédent</a> •
  118. <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
  119. • <a rel="next" href="/david/2022/07/08/" title="Publication suivante : LudoviCovid">Suivant →</a>
  120. </p>
  121. </nav>
  122. </article>
  123. <hr>
  124. <footer>
  125. <p>
  126. <nobr>
  127. <a href="/david/" title="Aller à l’accueil"
  128. ><svg class="icon icon-home">
  129. <use
  130. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  131. ></use>
  132. </svg>
  133. Accueil</a
  134. >
  135. </nobr>
  136. <nobr>
  137. <a href="/david/log/" title="Accès au flux RSS"
  138. ><svg class="icon icon-rss2">
  139. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  140. </svg>
  141. Suivre</a
  142. >
  143. </nobr>
  144. <nobr>
  145. <a href="http://larlet.com" title="Go to my English profile" data-instant
  146. ><svg class="icon icon-user-tie">
  147. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  148. </svg>
  149. Pro</a
  150. >
  151. </nobr>
  152. <nobr>
  153. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  154. ><svg class="icon icon-mail">
  155. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  156. </svg>
  157. Email</a
  158. >
  159. </nobr>
  160. <nobr>
  161. <abbr
  162. class="nowrap"
  163. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  164. ><svg class="icon icon-hammer2">
  165. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  166. </svg>
  167. Légal</abbr
  168. >
  169. </nobr>
  170. </p>
  171. <template id="theme-selector">
  172. <form>
  173. <fieldset>
  174. <legend><svg class="icon icon-brightness-contrast">
  175. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  176. </svg> Thème</legend>
  177. <label>
  178. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  179. </label>
  180. <label>
  181. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  182. </label>
  183. <label>
  184. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  185. </label>
  186. </fieldset>
  187. </form>
  188. </template>
  189. </footer>
  190. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  191. <script>
  192. function loadThemeForm(templateName) {
  193. const themeSelectorTemplate = document.querySelector(templateName)
  194. const form = themeSelectorTemplate.content.firstElementChild
  195. themeSelectorTemplate.replaceWith(form)
  196. form.addEventListener('change', (e) => {
  197. const chosenColorScheme = e.target.value
  198. localStorage.setItem('theme', chosenColorScheme)
  199. toggleTheme(chosenColorScheme)
  200. })
  201. const selectedTheme = localStorage.getItem('theme')
  202. if (selectedTheme && selectedTheme !== 'undefined') {
  203. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  204. }
  205. }
  206. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  207. window.addEventListener('load', () => {
  208. let hasDarkRules = false
  209. for (const styleSheet of Array.from(document.styleSheets)) {
  210. let mediaRules = []
  211. for (const cssRule of styleSheet.cssRules) {
  212. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  213. continue
  214. }
  215. // WARNING: Safari does not have/supports `conditionText`.
  216. if (cssRule.conditionText) {
  217. if (cssRule.conditionText !== prefersColorSchemeDark) {
  218. continue
  219. }
  220. } else {
  221. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  222. continue
  223. }
  224. }
  225. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  226. }
  227. // WARNING: do not try to insert a Rule to a styleSheet you are
  228. // currently iterating on, otherwise the browser will be stuck
  229. // in a infinite loop…
  230. for (const mediaRule of mediaRules) {
  231. styleSheet.insertRule(mediaRule.cssText)
  232. hasDarkRules = true
  233. }
  234. }
  235. if (hasDarkRules) {
  236. loadThemeForm('#theme-selector')
  237. }
  238. })
  239. </script>
  240. </body>
  241. </html>