davidbgk
/
larlet-fr-david-cache

<!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>What is good code? (archive) — 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/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://loup-vaillant.fr/articles/good-code">

<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>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  What is good code? (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://loup-vaillant.fr/articles/good-code">Source originale du contenu</a></h3>
    <p><strong>Good code is cheap code that meets our needs.  The cheaper the
  better.</strong></p>
<p>Well, assuming code is just a means to an end.  Sometimes we want to
enjoy the code for itself.  Most of the time however, the overriding
concern is the <em>bottom line</em>.</p>
<p>I could almost stop right there, but I feel like I should elaborate.</p>
<h2>Good (enough) programs</h2>
<p>There is the code, and there is the program.  Code is read by a human.
Programs are interpreted by computers (or virtual machines).</p>
<p>Programs have many requirements, most of which are domain specific.
Some requirements however are universal:</p>
<ul>
<li>
<p><strong>Correctness.</strong> The program must not have too many bugs.  It would
  make it worse than useless.</p>
</li>
<li>
<p><strong>Performance.</strong> The program must not be too slow.  It would waste
  the users' time, make them angry, or even behave incorrectly (in the
  case of real time software).</p>
</li>
<li>
<p><strong>Frugality.</strong> The program must not use too much resources.  We have
  plenty of CPU memory… but they still have limits.  Use too much
  resources and your program will drain the battery of your phone,
  waste your bandwidth, or plain stop working.</p>
</li>
</ul>
<p>We don't always think of these requirements explicitly.  Still, they
must be met, and they have a cost.  Want more performance or waste
less resources?  Your code will be more complex.  Want less bugs?  You
will have to spend more time shaking them out.</p>
<p>Once a program do meet all its requirements however, it is good
enough.  There is little point in trying to make it even better.  With
that goal set, the only thing left to optimise is the cost of code.</p>
<h2>Code as a dependency graph</h2>
<p>Before we can hope to estimate the cost of code, we must understand a
few things about its structure.</p>
<p>Basically, your code is made up of little chunks that can fit in your
head (if it didn't, you couldn't have written it in the first place).
Most of the time, a chunk is a function âor a method, or a procedure.
Each such chunk is a node of your graph.  And their dependencies form
the edges.</p>
<p>Like in any directed graph, when you have N nodes, you can have up to
NÂ² edges.  This has important consequences when estimating the cost of
code.  The number of edges, relative to the number of nodes is called
the <em>density</em> of the graph.  Dense graphs have many edges (close to
NÂ²).  Sparse graphs have relatively few edges (close to N).</p>
<p>Each chunk of code have 2 levels of understanding: interface, and
implementation.</p>
<ul>
<li>If you just want to <em>use</em> a piece of code, understanding its
  interface is enough.</li>
<li>If you want to <em>contribute</em> to a piece of code, you have to
  understand its implementation.  Which requires understanding the
  interface of all the direct dependencies.</li>
</ul>
<p>A few caveats, however</p>
<ul>
<li>
<p>Dependencies aren't always obvious.  With purely functional code,
  the dependency graph and the call graph are one and the same.  On
  the other hand, things like shared state create more edges.
  <em>Implicit</em> edges.  Those implicit dependencies are often easy to
  miss.</p>
</li>
<li>
<p>To understand a properly documented interface, you generally don't
  have to look at anything else.  Of course, some <em>aren't</em> properly
  documented, forcing you to check the implementation… This little
  dance can go coup<a href="https://en.wikipedia.org/wiki/Transitive_closure" title="Transitive closure (Wikipedia)">pretty far</a>).</p>
