Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Smolstack — David Larlet</title>
  13. <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.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  53. <article>
  54. <header>
  55. <h1>Smolstack</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/03/27/" title="Publication précédente : Immersion">← Précédent</a> •
  60. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  61. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  62. </svg> Accueil</a>
  63. • <a rel="next" href="/david/2021/03/29/" title="Publication suivante : Évaluation">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <blockquote lang="en">
  68. <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>
  69. <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>
  70. </blockquote>
  71. <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>
  72. <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>
  73. <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>
  74. <ul>
  75. <li>vérifier la pertinence des fonctionnalités avec des tests utilisateur·ices&#8239;;</li>
  76. <li>réduire les dépendances au maximum et être guidé par le besoin plus que par la tendance actuelle&#8239;;</li>
  77. <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>
  78. <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>
  79. <li>privilégier le statique tant que c’est possible, il n’y a rien qui soit plus performant et polyvalent&#8239;;</li>
  80. <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>
  81. <li>documenter les choix techniques ainsi que les joies/échecs associés (journal d’équipe&#8239;?)&#8239;;</li>
  82. <li>envisager l’essaimage plutôt que le passage à l’échelle.</li>
  83. </ul>
  84. <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>
  85. <p><em>Keep smoling!</em> 😀</p>
  86. <blockquote lang="en">
  87. <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>
  88. <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>
  89. </blockquote>
  90. <nav>
  91. <p>
  92. <a href="/david/2021/technique/"
  93. title="Liste de tous les articles associés à cette étiquette"
  94. >#technique</a>
  95. <a href="/david/2021/web/"
  96. title="Liste de tous les articles associés à cette étiquette"
  97. >#web</a>
  98. <a href="/david/2021/travail/"
  99. title="Liste de tous les articles associés à cette étiquette"
  100. >#travail</a>
  101. <a href="/david/#tags"
  102. title="Liste de toutes les étiquettes existantes"
  103. ><svg class="icon icon-tags">
  104. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-tags"></use>
  105. </svg> tous ?</a>
  106. </p>
  107. </nav>
  108. <nav>
  109. <p class="center">
  110. <a rel="prev" href="/david/2021/03/27/" title="Publication précédente : Immersion">← Précédent</a> •
  111. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  112. • <a rel="next" href="/david/2021/03/29/" title="Publication suivante : Évaluation">Suivant →</a>
  113. </p>
  114. </nav>
  115. </article>
  116. <hr>
  117. <footer>
  118. <p>
  119. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  120. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  121. </svg> Accueil</a> •
  122. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  123. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  124. </svg> Suivre</a> •
  125. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  126. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  127. </svg> Pro</a> •
  128. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  129. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  130. </svg> Email</a> •
  131. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  132. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  133. </svg> Légal</abbr>
  134. </p>
  135. <template id="theme-selector">
  136. <form>
  137. <fieldset>
  138. <legend><svg class="icon icon-brightness-contrast">
  139. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  140. </svg> Thème</legend>
  141. <label>
  142. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  143. </label>
  144. <label>
  145. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  146. </label>
  147. <label>
  148. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  149. </label>
  150. </fieldset>
  151. </form>
  152. </template>
  153. </footer>
  154. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  155. <script>
  156. function loadThemeForm(templateName) {
  157. const themeSelectorTemplate = document.querySelector(templateName)
  158. const form = themeSelectorTemplate.content.firstElementChild
  159. themeSelectorTemplate.replaceWith(form)
  160. form.addEventListener('change', (e) => {
  161. const chosenColorScheme = e.target.value
  162. localStorage.setItem('theme', chosenColorScheme)
  163. toggleTheme(chosenColorScheme)
  164. })
  165. const selectedTheme = localStorage.getItem('theme')
  166. if (selectedTheme && selectedTheme !== 'undefined') {
  167. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  168. }
  169. }
  170. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  171. window.addEventListener('load', () => {
  172. let hasDarkRules = false
  173. for (const styleSheet of Array.from(document.styleSheets)) {
  174. let mediaRules = []
  175. for (const cssRule of styleSheet.cssRules) {
  176. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  177. continue
  178. }
  179. // WARNING: Safari does not have/supports `conditionText`.
  180. if (cssRule.conditionText) {
  181. if (cssRule.conditionText !== prefersColorSchemeDark) {
  182. continue
  183. }
  184. } else {
  185. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  186. continue
  187. }
  188. }
  189. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  190. }
  191. // WARNING: do not try to insert a Rule to a styleSheet you are
  192. // currently iterating on, otherwise the browser will be stuck
  193. // in a infinite loop…
  194. for (const mediaRule of mediaRules) {
  195. styleSheet.insertRule(mediaRule.cssText)
  196. hasDarkRules = true
  197. }
  198. }
  199. if (hasDarkRules) {
  200. loadThemeForm('#theme-selector')
  201. }
  202. })
  203. </script>
  204. </body>
  205. </html>