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` 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>Modern Health, frameworks, performance, and harm (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)">
<!-- 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://ericwbailey.website/published/modern-health-frameworks-performance-and-harm/">

<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>Modern Health, frameworks, performance, and harm</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://ericwbailey.website/published/modern-health-frameworks-performance-and-harm/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>I would like to thank <a href="https://www.modernhealth.com/">Modern Health</a>. It was not their intent, but using their service broke me out of a deep depression by launching me into an incandescent rage.</p>
<p>I’ve read enough on <a href="https://osmihelp.org/">destigmatizing mental health</a> that I feel no shame in discussing this. In fact, in this regard I feel twice fortunate. The first is to know enough about myself to know I need help and not feel bad about it, and the second is that I have an employer-offered benefit to take advantage of.</p>
<p>You need to use every resource you can for things like this, and there is no shame in doing so. Mental health resources, like physical health resources, are in incredibly short supply right now.</p>
<p>I signed up for Modern Health’s service earlier this week. After signing my rights away by clicking an impressive number of checkboxes, I was greeted with this experience:</p>
<p><img alt="An almost entirely blank white screen. In the top lefthand corner is the Modern Health log, and navigation options for 'Explore', 'Circles', and 'FAQ'. On the top righthand corner is navigation options for 'Messages' and my profile. In the center of the screen is a small loading spinner. Screenshot." loading="lazy" src="https://ericwbailey.website/img/posts/modern-health-frameworks-performance-and-harm/modern-health-routing-failure.png"></p>
<p>Since I make digital experiences for a living, I immediately knew what happened. The signup user flow failed to transition me over to the onboarding user flow.</p>
<p>In addition to <a href="https://builtwith.com/advanced?back=joinmodernhealth.com">a terrifying amount of telemetry</a>, Modern Health’s customer-facing experience is delivered using React and Webpack.</p>
<p>If you are familiar with how the web is built, what happened is pretty obvious: A website that over-relies on JavaScript to power its experience had its logic collide with one or more other errant pieces of logic that it summons. This created a deadlock.</p>
<p>If you do not make digital experiences for a living, what happened is not obvious at all. All you see is a tiny fake loading spinner that never stops.</p>
<p>Experiences on the web are so poor that many people have developed coping strategies for getting what they need. I <a href="https://filecamp.com/support/problem-solving/hard-refresh/">hard refreshed the tab</a> and was unceremoniously dumped into my homepage dashboard. Many others may know to do the same.</p>
<p>However, many others is not everyone. I also need to point out that people are visiting sites like this because they are not in a good place. Depression and stress lowers your executive function. Furthermore, <a href="https://alistapart.com/article/paint-the-picture-not-the-frame/">people internalize technology’s failures as their own</a>.</p>
<p>What if I was suicidal?</p>
<p>I used an up-to-date operating system to access this website on a top of the line laptop, browsing with an <a href="https://css-tricks.com/evergreen-does-not-mean-immediately-available/">evergreen</a> Chromium browser with no setting adjustments or extensions to interfere with things. Can you imagine what chance for success <a href="https://css-tricks.com/test-your-product-on-a-crappy-laptop/">someone using something other than that</a> will have?</p>
<p><a href="https://timkadlec.com/remembers/2019-01-09-the-ethics-of-performance/">Technology choices have ethical ramifications</a>.</p>
<p>A person seeking help in a time of crisis does not care about TypeScript, tree shaking, hot module replacement, A/B tests, burndown charts, NPS, OKRs, KPIs, or other startup jargon. <a href="https://andy-bell.co.uk/speed-for-who/">Developer experience does not count for shit</a> if the person using the thing they built can’t actually get what they need.</p>
<p>There is also the very real possibility that the developers responsible for making this experience do actually care. However, they may be structurally unable to deny stakeholders demanding an onslaught of non-features, in an attempt to parrot other startups in hopes of reproducing their perceived success.</p>
<p>I felt compelled to write this because explaining the situation is a fractal of absurdity. I’d be laughing if I wasn’t so furious.</p>
<p>I mean it. Take some time today to try and verbally explain the totality of what went wrong here to someone who doesn’t make digital experiences.</p>
<p>Try to justify the architectural choices made compared to an intended audience. Then try to re-justify it through the lens of power dynamics and and a vulnerable population.</p>
<p>An experience like Modern Health should be as lean and fault-tolerant as possible. It should not make 162 requests transferring ~15 MB just to hope it can show me two <a href="https://beaconagency.co.uk/post/does-big-tech-design-have-an-authenticity-problem">sanitized Corporate Memphis blob humans</a> promoting a gamified growth funnel.</p>
<figure role="figure" aria-label="Screaming.">
  <img alt="A card component with a title that reads, 'Resilience, it's a family thing'. There is a subtitle that reads, 'Learn strategies to make resilience part of yoour family make up.', a call-to-action link that says, 'Take a pause.' and a smaller sub-call-to-action link that says, 'Start a new streak!' There is also a cartoon illustration of two happy, ethnically-ambiguous men, one an older man and one younger. The illustration style is simple, geometric shapes and soft pastel colors that neatly side-steps having to do actual representation." loading="lazy" src="https://ericwbailey.website/img/posts/modern-health-frameworks-performance-and-harm/resilience-its-a-family-thing.png">
  <figcaption>
    Screaming.
  </figcaption>
</figure>
<p>I don’t want the underlying concept behind Modern Health to fail. I want more people to get the help they need in a reliable and safe way. However, I wish we as an industry would stop <a href="https://joshcollinsworth.com/blog/self-fulfilling-prophecy-of-react">promoting and rewarding the wrong things</a>.</p>
<p>We’ve lost the plot. Performance, accessibility, and usability are more than inconvenient truths you can pretend don’t exist. They have a direct impact on the quality of someone’s life.</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>