davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
							<!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>
    Tag #scopyleft
  — David Larlet</title>
  <meta name="description" content="Publications relatives au tag #scopyleft">
  <!-- 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">
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <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>
  <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>
  <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>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <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>
  
  <style type="text/css">
    details[open] summary {
      display: none;
    }
  </style>

  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
    
  <header>
    <h1>Publications relatives au tag #scopyleft</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">
        <svg class="icon icon-home">
          <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
        </svg>
      Accueil</a>
      • <a rel="tags"
    href="/david/#tags-2023"
    title="Liste de toutes les étiquettes">
      <svg class="icon icon-tags">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
      </svg>
    Étiquettes</a>
  </p>
</nav>
<hr>
<main>
  <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  
    <h2>
      <a href="/david/2023/09/13/" title="Lien permanent vers cet article">Documentation</a> (2023-09-13)
    </h2>
    
      

<blockquote lang="en">
<p>The deeper I dig into my research, the more case studies and examples I find. Institutional memory is frequently overlooked and undervalued - until the moment when someone needs access to memory right now, and of course by then it’s too late. Good remembering means turning tacit knowledge into explicit knowledge; <mark>if all your tacit knowledge has left the building inside the heads of former colleagues, it’s lost to you&nbsp;forever.</mark></p>
<p>So I think there’s a case for allowing and encouraging documentation for teams, just as much as documentation for software. Writing that documentation is a task, It needs to be part of someone’s job. Every organisation needs a little bit of storytelling capability, to help make that job&nbsp;easier.</p>
<p><cite><em><a href="https://gilest.org/htr.html">How teams remember</a></em>&nbsp;(<a href="/david/cache/2023/5a9fa7db62f151b8a863b949ed4e9e5f/">cache</a>)</cite></p>
</blockquote>
<p>J’ai développé un outil pour Scopyleft l’année dernière qui s’intitule «&nbsp;Le Voilier&nbsp;». Il s’agit d’un lieux où l’on consigne nos discussions, propositions et résolutions. C’était important car il y avait pas mal de perte/dilution d’information orale, ce qui est classique en équipes distribuées qui grandissent. Depuis un an et demi, il y a 381&nbsp;sujets qui ont été consignés dans ce <a href="/david/2022/12/19/">journal</a> de bord collectif, c’est un outil vivant. Des fonctionnalités bourgeonnent ou passent au compost au gré des besoins, c’est assez plaisant d’avoir la flexibilité de connaître le générateur du site (350&nbsp;lignes de Python à ce jour) et de pouvoir sortir du cadre sans que ce soit trop&nbsp;douloureux.</p>
<p>Cela a commencé avec un site totalement statique qui était (re)construit par l’intégration continue à chaque ajout de fichier <em>markdown</em> avec les bonnes méta-données dans un dossier dédié. Classique. C’était facile pour les personnes familières de git(lab) mais moins pratique pour celles qui ne le sont pas, notamment lorsqu’il faut prendre des notes en séance. L’expérience utilisateur·ice des forges logicielles n’est pas vraiment adaptée à un tel usage, surtout dans un contexte de charge cognitive&nbsp;élevée.</p>
<p>J’ai donc transformé cela en site <em>semynamique</em> 🌱&nbsp;: on reste sur la même infrastructure mais je rajoute un formulaire (toujours statique) qui va soumettre les données vers une seule fonction Python/wsgi qui consiste à créer le fichier <em>markdown</em> conforme aux attentes de l’outil et à le pousser sur le dépôt. Cela a rendu l’outil plus accessible et avenant. Depuis, j’ai décliné ce principe pour d’autres <em>scenarii</em> avec de bons&nbsp;retours.</p>
<p>Avec l’expérience et un petit script de déploiement, cela me prend moins d’une heure à mettre en place sur AlwaysData avec un strict minimum de maintenance. J’ai une relative tranquillité d’esprit aussi car seule une petite partie du site serait inutilisable si le service tombait et il reste la possibilité d’ajouter des fichiers dans git à la main s’il y avait une&nbsp;urgence.</p>
<p>Je ne sais pas trop quoi faire à partir de là, je me dis que ça pourrait en inspirer d’autres. Entre les sites purement statiques et les usines à gaz en JS, il y a tout un dégradé de couleurs enthousiasmantes, certaines restant à&nbsp;découvrir&#8239;!</p>
<p><em>Peut-être qu’à un moment, on pourrait aussi proposer un catalogue d’outils utiles aux coopératives — à l’instar de <a href="https://paheko.cloud/">Paheko</a> pour les&nbsp;associations…</em></p>
<hr />

