davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894
							<!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>
  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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Simplicité par défaut — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://larlet.fr/david/blog/2016/simplicite-defaut/">
  <!-- SEO/Semantic metadata -->
  <meta name="description" content="Une forme de décroissance technique pour revenir aux fondamentaux." />
  <meta name="twitter:description" property="og:description" itemprop="description" content="Une forme de décroissance technique pour revenir aux fondamentaux." />
  <meta name="twitter:title" property="og:title" itemprop="name" content="Simplicité par défaut" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:creator" content="@davidbgk" />
  <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2016/simplicite-defaut/" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="David Larlet (@davidbgk)" />
  
  <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2016/simplicite-defaut.jpg" />
  

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1 class="single">
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Simplicité par défaut
  <time>Publié le 22 avril 2016</time>
</h1>
<article class="single">
  <p><em>Ce billet est un accompagnement à l’intervention donnée lors de <a href="http://www.mix-it.fr/">Mix-IT</a>. Je n’appelle plus cela des résumés car ce n’est pas forcément ce qui est exprimé le jour J, il s’agit davantage d’un complément.</em></p>
<p>Il s’agit de la suite de mes recherches relatives <a href="/david/blog/2016/minimalisme-esthetique/">au minimalisme et à l’esthétique</a>. J’ai choisi de faire une suite pour des raisons assez personnelles, une sorte d’introspection thérapeutique. La préparation de la précédente intervention m’avait mis dans un état assez douloureux d’incohérence entre mon quotidien et ce que je prônais. J’avais besoin d’aller plus loin pour identifier les raisons profondes qui me poussaient à la recherche de cette simplicité.</p>
<h2>Paternité</h2>
<ol>
<li>Ajouter des couches</li>
<li>Changer des couches</li>
<li>Enlever des couches</li>
<li>Changer des couches</li>
<li>Mettre des couches</li>
</ol>
<p>J’en suis à l’étape 3 dans ma maturité en tant que développeur. La paternité change les priorités et je pense qu’elle a un grand rôle dans le fait de vouloir remettre le focus sur la valeur apportée plus que sur la technique. Me battre pour une meilleure expérience utilisateur plutôt que contre un <em>framework</em>, chercher à se faire plaisir davantage via ce qui est produit que par un contentement technique.</p>
<blockquote>
<p>Je suis un expérimentateur en ce sens que j’écris pour me changer moi-même et ne plus penser la même chose qu’auparavant.</p>
<p><cite>Michel Foucault</cite></p>
</blockquote>
<p>Lorsque j’expérimente aujourd’hui, ce n’est plus pour découvrir une nouvelle bibliothèque mais pour trouver de nouveaux moyens de simplifier un problème. Dans ce contexte, il est intéressant de <a href="http://www.internetactu.net/2016/02/18/lexperience-est-elle-ce-qui-est-a-la-croisee-du-business-et-du-design/">re-questionner la page blanche</a> (<a href="/david/cache/eb012ce4808fe5872aaa24a51e151ab7/">cache</a>), de re-challenger certaines <a href="https://austinknight.com/writing/the-road-to-mediocrity-is-paved-with-best-practices/">bonnes pratiques communément admises</a> (<a href="/david/cache/3ecaa08e8a128885840fe94ed86cea72/">cache</a>).</p>
<h2>Enseignement</h2>
<p>Le fait de <a href="/david/pro/enseignement/">donner des cours</a> m’a permis de réaliser à quel point nos outils sont complexes et élitistes. L’expression japonaise 「灯台下暗し」 (tōdai moto kurashi) prendre du recul pour avoir de la lumière (littéralement : il fait sombre sous la lanterne) me semble appropriée, ce sont les étudiants qui sont arrivés avec leurs lanternes et ont commencé à me faire sérieusement douter. Je leurs suis extrêmement reconnaissant de m’avoir ouvert les yeux et d’avoir pu creuser ensemble quelques approches possibles pour simplifier l’apprentissage des briques du Web.</p>
<blockquote>
<p>The only reliable, widely used way to ensure impeccable software quality is to write less software that does less stuff, and then spend eons honing that tiny lot. Such an approach, however, is very rarely compatible with commercial success or even programmer motivations (despite what many may claim).</p>
<p><cite><em><a href="https://m.signalvnoise.com/software-has-bugs-this-is-normal-f64761a262ca">Software has bugs. This is normal.</a></em> (<a href="/david/cache/81f2337ef46ed130b13bc0ba50f809d5/">cache</a>)</cite></p>
</blockquote>
<p>La route a été longue et difficile car les étudiants ont <a href="http://www.awwwards.com/">des exemples</a> complètement inaccessibles, energivores et à l’expérience utilisateur désastreuse. Nous avons une certaine responsabilité à encenser ce genre de sites, les dégâts chez de nouveaux apprenants sont flagrants et toute la profession en pâtit.</p>
<h2>Leftpad</h2>
<blockquote>
<p>Every package that you use adds yet another <strong>dependency</strong> to your project. Dependencies, by their very name, are things you <strong>need</strong> in order for your code to function. The more dependencies you take on, the more points of failure you have. Not to mention the more chance for error: have you vetted any of the programmers who have written these functions that you depend on daily?</p>
<p><cite><em><a href="http://www.haneycodes.net/npm-left-pad-have-we-forgotten-how-to-program/">NPM &amp; left-pad: Have We Forgotten How To Program?</a></em> (<a href="/david/cache/68b4ccd13ef04eb9a617d50741c15945/">cache</a>)</cite></p>
</blockquote>
<p>J’étais en train de préparer cette intervention lorsque le <em>fiasco</em> leftpad est arrivé dans l’écosystème NPM. Du coup, j’ai eu immédiatement plein d’articles faisant une ode à la simplicité, à la réduction de dépendances et mettant en garde contre les couches d’abstraction. <a href="https://github.com/stevemao/left-pad/issues/4#issuecomment-200082643">Merci</a> Azer Koçulu, je pouvais difficilement rêver mieux :-). Je ne vais pas tirer sur l’ambulance mais ça illustre presque trop bien mon propos.</p>
<blockquote>
<p>as your project progresses, your team’s productivity will drop because of all the complexity and dependencies. You’ll need more people to maintain it, and more people with specific knowledge to maintain it. If your lead developers leave, you’re dead. You should be fighting complexity and not embracing it. Every added framework, and even library, makes your project more difficult to maintain. Avoid unnecessary frameworks and libraries from day one.</p>
<p><cite><em><a href="http://www.catonmat.net/blog/frameworks-dont-make-sense/">Frameworks don’t make much sense</a></em> (<a href="/david/cache/9dd2379d19fd9f879b44ee9921f1a7e8/">cache</a>)</cite></p>
</blockquote>
<p>Jusqu’où aller dans cette démarche ? Par où commencer ?</p>
<h2>Burnout technique</h2>
<blockquote>
<p>Maybe it’s not too late for <em>you</em>, though. Perhaps, like me, you aren’t feeling particularly overworked. But are you feeling irritable, tired, and apathetic about the work you need to do? Are you struggling to concentrate on simple tasks?</p>
<p>Then maybe what you’re feeling is burnout, too.</p>
<p><cite><em><a href="https://m.signalvnoise.com/avoiding-the-trap-8df59e718f3e">Avoiding the Trap</a></em> (<a href="/david/cache/5e9c5a89355b2eb336f154fd4845634d/">cache</a>)</cite></p>
</blockquote>
<p>J’ai travaillé pendant un an et demi avec Mozilla sur la partie paiement du <a href="https://marketplace.firefox.com/">Marketplace</a> puis sur le site des <a href="https://addons.mozilla.org/fr/firefox/">extensions de Firefox</a>. Et depuis un an avec <a href="http://www.etalab.gouv.fr/">Etalab</a> sur la plateforme <a href="https://www.data.gouv.fr/fr/">datagouv</a>. Dans les deux situations, j’ai passé davantage de temps à lutter contre les outils plutôt qu’à les apprécier pour le travail rendu. C’est terrible car ceux-ci sont censés théoriquement faire gagner du temps mais sur le long terme cela se révèle être faux dans mon cas.</p>
<p><strong>Je me demande si je ne suis pas en train de faire un burnout technique, non pas par trop de travail mais par manque de contrôle dans mes outils.</strong></p>
<p><em>Je ferais probablement un article complet sur le sujet car c’est un gros morceaux et je manque encore de recul.</em></p>
<h2>The aesthetic microlith</h2>
<blockquote>
<p>Growth for the sake of growth is the ideology of the cancer cell.</p>
<p><cite>Edward Abbey</cite></p>
</blockquote>
<p>Toutes ces raisons m’ont amené à étudier une nouvelle piste. Cette appellation est une combinaison du <a href="https://m.signalvnoise.com/the-majestic-monolith-29166d022228">Majestic Monolith</a> (<a href="/david/cache/20dbf01ea2951cc6d136d5d2185db73b/">cache</a>) et des <em>microservices</em>. Je me persuade qu’il y a une voie différente entre ces deux extrêmes. Une voie qui limite les <a href="http://blog.robertelder.org/interfaces-most-important-software-engineering-concept/">fuites d’abstraction</a> (<a href="/david/cache/0f39895846c57b132dc47e2ab3a34207/">cache</a>) afin de réduire la dette technique et de favoriser l’inclusion de nouveaux membres dans une équipe. Une voie qui ne demande pas de réécrire la moitié de l’application tous les six mois car une nouvelle montée en version majeure n’est pas rétro-compatible. Une voie où l’on ne raisonne plus en termes de <em>features</em> et de <em>bugs</em> mais d’expérience utilisateur et de satisfaction pour l’ensemble des parties prenantes. Un environnement qui permet de faire une pause dans les développements afin de prendre le temps de davantage considérer les besoins des personnes qui utilisent le produit.</p>
<blockquote>
<p>We all want things to be simpler. But we may not know what to sacrifice in order to achieve that goal.</p>
<p><cite><em><a href="https://medium.com/@mbostock/what-makes-software-good-943557f8a488">What Makes Software Good?</a></em> (<a href="/david/cache/b0e68315fb4945d6997b2afd4adcdf1e/">cache</a>)</cite></p>
</blockquote>
<p>Dans cette recherche de simplicité, j’ai essayé de remettre en question chaque concept de programmation, chaque bonne pratique, chaque bibliothèque, chaque ligne de code. J’ai essayé de produire un prototype qui soit un peu plus conséquent que <a href="https://github.com/davidbgk/confoo">celui proposé à Confoo</a> pour voir jusqu’où cela pouvait aller. Ce qu’il me manque c’est non pas du temps de développement mais du temps de vie du projet pour analyser les effets produits sur le moyen terme. <em>Je devrais avoir l’occasion d’expérimenter cela avec <a href="http://scopyleft.fr/">scopyleft</a> prochainement, ça sent la trilogie.</em></p>
<p>À court terme en tout cas, c’est extrêmement plus fun à coder et l’on arrive au résultat finalement aussi rapidement. Cela devient une matière beaucoup plus malléable, dont on connait les forces et les faiblesses car le périmètre est réduit. En contrepartie, certains cas aux limites vont être écartés et l’expérience de certains utilisateurs se dégrade plus rapidement. Ce n’est pas que le coût de prise en compte soit énorme, il s’agit davantage de le prendre en considération lorsque le besoin est réel.</p>
<h2>Budgets</h2>
<p>L’utilisation de budgets m’a été rendue familière dans le domaine de la performance avec une <a href="http://codepen.io/bradfrost/pen/EPQVBp/">répartition de différentes dépendances</a> pour ne pas dépasser un certain seuil. J’essaye d’étendre le concept dans mes prototypes :</p>
<ul>
<li><strong>Budget d’abstraction</strong> : ne pas dépasser 10 Mo pour son environnement Python ou Node par exemple. Ai-je bien compris les concepts sous-jacents de ces dépendances ? Comment un nouveau collaborateur va-t-il les comprendre ?</li>
<li><strong>Budget d’embarquement</strong> : pouvoir installer en trois commandes, lancer en une seule et lire la documentation sur une page unique. Est-ce que le fait de devoir découper la documentation n’est pas emblématique d’un trop grand nombre de fonctionnalités ?</li>
<li><strong>Budget de temps</strong> : une soirée de temps en temps, des interviews courtes (10 minutes), « une semaine de dev max ». Pourriez-vous recoder le cœur de votre produit en moins d’une semaine ?</li>
<li><strong>Budget de test</strong> : la documentation est test, l’interface est test, la possibilité de tout tester manuellement rapidement. Quelle est la latence de vos boucles de <em>feedback</em> ?</li>
<li><strong>Budget de LOC</strong> : au-delà de 5000 lignes de codes (incluant les dépendances !), le nombre de <a href="http://www.themacro.com/articles/2016/03/agility-requires-safety/">bugs potentiels</a> (<a href="/david/cache/21c99b54692888fd9f0612c609cd0cf5/">cache</a>) devient <a href="http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/">ingérable</a> (<a href="/david/cache/7044815984f8d2d65c2dd0b506a799ea/">cache</a>), analysez sur votre projet actuel à quel point il est difficile de s’y tenir !</li>
</ul>
<p><strong>Le point important de ces budgets ne réside pas tant dans la valeur choisie que dans la prise de recul que cela demande lorsqu’on atteint les limites.</strong> Est-ce que cette dépendance est vraiment nécessaire, est-ce que je suis prêt à retirer cette autre dépendance pour lui laisser la place, etc. Bien entendu, cette approche est critiquable et c’est ce qui fait tout l’intérêt de son expression et de vos réactions.</p>
<h2>Élitisme</h2>
<blockquote>
<p>I call this kind of attitude the “Tea Party” of JavaScript development. The reason why we currently have JavaScript tooling fatigue is exactly because Tea Party developers insist on writing everything themselves instead of trying to build a better abstraction. The lesson here isn’t not fewer dependencies: it’s managing dependencies.</p>
<p><cite><em><a href="http://www.haneycodes.net/npm-left-pad-have-we-forgotten-how-to-program/#comment-127232">NPM &amp; left-pad: Have We Forgotten How To Program?</a></em> (<a href="/david/cache/68b4ccd13ef04eb9a617d50741c15945/">cache</a>)</cite></p>
</blockquote>
<p>Il est certain que faire la cuisine demande un peu plus de savoir-faire que de faire réchauffer un plat cuisiné. On en revient ici à la problématique de l’enseignement mais aussi de la perte des développeurs ayant de l’expérience pour des tâches issues du <em>management</em>. La combinaison des deux donne une profession qui ne sait se servir que du micro-ondes car elle n’a même pas conscience de saveurs qu’elle n’a jamais expérimentée. Cette situation conduit à la prolétarisation du développeur et à la perte de ses savoirs.</p>
<p>En contrepartie, repartir de la base demande moins d’expérience en terme d’outillage. Pour continuer l’analogie, il n’est plus nécessaire de connaître une dizaine de marques de micro-ondes pour être capable de faire réchauffer un plat sans relire la notice : la source de chaleur est là, ça chauffe lorsqu’on approche un aliment.</p>
<h2>Réinventer la roue</h2>
<blockquote>
<p>There’s nothing wrong with aesthetic enjoyment, and the joys of free software are many and varied. […] But these pleasures do not translate into political outcomes unless they are wedded to explicitly political activities.</p>
<p><cite><em><a href="https://www.jacobinmag.com/2016/02/free-software-movement-richard-stallman-linux-open-source-enclosure/">Reclaiming the Computing Commons</a></em> (<a href="/david/cache/e6f57bb2a95da1508f0bb905bc08471c/">cache</a>)</cite></p>
</blockquote>
<p>Peut-être y a-t-il un acte politique dans la simplification de certaines briques. Celui de comprendre et d’être <a href="/david/blog/2016/javascript-reduit/">en capacité de transmettre</a>. Celui de proposer des alternatives un peu moins <em>mainstream</em> mais finalement enrichissantes aussi, souvent dans d’autres domaines.</p>
<p>Réinventer la roue permet de comprendre pourquoi est-ce qu’il y a rotation et quelles sont les parties importantes. Il ne s’agit pas ici de savoir fondre une jante et de calculer le coefficient de friction de la gomme d’un pneu. Il ne s’agit pas tant de ré-interroger le <em>« comment »</em> que de creuser le <em>« pourquoi »</em>.</p>
<h2>Passer à l’échelle</h2>
<blockquote>
<p>The cleaner and nicer the program, the faster it’s going to run. And if it doesn’t, it’ll be easy to make it fast.</p>
<p><cite>Joshua Bloch</cite></p>
</blockquote>
<p>Les retours que j’ai eu lors de la <a href="/david/blog/2016/minimalisme-esthetique/">précédente intervention</a> portaient essentiellement là-dessus. Il se trouve qu’en choisissant des solutions minimalistes, elles sont bien souvent plus rapides et davantage interchangeables. Ce n’est pas toujours le cas car elles peuvent se révéler être plus spécifiques également.</p>
<p>Tout le monde semble obnubilé par un passage à l’échelle avant même d’avoir un premier utilisateur. Considérant que la plupart des projets échouent pour bien d’autres raisons, il serait peut-être temps de réévaluer l’intérêt de dimensionner immédiatement les nouveaux services pour encaisser une charge qui n’arrivera probablement jamais…</p>
<p>Les problèmes de performances sont vraiment des considérations de riches et doivent être traitées en fonction du besoin. Elles peuvent être anticipées dans le cas d’événements majeurs mais sinon un simple serveur suffit amplement sans avoir à imager, dockeriser, virtualiser, etc.</p>
<h2>Stabilité</h2>
<blockquote>
<p>“Whatever new we do must make it possible for people to make a transition from old tools and ideas to new.” In this sense, software is less like a poem and more like a contract, a constitution, or a covenant. Software is history, organization, and social relationships made tangible.</p>
<p><cite><em><a href="http://themaintainers.org/s/ensmenger-maintainers-v2.pdf">When Good Software Goes Bad</a></em> (<a href="/static/david/blog/ensmenger-maintainers-v2.pdf">cache</a>)</cite></p>
</blockquote>
<p>Le problème actuel d’utiliser des outils minimalistes c’est qu’ils sont peu employés ce qui demande souvent un plus grand investissement dans les communautés concernées. C’est aussi le sentiment d’appartenir à un petit groupe dont tous les membres travaillent sur un <em>bien commun</em> et le modèlent à l’image de leurs besoins et de leurs aspirations. Le rythme de développement devient aussi plus raisonnable car le périmètre est réduit à dessein.</p>
<p>La stabilité d’une plateforme est aussi améliorée par le peu d’outils employés aux effets de bords non contrôlés. J’ai tellement d’exemples sur le sujet accumulés depuis ces quinze dernières années que cela pourrait faire l’objet d’un billet complet !</p>
<h2>Maintenance</h2>
<blockquote>
<p>Capitalism excels at innovation but is failing at maintenance, and for most lives it is maintenance that matters more</p>
<p><cite><em><a href="https://aeon.co/essays/innovation-is-overvalued-maintenance-often-matters-more">Innovation is overvalued. Maintenance often matters more</a></em> (<a href="/david/cache/172fb3d15c9330057ebaefda78e429dd/">cache</a>)</cite></p>
</blockquote>
<p>Le problème ici c’est que je n’ai jamais rencontré de projet qui réduisent leur complexité dans le temps. Que ce soit via des <a href="/david/stream/2015/08/24/">itérations de retrait</a> ou des réécritures complètes on arrive toujours à des usines à gaz si l’on ne s’est pas fixé en amont — de manière consentie par toutes les parties prenantes — les budgets évoqués plus haut. Pourtant en restant à l’échelle du <em>microlith</em>, la maintenance se trouverait potentiellement réduite de beaucoup.</p>
<p>Si l’on s’en tient à l’estimation selon laquelle la <a href="http://themaintainers.org/s/ensmenger-maintainers-v2.pdf">maintenance représente 67% d’un produit</a> (<a href="/static/david/blog/ensmenger-maintainers-v2.pdf">cache</a>), il devient important de trouver comment réduire ce coût.</p>
<h2>Conclusion</h2>
<blockquote>
<p>There are only two hard things in Computer Science: knowing how to admit you’re wrong and apologizing when you are.</p>
<p><cite><a href="https://twitter.com/fogus/status/714916368022372354">Fogus</a></cite></p>
</blockquote>
<p>J’assume de pouvoir me tromper complètement sur le sujet. J’ai l’impression que la profession est en train de se scinder entre ceux qui suivent le rythme et ceux qui s’épuisent. Je propose ici une troisième voie qui me semble davantage soutenable tout en répondant à 80% du besoin et en utilisant des technologies récentes, il s’agit d’une <em>descente créative</em> chère aux adeptes de la permaculture.</p>
<p><strong>Une forme de décroissance technique pour revenir aux fondamentaux sans pour autant s’en tenir à des expériences utilisateurs et développeurs de la décennie précédente.</strong></p>
<p>Je n’ai pas l’impression d’être le seul dans ma démarche mais cela reste un mouvement minoritaire, ce qui est peut-être un atout. Là où les designers parlent de <a href="http://brutalistwebsites.com/">brutalité</a>, j’évoquerais plutôt la <a href="/david/blog/2014/diversion-numerique/">frugalité</a> avant même d’évoquer la composante <a href="https://ethicalweb.org/">éthique</a> (<a href="/david/cache/31f3a76ecda75ce903178e9a434621de/">cache</a>) qui finie forcément par être chatouillée.</p>
<h2>Discussions</h2>
<p>Pas mal de réactions suite à l’intervention qui a plutôt été bien accueillie. Il s’agissait d’un public — plutôt SSII et plutôt familier avec Java — qui n’a pas forcément les mêmes contraintes que pour du développement web. Néanmoins, j’ai retenu quelques axes de discussion :</p>
<ul>
<li>De nombreuses questions et réactions ont portées sur l’enseignement, sur la manière de découvrir par soi-même les limites d’un <em>framework</em> dans le temps imparti par exemple. C’est un sujet à part entière qui mériterait peut-être un billet dédié ou une intervention (ParisWeb ?).</li>
<li>La thématique des itérations de retrait avec la distinction entre retirer du code et retirer des fonctionnalités. Entre le faire au fil de l’eau et dédier une période à cela.</li>
<li>Sur la dualité valeur pour l’utilisateur et fun pour le développeur, sachant qu’avec du fun le développeur va vraisemblablement être en mesure de produire de la valeur plus rapidement.</li>
<li>Sur la capacité à avoir des métriques en fonction de la solution technique retenue. J’ai été assez inspiré par la <em>keynote</em> de <a href="https://pedagogieagile.com/">Christian den Hartigh</a> et sur son introduction de l’aléatoire dans les réponses. Peut-être qu’en choisissant aléatoirement une solution technique cela produirait d’autres résultats ?</li>
<li>Sur la question économique de la simplicité, moins de fonctionnalités équivalant à moins de temps/argent/pouvoir pour les développeurs.</li>
<li>Sur l’industrialisation qui n’est rendue possible qu’avec une <em>stack</em> figée et propre à l’entreprise plus qu’au besoin.</li>
</ul>
<p>Et j’en oublie certainement d’autres, n’hésitez pas à expérimenter chez vous et à raconter vos propres histoires.</p>
</article>


  <figure class="image" property="schema:image">
    <img src="/static/david/blog/2016/simplicite-defaut.jpg" alt="" />
  </figure>


