davidbgk
/
larlet-fr-david

<!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>
    Éco-conception
  — David Larlet</title>
  <meta name="description" content="De mon temps on disait pas « écoconception » on disait juste « appliquer les prérequis basiques du métier de dev » et on n’était pas plus malheureux.">
  <!-- 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>
  
  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
    
  <article>
    <header>
      <h1>Éco-conception</h1>
    </header>
    <nav>
      <p class="center">
        
          <a rel="prev"
             href="/david/2023/09/13/"
             title="Publication précédente : Documentation">← Précédent</a> •
        
        <nobr>
          <a href="/david/" title="Aller à l’accueil" rel="up">
            <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/recherche/"
             title="Aller à la page de recherche"
             rel="search">
            <svg class="icon icon-search">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"></use>
            </svg>
          Recherche</a>
        </nobr>
        
          • <a rel="next"
    href="/david/2023/09/27/"
    title="Publication suivante : Perspective">Suivant →</a>
        
      </p>
    </nav>
    <hr>
    

<blockquote>
<p>De mon temps on disait pas «&nbsp;écoconception&nbsp;» on disait juste «&nbsp;appliquer les prérequis basiques du métier de dev&nbsp;» et on n’était pas plus&nbsp;malheureux.</p>
<p>S’il vous faut une formation pour vous empêcher d’afficher 10&#8239;Mo d’images sur votre homepage et d’empiler 50&nbsp;frameworks JS pour faire un formulaire, <mark>c’est peut-être que votre titre initial de «&nbsp;dev full stack senior&nbsp;» était légèrement usurpé.</mark> Et si l’interopérabilité, la rétrocompatibilité, l’amélioration progressive, l’accessibilité et les perfs sont pour vous de nouvelles compétences tendance à faire valoir sur un CV, je suis navré de vous annoncer que vous étiez jusque ici un&nbsp;escroc.</p>
<p><cite><a href="https://mastodon.social/@STPo/111101966708210843">STPo sur&nbsp;mastodon</a></cite></p>
</blockquote>
<p>Ce n’est pas vraiment un secret que je fasse partie de la team vieux-rageux-qui-lève-ses-poings-vers-le-ciel (et surtout les yeux&nbsp;🙄) lorsqu’on parle de technique et de web. Le pire étant que plus le temps passe et plus j’ai le sentiment que cette profession se crée sa propre utilité. Il faudrait que je lise <em>Bullshit Jobs</em> pour être certain de ne pas dire n’importe quoi mais je crois bien que ça s’en rapproche de plus en plus. Ou alors j’en prends davantage&nbsp;conscience.</p>
<p>Et ça m’embête autant que de jardiner dans mon petit potager bio tout en vivant au milieu d’une zone commerciale géante bariolée de publicités et traversée par des <abbr title="sport utility vehicle">SUV</abbr> et autres <em>pickups</em>. Toute ressemblance avec ma dissonance cognitive actuelle serait bien évidemment&nbsp;fortuite.</p>
<p>En ce moment, à 15h50, j’écoute les enfants à la fenêtre préparer la chanson de l’année où <a href="https://www.lafabriqueculturelle.tv/capsules/14586/le-grand-rendez-vous-de-fanny-bloom-et-l-osm-une-chanson-a-l-ecole-les-journees-de-la-culture">Fanny Bloom leur demande de planter des arbres</a> alors qu’il y a une file de voitures de plus de 2&nbsp;tonnes qui attendent la sortie de leurs chers bambins. Tout ça pour s’éviter de faire quelques centaines de mètres à&nbsp;pied.</p>
<p>Je crois que c’est ça l’éco-conception sur le web&nbsp;: réduire la taille d’une image afin de réduire son empreinte carbone tout en ayant demandé à un <abbr title="Large Language Model">LLM</abbr> de l’avoir&nbsp;générée.</p>
<hr />