<blockquote>
<p>🏡 Une grande partie de mon entourage est déjà propriétaire. Ça en dit long sur la sphère dans laquelle j’évolue. J’ai l’impression que le fait d’acheter une maison fait partie de la liste non-négociable d’une vie réussie dans notre monde capitaliste. Jusqu’à très récemment, je n’avais jamais interrogé ce&nbsp;postulat.</p>
<p><cite><em><a href="https://ynote.hk/mots/argent/propriete.html">Propriété par Fanny Cheung</a></em>&nbsp;(<a href="/david/cache/2023/37b0c9d01d6f788bee398b64377cb6c1/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🔨 Yes, it’s fair to point out that AI in its many different software manifestations can be considered a tool. But that is not the point of the statement. The word to watch out for is “just”. If someone were to say ”it’s a tool”, that makes sense. But the word “just” is there to shed&nbsp;accountability.</p>
<p>Hence my concern is that the statement itself removes accountability and consideration for the bigger picture effects. <mark>Saying something is just a tool creates the faulty mental model</mark> of all tools having interchangeable qualities from an ethical perspective, which simply isn’t&nbsp;true.</p>
<p><cite><em><a href="https://axbom.com/hammer-ai/">If a hammer was like AI…</a></em>&nbsp;(<a href="/david/cache/2023/aac3c4716f9ff73e7409ecbc9550491b/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>💯 When it comes to front-end development, I’m worried that we’ve reached a state where the more complex over-engineered approach is viewed as the&nbsp;default.</p>
<p>I may be committing a fundamental attribution error here, but I think that we’ve reached this point not because of any consideration for users, but rather <mark>because of how it makes us developers feel.</mark> Perhaps building an old-fashioned website that uses HTML for navigations feels too easy, like it’s beneath us. But building an “app” that requires JavaScript just to render text on a screen feels like <em>real</em>&nbsp;programming.</p>
<p><cite><em><a href="https://adactio.com/journal/20442">Multi-page web apps</a></em>&nbsp;(<a href="/david/cache/2023/efc348f6559d55129657c7ba9d740b76/">cache</a>)</cite></p>
</blockquote>

    
  
    <h2>
      <a href="/david/2023/09/06/" title="Lien permanent vers cet article">Retour</a> (2023-09-06)
    </h2>
    
      

<blockquote lang="en">
<p>The app will eventually become obsolete. It’s the plain text files I create that are designed to last. Who knows if anyone will want to read them besides me, but <em>future me</em> is enough of an audience to make it&nbsp;worthwhile.</p>
<p><cite><em><a href="https://stephango.com/file-over-app">File over app - Steph Ango</a></em>&nbsp;(<a href="/david/cache/2023/20d288eb47779c4f1b3f36fb86aa7108/">cache</a>)</cite></p>
</blockquote>
<p>Je vais revenir délicatement publier par ici. Ces derniers mois ont été… mmh, agités… mais je commence à retrouver un certain équilibre. Beaucoup de phases qui ne s’articulaient pas comme je l’espérais, d’attention trop superficielle mal compensée, au milieu d’une grosse <a href="/david/2023/01/23/" title="Déception">déception</a> qui a laissé des traces profondes. J’aurais au moins appris la différence entre l’inspiration et la manipulation. <em>The Hard Way™</em>. Je suis très reconnaissant envers toutes les personnes qui ont fait que je ne me suis pas senti trop isolé ou vulnérable pendant cette&nbsp;période.</p>
<p>Grâce à un départ, <a href="http://scopyleft.fr/">Scopyleft</a> prend une <a href="/david/2021/03/17/">autre dimension</a> et redéfinit ses aspirations collectivement à travers des échanges plus sains et apaisés. Un arbre tombe et de nombreuses autres espèces arrivent enfin à capter la lumière pour proposer un autre paysage, envisager un nouvel écosystème&nbsp;🌻🐝.</p>
<hr />
<p>Et puis, j’ai des dizaines d’onglets à partager à mon <em>futur moi</em>.</p>

<blockquote lang="en">
<p>💭 If you’re more a guess-culture person, asking people for help without knowing their circumstances can feel rude or intrusive. Broadcasting publicly your need for help can feel awkward and&nbsp;vulnerable.</p>
<p>If you’re more of an ask-culture person, the guess-culture example of juggling everyone’s specific scenarios and the historical context of favors <mark>probably seems exhausting.</mark> Dropping hints in the hopes that you won’t even have to make your request can feel extra passive and&nbsp;manipulative.</p>
<p><cite><em><a href="https://jeanhsu.substack.com/p/ask-vs-guess-culture">Ask vs guess culture</a></em>&nbsp;(<a href="/david/cache/2023/ba42826808418339bdc0364586bea5bf/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>😔 But really the baseline of web design is so low because there’s a lack of tenderness, care, and empathy. <mark>It’s because we don’t see the making of a website as a worthy profession.</mark> It’s because we hope to squeeze the last bit of juice from the orange by mulching people in between modals and pop ups and cookie&nbsp;banners.</p>
<p>So how do we do better? How do we take better care of our&nbsp;websites?</p>
<p><cite><em><a href="https://robinrendle.com/notes/why-are-websites-embarrassing/">Why are websites embarrassing?</a></em>&nbsp;(<a href="/david/cache/2023/7458294e070577c610294f8ec927c30d/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🍏 It would also inject the potential for a slippery slope of unintended consequences. Scanning for one type of content, for instance, <mark>opens the door for bulk surveillance</mark> and could create a desire to search other encrypted messaging systems across content types (such as images, videos, text, or audio) and content categories. How can users be assured that a tool for one type of surveillance has not been reconfigured to surveil for other content such as political activity or religious persecution? Tools of mass surveillance have widespread negative implications for freedom of speech and, by extension, democracy as a whole. Also, designing this technology for one government could require applications for other countries across new data&nbsp;types.</p>
<p><cite><a href="/static/david/2023/apple-letter-to-heat-initiative.pdf">Apple letter to Heat initiative</a> (PDF, 121Ko)</cite></p>
</blockquote>

    
  
</main>

    <hr>
    <footer>
      <p>
        <nobr>
          <a href="/david/" title="Aller à l’accueil">
            <svg class="icon icon-home">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
            </svg>
          Accueil</a>
        </nobr>
        •
        <nobr>
          <a href="/david/log/" title="Accès au flux RSS">
            <svg class="icon icon-rss2">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
            </svg>
          Suivre</a>
        </nobr>
        •
        <nobr>
          <a href="http://larlet.com"
             title="Go to my English profile"
             data-instant>
            <svg class="icon icon-user-tie">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
            </svg>
          Pro</a>
        </nobr>
        •
        <nobr>
          <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
            <svg class="icon icon-mail">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
            </svg>
          Email</a>
        </nobr>
        •
        <nobr>
          <abbr class="nowrap"
                title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
            <svg class="icon icon-hammer2">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
            </svg>
          Légal</abbr>
        </nobr>
      </p>
      <template id="theme-selector">
        <form>
          <fieldset>
            <legend>
              <svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
              </svg>
              Thème
            </legend>
            <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>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(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 hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
          let mediaRules = []
          for (const cssRule of styleSheet.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) {
            styleSheet.insertRule(mediaRule.cssText)
            hasDarkRules = true
          }
        }
        if (hasDarkRules) {
          loadThemeForm('#theme-selector')
        }
      })
    </script>
    
  </body>
</html>