Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

index.html 21KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  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>Ressenti — David Larlet</title>
  13. <meta name="description" content="As a result of these conversations, I have sometimes even wondered whether I should add some artificial delay in the comment application before responding with a success message to satisfy the expectations of people who are so used to the bloated web. Of course, I am not actually going to do that. I want to keep it simple. I do not like adding artificial restrictions to a simple piece of functionality.">
  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>Ressenti</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2022/04/02/" title="Publication précédente : Recherche">← 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/04/23/" title="Publication suivante : Quarantaine">Suivant →</a>
  81. </p>
  82. </nav>
  83. <hr>
  84. <blockquote lang="en">
  85. <p>As a result of these conversations, I have sometimes even wondered whether I should <mark>add some artificial delay</mark> in the comment application before responding with a success message to satisfy the expectations of people who are so used to the bloated web. Of course, I am not actually going to do that. I want to keep it simple. I do not like adding artificial restrictions to a simple piece of&nbsp;functionality.</p>
  86. <p><cite><em><a href="https://susam.net/maze/wall/comfort-of-bloated-web.html">Comfort of Bloated Web</a></em>&nbsp;(<a href="/david/cache/2022/fc0fd0dbeeb8a3f2b47e8ccab6d2cbc9/">cache</a>)</cite></p>
  87. </blockquote>
  88. <p>Cela m’a rappelé une vieille discussion <a href="/david/stream/2015/12/22/">issue de ce <abbr title="Post-Scriptum">PS</abbr></a>&nbsp;:</p>
  89. <blockquote>
  90. <p>Notez qu’en attendant j’ai mis une courte animation à l’affichage des pages car on m’a <em>plusieurs fois</em> fait la remarque que «&nbsp;les performances sont trop bonnes&nbsp;» pour identifier le changement de page (la première fois j’ai pris ça pour une blague mais il faut bien constater qu’il s’agit d’une expérience aux antipodes des pratiques sur le web…), j’ai aussi mis en relief les phrases en&nbsp;gras.</p>
  91. </blockquote>
  92. <p>Qui avait généré <a href="https://nota-bene.org/Performances-trop-bonnes">quelques discussions chez Stéphane</a>&nbsp;(<a href="/david/cache/2022/1ab2a594ae40deb0f4443807f1fa7596/">cache</a>), puis une <a href="/david/stream/2015/12/30/">clarification de ma part</a>, et enfin chez Éric qui <a href="https://n.survol.fr/n/performances-et-ressenti">évoque la notion de ressenti</a>&nbsp;(<a href="/david/cache/2022/c8c3f9a0a328a21db8c91c7a288a8b4f/">cache</a>) plus que de&nbsp;performances.</p>
  93. <p>Sans compréhension, la performance n’est rien pour paraphraser un slogan (d’un autre temps&#8239;?). Avec le recul, je prends davantage en considération les affordances —&nbsp;surtout dans le cas de l’article en anglais sus-cité&nbsp;— et ce n’est pas tout d’être rapide si certains <em>patterns</em> ne sont pas respectés. Auquel cas, l’utilisateur·ice n’en est que plus rapidement… désorienté·e. Les évolutions de ces façons d’interagir se font dans un temps et à une échelle qui ne permettent pas d’innover localement sans introduire quelques incompréhensions plus ou moins volontaires. Toujours ce curseur de&nbsp;l’acceptabilité.</p>
  94. <blockquote lang="en">
  95. <p>It’s a good reminder that the answer is usually a mix: it’s not data over intuition, nor rationality over feeling. Argue the contraries and you’ll find wisdom&nbsp;in-between.</p>
  96. <p><cite><em><a href="https://blog.jim-nielsen.com/2022/more-to-design-than-data-and-rationality/">There’s More to Design Than Data and Rationality</a></em>&nbsp;(<a href="/david/cache/2022/27ced7003612537f6ad81106f34607af/">cache</a>)</cite></p>
  97. </blockquote>
  98. <hr />
  99. <p>Réflexion du moment&nbsp;: les développeurs sont des colonisateurs contemporains. Ils arrivent avec un saut technologique comparable à une arme à feu en d’autres temps. Cela leur procure un avantage déloyal et permet de faire fi de cultures numériques&nbsp;existantes.</p>
  100. <p>En étant de l’autre côté du miroir, il faut faire preuve d’une bonne dose d’abnégation pour ne pas avoir envie de faire évoluer des situations qui génèrent des «&nbsp;erreurs&nbsp;»&nbsp;humaines.</p>
  101. <hr />
  102. <p>Je me faisais la réflexion récemment&nbsp;que&nbsp;:</p>
  103. <blockquote>
  104. <p>Vieillir, c’est passer par tous les personnages de&nbsp;Matrix.</p>
  105. </blockquote>
  106. <p>L’ordre choisi/subi n’ayant que bien peu d’importance au&nbsp;final…</p>
  107. <hr />
  108. <p>En parlant des sœurs Wachowski, j’ai enfin lu la bande-dessinée «&nbsp;V pour Vendetta&nbsp;», puis revu le film éponyme. (Oui, c’est l’effet que me font les élections.) Cela m’a permis de comparer plus facilement les angles des deux œuvres et d’en avoir d’autres lectures. Le manga n’est pas dans un style que j’affectionne mais je reconnais qu’il permet de se plonger dans une ambiance que je n’ai pas vraiment retrouvée dans le film. Classique.</p>
  109. <hr />
  110. <p>Deux mots à&nbsp;explorer&nbsp;:</p>
  111. <ol>
  112. <li><a href="https://fr.wikipedia.org/wiki/Sprezzatura">Sprezzatura</a>&nbsp;: cette faculté de donner une apparence de facilité, d’aisance et de naturel aux réalisations les plus&nbsp;ardues.</li>
  113. <li><a href="https://fr.wikipedia.org/wiki/Shibui">Shibui</a>&nbsp;: se réfère en japonais à la sensation subjective produite par la beauté simple, subtile, et&nbsp;discrète.</li>
  114. </ol>
  115. <h2 id="encore">Encore <a href="#encore" title="Ancre vers cette partie">#</a></h2>
  116. <blockquote lang="en">
  117. <p>🗣 I mean, think of a sitting with friends round a dinner table. Two people, three people, four people, it’s one conversation. <mark>Five people, it’s still one conversation – just.</mark> At six it’s hard to maintain; the conversation often splits and oscillates between 4/2&nbsp;and&nbsp;3/3&nbsp;modes.</p>
  118. <p>The cognitive limit corresponds to how our ears and voices work. […]</p>
  119. <p>“Comfortable” conversation means “background noise levels typical of both offices and city streets” – our normal voice levels, our normal hearing, our normal comfortable personal social distance, our normal width of shoulders all combine to produce conversional groups of…&nbsp;5&nbsp;people.</p>
  120. <p><cite><em><a href="https://interconnected.org/home/2022/04/05/dunbar">Dunbar’s number and how speaking is 2.8x better than picking fleas</a></em>&nbsp;(<a href="/david/cache/2022/df33a2f3d5f174aadda2a8311eebcafa/">cache</a>)</cite></p>
  121. </blockquote>
  122. <blockquote>
  123. <p>⏳ J’aime les constructions de sable sur la plage. Il n’y a pas d’attente de durabilité, ni de perfection. L’espace est totalement libre. L’œuvre disparaîtra irrémédiablement. Mais <mark>le temps de l’élaboration nous construit</mark> poétiquement, amicalement, socialement. Nous sommes, dans ce moment là, existence.</p>
  124. <p><cite><em><a href="https://www.la-grange.net/2022/03/20/imagination">désabler l’imagination</a></em>&nbsp;(<a href="/david/cache/2022/56f14d85f38a7bb04e187aa3334bdb57/">cache</a>)</cite></p>
  125. </blockquote>
  126. <blockquote lang="en">
  127. <p>🤗 Some people tend to jump into problems and just start writing code. Other people tend to want to research and research and get caught in analysis paralysis. In those cases, set a deadline for yourself and <mark>just start exploring solutions.</mark> You’ll quickly learn more as you start solving the problem, and that will lead you to iterate into a better&nbsp;solution.</p>
  128. <p><cite><em><a href="https://www.simplethread.com/20-things-ive-learned-in-my-20-years-as-a-software-engineer/">20&nbsp;Things I’ve Learned in my 20&nbsp;Years as a Software Engineer</a></em>&nbsp;(<a href="/david/cache/2022/7d378db0707cc63aa2d466ada68fe690/">cache</a>)</cite></p>
  129. </blockquote>
  130. <blockquote>
  131. <p>🙈 Mais que faire alors du code existant&#8239;? Initialement, je pensais terminer Lessy proprement en n’ajoutant plus de fonctionnalités, mais en continuant de mettre à jour les dépendances logicielles afin d’éviter des failles de sécurité. Mais je dois vous avouer que je n’en suis plus capable. <mark>Les dépendances JavaScript sont une véritable plaie à maintenir</mark> avec des trucs qui pètent dans tous les sens à chaque mise à jour. C’est une charge que je n’ai pas envie de&nbsp;gérer.</p>
  132. <p><cite><em><a href="https://marienfressinaud.fr/lessy-est-termine.html">Lessy est terminé</a></em>&nbsp;(<a href="/david/cache/2022/128ce7c2bc3cbf479318e36ae2faf6b8/">cache</a>)</cite></p>
  133. </blockquote>
  134. <blockquote lang="en">
  135. <p>🤞 Imagine that, an industry that’s a little less reliant on libraries and frameworks because we invest time into discovering and cultivating patterns and principles. <mark>I&nbsp;believe</mark> that’s a future with less maintainer burnout, less breaking changes and better, more long-lived&nbsp;programs.</p>
  136. <p><cite><em><a href="https://nilsnh.no/2022/04/09/innovating-beyond-libraries-and-frameworks/">Innovating beyond libraries and frameworks</a></em>&nbsp;(<a href="/david/cache/2022/4cea6f484d1e161074216e23d8826dea/">cache</a>)</cite></p>
  137. </blockquote>
  138. <blockquote>
  139. <p>🗳 Voter, c’est abdiquer&#8239;; nommer un ou plusieurs maîtres pour une période courte ou longue, c’est renoncer à sa propre souveraineté. Qu’il devienne monarque absolu, prince constitutionnel ou simplement mandataire muni d’une petite part de royauté, le candidat que vous portez au trône ou au fauteuil sera votre supérieur. <mark>Vous nommez des hommes qui sont au-dessus des lois,</mark> puisqu’ils se chargent de les rédiger et que leur mission est de vous faire&nbsp;obéir.</p>
  140. <p><cite><em><a href="http://www.homme-moderne.org/textes/classics/ereclus/jgrave.html">Lettre à Jean Grave, par Élisée Reclus (Voter c’est abdiquer)</a></em>&nbsp;(<a href="/david/cache/2022/1f0b2ca39bffe2d3551c7ea20dc315a1/">cache</a>)</cite></p>
  141. </blockquote>
  142. <blockquote lang="en">
  143. <p>🕊 “Hope is a discipline,” prison abolitionist Mariame Kaba reminds us. It is not an emotion. It is not even as Gramsci put it simply “optimism” — a belief that things will get better. <mark>Hope is work.</mark> You have to put energy and time into it. You have to practice, repeatedly. You have to keep at it, keep moving, keep pushing. No one else will free you or fix you — except us, collectively through our power to imagine and build a better&nbsp;future.</p>
  144. <p>Hope is not in technology. Hope is in our&nbsp;humanity.</p>
  145. <p><cite><em><a href="https://hackeducation.com/2022/03/08/hope">Hope for the Future</a></em>&nbsp;(<a href="/david/cache/2022/66d9d4be64db7fe8324a4fdcbf3ef705/">cache</a>)</cite></p>
  146. </blockquote>
  147. <blockquote>
  148. <p>🏠 Dans mon cas à moi, c’était aussi un moment où j’étais malheureux là où je travaillais&#8239;; mais j’hésitais à changer de boulot, et à devenir indépendant, un peu par peur d’une perte de revenus dans l’intervalle. Rien de très important – mais en regardant mieux, on s’est mis à voir autour de nous plein de situations comme ça, où <mark>des gens restent dans un travail qui les rend malheureux</mark> ou qui fait du mal au monde, pour une raison simple&nbsp;: la peur de ne plus pouvoir payer le&nbsp;loyer.</p>
  149. <p><cite><em><a href="https://kemenaran.winosx.com/posts/colocation-contribuer-au-loyer-en-fonction-de-ses-revenus">Colocation&nbsp;: contribuer au loyer en fonction de ses revenus</a></em>&nbsp;(<a href="/david/cache/2022/8299fd0b8bd7010b4c74f4c06719f81d/">cache</a>)</cite></p>
  150. </blockquote>
  151. <blockquote>
  152. <p>📚 Les Européens, et Christophe Colomb le premier, ont la conviction que la végétation luxuriante en Amérique est à l’origine d’une pluviométrie excessive&nbsp;: il faut donc déboiser pour «&nbsp;assainir&nbsp;» le climat. L’objectif est d’expliquer les différences climatiques entre l’Europe et l’Amérique à latitude identique, et en même temps de <mark>justifier la colonisation</mark>&nbsp;: pendant longtemps, celle-ci a été pensée comme une «&nbsp;normalisation climatique&nbsp;». […]</p>
  153. <p>Si les Caraïbes sont trop humides ou le Canada trop froid, c’est parce que les Indiens n’ont pas amélioré la terre&nbsp;: ce qui est une manière de dire qu’ils ne la possèdent pas vraiment. Au XVIII<sup>e</sup> siècle, le discours sur le climat devient une manière de hiérarchiser les races&nbsp;: il y a les peuples amérindiens restés dans l’enfance d’un climat sauvage, les peuples européens producteurs du doux climat de leur continent, les peuples orientaux destructeurs et dégénérés. À l’époque, on pense les corps comme profondément influencés par l’environnement&nbsp;: changer le climat, c’est changer&nbsp;l’humain.</p>
  154. <p><cite><em>Penser le climat</em>, article de Jean-Baptiste Fressoz intitulé «&nbsp;Comment l’occident a joué avec les&nbsp;nuages&nbsp;»</cite></p>
  155. </blockquote>
  156. <nav>
  157. <p class="center">
  158. <a rel="prev" href="/david/2022/04/02/" title="Publication précédente : Recherche">← Précédent</a> •
  159. <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
  160. • <a rel="next" href="/david/2022/04/23/" title="Publication suivante : Quarantaine">Suivant →</a>
  161. </p>
  162. </nav>
  163. </article>
  164. <hr>
  165. <footer>
  166. <p>
  167. <nobr>
  168. <a href="/david/" title="Aller à l’accueil"
  169. ><svg class="icon icon-home">
  170. <use
  171. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  172. ></use>
  173. </svg>
  174. Accueil</a
  175. >
  176. </nobr>
  177. <nobr>
  178. <a href="/david/log/" title="Accès au flux RSS"
  179. ><svg class="icon icon-rss2">
  180. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  181. </svg>
  182. Suivre</a
  183. >
  184. </nobr>
  185. <nobr>
  186. <a href="http://larlet.com" title="Go to my English profile" data-instant
  187. ><svg class="icon icon-user-tie">
  188. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  189. </svg>
  190. Pro</a
  191. >
  192. </nobr>
  193. <nobr>
  194. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  195. ><svg class="icon icon-mail">
  196. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  197. </svg>
  198. Email</a
  199. >
  200. </nobr>
  201. <nobr>
  202. <abbr
  203. class="nowrap"
  204. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  205. ><svg class="icon icon-hammer2">
  206. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  207. </svg>
  208. Légal</abbr
  209. >
  210. </nobr>
  211. </p>
  212. <template id="theme-selector">
  213. <form>
  214. <fieldset>
  215. <legend><svg class="icon icon-brightness-contrast">
  216. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  217. </svg> Thème</legend>
  218. <label>
  219. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  220. </label>
  221. <label>
  222. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  223. </label>
  224. <label>
  225. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  226. </label>
  227. </fieldset>
  228. </form>
  229. </template>
  230. </footer>
  231. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  232. <script>
  233. function loadThemeForm(templateName) {
  234. const themeSelectorTemplate = document.querySelector(templateName)
  235. const form = themeSelectorTemplate.content.firstElementChild
  236. themeSelectorTemplate.replaceWith(form)
  237. form.addEventListener('change', (e) => {
  238. const chosenColorScheme = e.target.value
  239. localStorage.setItem('theme', chosenColorScheme)
  240. toggleTheme(chosenColorScheme)
  241. })
  242. const selectedTheme = localStorage.getItem('theme')
  243. if (selectedTheme && selectedTheme !== 'undefined') {
  244. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  245. }
  246. }
  247. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  248. window.addEventListener('load', () => {
  249. let hasDarkRules = false
  250. for (const styleSheet of Array.from(document.styleSheets)) {
  251. let mediaRules = []
  252. for (const cssRule of styleSheet.cssRules) {
  253. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  254. continue
  255. }
  256. // WARNING: Safari does not have/supports `conditionText`.
  257. if (cssRule.conditionText) {
  258. if (cssRule.conditionText !== prefersColorSchemeDark) {
  259. continue
  260. }
  261. } else {
  262. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  263. continue
  264. }
  265. }
  266. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  267. }
  268. // WARNING: do not try to insert a Rule to a styleSheet you are
  269. // currently iterating on, otherwise the browser will be stuck
  270. // in a infinite loop…
  271. for (const mediaRule of mediaRules) {
  272. styleSheet.insertRule(mediaRule.cssText)
  273. hasDarkRules = true
  274. }
  275. }
  276. if (hasDarkRules) {
  277. loadThemeForm('#theme-selector')
  278. }
  279. })
  280. </script>
  281. </body>
  282. </html>