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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  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. Stratégie
  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="La notion de stratégie revêt une dimension temporelle axée sur l’avenir. Mais lorsque nous tentons de nous engager sur l’avenir, nous nous retrouvons sur un terrain glissant. Trop souvent, la stratégie d’entreprise repose sur le principe erroné selon lequel il est possible de prédire l’avenir d’une manière fiable. Nassim Nicholas Taleb, l’un des auteurs les plus brillants sur l’illusion de la prédictibilité, a dit : « Nous ne pouvons pas vraiment planifier parce que nous ne comprenons pas l’avenir — mais ce n’est pas nécessairement une mauvaise nouvelle. Nous pourrions le faire en gardant à l’esprit ces limitations. Cela requiert simplement du courage. »">
  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. <!-- To get attribution when linking on mastodon. -->
  106. <meta name="fediverse:creator" content="@david@larlet.fr">
  107. <style type="text/css">
  108. .tippy-content {
  109. min-width: 280px;
  110. padding: .5rem;
  111. font-size: calc(var(--fluid-0) * 0.8);
  112. font-family: var(--labor-font);
  113. letter-spacing: initial;
  114. text-align: left;
  115. }
  116. .tippy-content h3 {
  117. margin-top: 0;
  118. }
  119. .tippy-content h3 img {
  120. max-width: 2rem;
  121. max-height: 2rem;
  122. display: inline-block;
  123. }
  124. .tippy-content .tippy-links {
  125. display: flex;
  126. justify-content: space-around;
  127. }
  128. .tippy-content a {
  129. padding: .4rem;
  130. color: #F06048;
  131. }
  132. </style>
  133. <body data-instant-intensity="viewport-all">
  134. <article>
  135. <header>
  136. <hgroup>
  137. <h1>Stratégie</h1>
  138. <p>Le <time datetime="2024-01-25">25 janvier 2024</time></p>
  139. </hgroup>
  140. </header>
  141. <nav>
  142. <p>
  143. <a rel="prev"
  144. href="/david/2024/01/24/"
  145. title="Publication précédente : Taille">← Précédent</a> •
  146. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  147. <a href="/david/recherche/"
  148. title="Aller à la page de recherche"
  149. rel="search" data-no-instant>Recherche</a>
  150. • <a rel="next"
  151. href="/david/2024/01/26/"
  152. title="Publication suivante : Cargo">Suivant →</a>
  153. </p>
  154. </nav>
  155. <blockquote>
  156. <p>La notion de stratégie revêt une dimension temporelle axée sur l’avenir. Mais lorsque nous tentons de nous engager sur l’avenir, nous nous retrouvons sur un terrain glissant. Trop souvent, la stratégie d’entreprise repose sur le principe erroné selon lequel il est possible de prédire l’avenir d’une manière fiable. Nassim Nicholas Taleb, l’un des auteurs les plus brillants sur l’illusion de la prédictibilité, a dit&nbsp;: «&nbsp;Nous ne pouvons pas vraiment planifier parce que nous ne comprenons pas l’avenir — mais ce n’est pas nécessairement une mauvaise nouvelle. Nous pourrions le faire <em>en gardant à l’esprit ces limitations.</em> Cela requiert simplement du&nbsp;courage.&nbsp;»</p>
  157. <p>Eric Beinhocker va dans le même sens&nbsp;: «&nbsp;On s’attend à ce que les dirigeants d’entreprise se comportent en généraux courageux capables de prédire l’avenir, d’échafauder de grandes stratégies, de mener leurs troupes à une bataille couronnée de succès — puis ils sont virés à la première escarmouche perdue. Il faut des dirigeants courageux pour faire reculer cet état d’esprit, admettre l’incertitude inhérente à l’avenir et privilégier l’apprentissage et l’adaptation au détriment de la prédiction et de la&nbsp;planification.&nbsp;»</p>
  158. <p>Comme le soulignent Taleb et Beinhocker, dans la plupart des organisations conventionnelles, la stratégie est l’essence même de l’approche prévision-contrôle — en déterminant une stratégie, nous fixons les bons objectifs, puis choisissons un itinéraire pour les atteindre. Toute cette approche repose sur un faux raisonnement. <mark>Bien qu’il soit possible de prévoir certaines choses, celles qu’il est impossible de prévoir sont bien plus nombreuses.</mark> Nous ne pouvons connaître la future situation économique ou celle de notre secteur d’activité, prévoir les innovations qui vont perturber le marché ou les opportunités susceptibles d’apparaître. Il serait plus facile de dresser la toute petite liste de ce que nous pouvons prévoir en toute fiabilité que d’énumérer l’imprévisible, que nous nous évertuons malgré tout trop souvent à essayer&nbsp;d’envisager.</p>
  159. <p>Lorsque nous tentons de prédire l’avenir dans un univers imprévisible, nous nous berçons non seulement d’illusions, mais pire, nous diminuons notre faculté à détecter et nous ajuster à la réalité du&nbsp;moment.</p>
  160. <p><cite><em>La révolution Holacracy</em>, Brian J. Robertson</cite></p>
  161. </blockquote>
  162. <p>Se donner les moyens et les conditions d’être à l’écoute est loin d’être trivial. Une fois le nez dans le guidon, il est facile de laisser pousser des œillères et de réduire son champ des possibles. Après tout, pourquoi avoir envie de faire évoluer une situation qui fonctionne bien&#8239;? Pourquoi envisager de nouveaux chemins avec leurs lots d’incertitudes et de dangers&#8239;? Mais c’est ce confort qui est le plus dangereux, celui qui fait manquer des rencontres, des occasions d’apprendre ou de découvrir de nouveaux domaines. Ce confort rend les entreprises séniles très&nbsp;rapidement.</p>
  163. <p>J’aime bien la métaphore du vélo proposée par ce livre pour décrire la différence entre un plan à 5&nbsp;ans et une adaptation continue au contexte&nbsp;changeant.</p>
  164. <blockquote>
  165. <p>Imaginez que vous fassiez du vélo comme on gère la plupart des organisations modernes. Vous organiseriez une grande réunion afin de décider l’angle que doit présenter le guidon. Vous détailleriez le plus possible votre itinéraire en répertoriant tous les obstacles connus, le moment précis où vous devrez les éviter, ainsi que la trajectoire nécessaire pour cela. Puis vous enfourcheriez votre vélo, tiendriez fermement le guidon selon l’angle défini, fermeriez les yeux, puis rouleriez conformément au plan. Vous n’avez pratiquement aucune chance d’atteindre votre objectif, même si vous parveniez à garder le vélo bien droit pendant tout le parcours. Et lorsque vous tombez, vous vous demandez probablement, «&nbsp;Pourquoi n’y sommes-nous pas arrivés la première fois&#8239;?&nbsp;», voire «&nbsp;Qui a&nbsp;merdé&#8239;?&nbsp;»</p>
  166. <p>Cette approche ridicule n’est pas loin de correspondre à l’approche adoptée par de nombreuses organisations pour leur planification stratégique. En revanche, Holacracy aide une organisation à fonctionner à la manière dont nous faisons habituellement du vélo, selon un paradigme de pilotage dynamique, à savoir un ajustement permanent selon les retours obtenus, faisant ainsi naître un cheminement plus organique. Si vous observez un cycliste très doué, vous constaterez une oscillation permanente car il reçoit sans arrêt des informations sensorielles sur sa situation et son environnement lui permettant de corriger légèrement sa direction, sa vitesse, son équilibre et son aérodynamisme. Cette oscillation intervient car il maintient un équilibre dynamique tout en avançant. Les informations qu’il reçoit rapidement lui permettent de respecter les contraintes de l’environnement et de son matériel. Au lieu de perdre beaucoup de temps et d’énergie à prévoir précisément à l’avance le «&nbsp;bon&nbsp;» itinéraire, il garde son but en tête, reste focalisé sur l’instant présent et avance le plus naturellement du monde. Cela ne signifie pas qu’il n’a aucun plan ou tout du moins aucune idée de son itinéraire, mais qu’il parvient à mieux contrôler sa progression en se livrant en permanence à la réalité ambiante et en se fiant à sa capacité à ressentir les choses et à réagir instantanément. De même, l’occasion s’offre à nous d’afficher un meilleur contrôle dans nos organisations en affrontant la réalité et en nous adaptant, en&nbsp;permanence.</p>
  167. <p>Lorsque nous nous attachons à un résultat précis prévu à l’avance, nous risquons de nous retrouver à combattre la réalité quand celle-ci ne correspond pas à notre prévision. Si nous constatons que nous avons dévié du bon cap, nous pouvons en conclure, parfois inconsciemment, que nous sommes très certainement dans l’erreur. <mark>Juger ainsi la réalité nuit à notre capacité d’adaptation et nous incite à lutter contre la vérité indésirable, à essayer de forcer la réalité à être conforme à la vision que nous avions.</mark> Il s’agit là d’une stratégie loin d’être efficace pour gérer la complexité fluctuante du monde des affaires actuel. Lorsque la réalité entre en conflit avec nos plans les mieux échafaudés, c’est généralement la réalité qui&nbsp;l’emporte.</p>
  168. <p>Je dois faire remarquer qu’adopter une approche plus dynamique pour gagner en contrôle ne revient pas à «&nbsp;ne rien prévoir&nbsp;», tout comme on n’avance pas à vélo «&nbsp;sans piloter&nbsp;». Il s’agit de modifier notre relation aux prévisions et plans, en les considérant parfois comme des faux raisonnements utiles et non comme des outils essentiels pour contrôler l’organisation. Et il s’agit d’être en phase avec l’instant présent afin de toujours pouvoir piloter en fonction de la&nbsp;réalité.</p>
  169. <p><cite><em>Ibid.</em></cite></p>
  170. </blockquote>
  171. <a href="#hr-48" title="Lien vers cette section de la page"><hr id="hr-48" /></a>
  172. <blockquote>
  173. <p>Alors que le malaise dans lequel sont aujourd’hui plongées les sociétés occidentales n’en finit plus d’être commenté, est-il néanmoins possible de dessiner les contours d’une société idéale, une utopie réaliste, susceptible de constituer, pour les Français, un avenir désirable&#8239;? C’est précisément pour apporter des éléments de réponses à cette question qu’a été lancé en 2019&nbsp;l’Observatoire des perspectives utopiques. Dans le sillage de ces deux années de pandémie et à la veille de l’élection présidentielle, il nous est apparu utile de reconduire cette enquête, pour saisir où en sont les Français et évaluer dans quelle mesure leurs représentations et aspirations ont&nbsp;évolué.</p>
  174. <p><cite><em><a data-link-domain="lobsoco.com" href="https://lobsoco.com/perspectives-utopiques-vague-3/" hreflang="fr"
  175. title="Consultation de l’article">L’Observatoire des perspectives utopiques</a>
  176. <a href="/david/cache/2024/7ed7f4aefae1b5af33b3ec1f607a633f/" hreflang="fr"
  177. data-tippy data-description="Avec le soutien de nos partenaires Accédez ci-dessous aux principaux enseignements (classés par thématiques) de l’Observatoire."
  178. data-source="https://lobsoco.com/perspectives-utopiques-vague-3/"
  179. data-date="2024-01-24"
  180. data-favicon="https://lobsoco.com/wp-content/uploads/2020/09/cropped-FAVICON-01-32x32.png"
  181. data-domain="lobsoco.com"
  182. ><svg xmlns="http://www.w3.org/2000/svg"
  183. width="24" height="24" viewBox="0 0 24 24" fill="none"
  184. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  185. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  186. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  187. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  188. </svg>
  189. <span class="sr-only">[archive]</span></a></em></cite></p>
  190. </blockquote>
  191. <p>Il y a des choses intéressantes qui ressortent de cet observatoire, notamment en comparant les résultats au cours du temps. Je me demande ce que pourraient donner les résultats de ce même sondage au&nbsp;Québec.</p>
  192. <a href="#hr-49" title="Lien vers cette section de la page"><hr id="hr-49" /></a>
  193. <p>Mot du jour&nbsp;: <a data-link-domain="fr.wiktionary.org" href="https://fr.wiktionary.org/wiki/cyn%C3%A9g%C3%A9tophobie">cynégétophobie</a>.</p>
  194. <nav>
  195. <p>
  196. <a href="/david/2024/apprentissage/"
  197. title="Liste de tous les articles 2024 associés à cette étiquette"
  198. rel="tag">#apprentissage</a>
  199. <a href="/david/2024/equipe/"
  200. title="Liste de tous les articles 2024 associés à cette étiquette"
  201. rel="tag">#équipe</a>
  202. <a href="/david/2024/velo/"
  203. title="Liste de tous les articles 2024 associés à cette étiquette"
  204. rel="tag">#vélo</a>
  205. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  206. </p>
  207. </nav>
  208. <nav>
  209. <p>
  210. <a rel="prev"
  211. href="/david/2024/01/24/"
  212. title="Publication précédente : Taille">← Précédent</a> •
  213. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  214. • <a rel="next"
  215. href="/david/2024/01/26/"
  216. title="Publication suivante : Cargo">Suivant →</a>
  217. </p>
  218. </nav>
  219. <form action="/david/recherche/" method="get">
  220. <fieldset>
  221. <legend>Recherche</legend>
  222. <label for="input-search">Termes de votre recherche :</label>
  223. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  224. <input type="submit" value="Chercher">
  225. <p id="indexation-infos">
  226. <small>
  227. Seuls les contenus de ces 8 dernières années sont indexés.
  228. </small>
  229. </p>
  230. </fieldset>
  231. </form>
  232. <aside>
  233. <theme-toggle></theme-toggle>
  234. </aside>
  235. </article>
  236. <hr>
  237. <footer>
  238. <p>
  239. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  240. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  241. <a href="http://larlet.com"
  242. title="Go to my English profile"
  243. data-instant>Pro</a>
  244. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  245. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  246. </p>
  247. <template id="theme-selector">
  248. <form>
  249. <style type="text/css">
  250. fieldset div {
  251. text-align: center;
  252. }
  253. </style>
  254. <fieldset>
  255. <legend>Thème</legend>
  256. <div>
  257. <label>
  258. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  259. Auto
  260. </label>
  261. <label>
  262. <input type="radio" value="dark" name="chosen-color-scheme">
  263. Foncé
  264. </label>
  265. <label>
  266. <input type="radio" value="light" name="chosen-color-scheme">
  267. Clair
  268. </label>
  269. </div>
  270. </fieldset>
  271. </form>
  272. </template>
  273. </footer>
  274. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  275. <script>
  276. class ThemeToggle extends HTMLElement {
  277. constructor() {
  278. super()
  279. const themeSelectorTemplate = document.querySelector('#theme-selector')
  280. const form = themeSelectorTemplate.content.firstElementChild
  281. this.attachShadow({ mode: 'open' })
  282. this.shadowRoot.appendChild(form.cloneNode(true))
  283. }
  284. connectedCallback() {
  285. const form = this.shadowRoot.querySelector('form')
  286. form.addEventListener('change', (e) => {
  287. const chosenColorScheme = e.target.value
  288. localStorage.setItem('theme', chosenColorScheme)
  289. toggleTheme(chosenColorScheme)
  290. })
  291. const selectedTheme = localStorage.getItem('theme')
  292. if (selectedTheme && selectedTheme !== 'undefined') {
  293. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  294. }
  295. }
  296. }
  297. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  298. window.addEventListener('load', () => {
  299. let colorsLayer = undefined
  300. let hasDarkRules = false
  301. for (const styleSheet of Array.from(document.styleSheets)) {
  302. let mediaRules = []
  303. for (const layerRule of styleSheet.cssRules) {
  304. if (!(layerRule instanceof CSSLayerBlockRule)) {
  305. continue
  306. }
  307. if (layerRule.name === 'colors') {
  308. colorsLayer = layerRule
  309. }
  310. for (const cssRule of layerRule.cssRules) {
  311. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  312. continue
  313. }
  314. // WARNING: Safari does not have/supports `conditionText`.
  315. if (cssRule.conditionText) {
  316. if (cssRule.conditionText !== prefersColorSchemeDark) {
  317. continue
  318. }
  319. } else {
  320. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  321. continue
  322. }
  323. }
  324. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  325. }
  326. }
  327. // WARNING: do not try to insert a Rule to a styleSheet you are
  328. // currently iterating on, otherwise the browser will be stuck
  329. // in a infinite loop…
  330. for (const mediaRule of mediaRules) {
  331. // Safari requires the `0` second parameter (even if default).
  332. colorsLayer.insertRule(mediaRule.cssText, 0)
  333. hasDarkRules = true
  334. }
  335. }
  336. if (hasDarkRules) {
  337. if ('customElements' in window && !customElements.get('theme-toggle')) {
  338. customElements.define('theme-toggle', ThemeToggle)
  339. }
  340. }
  341. })
  342. </script>
  343. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  344. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  345. <script>
  346. tippy('[data-tippy]', {
  347. content(reference) {
  348. reference.addEventListener('click', (e) => e.preventDefault())
  349. return `
  350. <h3 lang="fr">
  351. <img src="${reference.dataset.favicon}" loading="lazy">
  352. <a href="${reference.dataset.source}"
  353. >Article sur ${reference.dataset.domain}</a></h3>
  354. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  355. <div class="tippy-links" lang="fr">
  356. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  357. </div>
  358. `
  359. },
  360. allowHTML: true,
  361. interactive: true,
  362. delay: [150, 700],
  363. hideOnClick: false
  364. })
  365. </script>
  366. <script type="module">
  367. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  368. const markObserver = new IntersectionObserver((entries, observer) => {
  369. const computedStyle = getComputedStyle(document.documentElement)
  370. const markBackground = computedStyle.getPropertyValue('--mark-background')
  371. for (const entry of entries) {
  372. if (entry.intersectionRatio === 0) continue
  373. const markElement = entry.target
  374. markElement.style.backgroundColor = 'inherit'
  375. const annotation = annotate(
  376. markElement, {
  377. type: 'highlight',
  378. multiline: true,
  379. color: markBackground,
  380. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  381. animate: false
  382. }
  383. )
  384. annotation.show()
  385. observer.unobserve(markElement)
  386. }
  387. }, {threshold: 1.0})
  388. for (const markElement of document.querySelectorAll('mark')) {
  389. markObserver.observe(markElement)
  390. }
  391. </script>
  392. </body>
  393. </html>