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>Tag #frugalité — David Larlet</title>
<meta name="description" content="Publications relatives au tag #frugalité">
<!-- 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)">
<!-- 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 #frugalité</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" 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/2021/11/03/" title="Lien permanent vers cet article">Composants</a> (2021-11-03)</h2>
    
      
<blockquote lang="en">
<p>Web Components had so much potential to empower HTML to do more, and make web development more accessible to non-programmers and easier for programmers. Remember how exciting it was every time we got new shiny HTML elements that actually do stuff? Remember how exciting it was to be able to do sliders, color pickers, dialogs, disclosure widgets straight in the HTML, without having to include any widget libraries?</p>
<p>The promise of Web Components was that we’d get this convenience, but for a much wider range of HTML elements, developed much faster, as nobody needs to wait for the full spec + implementation process. We’d just include a script, and boom, we have more elements at our disposal!</p>
<p><cite><em><a href="https://lea.verou.me/2020/09/the-failed-promise-of-web-components/">The failed promise of Web Components</a></em> (<a href="/david/cache/2021/68cd338e37c60a8ed179222c6b1af01f/">cache</a>)</cite></p>
</blockquote>
<p>Le constat ne souffrait pas d’ambiguïté il y a un an. Qu’en est-il aujourd’hui&#8239;?</p>
<p>Il y a Simon Willison qui commente un <a href="https://til.simonwillison.net/web-components/understanding-single-file-web-component">Web Component tenant dans un seul fichier</a> (<a href="/david/cache/2021/8016f83f512107dd26e5780b08ea7305/">cache</a>). Et Dave Rupert qui <a href="https://daverupert.com/2021/10/html-with-superpowers/">parle de leurs super-pouvoirs</a> (<a href="/david/cache/2021/eb14bb1071cfe2bd952aa9280c6a4860/">cache</a>). Tout le monde espère pouvoir <a href="https://elisehe.in/2021/08/22/using-the-platform">les utiliser nativement</a> (<a href="/david/cache/2021/0f1f65d09181752916216e892bb192d8/">cache</a>).</p>
<p>En attendant, il y a des petits <em>frameworks</em> comme <a href="https://tonicframework.dev/">Tonic</a> ou <a href="https://lego.js.org/">Lego</a>. Des plus conséquents comme <a href="https://lit.dev/">Lit</a>.</p>
<p>Tout espoir n’est pas perdu. Juste <a href="/david/blog/2013/python-javascript/">une décennie</a>.</p>

    
    <h2><a href="/david/2021/06/17/" title="Lien permanent vers cet article">API statique</a> (2021-06-17)</h2>
    
      
<p>Discussion avec les <a href="https://github.com/pyrates/">pyrates</a> au sujet de blogs, d’articles, d’API et de minimalisme. J’imagine qu’un générateur d’API statique est possible, on est plutôt habitué·es à produire du HTML (qui est lui-même un format d’échange possible) mais on pourrait tout aussi bien générer un <a href="https://jsonfeed.org/">flux en JSON</a> ou tout autres petits fichiers statiques pré-générés.</p>
<p>La dernière fois que j’ai essayé c’était pour tenter de créer un flux mastodon de manière statique ici-même mais la barre était trop haute pour ma maigre connaissance de cette combinaison de protocoles. Surtout que je n’avais pas vraiment d’autre intérêt que l’exploit technique en lui-même.</p>
<p>Il faudrait que je maintienne une page de tout ce que je n’ai pas réussi à faire pour compenser des <a href="/david/2021/05/28/" title="Curriculum chain">chaînes</a> plus reluisantes. Pour équilibrer. J’imagine que ça en dirait encore davantage sur mes compétences et ma capacité à me laisser échouer sur une page (web).</p>
<p>Et pendant ce temps là 🤩&nbsp;:</p>

<blockquote lang="en">
<p>They are little challenges I give myself, usually without too many stakes involved, and with small enough a scope so that I can ship it in a day or two, while keeping spare family time.</p>
<p><cite><em><a href="https://francoisbest.com/posts/2021/hashvatars">Representing SHA-256&nbsp;Hashes As Avatars</a></em> (<a href="/david/cache/2021/be7ca5728939adfc50b9eef6818d6f63/">cache</a>)</cite></p>
</blockquote>

    
    <h2><a href="/david/2021/03/13/" title="Lien permanent vers cet article">In·dépendance</a> (2021-03-13)</h2>
    
      
