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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439
  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>
  13. Étiquette #adaptation
  14. — David Larlet</title>
  15. <script>
  16. function toggleTheme(themeName) {
  17. document.documentElement.classList.toggle(
  18. 'forced-dark',
  19. themeName === 'dark'
  20. )
  21. document.documentElement.classList.toggle(
  22. 'forced-light',
  23. themeName === 'light'
  24. )
  25. }
  26. const selectedTheme = localStorage.getItem('theme')
  27. if (selectedTheme !== 'undefined') {
  28. toggleTheme(selectedTheme)
  29. }
  30. </script>
  31. <!-- Documented, feel free to shoot an email. -->
  32. <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  33. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  34. <link rel="preload"
  35. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  36. as="font"
  37. type="font/woff2"
  38. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  39. crossorigin>
  40. <link rel="preload"
  41. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  42. as="font"
  43. type="font/woff2"
  44. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  45. crossorigin>
  46. <link rel="preload"
  47. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  48. as="font"
  49. type="font/woff2"
  50. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  51. crossorigin>
  52. <link rel="preload"
  53. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  54. as="font"
  55. type="font/woff2"
  56. media="(prefers-color-scheme: dark)"
  57. crossorigin>
  58. <link rel="preload"
  59. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  60. as="font"
  61. type="font/woff2"
  62. media="(prefers-color-scheme: dark)"
  63. crossorigin>
  64. <link rel="preload"
  65. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  66. as="font"
  67. type="font/woff2"
  68. media="(prefers-color-scheme: dark)"
  69. crossorigin>
  70. <meta name="description" content="Publications relatives au tag #adaptation">
  71. <!-- That good ol' feed, subscribe :). -->
  72. <link rel="alternate"
  73. type="application/atom+xml"
  74. title="Feed"
  75. href="/david/log/">
  76. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  77. <link rel="apple-touch-icon"
  78. sizes="180x180"
  79. href="/static/david/icons2/apple-touch-icon.png">
  80. <link rel="icon"
  81. type="image/png"
  82. sizes="32x32"
  83. href="/static/david/icons2/favicon-32x32.png">
  84. <link rel="icon"
  85. type="image/png"
  86. sizes="16x16"
  87. href="/static/david/icons2/favicon-16x16.png">
  88. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  89. <link rel="mask-icon"
  90. href="/static/david/icons2/safari-pinned-tab.svg"
  91. color="#07486c">
  92. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  93. <meta name="msapplication-TileColor" content="#f7f7f7">
  94. <meta name="msapplication-config"
  95. content="/static/david/icons2/browserconfig.xml">
  96. <meta name="theme-color"
  97. content="#f7f7f7"
  98. media="(prefers-color-scheme: light)">
  99. <meta name="theme-color"
  100. content="#272727"
  101. media="(prefers-color-scheme: dark)">
  102. <!-- Is that even respected? Retrospectively? What a shAItshow…
  103. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  104. <meta name="robots" content="noai, noimageai">
  105. <style type="text/css">
  106. details[open] summary {
  107. display: none;
  108. }
  109. </style>
  110. <body data-instant-intensity="viewport-all">
  111. <article>
  112. <header>
  113. <hgroup>
  114. <h1>#adaptation</h1>
  115. <p>Publications relatives à cette étiquette</p>
  116. </hgroup>
  117. </header>
  118. <nav>
  119. <p>
  120. <a href="/david/" title="Aller à l’accueil">
  121. Accueil</a>
  122. <a rel="tags"
  123. href="/david/2024/#tags"
  124. title="Liste de toutes les étiquettes">
  125. Étiquettes</a>
  126. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
  127. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  128. </p>
  129. </nav>
  130. <h2>
  131. <a href="/david/2024/03/18/" title="Lien permanent vers cet article">Casquettes</a> <time datetime="2024-03-18">18 mars 2024</time>
  132. </h2>
  133. <p>L’impression de porter beaucoup de casquettes dans la même journée en ce moment. Genre ces dernières années en fait. Je ne sais pas encore si ça mène à l’épuisement ou si c’est ce qui me permet de ne pas&nbsp;m’ennuyer.</p>
  134. <p>Je vais bientôt pouvoir ajouter «&nbsp;nocoder&nbsp;» à mon CV. Petite joie technique&nbsp;(?) de la journée, on a réussi à connecter une feuille AiTable à la banque. On place une date dans une cellule et ça programme un virement de l’autre côté. C’était marrant de le faire en&nbsp;binôme.</p>
  135. <a href="#hr-121" title="Lien vers cette section de la page"><hr id="hr-121" /></a>
  136. <blockquote lang="en">
  137. <p>When you’re designing a piece of software, the single most important thing to design for is understandability. Security, performance, and correctness are all important, but <mark>they come after&nbsp;understandability.</mark></p>
  138. <p><cite><em><a data-link-domain="ntietz.com" href="https://ntietz.com/blog/the-most-important-goal-in-designing-software-is-understandability/" hreflang="en"
  139. title="Consultation de l’article (anglais)">The most important goal in designing software is understandability</a>
  140. <a href="/david/cache/2024/f154db1b6eccf69f498b4a31980367bd/" hreflang="en"
  141. data-tippy data-description="When you're designing a piece of software, the single most important thing to design for is understandability."
  142. data-source="https://ntietz.com/blog/the-most-important-goal-in-designing-software-is-understandability/"
  143. data-date="2024-03-18"
  144. data-favicon="https://ntietz.com/favicon-32x32.png"
  145. data-domain="ntietz.com"
  146. ><svg xmlns="http://www.w3.org/2000/svg"
  147. width="24" height="24" viewBox="0 0 24 24" fill="none"
  148. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  149. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  150. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  151. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  152. </svg>
  153. <span class="sr-only">[archive]</span></a></em></cite></p>
  154. </blockquote>
  155. <a href="#hr-122" title="Lien vers cette section de la page"><hr id="hr-122" /></a>
  156. <blockquote lang="en">
  157. <p>Open Source is rewarding- but it can also be&nbsp;exhausting.</p>
  158. <p>The linking project’s code is provided as-is, and is not actively&nbsp;maintained.</p>
  159. <p><cite><em><a data-link-domain="unmaintained.tech" href="https://unmaintained.tech/" hreflang="en"
  160. title="Consultation de l’article (anglais)">No Maintenance Intended</a>
  161. <a href="/david/cache/2024/590887213b24404c8d1e8355127ce2e2/" hreflang="en"
  162. data-tippy data-description="The linking project’s code is provided as-is, and is not actively maintained."
  163. data-source="https://unmaintained.tech/"
  164. data-date="2024-03-18"
  165. data-favicon=""
  166. data-domain="unmaintained.tech"
  167. ><svg xmlns="http://www.w3.org/2000/svg"
  168. width="24" height="24" viewBox="0 0 24 24" fill="none"
  169. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  170. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  171. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  172. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  173. </svg>
  174. <span class="sr-only">[archive]</span></a></em></cite></p>
  175. </blockquote>
  176. <nav>
  177. <p>
  178. <a href="/david/2024/adaptation/"
  179. title="Liste de tous les articles 2024 associés à cette étiquette"
  180. rel="tag">#adaptation</a>
  181. <a href="/david/2024/addiction/"
  182. title="Liste de tous les articles 2024 associés à cette étiquette"
  183. rel="tag">#addiction</a>
  184. <a href="/david/2024/evolution/"
  185. title="Liste de tous les articles 2024 associés à cette étiquette"
  186. rel="tag">#évolution</a>
  187. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  188. </p>
  189. </nav>
  190. <h2>
  191. <a href="/david/2024/03/10/" title="Lien permanent vers cet article">Dune</a> <time datetime="2024-03-10">10 mars 2024</time>
  192. </h2>
  193. <p>Je crois bien n’être allé que 3&nbsp;fois dans une salle de cinéma ces 10&nbsp;dernières années. Et puis l’occasion s’est présentée, sans prévenir, aujourd’hui. J’avais <a href="/david/2021/10/18/">quelques retenues sur la première partie</a> mais j’attendais quand même avec impatience la suite. Et j’avais réussi à ne pas trop regarder les bandes annonces, ni les&nbsp;critiques.</p>
  194. <p><em>Note&nbsp;: ça va forcément divulgâcher un peu dans la&nbsp;suite.</em></p>
  195. <p>L’adaptation est bonne, le défi était de taille et —&nbsp;en dépit des quelques ajustements qui piquent un peu le <em>fan</em> que je suis (surtout vers la fin&#8239;!)&nbsp;— la scénarisation est cohérente. Ce qui n’était pas une mince affaire car encore une fois la temporalité n’est pas évidente et rendre l’évolution des personnages visible avec tout ce qui est censé se passer dans leur tête requiert des redéfinitions et des&nbsp;raccourcis.</p>
  196. <p>Mon erreur a probablement été de choisir de l’IMAX alors que c’était Hans “<a data-link-domain="20k.org" href="https://www.20k.org/episodes/boojstrikesback">booj</a>” Zimmer aux platines. Autant dire que le siège a vibré la moitié du film&#8239;! Au-delà de la bande originale, le son a vraiment été travaillé mais je crois que c’était un peu trop pour mes vieilles oreilles plus vraiment adaptées à de tels volumes. Il y a des moments où j’ai même trouvé que ça altérait la compréhension des dialogues… j’avais un peu l’impression de me noyer dans la volonté im·mer·sive alors que l’on est en plein désert. Je doute de retourner dans une salle de si&nbsp;tôt.</p>
  197. <p>Tout ce qui tourne autour des vers est bien fait, j’avais toujours eu du mal à me faire ma propre représentation des tailles et interactions à la lecture et là ça me semble être respecté / réaliste. Idem pour les <em>Sietchs</em>, c’est fidèle à la projection mentale que je pouvais m’en faire, même si l’on n’en voit pas grand chose au final. J’ai particulièrement apprécié le choix de faire une <em>Chani</em> forte qui est davantage consciente des enjeux et des répercutions. La jalousie aurait mérité d’être plus subtile, la différence entre la femme (politique) de Paul et sa compagne (amoureuse) est vraiment explicite dans le&nbsp;livre.</p>
  198. <p>Paul Muad’dib perd un peu trop d’eau à mon goût au cours de nombreuses scènes. Il était probablement plus difficile de transmettre des émotions&nbsp;sèches&nbsp;(?).</p>
  199. <p>Pour finir sur une note positive, l’image bien sûr. C’est à la limite du trop <em>et</em> c’est magnifique au niveau des différents tableaux qui s’enchaînent avec leurs propres couleurs, cinématiques et points de vues. On sent le travail de recherche sans qu’il ne devienne complètement distrayant. J’y serai d’autant plus attentif lors d’un second visionnage, chez moi, en choisissant le volume&nbsp;sonore.</p>
  200. <p>Je ne vois pas comment est-ce qu’il ne pourrait pas y avoir une troisième partie. À voir comment / si ça raccroche les wagons des livres. J’aurais presque envie que ça explore sa propre branche. <em>Dune&nbsp;multi·vers·e&#8239;!</em></p>
  201. <nav>
  202. <p>
  203. <a href="/david/2024/adaptation/"
  204. title="Liste de tous les articles 2024 associés à cette étiquette"
  205. rel="tag">#adaptation</a>
  206. <a href="/david/2024/cinema/"
  207. title="Liste de tous les articles 2024 associés à cette étiquette"
  208. rel="tag">#cinéma</a>
  209. <a href="/david/2024/lecture/"
  210. title="Liste de tous les articles 2024 associés à cette étiquette"
  211. rel="tag">#lecture</a>
  212. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  213. </p>
  214. </nav>
  215. <h2>
  216. <a href="/david/2024/03/05/" title="Lien permanent vers cet article">Jour 2</a> <time datetime="2024-03-05">5 mars 2024</time>
  217. </h2>
  218. <p>On se réveille dans la brume avec le soleil peinant à passer à travers, le lac et la neige ont regelé pendant la nuit. C’est une belle ambiance après une nuit agitée par la chaleur du <del>sauna</del> refuge. Les poêles tirent à fond dans ces endroits pour éviter que des personnes n’arrivent pas à faire démarrer un feu (j’imagine que ça peut être critique) mais ça les rend très inefficaces dans la durée et très chauds dès qu’on met deux buches&nbsp;dedans.</p>
  219. <figure>
  220. <a href="/static/david/2024/2024-03-05-lac-corbeau.jpg"
  221. title="Cliquer pour une version haute résolution">
  222. <img
  223. src="/static/david/2024/2024-03-05-lac-corbeau.jpg"
  224. width="4032" height="3024"
  225. srcset="/static/david/2024/2024-03-05-lac-corbeau.jpg 4032w, /static/david/2024/2024-03-05-lac-corbeau_660x440.jpg 660w, /static/david/2024/2024-03-05-lac-corbeau_990x660.jpg 990w, /static/david/2024/2024-03-05-lac-corbeau_1320x880.jpg 1320w"
  226. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  227. loading="lazy"
  228. decoding="async"
  229. alt="Lac corbeau à l’aube.">
  230. </a>
  231. <figcaption>De bien jolies couleurs au&nbsp;réveil.</figcaption>
  232. </figure>
  233. <p>Cet épisode me confirme encore une fois que les enfants ont des corps de sportifs de très haut niveau. Je suis impatient de pouvoir le charger un peu plus car c’est frustrant de le voir gambader devant de bon matin alors que mes muscles sont à peine réveillés. J’aime bien lorsqu’on va explorer un peu plus loin et que l’on se projette sur ce que l’on pourrait faire l’année&nbsp;suivante.</p>
  234. <figure>
  235. <a href="/static/david/2024/2024-03-05-enfant-refuge-corbeau.jpg"
  236. title="Cliquer pour une version haute résolution">
  237. <img
  238. src="/static/david/2024/2024-03-05-enfant-refuge-corbeau.jpg"
  239. width="3024" height="4032"
  240. srcset="/static/david/2024/2024-03-05-enfant-refuge-corbeau.jpg 3024w, /static/david/2024/2024-03-05-enfant-refuge-corbeau_660x440.jpg 660w, /static/david/2024/2024-03-05-enfant-refuge-corbeau_990x660.jpg 990w, /static/david/2024/2024-03-05-enfant-refuge-corbeau_1320x880.jpg 1320w"
  241. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  242. loading="lazy"
  243. decoding="async"
  244. alt="Un enfant qui court dans la neige vers un refuge.">
  245. </a>
  246. <figcaption>Jamais&nbsp;fatigué.</figcaption>
  247. </figure>
  248. <p>Le retour est moins joyeux car il s’agit d’enchainer les efforts et chaque heure qui passe rend la neige plus meuble. À tel point que l’on décide de couper par une piste sur une courte section. Mon évaluation est que la saison de ski est terminée, même une sous-couche bien travaillée ne tiendra pas la semaine qui s’en&nbsp;vient.</p>
  249. <p>J’aurais aimé faire une boucle un peu plus longue au retour mais il faut savoir s’adapter aux conditions. Le plus important est de terminer sans blessure ni&nbsp;dégoût.</p>
  250. <p><em>Je commence à imaginer un parcours rapide sur plusieurs jours dans cette forêt que je connais bien. Peut-être qu’une fenêtre se dessine en avril… il faut que je récupère un peu de cardio d’ici&nbsp;là.</em></p>
  251. <nav>
  252. <p>
  253. <a href="/david/2024/adaptation/"
  254. title="Liste de tous les articles 2024 associés à cette étiquette"
  255. rel="tag">#adaptation</a>
  256. <a href="/david/2024/aventure/"
  257. title="Liste de tous les articles 2024 associés à cette étiquette"
  258. rel="tag">#aventure</a>
  259. <a href="/david/2024/psychologie/"
  260. title="Liste de tous les articles 2024 associés à cette étiquette"
  261. rel="tag">#psychologie</a>
  262. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  263. </p>
  264. </nav>
  265. <form action="/david/recherche/" method="get">
  266. <fieldset>
  267. <legend>Recherche</legend>
  268. <label for="input-search">Termes de votre recherche :</label>
  269. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  270. <input type="submit" value="Chercher">
  271. <p id="indexation-infos">
  272. <small>
  273. Seuls les contenus de ces 8 dernières années sont indexés.
  274. </small>
  275. </p>
  276. </fieldset>
  277. </form>
  278. <aside>
  279. <theme-toggle></theme-toggle>
  280. </aside>
  281. </article>
  282. <hr>
  283. <footer>
  284. <p>
  285. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  286. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  287. <a href="http://larlet.com"
  288. title="Go to my English profile"
  289. data-instant>Pro</a>
  290. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  291. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  292. </p>
  293. <template id="theme-selector">
  294. <form>
  295. <style type="text/css">
  296. fieldset div {
  297. text-align: center;
  298. }
  299. </style>
  300. <fieldset>
  301. <legend>Thème</legend>
  302. <div>
  303. <label>
  304. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  305. Auto
  306. </label>
  307. <label>
  308. <input type="radio" value="dark" name="chosen-color-scheme">
  309. Foncé
  310. </label>
  311. <label>
  312. <input type="radio" value="light" name="chosen-color-scheme">
  313. Clair
  314. </label>
  315. </div>
  316. </fieldset>
  317. </form>
  318. </template>
  319. </footer>
  320. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  321. <script>
  322. class ThemeToggle extends HTMLElement {
  323. constructor() {
  324. super()
  325. const themeSelectorTemplate = document.querySelector('#theme-selector')
  326. const form = themeSelectorTemplate.content.firstElementChild
  327. this.attachShadow({ mode: 'open' })
  328. this.shadowRoot.appendChild(form.cloneNode(true))
  329. }
  330. connectedCallback() {
  331. const form = this.shadowRoot.querySelector('form')
  332. form.addEventListener('change', (e) => {
  333. const chosenColorScheme = e.target.value
  334. localStorage.setItem('theme', chosenColorScheme)
  335. toggleTheme(chosenColorScheme)
  336. })
  337. const selectedTheme = localStorage.getItem('theme')
  338. if (selectedTheme && selectedTheme !== 'undefined') {
  339. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  340. }
  341. }
  342. }
  343. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  344. window.addEventListener('load', () => {
  345. let colorsLayer = undefined
  346. let hasDarkRules = false
  347. for (const styleSheet of Array.from(document.styleSheets)) {
  348. let mediaRules = []
  349. for (const layerRule of styleSheet.cssRules) {
  350. if (!(layerRule instanceof CSSLayerBlockRule)) {
  351. continue
  352. }
  353. if (layerRule.name === 'colors') {
  354. colorsLayer = layerRule
  355. }
  356. for (const cssRule of layerRule.cssRules) {
  357. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  358. continue
  359. }
  360. // WARNING: Safari does not have/supports `conditionText`.
  361. if (cssRule.conditionText) {
  362. if (cssRule.conditionText !== prefersColorSchemeDark) {
  363. continue
  364. }
  365. } else {
  366. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  367. continue
  368. }
  369. }
  370. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  371. }
  372. }
  373. // WARNING: do not try to insert a Rule to a styleSheet you are
  374. // currently iterating on, otherwise the browser will be stuck
  375. // in a infinite loop…
  376. for (const mediaRule of mediaRules) {
  377. // Safari requires the `0` second parameter (even if default).
  378. colorsLayer.insertRule(mediaRule.cssText, 0)
  379. hasDarkRules = true
  380. }
  381. }
  382. if (hasDarkRules) {
  383. if ('customElements' in window && !customElements.get('theme-toggle')) {
  384. customElements.define('theme-toggle', ThemeToggle)
  385. }
  386. }
  387. })
  388. </script>
  389. </body>
  390. </html>