davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
							<!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>
    Kudopamine
  — 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="J’ai (ré)activé un compte Strava créé en 2015. Depuis, j’essaye de comprendre les dynamiques qui régissent ces micro-cultures. Quelques observations après un petit mois de recul :">
  <!-- 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">
  <!-- To get attribution when linking on mastodon. -->
  <meta name="fediverse:creator" content="@david@larlet.fr">
  
<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>Kudopamine</h1>
      <p>Le <time datetime="2024-08-10">10 août 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/06/28/"
           title="Publication précédente : CompAIgnon">← 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/09/30/"
            title="Publication suivante : Vain">Suivant →</a>
      
    </p>
  </nav>
  
<p>J’ai (ré)activé <a data-link-domain="strava.com" href="https://www.strava.com/athletes/davidbgk">un compte Strava créé en 2015</a>. Depuis, j’essaye de comprendre les dynamiques qui régissent ces micro-cultures. Quelques observations après un petit mois de&nbsp;recul&nbsp;:</p>
<ul>
<li>j’ai fait plus d’activités sportives que les semaines précédentes, il y a une progression normale / régulière depuis ma <a href="/david/2024/01/09/" title="Blessure">blessure</a> mais il y a tout de même un effet Strava&nbsp;visible&#8239;;</li>
<li>ce n’est pas évident de démarrer de zéro sans avoir l’impression de suivre toutes les personnes qui courent dans le quartier (<em>creepy.</em>)&#8239;;</li>
<li>j’ai découvert un club de coureur·euses au coin de la rue qui n’est ni dirigé par la performance, ni par la rentabilité, et ça fait du bien de constater que ces initiatives&nbsp;existent&#8239;;</li>
<li>j’ai pu utiliser la <em>heatmap</em> de milliers de personnes en zone urbaine et pour l’instant ça n’est pas super probant, que ce soit en vélo ou en&nbsp;course&#8239;;</li>
<li>en revanche, réutiliser les parcours d’autres personnes d’un groupe c’est davantage pertinent pour explorer de nouveaux&nbsp;parcours&#8239;;</li>
<li>je n’ai toujours pas compris ces histoires de&nbsp;(micro-?)segments&#8239;;</li>
<li>peu de personnes décrivent leurs sensations pendant une&nbsp;sortie&#8239;;</li>
<li>c’est un réseau social très particulier dans le sens où il est ancré dans l’hyper local… et qu’il n’y a pas de publications non reliées à des activités, ni de messagerie&nbsp;privée&#8239;;</li>
<li>c’est flippant à quel point je peux localiser des personnes en croisant leurs activités, même en masquant les départs/arrivées la triangularisation est vite faite (et les sportif·ves sont très routinièr·es donc ça devient très facile de&nbsp;vérifier)&#8239;;</li>
<li>une bonne partie de la gamification de la plateforme est faite autour de la performance, avec des podiums, <abbr title="King of the Mountain">KOM</abbr>/<abbr title="Queen of the Mountain">QOM</abbr>, etc&#8239;;</li>
<li>c’est marrant de voir poper dans sa <em>timeline</em> que Kilian vient de remporter Sierre-Zinal entouré de publications à des allures beaucoup plus&nbsp;humaines&#8239;;</li>
<li>en parlant d’allures, il y a le double effet de motivation / démotivation lorsqu’on en arrive inévitablement à se comparer (Strava affiche la comparaison par activité de manière très&nbsp;visible)&#8239;;</li>
<li>je suis conscient d’envoyer des données biologiques et personnelles à une autre entreprise, j’avais déjà fait pas mal de compromis avec <a href="/david/2024/03/14/" title="Montre 2">la montre</a>, comme un besoin plus grand de laisser des traces localement pour avoir le sentiment de&nbsp;m’intégrer&nbsp;🤔&#8239;;</li>
<li>à ce sujet, je ne pense pas que j’aurais eu envie de faire cette expérience sans être au Canada, dans un climat de&nbsp;confiance&#8239;;</li>
<li>j’ai découvert qu’il pouvait y avoir des petits challenges locaux inspirants et sans ambition lucrative (je voulais faire un 5km populaire avec l’enfant mais c’était tout de suite hors de&nbsp;prix&#8239;!)&#8239;;</li>
<li>une bonne proportion de sportif·ves sont prêt·es à débourser&nbsp;100$/an.</li>
</ul>
<p><em>Note&nbsp;: mon compte peut s’auto-détruire à tout&nbsp;moment.</em></p>
<a href="#hr-196" title="Lien vers cette section de la page"><hr id="hr-196" /></a>

<blockquote lang="en">
<p>We define a vision by the choices we make, and we clarify that vision by <mark>the choices we reject</mark>.</p>
<p><cite><em><a data-link-domain="miriamsuzanne.com" href="https://www.miriamsuzanne.com/2024/08/08/vision/" hreflang="en"
            title="Consultation de l’article (anglais)">We don’t need a boss, we need a process</a>
            <a href="/david/cache/2024/e89c9b835d4d17acf35f6152c4ee68d3/" hreflang="en"
                data-tippy data-description="(and our team will probably need some training)"
                data-source="https://www.miriamsuzanne.com/2024/08/08/vision/"
                data-date="2024-08-10"
                data-favicon="https://www.miriamsuzanne.com/favicon.svg"
                data-domain="miriamsuzanne.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-197" title="Lien vers cette section de la page"><hr id="hr-197" /></a>

<blockquote lang="en">
<p>In other words, if networking feels bad, that’s because <mark>networking feels bad</mark>, not because you are wrong about&nbsp;networking.</p>
<p>And yet: we do need to build relationships in our work and we need to be able to depend on them. We need to acknowledge our interdependence with respect to how we work and live among each other. We need this especially now, in an era of no longer creeping but leaping fascism and an escalating climate crisis. As always, we can only ever depend on each other. But we—you and me, every living, breathing human being who is reading these words right now—need not engage in a cynical and dehumanizing act in order to do&nbsp;that.</p>
<p>So stop networking. <em>Kinwork</em>, instead.</p>
<p><cite><em><a data-link-domain="everythingchanges.us" href="https://everythingchanges.us/blog/make-kin-not-nets/" hreflang="en"
            title="Consultation de l’article (anglais)">Make kin not nets</a>
            <a href="/david/cache/2024/c05e9b12fb3f7f4dd3ab59130fba726e/" hreflang="en"
                data-tippy data-description="Caretaking beats value capture every time."
                data-source="https://everythingchanges.us/blog/make-kin-not-nets/"
                data-date="2024-08-10"
                data-favicon="https://everythingchanges.us/favicon.ico"
                data-domain="everythingchanges.us"
                ><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-198" title="Lien vers cette section de la page"><hr id="hr-198" /></a>
<p>BD du jour&nbsp;: <a data-link-domain="chomeusegoon.org" href="https://chomeusegoon.org/wp-content/uploads/2024/01/colibris-pyromanes-web.pdf">Les colibris pyromanes</a> (PDF, 37Mo).</p>
<a href="#hr-199" title="Lien vers cette section de la page"><hr id="hr-199" /></a>
<p>Mot du jour&nbsp;: <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Contingence">Contingence</a>.</p>
<p>Aussi, différence entre <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Animal_liminaire">animal liminaire</a>, <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Commensalisme">commensalisme</a> et <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Anthropophilie">anthropophilie</a>.</p>
<a href="#hr-200" title="Lien vers cette section de la page"><hr id="hr-200" /></a>
<p>Site du jour&nbsp;: <a data-link-domain="fitzlab.shinyapps.io" href="https://fitzlab.shinyapps.io/cityapp/">What will climate feel like in&nbsp;60&nbsp;years?</a></p>
<a href="#hr-201" title="Lien vers cette section de la page"><hr id="hr-201" /></a>
<p>Vidéo du jour&nbsp;: <a data-link-domain="youtube-nocookie.com" href="https://www.youtube-nocookie.com/embed/ZH2Ap-iTYUA">Performance, turbulences et&nbsp;robustesse</a></p>

  
    <nav>
      <p>
        
          <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/psychologie/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#psychologie</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>
  
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/06/28/"
           title="Publication précédente : CompAIgnon">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/09/30/"
            title="Publication suivante : Vain">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>