<blockquote lang="en">
<p>I read a lot of other people’s code. I highly recommend it. One of my golden rules is that you shouldn’t blackbox things you don’t need to. I like to <mark>“use dependencies for efficiency, not ignorance.”</mark></p>
<p>When I’m vendoring code - copying it into the project and making it pass my basic eslint &amp; testing standards, I’ll do light rewrites and refactors of new code, allowing me to get a deeper understanding of how they work and where their limits lie.</p>
<p>[…]</p>
<p>And sometimes, sure - I’ll read through a dependency, start refactoring, and realize that it’s going to be simpler to write it myself, or I should find another option. It doesn’t matter if something is a dependency or my code: when you ship a product, it’s all your responsibility.</p>
<p><cite><em><a href="https://macwright.com/2021/03/11/vendor-by-default.html">Vendor by default</a></em> (<a href="/david/cache/2021/4b81d4d9d89fb1d417aa292463529271/">cache</a>)</cite></p>
</blockquote>
<p>C’est l’une des raisons pour lesquelles j’essaye d’aller le plus loin possible avec un produit sans avoir de système de dépendances JS autre que la récupération du <em>build</em> qui est présent sur le dépôt source (s’il n’y en a pas, tant pis…). Le fait de copier manuellement ce fichier sur mon propre dépôt donne du poids à la dépendance, ce n’est pas une simple ligne dans un fichier. Un effet de bord que j’apprécie beaucoup aussi est de pouvoir identifier et corriger les <em>bugs</em> localement plus facilement.</p>
<p>Cela me rappelle les pistes que <a href="/david/blog/2016/simplicite-defaut/">j’explorais déjà il y a 5&nbsp;ans</a>, notamment la partie sur les budgets.</p>

    
    <h2><a href="/david/2021/02/18/" title="Lien permanent vers cet article">Castors</a> (2021-02-18)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote>
