davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
							<!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>
    Étiquette #enthousiasme
  — 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="Publications relatives au tag #enthousiasme">
  <!-- 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">
    details[open] summary {
      display: none;
    }
  </style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>#enthousiasme</h1>
      <p>Publications relatives à cette étiquette</p>
    </hgroup>
  </header>
  <nav>
    <p>
      <a href="/david/" title="Aller à l’accueil">
        Accueil</a>
      •
      <a rel="tags"
        href="/david/2024/#tags"
        title="Liste de toutes les étiquettes">
        Étiquettes</a>
      •
      <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
      •
      <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/04/08/" title="Lien permanent vers cet article">Éclipse</a> <time datetime="2024-04-08">8 avril 2024</time>
    </h2>
    
<p>Il y a l’éclipse et puis il y a toute l’ambiance autour. Je crois que c’est ce qui m’a le plus marqué, cet émerveillement doublé d’un enthousiasme collectif. Lorsque tout le monde retire les lunettes ou même un peu avant lorsque la lumière change et que l’on voit un coucher (??) de soleil en version accéléré qui s’avance vers nous en pleine&nbsp;après-midi.</p>
<p>L’éclipse totale était censée être de 1&#8239;min 45&#8239;sec à ma position mais alors en ressenti derrière l’objectif c’était du 20&nbsp;secondes&#8239;! À peine le temps de réduire au maximum l’exposition et de déclencher. J’avais fait une mise au point sur un avion au préalable et j’étais passé en manuel mais c’était stupide et ça a rendu floues toutes les photos… jusqu’aux deux dernières. Coup de bol d’avoir pris le temps de tester l’autofocus en sentant venir la&nbsp;fin.</p>
<figure>
    <a href="/static/david/2024/2024-04-08-eclipse-1.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-04-08-eclipse-1.jpg"
            width="2000" height="2000"
            srcset="/static/david/2024/2024-04-08-eclipse-1.jpg 2000w, /static/david/2024/2024-04-08-eclipse-1_660x440.jpg 660w, /static/david/2024/2024-04-08-eclipse-1_990x660.jpg 990w, /static/david/2024/2024-04-08-eclipse-1_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2000 / 2000))"
            loading="lazy"
            decoding="async"
            alt="Le moment de l’éclipse où la lune passe totalement devant le soleil.">
    </a>
    <figcaption>J’étais tellement content de découvrir des éruptions solaires au développement&nbsp;!</figcaption>
</figure>
<p>En étant sur la fin, cela permet d’être vraiment à la limite de la couronne solaire et de photographier un phénomène que je ne pensait pas possible avec mon&nbsp;matériel.</p>
<p>Et puis, il y a ce moment où l’hystérie collective redevient sérieuse car il faut remettre les lunettes et prendre le temps de se demander ce qu’il vient de se&nbsp;passer.</p>
<figure>
    <a href="/static/david/2024/2024-04-08-eclipse-2.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-04-08-eclipse-2.jpg"
            width="3840" height="2560"
            srcset="/static/david/2024/2024-04-08-eclipse-2.jpg 3840w, /static/david/2024/2024-04-08-eclipse-2_660x440.jpg 660w, /static/david/2024/2024-04-08-eclipse-2_990x660.jpg 990w, /static/david/2024/2024-04-08-eclipse-2_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3840 / 2560))"
            loading="lazy"
            decoding="async"
            alt="Le moment de l’éclipse où la lune va découvrir le soleil.">
    </a>
    <figcaption>En mode halo au développement car c’est quand même&nbsp;sympa.</figcaption>
</figure>
<p>Fait étonnant, quelques petites minutes après l’apogée, on voyait un avion et surtout son ombre projetée de manière inhabituelle. J’ai l’intuition qu’il était dans une zone qui n’arrive jamais en temps normal car cet angle lumineux n’est pas possible. J’aurais dû prendre une photo pour pouvoir faire des calculs à ce&nbsp;sujet.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/enthousiasme/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#enthousiasme</a>
          
            <a href="/david/2024/experience/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#expérience</a>
          
            <a href="/david/2024/photographie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#photographie</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/03/19/" title="Lien permanent vers cet article">Excitation</a> <time datetime="2024-03-19">19 mars 2024</time>
    </h2>
    
