Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  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>
  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>Mouvements — David Larlet</title>
  13. <meta name="description" content="Des idées qui poussent, qui bougent, qui rebondissent.">
  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="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <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>
  30. <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>
  31. <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>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  52. <article>
  53. <header>
  54. <h1>Mouvements</h1>
  55. </header>
  56. <nav>
  57. <p class="center">
  58. <a rel="prev" href="/david/2020/06/12/" title="Publication précédente : Vrac">←</a> •
  59. <a href="/david/" title="Aller à l’accueil">🏠</a>
  60. • <a rel="next" href="/david/2020/06/25/" title="Publication suivante : Ouvertance">→</a>
  61. </p>
  62. </nav>
  63. <hr>
  64. <main>
  65. <p><em>Des idées qui poussent, qui bougent, qui rebondissent.</em></p>
  66. <h2 id="retours">Retours <a href="#retours" title="Ancre vers cette partie">#</a></h2>
  67. <blockquote>
  68. <p>La cabane a-t-elle un sens politique ? Vivre ici n’apporte rien à la communauté des hommes. L’expérience de l’ermitage ne verse pas son écot à la recherche collective sur les moyens de faire vivre les gens ensemble. Les idéologies, comme les chiens, restent au seuil de la porte des ermitages. Au fond des bois, ni Marx ni Jésus, ni ordre ni anarchie, ni égalité ni injustice. Comment l’ermite, préoccupé seulement de l’immédiat, pourrait-il se soucier de prévoir ?<br />
  69. La cabane n’est pas un point de reconquête mais de chute.<br />
  70. <mark>Un havre de renoncement, non un quartier général pour la préparation des révolutions.</mark><br />
  71. Une porte de sortie, non un point de départ.<br />
  72. Un carré où le capitaine va boire un dernier rhum avant le naufrage.<br />
  73. Le trou où la bête panse ses plaies, non le repaire où elle fourbit ses griffes.</p>
  74. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  75. </blockquote>
  76. <p>J’ai l’impression qu’il y a un <a href="https://helloanselm.com/writings/whats-up-with-me">mouvement</a> (<a href="/david/cache/2020/25289703cb4dd3023c087715cddf6d55/">cache</a>) de <a href="https://abeautifulresistance.org/site/2019/12/5/why-i-quit-350org">fond</a> (<a href="/david/cache/2020/f84169abe9067aa3fde8e3f3fc200517/">cache</a>) chez les privilégiés que je suis<sup><a href="#note-1">1</a></sup> pour un <em>retour à la terre</em>. Or, ironiquement, c’est peut-être <a href="/david/2020/05/18/#agriculture">la base du capitalisme</a> et de l’esclavage d’une partie de la population.</p>
  77. <p>Un <em>retour au nomadisme</em> serait probablement plus approprié en matière de frugalité et de société égalitaire. Qu’est-ce que cela signifierait sans avoir un arrière-goût de #vanlife ni des rides de <a href="https://en.wikipedia.org/wiki/Snowbird_(person)">snowbirds</a> ? S’il s’agit d’une migration saisonnière, combien de nationalités sont nécessaires ?!</p>
  78. <p><span id="note-1">Note 1</span> : la beauté de la langue française :-).</p>
  79. <blockquote>
  80. <p>This is the <mark>progress trap</mark>. Each improvement in our knowledge or in our technology will create new problems, which require new improvements. Each of these improvements tends to make society bigger, more complex, less human-scale, more destructive of nonhuman life, and more likely to collapse under its own weight.</p>
  81. <p><cite><em><a href="https://orionmagazine.org/article/dark-ecology/">Dark Ecology</a></em> (<a href="/david/cache/2020/ef0bea4e3633945e71c7bda351661797/">cache</a>)</cite></p>
  82. </blockquote>
  83. <h2 id="canadobe">Canadobe <a href="#canadobe" title="Ancre vers cette partie">#</a></h2>
  84. <blockquote>
  85. <p>Autre anecdote : je suis en train de demander la citoyenneté canadienne. Le seul moyen pour compléter cette demande est de remplir un formulaire PDF en utilisant Acrobat Reader. Impossible de le faire en utilisant un autre logiciel. Je suis donc obligé d’installer un logiciel propriétaire si je veux bénéficier des mes droits. Un formulaire HTML aurait été accessible par tous – en utilisant un standard ouvert. Formulons-le ainsi pour que la dimension d’aberration soit plus évidente : <mark>la seule manière pour devenir citoyen canadien est de passer par la société Adobe.</mark></p>
  86. <p><cite><em><a href="http://blog.sens-public.org/marcellovitalirosati/tre-libres-lpoque-du-numrique/">Être libres à l’époque du numérique</a></em> (<a href="/david/cache/2020/02b1967f7086ab2d3eb84d2ce8129e95/">cache</a>)</cite></p>
  87. </blockquote>
  88. <p>Il faudrait que je fasse un article complet sur le coût d’une <a href="/david/blog/2016/expatriation-choisie/">expatriation choisie</a>, pour l’instant je vais me contenter de consigner cela ici :</p>
  89. <ul>
  90. <li>il m’a fallu trois ans pour obtenir le Certificat de Sélection du Québec (CSQ pour les intimes) : 2017-04-05 → 2020-04-29 ;</li>
  91. <li>il m’a fallu installer <code>Adobe Acrobat Reader DC</code> pour pouvoir saisir des informations personnelles sans avoir aucun contrôle sur l’outil stockant et transmettant ces données ;</li>
  92. <li>il m’a fallu envoyer — sans aucune garantie sur leur (non !) pérennité — des données incluant l’ensemble de mes déplacements trans-frontaliers et emplois de ces 10 dernières années + l’intégralité de mes études et diplômes ;</li>
  93. <li>il m’a fallu utiliser un <em>hack</em> de développeur web pour passer une étape de manière probablement illégale (note : rien de fou non plus, un champ <em>disabled</em> uniquement côté client…) ;</li>
  94. <li>il m’a fallu faire <a href="/david/stream/2018/08/25/">deux tours de poteaux</a> inutiles ;</li>
  95. <li>il m’a fallu payer une somme non négligeable et faire des choix de vie familiale relativement importants ;</li>
  96. <li>il m’a fallu attendre plusieurs mois avec assignation à territoire qu’un visa arrive dans ma boîte aux lettres, deux fois ;</li>
  97. <li>il m’a fallu encaisser les <a href="/david/stream/2019/02/08/">mises de dossiers à la poubelle</a> puis les repêchages improbables.</li>
  98. </ul>
  99. <p><em>Et je ne suis qu’à la moitié du chemin.</em></p>
  100. <p>Toute cette frustration étant étalée, je suis conscient des <strong>privilèges</strong> que j’ai de pouvoir réaliser tout cela en relative sérénité, sans (trop) douter de mon interprétation des documents aux <a href="https://colly.com/articles/indefinite-leave-to-remain">tournures incompréhensibles</a> (<a href="/david/cache/2020/73dc1ad4719144f3768002aa5cef60ef/">cache</a>), sans que mon emploi/revenu soit en jeu, sans penser que ma parole va être mise en doute <em>a priori</em>, sans avoir trop de mal à contacter mes anciens employeurs/propriétaires, sans avoir de casier judiciaire, sans venir d’un pays qui est dans la mauvaise liste, sans avoir peur que l’on me renvoie dans un pays où je risque ma vie, etc etc.</p>
  101. <h2 id="reference">Référence <a href="#reference" title="Ancre vers cette partie">#</a></h2>
  102. <blockquote>
  103. <p>L’écologie sans la justice sociale, c’est du jardinage.</p>
  104. </blockquote>
  105. <p>Je <a href="https://mastodon.social/@dav/104332335388940331">pouettais</a> cela sans en citer la source il y a quelques jours suite à la lecture d’une liste de diffusion qui faisait un lien vers un <em>tweet</em> avec la traduction ci-dessus qui lui même contenait une photo d’une pancarte de manifestation en Italie. Cela devient de plus en plus <a href="/david/stream/2018/11/29/">difficile</a> de savoir qui/comment référencer…</p>
  106. <blockquote lang="en">
  107. <p>Amongst all the campaigns to “save the Earth” today, Kingsnorth sees “no sign of any real, felt attachment to any small part of that Earth.” It’s no wonder we are feeling burnt out. We have lost the connection to the earth—not the planet Earth with a capital “E”, but the earth beneath our feet, <mark>the place where we are</mark>. “The antidote to this global distancing of humanity from the rest of nature,” writes Kingsnorth, “is the slow, messy business of getting to know a landscape.”</p>
  108. <p><cite><em><a href="https://abeautifulresistance.org/site/2019/12/5/why-i-quit-350org">Why I Stopped Protesting and Started a Garden</a></em> (<a href="/david/cache/2020/f84169abe9067aa3fde8e3f3fc200517/">cache</a>)</cite></p>
  109. </blockquote>
  110. <h2 id="refuges">Refuges <a href="#refuges" title="Ancre vers cette partie">#</a></h2>
  111. <blockquote lang="en">
  112. <p>Building refuges. The coming decades are likely to challenge much of what we think we know about what progress is, and about who we are in relation to the rest of nature. Advanced technologies will challenge our sense of what it means to be human at the same time as the tide of extinction rolls on. The ongoing collapse of social and economic infrastructures, and of the web of life itself, will kill off much of what we value. In this context, ask yourself: <mark>what power do you have to preserve what is of value</mark>—creatures, skills, things, places? Can you work, with others or alone, to create places or networks that act as refuges from the unfolding storm? Can you think, or act, like the librarian of a monastery through the Dark Ages, guarding the old books as empires rise and fall outside?</p>
  113. <p>[…]</p>
  114. <p>If you don’t feel despair, in times like these, you are not fully alive. But there has to be something beyond despair too; or rather, something that accompanies it, like a companion on the road. This is my approach, right now. It is, I suppose, the development of a personal philosophy for a dark time: a dark ecology. None of it is going to save the world—but then there is no saving the world, and the ones who say there is are the ones you need to save it from.</p>
  115. <p><cite><em><a href="https://orionmagazine.org/article/dark-ecology/">Dark Ecology</a></em> (<a href="/david/cache/2020/ef0bea4e3633945e71c7bda351661797/">cache</a>)</cite></p>
  116. </blockquote>
  117. <p>Dans mon état de conscience du monde actuel, je me retrouve beaucoup dans cet article avec ses digressions et ses pistes. Je suis toujours aussi <a href="/david/blog/2013/proprieterre/">circonspect quant à la propriété</a> mais je me demande de plus en plus si le mieux que j’ai à faire en tant qu’hyper-privilégié ne serait quand même pas d’acheter un bout de terrain à préserver des humains.</p>
  118. <p><em>Un refuge à mon échelle.</em> L’idée ne m’est <a href="/david/blog/2013/patrimoine-agrologie/">pas nouvelle</a> et même <a href="/david/stream/2018/09/02/">récurrente</a> (merci ma mémoire numérique).</p>
  119. <blockquote>
  120. <p>Pas un tas de cailloux.</p>
  121. <p><cite><em><a href="/david/blog/2014/heritage-immobilier/">Héritage et immobilier</a></em></cite></p>
  122. </blockquote>
  123. <p>Soit, mais qu’en est-il de quelques acres de forêt ?</p>
  124. <h2 id="obsolescence">Obsolescence <a href="#obsolescence" title="Ancre vers cette partie">#</a></h2><p>Après <a href="/david/stream/2015/07/19/">cinq ans</a> de bons et loyaux services, j’ai remis une somme conséquente dans une machine pour personnes pommées. C’est ce que ça demande <a href="/david/2020/05/26/#jour-25-29-mai-peaufinage-et-outillage">d’utiliser de l’outillage JS</a> et je sais à quel point c’est <a href="https://www.theolognion.com/unreal-engine-5-is-meant-to-ridicule-web-developers/">ridicule</a> (<a href="/david/cache/2020/23b142e6e8edf164de61e003291e4619/">cache</a>).</p>
  125. <p>C’est encore une fois l’occasion de voir ce que je peux éviter d’installer. <a href="https://docs.brew.sh/">Homebrew</a> reste toujours mon outil de choix pour ce qui est système et j’essaye pour l’instant de m’en tenir au shell par défaut de macOS (zsh) avec un <a href="https://gist.github.com/davidbgk/7511af13629a16c67d4b7083bbdf0e54">fichier de configuration</a> relativement court.</p>
  126. <p>Au passage, si vous avez besoin de transférer des fichiers critiques entre deux machines localement, <a href="https://magic-wormhole.readthedocs.io/en/latest/welcome.html">wormhole</a> fonctionne plutôt bien. Si vous avez besoin d’installer un <em>gist</em> comme un module python, j’ai sauvé un <a href="https://gist.github.com/davidbgk/bc842e20d7b30961bfefa65e2070c8b0">gist à ce sujet</a> (<em>how meta!</em>). J’ai résisté à <a href="https://martinovic.blog/post/home_git/">transformer ma maison en dépôt git</a> (<a href="/david/cache/2020/4be675592f4f6dcf636812263e9e1233/">cache</a>) et j’ai renoncé à <a href="https://www.micah.soy/posts/setting-up-git-identities/">définir des identités distinctes</a> (<a href="/david/cache/2020/4218c8b3332d61d6702bb2bd73ea9944/">cache</a>) pour chacune de mes forges (trop complexe pour mon usage).</p>
  127. <p>Et enfin, j’ai découvert <a href="https://hugo.soucy.cc/note/2019/11/shell-script-compiler-et-surveiller-le-scss.html">via Hugo Soucy</a> une façon simple d’écouter les modifications sur les fichiers <em>markdown</em> avec <a href="http://eradman.com/entrproject/">entr</a> pour reconstruire ce site (vs. <a href="https://github.com/lepture/python-livereload">livereload</a>) :</p>
  128. <pre><code>$ ls david/2020/fragments/*.md | entr -r python site.py pages
  129. </code></pre>
  130. <p>Là c’est encore plus <em>meta</em>. Mais trêve de technique.</p>
  131. <blockquote lang="en">
  132. <p>It’s kind of funny, how <mark>commercial apps have feature bloat but don’t have power mode</mark>. You can do more different things, but can’t configure them to your liking.</p>
  133. <p><cite><em><a href="https://tonsky.me/blog/syncthing/">Computers as I used to love them</a></em> (<a href="/david/cache/2020/154a7a62b2eb5b0fbe17673fd7cbcf42/">cache</a>)</cite></p>
  134. </blockquote>
  135. <h2 id="introspection">Introspection <a href="#introspection" title="Ancre vers cette partie">#</a></h2>
  136. <blockquote>
  137. <p>Solitaire, oui, mais jamais seul. <mark>J’ai tellement de voix dans ma tête.</mark> Régulièrement trop nombreuses pour que je puisse en isoler une dominante. Ce n’est pas un aveu de démence. Ce n’est pas quelque chose qui m’effraie, juste une source d’épuisement. Ces voix ne me sont pas inconnues. Elles sont miennes. Elles sont mes pensées qui parlent et qui débattent.</p>
  138. <p><cite><em><a href="https://nrkn.fr/blog/2020/06/13/plus-rien-a-craindre/">Plus rien à craindre</a></em> (<a href="/david/cache/2020/5db0711c2794aed3bf1433b48084064c/">cache</a>)</cite></p>
  139. </blockquote>
  140. <p>Plus j’écoute ces voix, plus je me dis que ce <a href="https://sentiers.media/dispatch-08-digital-gardens/">jardin numérique</a> (<a href="/david/cache/2020/5a82172cc73bfc2050a2590b4d81e82d/">cache</a>) me permet de les cultiver, de les voir grandir et faner, de pouvoir les offrir de manière plus ou moins empoisonnée. En tout cas, de les externaliser suffisamment pour qu’elles puissent continuer leur chemin sans rebondir trop violemment entre mes deux tempes. Certaines raisonnent longtemps. D’autres entrent en résonance. La boîte crânienne tente de résister. <em>Et ça finit par faire mal.</em></p>
  141. <blockquote>
  142. <p>L’ermite accepte de ne plus rien peser dans la marche du monde, de ne compter pour rien dans la chaîne des causalités. Ses pensées ne modèleront pas le cours des choses, n’influenceront personne. Ses actes ne signifieront rien. (Peut-être sera-t-il l’objet de quelques souvenirs.) Qu’elle est légère, cette pensée ! Et comme elle prélude au détachement final : <mark>on ne se sent jamais aussi vivant que mort au monde !</mark></p>
  143. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  144. </blockquote>
  145. </main>
  146. <nav>
  147. <p class="center">
  148. <a rel="prev" href="/david/2020/06/12/" title="Publication précédente : Vrac">←</a> •
  149. <a href="/david/2020/" title="Liste des publications récentes">↑</a>
  150. • <a rel="next" href="/david/2020/06/25/" title="Publication suivante : Ouvertance">→</a>
  151. </p>
  152. </nav>
  153. </article>
  154. <hr>
  155. <footer>
  156. <p>
  157. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  158. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  159. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  160. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  161. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  162. </p>
  163. <template id="theme-selector">
  164. <form>
  165. <fieldset>
  166. <legend>Thème</legend>
  167. <label>
  168. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  169. </label>
  170. <label>
  171. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  172. </label>
  173. <label>
  174. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  175. </label>
  176. </fieldset>
  177. </form>
  178. </template>
  179. </footer>
  180. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module" defer></script>
  181. <script type="text/javascript">
  182. function loadThemeForm(templateName) {
  183. const themeSelectorTemplate = document.querySelector(templateName)
  184. const form = themeSelectorTemplate.content.firstElementChild
  185. themeSelectorTemplate.replaceWith(form)
  186. form.addEventListener('change', (e) => {
  187. const chosenColorScheme = e.target.value
  188. localStorage.setItem('theme', chosenColorScheme)
  189. toggleTheme(chosenColorScheme)
  190. })
  191. const selectedTheme = localStorage.getItem('theme')
  192. if (selectedTheme && selectedTheme !== 'undefined') {
  193. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  194. }
  195. }
  196. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  197. window.addEventListener('load', () => {
  198. let hasDarkRules = false
  199. for (const styleSheet of Array.from(document.styleSheets)) {
  200. let mediaRules = []
  201. for (const cssRule of styleSheet.cssRules) {
  202. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  203. continue
  204. }
  205. // WARNING: Safari does not have/supports `conditionText`.
  206. if (cssRule.conditionText) {
  207. if (cssRule.conditionText !== prefersColorSchemeDark) {
  208. continue
  209. }
  210. } else {
  211. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  212. continue
  213. }
  214. }
  215. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  216. }
  217. // WARNING: do not try to insert a Rule to a styleSheet you are
  218. // currently iterating on, otherwise the browser will be stuck
  219. // in a infinite loop…
  220. for (const mediaRule of mediaRules) {
  221. styleSheet.insertRule(mediaRule.cssText)
  222. hasDarkRules = true
  223. }
  224. }
  225. if (hasDarkRules) {
  226. loadThemeForm('#theme-selector')
  227. }
  228. })
  229. </script>
  230. </body>
  231. </html>