<p>Construire soi-même sa maison, quand on n’est pas du métier, cela peut sembler mission impossible. Et pourtant, c’est ce qu’ont fait des milliers de Français dans les années 1950, avec le Mouvement des Castors. Des agriculteurs, des cheminots, des ouvriers… sont devenus des autoconstructeurs.</p>
<p>Ils sont même allés encore plus loin&nbsp;: plutôt que se concentrer sur leur maison individuelle, <mark>ils se sont regroupés pour construire ensemble des quartiers entiers</mark>. «&nbsp;Les gens qui travaillaient sur les maisons ne savaient pas si c’était la leur ou celle du voisin, une fois qu’elles étaient terminées, elles étaient tirées au sort&nbsp;», explique Eric Tortereau, co-président de l’association des autoconstructeurs Castors Rhône-Alpes.</p>
<p><cite><em><a href="https://www.18h39.fr/articles/ils-construisaient-leurs-maisons-tous-ensemble-puis-les-tiraient-au-sort-lhistoire-des-castors.html">Ils construisaient leurs maisons tous ensemble puis les tiraient au sort&nbsp;: l’histoire des Castors</a></em> (<a href="/david/cache/2021/13fac7e78342ffd7e5286a6d5519e19e/">cache</a>)</cite></p>
</blockquote>
<p>Je me surprends parfois à rêver d’un tel avenir post-Covid. J’imagine que ça n’est pas (encore&#8239;?) suffisamment dévastateur pour que l’on en arrive à une telle solidarité. Peut-être à la prochaine marche de notre descente énergétique&#8239;?</p>

      </details>
    

    <h2><a href="/david/2021/02/05/" title="Lien permanent vers cet article">Réparation</a> (2021-02-05)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>A heavier and well-designed object feels different. You don’t have it always with you just in case. You don’t throw it in your bag without thinking about it. It is not there to relieve you from your boredom. Instead, moving the object is a commitment. A conscious act that you need it. You feel it in your hands, you feel the weight. You are telling the object: «&nbsp;I need you. You have a purpose.&nbsp;» When such a commitment is done, the purpose is rarely «&nbsp;scroll an endless stream of cat videos&nbsp;». <mark>Having a purpose makes it harder to throw the object away because a shiny new version has been released.</mark> It also helps draw the line between the times where you are using the object and the times you are not.</p>
<p>Besides sturdiness, one main objective from the ForeverComputer would be to use as little electricity as possible. Batteries should be easily swappable.</p>
<p><cite><em><a href="https://ploum.net/the-computer-built-to-last-50-years/">The computer built to last 50&nbsp;years</a></em> (<a href="/david/cache/2021/c4dd46c6f0fe9310b47dd3abda0b5280/">cache</a>)</cite></p>
</blockquote>
<p>Superbe initiative. Je suis en train de creuser le monde de la vidéo et (bien que chaque fabricant de matériel ait son propre format, batterie, stockage, etc.) je me demandais à quoi pourrait ressembler un ordinateur avec écran indépendant et alimenté par sa propre batterie comme ceux que l’on peut connecter à une caméra depuis son port HDMI. Je vois bien la contrainte mais je vois aussi la modularité et la possibilité de changer des pièces indépendamment les unes des autres.</p>
<p>Un petit bémol sur la partie chiffrement, je ne pense pas que ce soit un pré-requis pertinent pour limiter la consommation énergétique de ce ForeverComputer. À la limite, un hash pour vérifier l’intégrité des fichiers après leur copie et suivre leur évolution mais tout ce qui a trait à la cryptographie évolue trop au cours du temps à mon avis. Sans compter qu’en perdant la clé de déchiffrement, on perd les contenus qui vont avec, ce qui me semble à l’opposé de l’idée de pouvoir les conserver plusieurs décennies.</p>
<p>J’apprécie aussi l’approche qui consiste à commencer par faire un petit pas avec WriteOnly qui permettrait de tester la partie usage avant de passer à la suite.</p>

<blockquote lang="en">
<p>To mend is to comprehend a human scale problem, and without this understanding our creations become strange creatures. We see this in the common examples of our time, from architecture to websites: <mark>Things used daily that, inexplicably, do not seem to be invented for human use.</mark> In the case of housing, bad architecture treats a human-scale environment as if it were a commodity-scale problem. The creators of some places see inhabitants not as humans but parameters. I do not need to spoil your view with visions of this architecture, I only wonder, what have their creators ever repaired?</p>
<p><cite><em><a href="https://simonsarris.substack.com/p/that-which-is-unique-breaks">That which is unique, breaks</a></em> (<a href="/david/cache/2021/6ad5b5985682512c140781b2b3c9ff7c/">cache</a>)</cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/02/02/" title="Lien permanent vers cet article">Complexité</a> (2021-02-02)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>As much as we talk about avoiding complexity <em>in</em> our programs, we seem to love the complexity of the tooling <em>around</em> our programs. As Ousterhout notes, <mark>every time you add a tool or configuration to a project, you’re adding an element that developers must learn</mark>, be aware of, or at minimum be exposed to. So while we think we’re lowering the bar of contributing and collaborating on a project — which may be true for <em>some</em> people — it’s possible we’re actually excluding people from contribution and collaboration because of the overwhelming complexity of our team of robots.</p>
<p><cite><em><a href="https://blog.jim-nielsen.com/2021/codbase-collaboration-between-humans-and-robots/">Codebase Collaboration Between Humans and Robots</a></em> (<a href="/david/cache/2021/321b85630164ca075bd3be265f23aed5/">cache</a>)</cite></p>
</blockquote>
<p><a href="/david/2021/02/01/" title="Software">Suite</a> de mes réflexions sur le sujet (et en fait il s’agit d’un truc autour duquel je tourne depuis <a href="/david/blog/2014/gaspillage-numerique/">pas mal de temps</a>), je doute de plus en plus de la pertinence de ces enchaînements d’étapes à chaque <em>commit/push</em>. Ma difficulté actuelle est de faire la distinction entre les moments où c’est important et ceux où ça peut être facultatif (et potentiellement le rendre désactivable). On peut rapidement être <a href="https://osd.ovh/index.php?article10/nostalgie-de-lancien-web">nostalgique</a> (<a href="/david/cache/2021/59bd3fea3b3b370bd6b116e77effb69e/">cache</a>) d’un temps où l’on n’avait pas tout ça mais je me rappelle aussi du renommage des fichiers en direct sur le serveur et des conflits ou des oublis lorsqu’on travaille à plusieurs dessus, etc. C’était l’enfer et c’est bien pour cela que l’on s’est outillé un minimum depuis.</p>
<p>Il y a probablement un entre-deux plus sain à trouver. Et en fait <em>plusieurs</em> en fonction du contexte. Je regrette parfois d’avoir lâché du lest sur certains aspects, j’en apprécie d’autres au quotidien. Une histoire de compromis.</p>

<blockquote lang="en">
<p>The technology stack was not the limit we faced in this project over the years. It was rather the <mark>abstractions</mark> we created our own that got in our way.</p>
<p><cite><em><a href="https://9elements.com/blog/maintaining-javascript-applications-in-the-long-term/">Maintaining JavaScript applications in the long term</a></em> (<a href="/david/cache/2021/6d16a2f955aeaa4f23c239373824143f/">cache</a>)</cite></p>
</blockquote>

      </details>
    

</main>


<hr>

<footer>
  <p>
    <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 href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <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-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <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-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.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>