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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  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>Vacance — David Larlet</title>
  13. <meta name="description" content="Comme un besoin de rendre ce temps d’écriture vacant pour voir pour qui et par quoi est-ce qu’il pourrait être comblé pendant cette prise de soin.">
  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>Vacance</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/07/30/" title="Publication précédente : Poignée">← Précédent</a> •
  60. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  61. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  62. </svg> Accueil</a>
  63. • <a rel="next" href="/david/2021/08/09/" title="Publication suivante : Support">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <p>Comme un besoin de rendre ce temps d’écriture vacant pour voir pour qui et par quoi est-ce qu’il pourrait être comblé pendant cette <a href="/david/2021/04/22/" title="Vacances">prise de soin</a>.</p>
  68. <p>J’ai pu regarder la coupe du monde d’échecs en direct et voir Magnus Carlsen perdre contre Jan Krzysztof Duda en demi (mais alors quelle «&nbsp;petite&nbsp;» finale&#8239;!). Je commence à comprendre les lignes et stratégies évoquées par les commentateur·ices et c’est chouette.</p>
  69. <p>Je me suis demandé pourquoi est-ce que j’avais besoin de partager mes photos sur des réseaux instantanés plutôt qu’ici. J’ai l’impression que ça traduit une certaine insécurité, celle d’avoir besoin d’un retour (flatteur) immédiat. Peut-être qu’il faut que je travaille aussi la simplicité de publication pour ces media, cela rejoint des <a href="https://mastodon.social/@dav/106692473064847738">limites que je ressens</a> sur le <a href="https://git.larlet.fr/davidbgk/larlet-fr-david/src/commit/8c47d38cc0a979622399625ca5115565b4183883/site.py">générateur actuel</a>.</p>
  70. <blockquote>
  71. <p>Aller de plateforme en plateforme pour être poseur de tendance et passer de l’autre côté de barrière sans pour autant montrer la dimension réelle du travail. Certaines plateformes tentent un modèle plus ancien en tapant dans la longue traîne des amateurs qui voudraient bien devenir professionnels, ou plus exactement se faire du blé, ou de l’argent de poche, on ne sait pas trop. Une forme d’uberisation de l’image en quelques sortes. C’est fatiguant.</p>
  72. <p>[…]</p>
  73. <ul>
  74. <li><mark>a-matrice&nbsp;: sans matrice&nbsp;: le contraire&nbsp;:)</mark></li>
  75. </ul>
  76. <p><cite><em><a href="https://11d.im/journal/notes-photographie-amatrice/">Notes sur une photographie ouverte (et amatrice)</a></em> (<a href="/david/cache/2021/da6ba7728178232cfb94f52b8765a1d1/">cache</a>)</cite></p>
  77. </blockquote>
  78. <p>J’ai apprécié de faire <em>à nouveau</em> des photos de nénuphars depuis le raft, des cascades en pause longue et des oiseaux flous. Arpenter la forêt boréale jusqu’à épuiser les pensées, se dépenser jusqu’à l’épuisement. Évaluer l’épuisette et remettre les poissons à l’eau, nager comme un gardon avec l’enfant. Gelés et contents.</p>
  79. <figure>
  80. <a href="#geai-bleu"
  81. title="Cliquer pour une version haute résolution">
  82. <img src="/static/david/2021/geai-bleu.jpg" alt="Un geai bleu prenant son envol."
  83. loading="lazy" width="1600" height="1067" />
  84. </a>
  85. <a href="#_" class="lightbox" id="geai-bleu">
  86. <img src="/static/david/2021/geai-bleu.jpg" alt="Un geai bleu prenant son envol."
  87. loading="lazy" width="1600" height="1067" />
  88. </a>
  89. <figcaption>J’ai parfois l’impression d’arriver aux limites de mon matériel et c’est presque thérapeutique (de le penser et de l’accepter).</figcaption>
  90. </figure>
  91. <p>J’ai encore une fois été frustré en essayant de faire une vidéo «&nbsp;en famille&nbsp;» d’une ballade, le tempo n’est tout simplement pas adapté et il faut que je m’en rappelle car cela me met de mauvaise humeur. Ne pas oublier <a href="/david/blog/2013/photographie-exclusion/">ceci</a>.</p>
  92. <p>J’ai appris à jouer à <em>Quarto!</em> et ça m’a plu. Ça donne une bonne idée de la faiblesse du cerveau lorsqu’il s’agit de n’évaluer que 4&nbsp;paramètres à la fois. On n’a pas tenté la variante <em>hardcore</em> qui ajoute aussi les carrés.</p>
  93. <p>J’ai observé avec stupeur des hommes montrer leur muscles et des femmes montrer leurs fesses devant des cascades. Je ne sais pas encore si je vais pouvoir/vouloir comprendre ces pratiques. Je me suis senti vieux.</p>
  94. <p>J’ai lu <em>Rupture(s)</em> de Claire Marin qui est une continuité inattendue après avoir lu <a href="/david/2021/01/07/" title="Blancheur"><em>Disparaître de soi</em></a> de David Le Breton (auquel elle fait d’ailleurs référence&#8239;!). Cela réveille en moi des choses autour de l’identité et de mon propre vécu. Elle m’a dit que c’était le propre des aphorismes.</p>
  95. <blockquote>
  96. <p>Il y aurait des vertus de l’échec. Vraiment&#8239;? Mais la rupture n’est parfois qu’un gâchis, un manque de courage, une lâcheté. Le constat d’échec d’un couple, d’une famille, d’une amitié, d’une politique, d’un projet. Et l’échec n’est souvent rien d’autre que lui-même, pauvre, décevant, un pur raté. <mark>La plupart des échecs ne nous apprennent rien.</mark> Pire, nous nous enlisons souvent dans le bégaiement des mêmes échecs, comme s’ils étaient inévitables, et ce, dans une jouissance paradoxale de leur répétition presque rassurante.</p>
  97. <p><cite><em>Rupture(s)</em>, Claire Marin</cite></p>
  98. </blockquote>
  99. <nav>
  100. <p class="center">
  101. <a rel="prev" href="/david/2021/07/30/" title="Publication précédente : Poignée">← Précédent</a> •
  102. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  103. • <a rel="next" href="/david/2021/08/09/" title="Publication suivante : Support">Suivant →</a>
  104. </p>
  105. </nav>
  106. </article>
  107. <hr>
  108. <footer>
  109. <p>
  110. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  111. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  112. </svg> Accueil</a> •
  113. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  114. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  115. </svg> Suivre</a> •
  116. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  117. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  118. </svg> Pro</a> •
  119. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  120. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  121. </svg> Email</a> •
  122. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  123. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  124. </svg> Légal</abbr>
  125. </p>
  126. <template id="theme-selector">
  127. <form>
  128. <fieldset>
  129. <legend><svg class="icon icon-brightness-contrast">
  130. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  131. </svg> Thème</legend>
  132. <label>
  133. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  134. </label>
  135. <label>
  136. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  137. </label>
  138. <label>
  139. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  140. </label>
  141. </fieldset>
  142. </form>
  143. </template>
  144. </footer>
  145. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  146. <script>
  147. function loadThemeForm(templateName) {
  148. const themeSelectorTemplate = document.querySelector(templateName)
  149. const form = themeSelectorTemplate.content.firstElementChild
  150. themeSelectorTemplate.replaceWith(form)
  151. form.addEventListener('change', (e) => {
  152. const chosenColorScheme = e.target.value
  153. localStorage.setItem('theme', chosenColorScheme)
  154. toggleTheme(chosenColorScheme)
  155. })
  156. const selectedTheme = localStorage.getItem('theme')
  157. if (selectedTheme && selectedTheme !== 'undefined') {
  158. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  159. }
  160. }
  161. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  162. window.addEventListener('load', () => {
  163. let hasDarkRules = false
  164. for (const styleSheet of Array.from(document.styleSheets)) {
  165. let mediaRules = []
  166. for (const cssRule of styleSheet.cssRules) {
  167. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  168. continue
  169. }
  170. // WARNING: Safari does not have/supports `conditionText`.
  171. if (cssRule.conditionText) {
  172. if (cssRule.conditionText !== prefersColorSchemeDark) {
  173. continue
  174. }
  175. } else {
  176. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  177. continue
  178. }
  179. }
  180. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  181. }
  182. // WARNING: do not try to insert a Rule to a styleSheet you are
  183. // currently iterating on, otherwise the browser will be stuck
  184. // in a infinite loop…
  185. for (const mediaRule of mediaRules) {
  186. styleSheet.insertRule(mediaRule.cssText)
  187. hasDarkRules = true
  188. }
  189. }
  190. if (hasDarkRules) {
  191. loadThemeForm('#theme-selector')
  192. }
  193. })
  194. </script>
  195. </body>
  196. </html>