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>Smolstack — David Larlet</title>
<meta name="description" content="The “smol” net is the “small” net. It’s small because it is build for friends and friends of friends. It doesn’t have to scale to millions of people because those millions should build their own local small nets.">
<!-- 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>

<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>Smolstack</h1>
</header>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2021/03/27/" title="Publication précédente : Immersion">← Précédent</a> •
    <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="next" href="/david/2021/03/29/" title="Publication suivante : Évaluation">Suivant →</a>
  </p>
</nav>
<hr>


<blockquote lang="en">
<p>The “smol” net is the “small” net. It’s small because it is build for friends and friends of friends. It doesn’t have to scale to millions of people because those millions should build their own local small nets.</p>
<p><cite><em><a href="https://communitywiki.org/wiki/SmolNet">CommunityWiki: Smol Net</a></em> (<a href="/david/cache/2021/cd910565715dbc18d4b31ad60546a4a3/">cache</a>)</cite></p>
</blockquote>
<p>On me demandait <a href="/david/2021/03/23/" title="Recrutement">récemment</a> si je me considérais comme étant un développeur <em>fullstack</em>. Avec le recul, cette question m’a permis d’affiner ce que j’entends par ce terme et pourquoi je ne veux pas l’être. Je me suis aussi <a href="/david/blog/2017/web-developer/">replongé</a> dans mes <a href="/david/blog/2016/inclusive-developer/">archives</a> car le sujet n’est pas nouveau mais j’ai besoin de le revisiter régulièrement.</p>
<p>Ce que l’on entend traditionnellement par le terme <em>fullstack</em> me semble aller de l’orchestration de containers (incluant sécurité, disponibilité, redondance, etc.) à l’interface utilisateur·ice et à son expérience que l’on espère la plus pertinente possible (incluant l’accessibilité, les performances, etc.) en passant par le <em>backend</em> et le <em>frontend</em> qui apportent leur lot de connaissances à maîtriser et maintenir à jour. Mais ce n’est pas tant le périmètre en lui-même que l’appétence que l’on peut avoir pour l’ensemble de ce spectre qui est une attente qui <em>m</em>’est irréaliste.</p>
<p>Je vais maintenant essayer de définir ce que j’entends par <em>smolstack</em>, c’est brouillon et je vais probablement avoir besoin de plusieurs itérations&nbsp;:</p>
<ul>
<li>vérifier la pertinence des fonctionnalités avec des tests utilisateur·ices&#8239;;</li>
<li>réduire les dépendances au maximum et être guidé par le besoin plus que par la tendance actuelle&#8239;;</li>
<li>prendre le temps de faire le ménage à tous les niveaux&nbsp;: nouvelles attentes, évolution de dépendance, retrait de fonctionnalités, etc.&#8239;;</li>
<li>faire en sorte que les données soient accessibles au plus grand nombre (je vais avoir besoin de préciser ce point)&#8239;;</li>
<li>privilégier le statique tant que c’est possible, il n’y a rien qui soit plus performant et polyvalent&#8239;;</li>
<li>arbitrer la <a href="/david/blog/2017/bugs-complexite/">complexité</a> vis-à-vis de l’impact que cela va avoir sur les utilisateur·ices mais aussi la maintenance, la fiabilité et la légèreté du produit&#8239;;</li>
<li>documenter les choix techniques ainsi que les joies/échecs associés (journal d’équipe&#8239;?)&#8239;;</li>
<li>envisager l’essaimage plutôt que le passage à l’échelle.</li>
</ul>
<p>Je vais m’arrêter là pour ce soir, je n’ai pas l’ambition d’en faire un manifeste, ni la prétention d’en faire un terme consacré. Je le vois plus comme une ébauche <a href="/david/2021/03/26/" title="Stimulant">inspirante et vivante</a>. C’est incomplet à dessein. Et ce sera obsolète dès demain.</p>
<p><em>Keep smoling!</em> 😀</p>

<blockquote lang="en">
<p>That last bit is a bit of a concern as ageism is already strong enough in web development for 30&nbsp;to be considered old. <mark>The last thing I want is to be labelled a conservative old fogey in an industry dominated by novelty-seeking.</mark> Mostly because it really isn’t accurate. I really <em>do</em> enjoy some of the new developments in the field. So much so that I constantly have to fight the urge to start building projects using the latest bit of shiny.</p>
<p><cite><em><a href="https://www.baldurbjarnason.com/2021/which-kind-of-web-developer-are-you/">Which type of novelty-seeking web developer are you?</a></em> (<a href="/david/cache/2021/809290eb60d9bda55b427919091533f0/">cache</a>)</cite></p>
</blockquote>


  <nav>
    <p>
      
        <a href="/david/2021/technique/"
          title="Liste de tous les articles associés à cette étiquette"
          >#technique</a>
      
        <a href="/david/2021/travail/"
          title="Liste de tous les articles associés à cette étiquette"
          >#travail</a>
      
        <a href="/david/2021/web/"
          title="Liste de tous les articles associés à cette étiquette"
          >#web</a>
      
      <a href="/david/#tags"
        title="Liste de toutes les étiquettes existantes"
        ><svg class="icon icon-tags">
          <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
        </svg> tous ?</a>
    </p>
  </nav>

<nav>
  <p class="center">
    <a rel="prev" href="/david/2021/03/27/" title="Publication précédente : Immersion">← Précédent</a> •
    <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
     • <a rel="next" href="/david/2021/03/29/" title="Publication suivante : Évaluation">Suivant →</a>
  </p>
</nav>
</article>


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