davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- 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>The most important goal in designing software is understandability (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- 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)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- 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>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://ntietz.com/blog/the-most-important-goal-in-designing-software-is-understandability/">

<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>The most important goal in designing software is understandability</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://ntietz.com/blog/the-most-important-goal-in-designing-software-is-understandability/" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-03-18
    </p>
  </nav>
  <hr>
  <p>When you're designing a piece of software, the single most important thing to design for is understandability.
Security, performance, and correctness are all important, but they come after understandability.</p>
<p>Don't get me wrong, all of those are important.
Software that isn't correct leads to expensive errors and frustrating experiences.
Slow software can be unusable and frustrating. And insecure software, well, we have a moral <em>and</em> an economic imperative to ensure our software is secure.
But <em>understandability supersedes these</em>.</p>
<p>It's most important, above these, because you cannot ensure any of these other design goals <em>without</em> understandability.
It has to come first.</p>
<h1 id="misunderstood-software-produces-defects">Misunderstood software produces defects</h1>
<p>If software is misunderstood by its implementers and maintainers, then it will end up with defects.
Major defects.
These will come in many forms.</p>
<p>The most obvious one is with correctness.
If you can't understand a given piece of code, you won't be able to read it and understand that it's doing and what it <em>should</em> be doing.
Tests are not your salvation here, because (1) they can cover only limited surface area, and (2) they suffer the same problem: if you don't understand the software you likely don't understand it enough to test it well.</p>
<p>This then gets tangled up with security and performance requirements, too.
If you don't understand the system, how are you going to make it secure?
You can't understand your way into perfect security—it's a process and it's not something that's done.
But if you start from not understanding your software, any hope of security is entirely lost.
You'll miss some base requirements and introduce grievous <em>simple</em> security problems, not the kind that come from complex and subtle interactions between components.</p>
<p>And when you don't understand the software, then any change you make for performance gains is likely to break critical functionality or secure behavior in fundamental ways.
Caching can leak information or mess up your business logic.
Improving queries to solve a performance problem can produce major defects, or even end up causing <em>regressions</em> in performance.</p>
<p>So if you don't understand the code, then it's a losing proposition to try to do anything with it: add a new feature, fix a bug, work on security.</p>
<h1 id="it-s-not-me-it-s-you">"It's not me, it's you"</h1>
<p>It's easy to feel shame or anxiety about not understanding the code.
I carried that for a long time.
There was a codebase I worked on in a previous role where I had no <em>idea</em> what it was doing.
The backend was tough for me to understand, but I got it eventually.
The frontend, no hope, I never made heads nor tails of it.</p>
<p>I assumed that I was just not a good enough engineer to understand our frontend code, and that there was something wrong with me.</p>
<p>Look, reader, I'm a principal engineer with over a decade of experience.
I'm pretty good at my job: our tech leads and most senior engineers come to <em>me</em> for their hard problems, and I consistently debug things anywhere in our stack, <em>including</em> the frontend.
If I felt I couldn't understand it, there were definitely others who also could not.
And the fact that I blamed myself, with so much evidence that I was good at what I do...
Turns out, the problem wasn't me, it was the code.</p>
<p>If you've felt similarly, know that you're not alone.
And that it's not you.
It's the code, the system around it.
Tell that codebase "It's not me, it's you."
Sometimes things are not understandable because you don't have expertise, but if you're generally experienced in the area that that code is in, it's quite probable that the problem is the codebase you're trying to work in.</p>
<h1 id="how-do-we-make-it-understandable">How do we make it understandable?</h1>
<p>So that just leaves the issue of how to make things understandable.
There are a couple of general approaches.
You can make the code itself inherently understandable, or you can give supporting documentation to aid in understanding it.
Both are needed, and both have limits.</p>
<h2 id="make-the-code-understandable">Make the code understandable</h2>
<p>This is something we do routinely in software engineering, although it's easy to lose sight of it.
There are a few key considerations I use when I do this:</p>
<ul>
<li><strong>Remember your audience.</strong> What will other maintainers of this code reasonably be expected to know? If something isn't common knowledge in your team or your industry, then you should probably add some comments explaining it.</li>
<li><strong>Isolate the highest complexity.</strong> If something is complicated, it's worth pulling out into its own unit (a module, a function, whatever) so that you can define its interface and use it in a more fluently readable way, while also constraining that complexity for people who are trying to understand it later.</li>
<li><strong>Read it with fresh eyes.</strong> It's hard to evaluate your own code for readability. One trick is to put the code away for a few days, then read it yourself again after you've switched it all out of your working memory a day or two later. This will help you see things that might trip up a new reader.</li>
<li><strong>Integrate any code review comments.</strong> If someone asks how something works in a code review, do <em>not</em> just explain it to them in the comment. This means it's not clear to your reader who has all the context of your pull request, so it will <em>not be clear</em> to future readers who lack that context. Instead, update the code to be more clear (structurally or with comments) and then reply asking them if the change helps.</li>
</ul>
<h2 id="add-supporting-documentation">Add supporting documentation</h2>
<p>Sometimes, the code will just be hard to understand. This is usually when there's a tension between requirements. Performance improvement will often result in less clear code, for example.</p>
<p>It's also hard (impossible?) to understand the full context of a codebase from the code by itself.
As much as we talk about self-documenting code, the codebase doesn't contain the entire system.</p>
<p>So we need some supporting documentation.
Here are some things that are very helpful for understanding a codebase.</p>
<ul>
<li><strong>System architecture documentation.</strong> I like to keep system architecture diagrams, glossaries of key terms and services, and an explanation of the system as a whole, for the systems I work on. These do get out of date, but a one-month out of date document is better than none at all. For these, I keep a recurring calendar task to update it so that it never drifts too far out of date. For a growing company, onboarding is also a good time to make sure it's current.</li>
<li><strong>Architecture decision records and design reviews.</strong> We make a lot of decisions about architecture and code design as we go through our days as software engineers. When we make these decisions, that's a good time to write them down. This has three effects. The first is the clear one: it gives a record that we can use to understand later on what decision was made or why it was made. The second is less obvious, which is that by having to write our decision down we get clearer on it ourselves, and it forces us to try to explain it to someone else. This makes it so we have some focus on understandability. And the third is that this is a <em>great</em> place to insert a design review process, or at least broadcast these out, so you get feedback on clarity early in the process before writing code.</li>
<li><strong>Product requirement documents.</strong> These are super helpful for us to know what we're implementing and why it matters. But they're also very helpful later for understanding the code in its context. Was this weird behavior actually intended, or is it a bug? If you can go look at why it was implemented and the original requirements, that helps you answer that question.</li>
<li><strong>Code comments.</strong> These are the elephant in the room. They're helpful for explaining what a particular unit of code does and why it exists. These are very helpful in any case where something will be surprising, so they should be used for things that people will look at and puzzle over. They're also good for pointing to related documentation, otherwise it's hard to discover the related docs to understand the code when you're maintaining the code.</li>
</ul>
<p>Those are just a few of the ways you can can add supporting documentation to help with understandability!</p>
<h1 id="gradual-improvement-works">Gradual improvement works</h1>
<p>Understandability is a fuzzy thing that's subjective.
And it's not something that you can, or should, aim for perfection on.
If you're working in a codebase today and it's hard to understand, the temptation can be to throw it away and start over.
Sometimes that's merited, but often gradual improvement can be a good solution.</p>
<p>Each time you struggle to understand something, or you gain a better understanding through a task you work on, that's a good time to add documentation or improve the code to make it more understandable!
Each small improvement will help you in the future and help your teammates.
And each time you improve it, you lead by example and show people that this can and should be done.</p>
</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>