</li>
</ul>
<h2>The cost of code</h2>
<p>Basically, code costs however much time we spend on it.  I personally
break it down to 3 activities:</p>
<ul>
<li><strong>Typing.</strong> We need to write the code.</li>
<li><strong>Understanding.</strong> We can't type randomly.</li>
<li><strong>Coordination.</strong> We should avoid duplicate or incompatible work.</li>
</ul>
<p>Some would talk about development, maintenance, testing… But this is
not an interesting way to break things down.  Development and
maintenance have a <em>lot</em> in common.  Even testing involves writing and
reading code.  And all three activities involve typing, understanding,
and coordination.</p>
<h3>Typing</h3>
<p>It is generally admitted that we spend much more time thinking about
our code than we do typing it down.  I still find it interesting
however, because it provides an obvious lower bound.  Code <em>cannot</em>
cost less than the time taken to type it.</p>
<p>Imagine a 20,000 lines program.  By current standards, this is not a
big program.  If you were to print it, it would fit in a medium-sized
book: 400 pages, 50 lines per page.  Prose would typically have about
12 words per line, but lines of code are shorter.  Let's say 6 words
per line.  That's 120,000 words.</p>
<p>Assuming you type 50 words per minute (a fair speed), typing it all
down would take 40 hours.  A full work week of mindless typing, and
the program is not even "big".  I say current standards are insane.</p>
<h3>Understanding</h3>
<p>You can't write code randomly.  You need to know what you're doing.
More specifically, you need to understand three things:</p>
<ul>
<li>New code (that you are about to write).</li>
<li>Existing code.  (<em>This</em> is why code is so expensive.)</li>
<li>Prerequisites.  (Required background knowledge.)</li>
</ul>
<h4>New code</h4>
<p>The depth of understanding required to write new code is significant.
This is going to take longer than 50 words per minute.  Those 20,000
lines aren't going to write themselves in a week.  Nevertheless,
assuming you work on this code piecemeal (it is impossible not to),
the time taken to understand new code is still proportional to the
length of that code.</p>
<p>Oh, right.  <em>Length.</em></p>
<p>Intuitively, the time required to understand a piece of code is
proportional to its <em>complexity</em>, not its length.  Length, measured in
lines of code, is an incredibly crude proxy.  But it works.  It is
strongly correlated with most complexity measures we came up with so
far, and those don't have more predictive power than length alone.
For instance, if you know a program's length, learning its cyclomatic
complexity won't tell you anything more about things like time to
completion or number of bugs.</p>
<p>Besides a <a href="https://en.wikipedia.org/wiki/Code_golf" title="Code Golf (Wikipedia)">few exceptions</a>, complexity and length are roughly
proportional.  Of two chunks of code solving the same problem, if one
is twice as big, it is probably twice as complex.  Roughly.
Amazingly, this heuristic works across languages.  Terser languages
make the code cheaper.  (Again, we may have some <a href="https://en.wikipedia.org/wiki/APL_%28programming_language%29" title="APL (Wikipedia)">exceptions</a>).</p>
<h4>Existing code</h4>
<p>Any new code you write will use, or be used by, existing code.  You
need to understand some of the old code before you write anything new.
Unless you're just starting your project, but you won't start forever.</p>
<p>The ideal case is when you work alone, and everything you have written
so far is still fresh in your mind.  Understanding it <em>again</em> costs
you nothing.</p>
<p>Well, that never happens.  You forget about code you have written long
ago.  You don't work alone, and must understand code <em>others</em> have
written.  Or maybe you arrived late in the project.  Now the density
of your dependency graph matters a great deal:</p>
<ul>
<li>
<p>If the graph is sparse, you'll rarely have to understand more than a
  few dependencies to contribute.  The cost is not nil, but it can
  still be proportional to the size of the code base.</p>
</li>
<li>
<p>If the graph is dense however, you may have to understand many
  things before you do anything.  In the worst case, that cost can
  rise up to the <em>square</em> of the size of code base.  Even if no graph
  gets <em>that</em> dense, density can still kill your project.</p>
