davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
							<!DOCTYPE html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
  <!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  <meta charset="utf-8">
  <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  <!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- Required to make a valid HTML5 document. -->
  <title>
    Collectif
  — David Larlet</title>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <meta name="description" content="Il est parfois difficile pour un collectif existant de fait de définir ce qui le relie (encore), de travailler sur sa raison d’être et/ou ses valeurs. Le regroupement a pu être économique, idéologique, par affinités, un peu des trois à la fois sûrement et à un moment on se retrouve devant le fait accompli. Presque surpris de se retrouver ensemble, à se demander pourquoi.">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  
<style type="text/css">
  .tippy-content {
    min-width: 280px;
    padding: .5rem;
    font-size: calc(var(--fluid-0) * 0.8);
    font-family: var(--labor-font);
    letter-spacing: initial;
    text-align: left;
  }
  .tippy-content h3 {
    margin-top: 0;
  }
  .tippy-content h3 img {
    max-width: 2rem;
    max-height: 2rem;
    display: inline-block;
  }
  .tippy-content .tippy-links {
    display: flex;
    justify-content: space-around;
  }
  .tippy-content a {
    padding: .4rem;
    color: #F06048;
  }
</style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>Collectif</h1>
      <p>Le <time datetime="2024-03-28">28 mars 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/03/26/"
           title="Publication précédente : GPX Viewer">← Précédent</a> •
      
      <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
      •
      <a href="/david/recherche/"
         title="Aller à la page de recherche"
         rel="search" data-no-instant>Recherche</a>
      
        • <a rel="next"
            href="/david/2024/03/29/"
            title="Publication suivante : Jour 1">Suivant →</a>
      
    </p>
  </nav>
  
<p>Il est parfois difficile pour un collectif existant <em>de fait</em> de définir ce qui le relie (encore), de travailler sur sa raison d’être et/ou ses valeurs. Le regroupement a pu être économique, idéologique, par affinités, un peu des trois à la fois sûrement et à un moment on se retrouve devant le fait accompli. Presque surpris de se retrouver ensemble, à se demander&nbsp;pourquoi.</p>
<p>Cela m’arrive dans trois situations à la fois en ce moment. À différentes échelles mais le parallèle est frappant. Le plus difficile (pour moi) est de se retenir d’être le seul moteur du groupe car le temps individuel est aussi important que l’action collective qu’il&nbsp;précède.</p>
<p>Je vais aller m’épuiser sur ces sages paroles en forêt. Seul.</p>
<a href="#hr-140" title="Lien vers cette section de la page"><hr id="hr-140" /></a>

<blockquote lang="en">
<p>In 2016, Facebook launched a secret project designed to intercept and decrypt the network traffic between people using Snapchat’s app and its servers. The goal was to understand users’ behavior and help Facebook compete with Snapchat, according to newly unsealed court documents. Facebook called this “Project Ghostbusters,” in a clear reference to Snapchat’s ghost-like&nbsp;logo.</p>
<p>On Tuesday, a federal court in California released new documents discovered as part of the class action lawsuit between consumers and Meta, Facebook’s parent&nbsp;company.</p>
<p>The newly released documents reveal how Meta tried to gain a competitive advantage over its competitors, including Snapchat and later Amazon and YouTube, <mark>by analyzing the network traffic of how its users were interacting with Meta’s competitors.</mark> Given these apps’ use of encryption, Facebook needed to develop special technology to get around&nbsp;it.</p>
<p><cite><em><a data-link-domain="techcrunch.com" href="https://techcrunch.com/2024/03/26/facebook-secret-project-snooped-snapchat-user-traffic/" hreflang="en"
            title="Consultation de l’article (anglais)">Facebook snooped on users’ Snapchat traffic in secret project, documents reveal</a>
            <a href="/david/cache/2024/2de5f6111316a8158795d70666b55a95/" hreflang="en"
                data-tippy data-description="A secret program called  Project Ghostbusters  saw Facebook devise a way to intercept and decrypt the encrypted network traffic of Snapchat users to study their behavior."
                data-source="https://techcrunch.com/2024/03/26/facebook-secret-project-snooped-snapchat-user-traffic/"
                data-date="2024-03-28"
                data-favicon="https://techcrunch.com/wp-content/uploads/2015/02/cropped-cropped-favicon-gradient.png?w=32"
                data-domain="techcrunch.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>J’ai du mal à réaliser que je suis en train de faire un lien vers TechCrunch mais c’est trop gros pour laisser passer. Je ne vois pas comment un tel stratagème pourrait être justifiable, et si les GAFAM+ en sont là ça fait froid dans le&nbsp;dos.</p>