<nav id="jumpto">
  <p>
    <a rel=prev href="/david/blog/2016/classements-listes/">← Classements et listes</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2016/mixit-2016/">Mix-IT 2016 →</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
      <p>
        Les dernières publications hebdomadaires sont :
      </p>
      <ul class="with_columns">
        
          <li>
            <a href="/david/stream/2019/12/17/">Origines</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/12/10/">Publier</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/12/03/">En forêt</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/11/26/">Ecocentric</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/11/19/">Se livrer</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/11/12/">Dépendances</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/11/05/">Positif</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/10/29/">Dettes</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/10/22/">Privilèges</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/10/15/">Discrétion</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/10/08/">Désespérance</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/10/01/">Présent</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/09/24/">Manifester</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/09/17/">Arpenter</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/09/10/">Nostalgie</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/09/03/">Déconstruire</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/08/27/">Documenter</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/08/20/">Frustration</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/08/13/">Holisme</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/08/06/">1%</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/07/30/">Exemplarité</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/07/23/">Timelines</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/07/16/">Écoute</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/07/02/">Anxiété</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/06/21/">À lier</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/06/14/">Pauvreté</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/06/07/">Amateur</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/05/31/">Pollution</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/05/24/">Apaisement</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/05/10/">Folie</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/05/03/">Sympathie</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/04/12/">Péremption</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/04/05/">Définitions</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/03/29/">Acceptation</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/03/22/">Dissonance</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/03/15/">Reconnaissance</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/03/08/">Lecture</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/03/01/">Journaux</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/02/22/">Écriture</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/02/15/">Kyriarchie</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/02/08/">Mots-serrures</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/02/01/">Sans voie</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/01/18/">Agilité</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/01/11/">Métaphores</a>
          </li>
        
          <li>
            <a href="/david/stream/2019/01/04/">Balbutiements</a>
          </li>
        
      </ul>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>

  <script>
  /* Service workers */
  if (navigator.serviceWorker) {
    window.addEventListener('load', function () {
      var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'
      function sendLinks (selector) {
        var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {
          return link.getAttribute('href')
        })
        links.push(location.pathname)  // Put the current page in cache too.
        navigator.serviceWorker.controller.postMessage({ links: links })
      }
      navigator.serviceWorker.getRegistration()
        .then(function (registration) {
          if (!registration || !navigator.serviceWorker.controller) {
            return navigator.serviceWorker.register('/serviceworker.js')
              .then(navigator.serviceWorker.ready)
              .then(function () {
                console.log('[ServiceWorker] Ready to go!')
              })
              .catch(console.error.bind(console))
          } else {
            console.log('[ServiceWorker] Send links via registration')
            sendLinks(selector)
          }
        })
      navigator.serviceWorker.addEventListener('controllerchange', function () {
        console.log('[ServiceWorker] Send links via controller change')
        sendLinks(selector)
      })
      navigator.serviceWorker.addEventListener('message', function (event) {
        var link = document.querySelector('a[href="' + event.data.link + '"]')
        if (event.data.status && link) {
          link.style.backgroundColor = '#2d7474'
          link.style.color = '#f0f0ea'
          
            link.setAttribute('title', 'En cache pour consultation sans connexion')
          
        }
      })
    })
  } else {
    console.warn('[ServiceWorker] No cache for old browsers.')
  }
</script>