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

1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
1 rok temu
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  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. Tag #attention
  14. — David Larlet</title>
  15. <meta name="description" content="Publications relatives au tag #attention">
  16. <!-- That good ol' feed, subscribe :). -->
  17. <link rel="alternate"
  18. type="application/atom+xml"
  19. title="Feed"
  20. href="/david/log/">
  21. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  22. <link rel="apple-touch-icon"
  23. sizes="180x180"
  24. href="/static/david/icons2/apple-touch-icon.png">
  25. <link rel="icon"
  26. type="image/png"
  27. sizes="32x32"
  28. href="/static/david/icons2/favicon-32x32.png">
  29. <link rel="icon"
  30. type="image/png"
  31. sizes="16x16"
  32. href="/static/david/icons2/favicon-16x16.png">
  33. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  34. <link rel="mask-icon"
  35. href="/static/david/icons2/safari-pinned-tab.svg"
  36. color="#07486c">
  37. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  38. <meta name="msapplication-TileColor" content="#f7f7f7">
  39. <meta name="msapplication-config"
  40. content="/static/david/icons2/browserconfig.xml">
  41. <meta name="theme-color"
  42. content="#f7f7f7"
  43. media="(prefers-color-scheme: light)">
  44. <meta name="theme-color"
  45. content="#272727"
  46. media="(prefers-color-scheme: dark)">
  47. <!-- Is that even respected? Retrospectively? What a shAItshow…
  48. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  49. <meta name="robots" content="noai, noimageai">
  50. <!-- Documented, feel free to shoot an email. -->
  51. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
  55. as="font"
  56. type="font/woff2"
  57. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  58. crossorigin>
  59. <link rel="preload"
  60. href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
  61. as="font"
  62. type="font/woff2"
  63. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  64. crossorigin>
  65. <link rel="preload"
  66. href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
  67. as="font"
  68. type="font/woff2"
  69. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  70. crossorigin>
  71. <link rel="preload"
  72. href="/static/david/css/fonts/triplicate_t3_regular.woff2"
  73. as="font"
  74. type="font/woff2"
  75. media="(prefers-color-scheme: dark)"
  76. crossorigin>
  77. <link rel="preload"
  78. href="/static/david/css/fonts/triplicate_t3_bold.woff2"
  79. as="font"
  80. type="font/woff2"
  81. media="(prefers-color-scheme: dark)"
  82. crossorigin>
  83. <link rel="preload"
  84. href="/static/david/css/fonts/triplicate_t3_italic.woff2"
  85. as="font"
  86. type="font/woff2"
  87. media="(prefers-color-scheme: dark)"
  88. crossorigin>
  89. <script>
  90. function toggleTheme(themeName) {
  91. document.documentElement.classList.toggle(
  92. 'forced-dark',
  93. themeName === 'dark'
  94. )
  95. document.documentElement.classList.toggle(
  96. 'forced-light',
  97. themeName === 'light'
  98. )
  99. }
  100. const selectedTheme = localStorage.getItem('theme')
  101. if (selectedTheme !== 'undefined') {
  102. toggleTheme(selectedTheme)
  103. }
  104. </script>
  105. <style type="text/css">
  106. details[open] summary {
  107. display: none;
  108. }
  109. </style>
  110. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
  111. data-instant-intensity="viewport-all">
  112. <header>
  113. <h1>Publications relatives au tag #attention</h1>
  114. </header>
  115. <nav>
  116. <p class="center">
  117. <a href="/david/" title="Aller à l’accueil">
  118. <svg class="icon icon-home">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  120. </svg>
  121. Accueil</a>
  122. • <a rel="tags"
  123. href="/david/#tags-2023"
  124. title="Liste de toutes les étiquettes">
  125. <svg class="icon icon-tags">
  126. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  127. </svg>
  128. Étiquettes</a>
  129. </p>
  130. </nav>
  131. <hr>
  132. <main>
  133. <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  134. <h2>
  135. <a href="/david/2023/02/28/" title="Lien permanent vers cet article">AlgoRSSithme</a> (2023-02-28)
  136. </h2>
  137. <blockquote lang="en">
  138. <p>This is why RSS feeds are amazing: nobody can get into your feed or be prioritized in it unless you say&nbsp;so.</p>
  139. <p><cite><em><a href="https://notes.jim-nielsen.com/#2023-02-27T0915">Enshittification - Jim Nielsen’s Notes</a></em>&nbsp;(<a href="/david/cache/2023/941b67353ff151e5da55c691f6e9161b/">cache</a>)</cite></p>
  140. </blockquote>
  141. <p>L’usage fait qu’il n’y a pas d’algorithme derrière un flux RSS ou un agrégateur mais il pourrait en être&nbsp;autrement.</p>
  142. <p>Les auteur·ices choisissent de mettre les x derniers articles dans leur flux mais ce n’est en fait que la <em>dernière</em> entrée qui est pertinente (en prenant l’hypothèse que l’agrégateur rafraichit plus vite que le rythme de publication). Tout le reste pourrait être choisi selon un algorithme car concernerait les personnes qui n’ont pas encore d’articles dans leur&nbsp;cache.</p>
  143. <p>Je pourrais par exemple choisir d’avoir le dernier article ainsi qu’une dizaine d’articles soigneusement sélectionnés pour motiver les nouvelles personnes inscrites à conserver ce flux (au même titre que les messages épinglés sur un compte mastodon), d’autant qu’il est <a href="/david/log/">affiché chez moi</a> (pour <a href="/david/2021/06/03/">rappel</a>).</p>
  144. <p>Je pourrais aussi tous les mois faire sortir un ancien article que j’aime bien et qui apparaitrait probablement en dernier/très loin dans votre agrégateur mais si vous êtes en RSS Zéro (je suis sûr que c’est un truc), ça pourrait le rendre visible et vous donner envie d’aller y jeter un&nbsp;œil.</p>
  145. <p>De l’autre côté du flux, l’agrégateur pourrait faire de même et aller repêcher de vieux billets non lus, ne pas afficher tous les articles lors de l’ajout d’un nouveau flux, mettre certaines publications de sources plus populaires en avant, etc.</p>
  146. <p>Ce n’est pas le format qui empêche d’y mettre une logique de dévelopeur·euse (aussi appelé algorithme), mais les outils qui le génèrent et qui l’exploitent. C’est relativement étonnant que personne n’ait encore pris le temps de saccager&nbsp;ça.</p>
  147. <p>Oups…</p>
  148. <hr />
  149. <blockquote>
  150. <p>💜 L’idée derrière cela, c’est de pouvoir accéder à <mark>de la papeterie facile à imprimer</mark> et à photocopier, tout en profitant de belles illustrations. Pour l’instant, je pense partager mes propres illustrations ainsi qu’une liste de liens pour les ressources d’autres personnes. […] J’aimerais que cette boutique soit le début d’une réflexion commune sur le partage de l’art et&nbsp;l’artisanat.</p>
  151. <p><cite><em><a href="https://la-papeterie-libre.fr/">La Papeterie&nbsp;Libre</a></em></cite></p>
  152. </blockquote>
  153. <blockquote lang="en">
  154. <p>🤦 It seems ChatGPT is wrongly recommending us for “reverse phone number lookup” - ie the ability to determine the location of a mobile phone solely based on the number. <mark>This is not a service we provide.</mark> It is not a service we have ever provided, nor a service we have any plans to provide. Indeed, it is a not a service we are technically capable of&nbsp;providing.</p>
  155. <p><cite><em><a href="https://blog.opencagedata.com/post/dont-believe-chatgpt">Don’t believe ChatGPT - we do NOT offer a “phone lookup” service</a></em>&nbsp;(<a href="/david/cache/2023/0568befa90d2b39c0694d4c7ffc3cd73/">cache</a>)</cite></p>
  156. </blockquote>
  157. <blockquote lang="en">
  158. <p>👍 The best time to leave Github was before it was acquired by Microsoft. The second-best time is <mark>now.</mark> Sooner or later, you will be forced out of Github like we, oldies, were forced out of Sourceforge. Better leaving while you are free to do it on your own&nbsp;terms…</p>
  159. <p><cite><em><a href="https://ploum.net/2023-02-22-leaving-github.html">We need to talk about your Github addiction</a></em>&nbsp;(<a href="/david/cache/2023/afa0aae212698b71118868d36d50a747/">cache</a>)</cite></p>
  160. </blockquote>
  161. <blockquote lang="en">
  162. <p>💅 You do not have to follow these rules every time. If you have a good reason to break any of them, do. But they are safe to follow every&nbsp;time.</p>
  163. <p><cite><em><a href="https://anthonyhobday.com/sideprojects/saferules/">Visual design rules you can safely follow every time</a></em>&nbsp;(<a href="/david/cache/2023/61f52848924157701ed66c85d67f3536/">cache</a>)</cite></p>
  164. </blockquote>
  165. <blockquote>
  166. <p>🤗 Je fais tout ça sans la contrainte de maintenance, car je ne développe que des prototypes de logiciels. C’est <mark>une sorte d’exutoire</mark> pour se libérer l’esprit des projets qui me traînent dans la&nbsp;tête.</p>
  167. <p><cite><em><a href="https://marienfressinaud.fr/farandole-de-projets.html">Farandole de projets</a></em>&nbsp;(<a href="/david/cache/2023/392138accbdaee722a669834da5f1a8d/">cache</a>)</cite></p>
  168. </blockquote>
  169. <blockquote lang="en">
  170. <p>🧠 You could even think of this home stream as what in literature is called a “stream of consciousness”: <mark>a constant stream of the multitudinous thoughts and feelings which pass through the mind of a narrator.</mark> Your website is a way for you to share your stream of consciousness, that temporary and subjective and highly biased snippet of the universe, with everyone else, including your future self. In all its&nbsp;multitudes.</p>
  171. <p><cite><em><a href="https://matthiasott.com/notes/streams-of-consciousness">Streams of Consciousness</a></em>&nbsp;(<a href="/david/cache/2023/328b56a2ee2e291dabc8f63a0013cc7a/">cache</a>)</cite></p>
  172. </blockquote>
  173. <h2>
  174. <a href="/david/2023/02/25/" title="Lien permanent vers cet article">Transmission</a> (2023-02-25)
  175. </h2>
  176. <blockquote lang="en">
  177. <p>So I would. I would grab a coffee, sit down, and start reading. Often we’d share posts back and forth, or chat about some of the more interesting ones we had read. It was something we did that was never on accident… <mark>it was intentional, deliberate.</mark> It was a way, I think, of investing in ourselves while also acknowledging how much we still could learn from&nbsp;others.</p>
  178. <p><cite><em><a href="https://timkadlec.com/remembers/2023-02-23-investing-in-rss/">Investing in RSS</a></em>&nbsp;(<a href="/david/cache/2023/19ec475bd5d92b02fbef043c52ea0589/">cache</a>)</cite></p>
  179. </blockquote>
  180. <p>Il y a ce réveil des blogs qui me rend silencieux, laisser la place d’une attention pour les autres. Et en même temps, ce sont plutôt des réveils que de nouvelles personnes. <strong>Je suis très disposé à me faire le relais de nouveaux blogs si vous en créez&nbsp;un.</strong></p>
  181. <p>Il y a la constatation récurrente que la <a href="https://fr.wikipedia.org/wiki/Loi_de_Conway">Loi de Conway</a> se vérifie dès que je travaille avec des structures à taille inhumaine. L’aliénation de l’humain aux processus est l’un des grands mystères de ce temps. L’expérience de ces hiérarchies me permet d’attendre d’être en communication avec LA personne compétente pour aller de&nbsp;l’avant.</p>
  182. <p>Il y a la transmission douloureuse, je me demande par exemple si sa génération sera la dernière à pouvoir faire du ski de fond dans les parcs montréalais. Au même titre qu’il a été l’un des derniers à pouvoir patiner sur le Lac aux Castors du Mont-Royal. Et encore, il était dans la&nbsp;poussette.</p>
  183. <p>Il y a cette rupture vraiment pas conventionnelle qui me questionne sur le fait qu’une transmission ultime puisse passer par la destruction pour voir ce qui est recréé ensuite, valider les acquis et les envies en quelque sorte. Tellement difficile de décortiquer certaines intentions sans raviver les&nbsp;tensions.</p>
  184. <hr />
  185. <blockquote>
  186. <p>🔄 Que se passe-t-il quand un LLM se nourrit en continu&#8239;&#8239;? Soit il se retrouve exposé à des <mark>contenus produits par d’autres LLM</mark>, soit il continue à être alimenté par des données hiérarchisées par des scrutins alimentés par des personnes qui, elles-mêmes, sont exposées à des contenus produits par un LLM.&nbsp;Quel impact cela pourrait-il avoir sur la qualité des&nbsp;contenus&#8239;&#8239;?</p>
  187. <p><cite><em><a href="https://boris.schapira.dev/notes/2023-02-des-questions/">Des questions · Boris Schapira</a></em>&nbsp;(<a href="/david/cache/2023/482252d2b8806e99bc30ffab2b2c51c9/">cache</a>)</cite></p>
  188. </blockquote>
  189. <blockquote lang="en">
  190. <p>🚜 Today’s cloud services have the look and feel of that tractor. They’re conceived by infrastructure people who care about efficient computation, fast networking, and cheap storage. The comfort and convenience of the developers who need to drive these services to build end-user facing applications has been an&nbsp;afterthought.</p>
  191. <p>Both the tractor and the cloud service of the past made sense: <mark>The majority of people who made the purchasing decisions didn’t operate them</mark>, and those who did had little influence. Why bother making them nice to&nbsp;operate?</p>
  192. <p><cite><em><a href="https://pydantic.dev/announcement/">Company Announcement | Pydantic</a></em>&nbsp;(<a href="/david/cache/2023/0f8bbba127c48a13b35fdf265c2dc106/">cache</a>)</cite></p>
  193. </blockquote>
  194. <blockquote lang="en">
  195. <p>🤸 It comes down to this annoying, upsetting, stupid fact: <mark>the only way to build a great product is to use it every day, to stare at it, to hold it in your hands to feel its lumps.</mark> The data and customers will lie to you but the product never will. And most product orgs suck because they simply don’t use the products that they’re building; they ship incremental nothings without direction because they’re looking at spreadsheets all day long filled with junk data&nbsp;nothings.</p>
  196. <p><cite><em><a href="https://www.robinrendle.com/notes/vibe-driven-development/">Vibe Driven Development</a></em>&nbsp;(<a href="/david/cache/2023/660b2a27b116787ac44e536e6c9dbcd3/">cache</a>)</cite></p>
  197. </blockquote>
  198. <blockquote lang="en">
  199. <p>🧑‍⚖️ Traditional open source is based on the flawed premise that technology is fundamentally neutral, and that unrestricted access to source code— even for explicitly “evil” purposes— is in fact an unqualified good. But around the world, open source developers are starting to realize that the software that they create, with its tremendous potential to change the world for the better, is also being abused to sustain and promote systems of inequity and injustice, globally, and at unprecedented&nbsp;scale.</p>
  200. <p>The Hippocratic License 3.0 (HL3) aims <mark>to confront the potential harms and abuses technology can have</mark> on fundamental human rights. It empowers open source communities to establish a clear set of ethical standards that licensees must abide by in order to adopt their&nbsp;code.</p>
  201. <p><cite><em><a href="https://firstdonoharm.dev/">The Hippocratic License</a></em>&nbsp;(<a href="/david/cache/2023/e44bfaaecad989f67cb2032fac000276/">cache</a>)</cite></p>
  202. </blockquote>
  203. <blockquote lang="en">
  204. <p>😮 I am all for radical criticism, especially targeted at billion-dollar tech corporations and powerful project leaders who <a href="https://fediverse.zachleat.com/@zachleat/109830047951867907">try to silence critics</a>. We need <mark>to hold them accountable</mark> for tech that produces harmful, subpar web experiences. They deserve their decent share of “told you&nbsp;so”.</p>
  205. <p><cite><em><a href="https://molily.de/update-on-robust-javascript/">An update on Robust Client-Side JavaScript</a></em>&nbsp;(<a href="/david/cache/2023/9718ae2062146285e1c4f406240e04af/">cache</a>)</cite></p>
  206. </blockquote>
  207. <blockquote lang="en">
  208. <p>🤗 As we build stuff, we make trade-off decisions like this all the time. If I have a point, it’s that we should consider these tradeoffs <mark>with our most junior teammates in mind;</mark> how much complexity are we adding for them? Is it worth&nbsp;it?</p>
  209. <p><cite><em><a href="https://www.joshwcomeau.com/career/clever-code-considered-harmful/">Clever Code Considered Harmful</a></em>&nbsp;(<a href="/david/cache/2023/a09b5bf450d2cf86fb9e9d6f13b070e0/">cache</a>)</cite></p>
  210. </blockquote>
  211. </main>
  212. <hr>
  213. <footer>
  214. <p>
  215. <nobr>
  216. <a href="/david/" title="Aller à l’accueil">
  217. <svg class="icon icon-home">
  218. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  219. </svg>
  220. Accueil</a>
  221. </nobr>
  222. <nobr>
  223. <a href="/david/log/" title="Accès au flux RSS">
  224. <svg class="icon icon-rss2">
  225. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  226. </svg>
  227. Suivre</a>
  228. </nobr>
  229. <nobr>
  230. <a href="http://larlet.com"
  231. title="Go to my English profile"
  232. data-instant>
  233. <svg class="icon icon-user-tie">
  234. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  235. </svg>
  236. Pro</a>
  237. </nobr>
  238. <nobr>
  239. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
  240. <svg class="icon icon-mail">
  241. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  242. </svg>
  243. Email</a>
  244. </nobr>
  245. <nobr>
  246. <abbr class="nowrap"
  247. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
  248. <svg class="icon icon-hammer2">
  249. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  250. </svg>
  251. Légal</abbr>
  252. </nobr>
  253. </p>
  254. <template id="theme-selector">
  255. <form>
  256. <fieldset>
  257. <legend>
  258. <svg class="icon icon-brightness-contrast">
  259. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  260. </svg>
  261. Thème
  262. </legend>
  263. <label>
  264. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  265. Auto
  266. </label>
  267. <label>
  268. <input type="radio" value="dark" name="chosen-color-scheme">
  269. Foncé
  270. </label>
  271. <label>
  272. <input type="radio" value="light" name="chosen-color-scheme">
  273. Clair
  274. </label>
  275. </fieldset>
  276. </form>
  277. </template>
  278. </footer>
  279. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  280. <script>
  281. function loadThemeForm(templateName) {
  282. const themeSelectorTemplate = document.querySelector(templateName)
  283. const form = themeSelectorTemplate.content.firstElementChild
  284. themeSelectorTemplate.replaceWith(form)
  285. form.addEventListener('change', (e) => {
  286. const chosenColorScheme = e.target.value
  287. localStorage.setItem('theme', chosenColorScheme)
  288. toggleTheme(chosenColorScheme)
  289. })
  290. const selectedTheme = localStorage.getItem('theme')
  291. if (selectedTheme && selectedTheme !== 'undefined') {
  292. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  293. }
  294. }
  295. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  296. window.addEventListener('load', () => {
  297. let hasDarkRules = false
  298. for (const styleSheet of Array.from(document.styleSheets)) {
  299. let mediaRules = []
  300. for (const cssRule of styleSheet.cssRules) {
  301. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  302. continue
  303. }
  304. // WARNING: Safari does not have/supports `conditionText`.
  305. if (cssRule.conditionText) {
  306. if (cssRule.conditionText !== prefersColorSchemeDark) {
  307. continue
  308. }
  309. } else {
  310. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  311. continue
  312. }
  313. }
  314. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  315. }
  316. // WARNING: do not try to insert a Rule to a styleSheet you are
  317. // currently iterating on, otherwise the browser will be stuck
  318. // in a infinite loop…
  319. for (const mediaRule of mediaRules) {
  320. styleSheet.insertRule(mediaRule.cssText)
  321. hasDarkRules = true
  322. }
  323. }
  324. if (hasDarkRules) {
  325. loadThemeForm('#theme-selector')
  326. }
  327. })
  328. </script>
  329. </body>
  330. </html>