<p>Le manque de déontologie dans ma profession m’attriste. Savoir que cette nouvelle ne va rien changer aux monopoles actuels&nbsp;m’achève.</p>

<blockquote lang="en">
<p>People who point out what needs to be improved are generally disappointed optimists. Only an optimist would believe that pointing out what has gone wrong could ever result in said issue being fixed. Only somebody who believes that software could be universally useful to everybody in society is going to spend time discovering and highlighting accessibility&nbsp;issues.</p>
<p>You don’t spend years of your life figuring out how the flaws of the web can be fixed unless you thinks the web has massive unfulfilled&nbsp;potential.</p>
<p><mark>We’re not cynics.</mark> If we were, we wouldn’t waste so much energy being&nbsp;hopeful.</p>
<p><cite><em><a data-link-domain="baldurbjarnason.com" href="https://www.baldurbjarnason.com/2024/the-software-crisis-easter-sale/" hreflang="en"
            title="Consultation de l’article (anglais)">“I’m not a cynic, I’m disappointed”</a>
            <a href="/david/cache/2024/a11451e038f3aedba0ae55ff242e1ed5/" hreflang="en"
                data-tippy data-description="Most people don’t realise just how few of the “critics” in tech are genuine cynics.You don’t spend a good part of your life shouting about bad websites or broken software and how they could be fixed if you’re a cynic."
                data-source="https://www.baldurbjarnason.com/2024/the-software-crisis-easter-sale/"
                data-date="2024-03-28"
                data-favicon="https://www.baldurbjarnason.com/dark-bird.svg"
                data-domain="baldurbjarnason.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<a href="#hr-141" title="Lien vers cette section de la page"><hr id="hr-141" /></a>

<blockquote lang="en">
<p>As such, I’ve become more attuned to what my goal really <em>should be</em> with Buttondown. Most tech companies have a goal centered around some flavor of maximalism: disrupting an industry, revolutionizing a process, that kind of thing. Buttondown is not that kind of product; <mark>I am not that kind of&nbsp;person.</mark></p>
<p><cite><em><a data-link-domain="jmduke.com" href="https://jmduke.com/posts/microblog/why-should-a-company/" hreflang="en"
            title="Consultation de l’article (anglais)">Why should a company? · Applied Cartography</a>
            <a href="/david/cache/2024/c2a852eced710f481135a1f61cb67a26/" hreflang="en"
                data-tippy data-description=""
                data-source="https://jmduke.com/posts/microblog/why-should-a-company/"
                data-date="2024-03-28"
                data-favicon="https://jmduke.com/favicon.ico"
                data-domain="jmduke.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Et puis soudain un peu d’espoir. Tout n’est pas si terrible finalement. Quelques villages ici et là résistent. Quelques personnes et collectifs font la&nbsp;différence.</p>

<blockquote lang="en">
<p>But it’s our fault. Our as a society. We celebrate when Apple becomes the first trillion-dollar company but we don’t celebrate when someone says <mark>“You know what? I think I have&nbsp;enough”.</mark></p>
<p><cite><em><a data-link-domain="manuelmoreale.com" href="https://manuelmoreale.com/growth-is-a-mind-cancer" hreflang="en"
            title="Consultation de l’article (anglais)">Growth is a mind cancer</a>
            <a href="/david/cache/2024/422adbcbb23d5d87eb9d9f07f21e6e52/" hreflang="en"
                data-tippy data-description="I'm following with somewhat vague interest the various legal battles Apple is currently involved in. Reading their response to the EU's DMA makes me …"
                data-source="https://manuelmoreale.com/growth-is-a-mind-cancer"
                data-date="2024-03-28"
                data-favicon="https://manuelmoreale.com/favicon.ico"
                data-domain="manuelmoreale.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<a href="#hr-142" title="Lien vers cette section de la page"><hr id="hr-142" /></a>