<blockquote lang="en">
<p>🎯 However, despite recognizing the danger of an increasingly closed internet, many web developers don’t consider their own technical decisions and how those decisions can also contribute to the disappearance of web’s <em>culture</em> of&nbsp;openness.</p>
<p>Inadvertently (for the most part) technical trends and decisions in web development in <mark>the last two decades have lead to what we term a “Technical Enclosure” of the web,</mark> a processes whereby technical decisions chip away at the #ViewSource affordance that Cory Doctorow discusses in the opening quote of this article, an affordance that existed as a commons for early web&nbsp;developers.</p>
<p><cite><em><a href="https://htmx.org/essays/right-click-view-source/">The #ViewSource Affordance</a></em>&nbsp;(<a href="/david/cache/2023/2782723c95c98a22087e9954b07a8fba/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🤗 I hate what data is doing to the web. I hate that some people get obsessed with data. I hate that the entire advertising and marketing world has evolved to only care about data. But I realize that this will not change. Still, <mark>I like to do my part</mark> which is why I try hard to not collect and keep any data about&nbsp;you.</p>
<p><cite><em><a href="https://manuelmoreale.com/i-don-t-want-your-data">I don’t want your data</a></em>&nbsp;(<a href="/david/cache/2023/73f0ab0b4336be702e863205bd1bbace/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🧑‍⚕️ We in software, sadly, tend to be in the treatments business, not in the patients business. <mark>We’re Big Pharma.</mark> And in the same way that Big Pharma invests massively in persuading us that we have the illness their potion cures, we have a tendency to try to get the customer’s problem to fit our solution. And so it is that “productivity” tends to be about the potion, and not the&nbsp;patient.</p>
<p><cite><em><a href="https://codemanship.wordpress.com/2023/09/25/the-illusion-of-developer-productivity-opens-the-door-to-snake-oil/">The Illusion Of Developer “Productivity” Opens The Door To Snake Oil</a></em>&nbsp;(<a href="/david/cache/2023/d048e59b323783f6de3b03bda43a02cc/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>💜 Quand il laisse couler l’eau dans la casserole pour préparer un café, il pense aux instants qui continuent de glisser entre ses doigts et dont il a peur que l’oubli n’efface les derniers sourires jusqu’à ne plus reconnaître la personne sur la photo. Où bien est-ce la photo d’un ancêtre dont les cendres sont peut-être encore sur le coin d’une étagère dans la maison et dont on se dit que les minutes longues en nettoyant la vaisselle permettent la sérénité possible à l’évasion d’une enfance&nbsp;heureuse&#8239;?</p>
<p><cite><em><a href="https://www.la-grange.net/2023/03/15/envers">endroit de l’envers</a></em>&nbsp;(<a href="/david/cache/2023/19a9d6fbfc9b17021f013e71ffb45593/">cache</a>)</cite></p>
</blockquote>

    
      <nav>
        <p>
          
            <a href="/david/2023/nostalgie/"
               title="Liste de tous les articles 2023 associés à cette étiquette"
               rel="tag">#nostalgie</a>
          
            <a href="/david/2023/qualite/"
               title="Liste de tous les articles 2023 associés à cette étiquette"
               rel="tag">#qualité</a>
          
            <a href="/david/2023/web/"
               title="Liste de tous les articles 2023 associés à cette étiquette"
               rel="tag">#web</a>
          
          <a href="/david/#tags-2023" title="Liste de toutes les étiquettes 2023">
            <svg class="icon icon-tags">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
            </svg>
          tous ?</a>
        </p>
      </nav>
    
    <nav>
      <p class="center">
        
          <a rel="prev"
             href="/david/2023/09/13/"
             title="Publication précédente : Documentation">← Précédent</a> •
        
        <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
        
          • <a rel="next"
    href="/david/2023/09/27/"
    title="Publication suivante : Perspective">Suivant →</a>
        
      </p>
    </nav>
  </article>

    <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>