<p>Il y a cette petite étincelle qui s’allume lorsque j’entrevois la possibilité de démarrer un petit bout de code qui pourrait changer mon/le monde (en toute&nbsp;modestie).</p>
<p>Idée du jour&nbsp;: faire un <em>web component</em> qui s’intitulerait <code>&lt;page-crypt&gt;</code> en s’inspirant grandement de <a data-link-domain="github.com" href="https://github.com/MaxLaumeister/PageCrypt/">PageCrypt</a> (et de sa <a data-link-domain="github.com" href="https://github.com/Greenheart/pagecrypt">version à jour</a>). La génération de la page chiffrée pourrait <a data-link-domain="github.com" href="https://github.com/MaxLaumeister/PageCrypt/blob/master/python/encrypt.py">se faire en Python</a>.</p>
<p>Cela essayerait de résoudre une problématique d’accès à du contenu privé sur des pages pré-générées de manière statique. Il est probable que j’en ai besoin sous peu afin d’afficher une progression personnalisée d’informations sensibles dans un contexte pro, ce qui me motive d’autant&nbsp;plus.</p>
<p>Je découvre au passage qu’il n’est pas trivial de <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem">convertir de l’unicode en base64 via JS</a>.</p>
<p>Note&nbsp;: il existe aussi <a data-link-domain="github.com" href="https://github.com/robinmoisson/staticrypt">StatiCrypt</a>.</p>
<a href="#hr-123" title="Lien vers cette section de la page"><hr id="hr-123" /></a>

<blockquote lang="en">
<p>If majority is always right – let’s eat shit… millions of flies can’t be&nbsp;wrong.</p>
<p><cite><em>Statek</em>, Waldemar Łysiak, 1994</cite></p>
</blockquote>
<p>Cette citation aura fait ma&nbsp;journée.</p>
<a href="#hr-124" title="Lien vers cette section de la page"><hr id="hr-124" /></a>
<p>Je suis frustré par les capacités d’export des données de <a href="/david/2024/03/14/" title="Montre 2">la montre</a>. En inspectant, je pourrais récupérer les JSON qui passent avec Playwright mais c’est un peu la face nord. <em>Ça me fait glousser qu’un tel site utilise&nbsp;Vite.</em></p>
<p>Il faut que je teste <a data-link-domain="github.com" href="https://github.com/xballoy/coros-api">coros-api</a> (TypeScript) et/ou <a data-link-domain="github.com" href="https://github.com/futoshita/Coros-Training-Hub-Exporter">Coros-Training-Hub-Exporter</a> (Java), je ne suis pas le seul à vouloir récupérer ces&nbsp;données.</p>
<p>Aussi, il y a des données qui ne sont pas exposées par le TrainingHub mais auxquelles on semble avoir accès <a data-link-domain="tryterra.co" href="https://tryterra.co/integrations/coros">via une API tierce</a> (et très dispendieuse&#8239;!). Étrange et&nbsp;décevant…</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/apprentissage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#apprentissage</a>
          
            <a href="/david/2024/enthousiasme/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#enthousiasme</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/03/14/" title="Lien permanent vers cet article">Montre 2</a> <time datetime="2024-03-14">14 mars 2024</time>
    </h2>
    
<p>J’ai reçu un <a href="/david/2024/03/02/" title="Montre">nouveau jouet</a> aujourd’hui. Alors je me suis amusé. Il me reste beaucoup de données et fonctionnalités à&nbsp;explorer.</p>
<p>J’ai finalement opté pour la version non-Pro afin de privilégier un format qui me convient mieux (taille / poids), j’ai pu tester en magasin les deux&nbsp;auparavant.</p>
<p>Il faut que j’apprenne à ne pas courir <em>contre</em> mais <em>avec</em> la montre. J’ai trop tendance à pousser alors qu’elle sait bien à mon poignet que mon cœur ne va pas&nbsp;suivre.</p>
<p>Il y a du travail à faire pour transformer un jugement en&nbsp;allié.</p>

<blockquote>
<p>Tu peux parler fort, exhiber ton savoir, assener tes arguments, brandir ta culture…<br />
… mais la conversation est à sens unique et totalement stérile.<br />
Au terme de l’échange tu demeures exactement le même, tu n’as pas évolué d’un&nbsp;pouce.</p>
<p>La rencontre n’a pas eu&nbsp;lieu.</p>
<p>Ou bien, tu peux laisser l’autre s’exprimer, l’écouter. Et alors te hisser sur la marche qu’il érige puis en poser une à ton tour.<br />
Vois ta balle de tennis comme le lien qui te rattache aux autres. Cultive-le tant que tu peux.<br />
Ne cherche plus à lutter contre les autres pour être meilleur, Max, mais deviens meilleur grâce à&nbsp;eux.</p>
<p>Le tennis est un art. L’art de&nbsp;l’échange.</p>
<p><cite><em>Max Winson</em>, Jérémie&nbsp;Moreau</cite></p>
</blockquote>

    
      <nav>
        <p>
          
            <a href="/david/2024/deception/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#déception</a>
          
            <a href="/david/2024/enthousiasme/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#enthousiasme</a>
          
            <a href="/david/2024/sport/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#sport</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</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>
    
  </body>
</html>