<blockquote>
<p>À l’origine, Make est un outil conçu pour le développement de logiciels&nbsp;: il sert à automatiser la fabrication de programmes exécutables à partir de fichiers contenant du&nbsp;code.</p>
<p>Mais en réalité, <mark>Make peut être utilisé pour gérer toutes sortes de projets.</mark> En tant que langage, il permet de définir des processus de manière très simple (encore plus simple que les scripts shell). Et en tant qu’outil, il permet de gagner du temps, avec une gestion efficace des états des fichiers qui fait économiser du travail aussi bien à l’humain qu’à la&nbsp;machine.</p>
<p><cite><em><a data-link-domain="arthurperret.fr" href="https://www.arthurperret.fr/cours/make.html" hreflang="fr"
            title="Consultation de l’article">Make</a>
            <a href="/david/cache/2024/821fa933883f080d23c0a6d9d0b3721a/" hreflang="fr"
                data-tippy data-description="Cette page présente le logiciel Make, un outil simple et fiable pour automatiser des tâches."
                data-source="https://www.arthurperret.fr/cours/make.html"
                data-date="2024-03-28"
                data-favicon="https://www.arthurperret.fr/cours/favicon-32x32.png"
                data-domain="arthurperret.fr"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Superbe cours par Arthur Perret, j’ai appris plein de choses en le relisant. J’emploie <code>make</code> au quotidien, ne serait-ce que pour construire ce site et pourtant il y a pas mal de complexité/raccourcis vers lesquels je ne suis pas encore&nbsp;allé.</p>

  
    <nav>
      <p>
        
          <a href="/david/2024/commun/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#commun</a>
        
          <a href="/david/2024/equipe/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#équipe</a>
        
          <a href="/david/2024/protopie/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#protopie</a>
        
        <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
      </p>
    </nav>
  
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/03/26/"
           title="Publication précédente : GPX Viewer">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/03/29/"
            title="Publication suivante : Jour 1">Suivant →</a>
      
    </p>
  </nav>

      
        <form action="/david/recherche/" method="get">
          <fieldset>
            <legend>Recherche</legend>
            <label for="input-search">Termes de votre recherche :</label>
            <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
            <input type="submit" value="Chercher">
            <p id="indexation-infos">
              <small>
                Seuls les contenus de ces 8 dernières années sont indexés.
              </small>
            </p>
          </fieldset>
        </form>
      
      <aside>
        <theme-toggle></theme-toggle>
      </aside>
    </article>
    <hr>
    <footer>
      <p>
        <a href="/david/" title="Aller à l’accueil">Accueil</a>
        •
        <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
        •
        <a href="http://larlet.com"
           title="Go to my English profile"
           data-instant>Pro</a>
        •
        <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
        •
        <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset div {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème</legend>
            <div>
              <label>
                <input type="radio" value="auto" name="chosen-color-scheme" checked>
                Auto
              </label>
              <label>
                <input type="radio" value="dark" name="chosen-color-scheme">
                Foncé
              </label>
              <label>
                <input type="radio" value="light" name="chosen-color-scheme">
                Clair
              </label>
            </div>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      class ThemeToggle extends HTMLElement {
        constructor() {
          super()
          const themeSelectorTemplate = document.querySelector('#theme-selector')
          const form = themeSelectorTemplate.content.firstElementChild
          this.attachShadow({ mode: 'open' })
          this.shadowRoot.appendChild(form.cloneNode(true))
        }

        connectedCallback() {
          const form = this.shadowRoot.querySelector('form')
          form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
          })

          const selectedTheme = localStorage.getItem('theme')
          if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
          }
        }
      }

      const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
      window.addEventListener('load', () => {
        let colorsLayer = undefined
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
          let mediaRules = []
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.cssRules) {
              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                continue
              }
              // WARNING: Safari does not have/supports `conditionText`.
              if (cssRule.conditionText) {
                if (cssRule.conditionText !== prefersColorSchemeDark) {
                  continue
                }
              } else {
                if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                  continue
                }
              }
              mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }
          }

          // WARNING: do not try to insert a Rule to a styleSheet you are
          // currently iterating on, otherwise the browser will be stuck
          // in a infinite loop…
          for (const mediaRule of mediaRules) {
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
    
  <script src="/static/david/js/popper-2.11.8.min.js"></script>
  <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  <script>
    tippy('[data-tippy]', {
      content(reference) {
        reference.addEventListener('click', (e) => e.preventDefault())
        return `
        <h3 lang="fr">
          <img src="${reference.dataset.favicon}" loading="lazy">
          <a href="${reference.dataset.source}"
            >Article sur ${reference.dataset.domain}</a></h3>
        <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
        <div class="tippy-links" lang="fr">
          <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
        </div>
        `
      },
      allowHTML: true,
      interactive: true,
      delay: [150, 700],
      hideOnClick: false
    })
  </script>
  <script type="module">
    import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'

    const markObserver = new IntersectionObserver((entries, observer) => {
      const computedStyle = getComputedStyle(document.documentElement)
      const markBackground = computedStyle.getPropertyValue('--mark-background')
      for (const entry of entries) {
        if (entry.intersectionRatio === 0) continue
        const markElement = entry.target
        markElement.style.backgroundColor = 'inherit'
        const annotation = annotate(
          markElement, {
            type: 'highlight',
            multiline: true,
            color: markBackground,
            // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
            animate: false
          }
        )
        annotation.show()
        observer.unobserve(markElement)
      }
    }, {threshold: 1.0})

    for (const markElement of document.querySelectorAll('mark')) {
      markObserver.observe(markElement)
    }
  </script>

  </body>
</html>