</li>
</ul>
<h4>Prerequisites</h4>
<p>This one is highly context specific.  Common knowledge costs nothing,
because everyone knows it (by definition), and some knowledge is
required to merely understand the problem.</p>
<p>Some background knowledge however relates to <em>how</em> you solve your
problem.  There are different ways to write a program, and some are
more… esoteric than others.  Take for instance that little
<a href="../projects/metacompilers">metacompiler</a> I have written in Haskell.  Very handy when you need
to parse some textual data format.  On the other hand, you will need
to know about top-down parsing, parsing expression grammars, parser
combinators, monads, applicative functors… are you <em>sure</em> you want to
learn all that just to parse some text?  By the way, I no longer
maintain this tool.</p>
<p>Required background knowledge is the reason why lambdas and recursion
are often frowned upon in mainstream settings.  The typical OOP
programmer is not used to this eldritch stuff from <a href="../tutorials/from-imperative-to-functional">FP hell</a>.  Not
yet, at least.</p>
<p>I don't have a magic bullet for this problem.  If you don't know some
useful concept or external tool, you can't use it unless you spend
time to learn it.  Good luck with the cost-benefit analysis.</p>
<h3>Coordination</h3>
<p><em>(I have worked in several teams, but never lead one.  Take this
section with a grain of salt.)</em></p>
<p>Most of the time, you will work in a team.  You have to.  Most
programmers can't do everything a full system requires.  Domain
specific algorithms, user interface, network, database, security… Even
if you're one of those miraculous full stack experts, you probably
won't have the time to code it by yourself.</p>
<p>Hence coordination.  In the worst case, everyone communicates with
everyone else all the time.  The cost of that overhead is quadratic
with respect to the size of the team.  Not a problem with 4 people.
Quite a mess with 40.  In practice, when teams grow large enough, two
things inevitably happen:</p>
<ul>
<li>Someone ends up leading the team.  Most communications go through
  that person.  This brings the amount of communication back to linear
  (mostly), but it is all concentrated on one person.</li>
<li>When the team gets <em>real</em> big, it gets divided into sub-teams, each
  with their own leader.  That means less overhead for the main
  leader, without increasing the communication overhead too much.</li>
</ul>
<p>(If neither happens, communication overhead explodes and little gets
done.)</p>
<p>How that relates to code is explained by <a href="https://en.wikipedia.org/w/index.php?title=Conway%27s_law" title="Wikipedia">Conway's law:</a></p>
<p>&gt; organizations which design systems … are constrained to produce
&gt; designs which are copies of the communication structures of these
&gt; organizations</p>
<p>This works both ways.  The organisation of your team will shape the
code it produces, and the code you ask of your team will shape its
organisation.  You just can't build a big monolith with separate
sub-teams.  Either the teams will communicate a lot (effectively
merging them together), or they will come up with a more modular
design.</p>
<h2>Driving down the costs</h2>
<p>From the above we can deduce 4 levers to reduce the cost of code:</p>
<ul>
<li>
<p><strong>Write less code.</strong> Less code is just plain cheaper.  Enough said.</p>
</li>
<li>
<p><strong>Keep it modular.</strong> Make your dependency graph as sparse as you
  can.  It will reduce communication overheads, let your team work in
  parallel, and reduce the amount of code you need to understand
  before you write something new.</p>
</li>
<li>
<p><strong>Ponder your external dependencies.</strong> External tools are a tough
  call.  While they can massively reduce the amount of code you need
  to write, they can have a steep learning curve, or a significant
  maintenance burden.  Make sure your external dependencies are worth
  your while.</p>
</li>
<li>
<p><strong>Use fewer concepts.</strong> If your code requires less background
  knowledge, the time saved not learning it can be put to good use.
  Be careful, though.  The right concepts often makes your code
  shorter, and are often widely applicable.</p>
</li>
</ul>
<p>Pretty standard stuff.  I just want to stress one thing: those 4
levers are probably the <em>only</em> ones that matter.  Found a new
technique, a new language, a new methodology?  It has to do one of
those:</p>
<ul>
<li>Reduce the amount of code;</li>
<li>increase its modularity;</li>
<li>replace or subsume heavier external dependencies;</li>
<li>or <em>maybe</em> reduce the amount of required background knowledge.</li>
</ul>
<p>Otherwise it won't reduce your costs.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://loup-vaillant.fr/articles/good-code">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</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>
      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>