davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
							<!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,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>The radium craze (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="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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 type="text/javascript">
    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.design/writing/the-radium-craze.html">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
  <header>
    <h1>The radium craze</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="https://ericwbailey.design/writing/the-radium-craze.html" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <p class="c-lede">Radium was discovered in 1898 by Polish chemist <a href="https://en.m.wikipedia.org/wiki/Marie_Curie">Marie Sklodowska Curie</a>. To produce radium, you need to extract it from pitchblende, an ore that contains uranium.</p>

<p>Radium was discovered in working with the known properties of <a href="https://en.m.wikipedia.org/wiki/Uraninite">pitchblende</a>. Curie noticed that pitchblende in its unrefined state was more radioactive than the uranium that was separated from it. This lead her to correctly anticipate it containing additional radioactive properties.</p>

<p>Extracting radium is a complicated and involved process that requires a team of trained professionals. Extraction needs to be conducted at scale, due to only trace amounts being present in the ore it is extracted from.</p>

<p>After its discovery, scientists hailed it as a miracle element. Its unique properties came to represent modernity, industrialization, and technological advancement. The general public was quick to follow, and amplify this enthusiasm.</p>

<h2 class="heading-beta" id="radium-girls">Radium girls</h2>

<p>Radium’s most obvious property is its luminosity. It glows with a distinct, eerie green color. Readers of this post may be familiar with one of its more infamous uses: <a href="https://en.m.wikipedia.org/wiki/Radium_dials">painting it on watches</a> to create glow-in-the-dark dials.</p>

<figure role="figure" aria-label="Source: Radium Dials by Arma95 on Wikimedia Commons"><img alt="A glowing green watch dial floating in blackness." src="../static/images/the-radium-craze/radium-dial.jpg"/><figcaption><span class="typography-small-caps">Source:</span> <a href="https://commons.wikimedia.org/wiki/File:Radium_Dial.jpg">Radium Dials by Arma95</a> on Wikimedia Commons.</figcaption></figure>

<p>Readers may also be familiar with <a href="https://www.buzzfeed.com/authorkatemoore/the-light-that-does-not-lie">Radium Girls</a>. This deceptively cool-sounding name describes a working-class job that was highly desirable at the time. Radium’s technological applications afforded radium dial painters a salary that enabled a semblance of financial freedom. Radium’s public perception also gave the job a sense of glamor.</p>

<p>Radium girls were women who were coerced by their male superiors to meet the demands of society and technology. They were instructed to use their mouths to form a fine tip on the paintbrushes used to apply radium paint.</p>

<p>Over time, radium built up in these women’s bodies. This led to horrible injuries and tragic and extremely painful deaths. Before death, ulcers, lesions, sarcomas, the dissolving of tissue and honeycombing of bone occurred. The horrific symptom of a jaw rotting off occurred enough that the term “radium jaw” was coined.</p>

<p>The employers of radium girls initially tried to ignore, gaslight, and shift blame about the adverse effects of radium exposure, and their part in it. The United States Radium Corporation tried to blame <a href="https://www.buzzfeed.com/authorkatemoore/the-light-that-does-not-lie">Mollie Maggia</a>’s death by radium poisoning on a misdiagnosis of syphilis. They then conspired to create a mass coverup to hide the ill-effects of working with the technology.</p>

<h2 class="heading-beta" id="productization">Productization</h2>

<p>What is less known is <a href="https://thehistoryvault.co.uk/the-radium-craze-americas-lethal-love-affair-by-matthew-moss/">how deeply integrated radium was into daily life</a>. Radium was used a plot device in fiction, a beauty standard, even a topic for religious sermons.</p>

<p>Radium’s rarity made it a prestige good. Businesses were quick to take its initial applications and create a whole host of radium-themed products and branding—the more coveted ones actually containing the element. It was laterally integrated into nearly every existing product space: cigarettes, toothpaste, hair cream, butter, blankets, fertilizer, cosmetics, etc.</p>

<p>Radium’s integration also created a feedback loop that bolstered its credibility. This translated to its adoption by the medical community.</p>

<p>Doctors praised the supposed medicinal effects of radium without knowing its full effects, touting the rejuvenating powers of irradiated metal. Irradiated tablets were sold to the general public, to say nothing of radium-themed suppositories.</p>

<p>Perhaps the most infamous radium product was Radithor, a beverage created by Bailey Radium Laboratories. Radithor was marketed as an “elixir of life.” Unlike a lot of competing products in the radium beverage space, Radithor was a premium product that promised certified radioactive water.</p>

<figure role="figure" aria-label="Source: Radium Dials by Arma95 on Wikimedia Commons"><img alt="A bottle of Radithor sitting in front of a paper advertisement for it. The Radithor bottle's label indicates that it is certified radioactive water." src="../static/images/the-radium-craze/radithor.jpg"/><figcaption><span class="typography-small-caps">Source:</span> <a href="https://afistfulofneurons.com/radium-water-radithor/">“The Radium Water Worked Fine Until His Jaw Came Off”</a>.</figcaption></figure>

<p>Pittsburgh socialite Eben M. Byers died by compulsively over-consuming Radithor—his body was so radioactive that he needed to be buried in a lead coffin. Because of Byers’ social position, as well as <a href="https://www.scribd.com/document/188172930/The-Radium-Water-Worked-Fine-Until-His-Jaw-Fell-Off">coverage from the The Wall Street Journal</a>, regulatory bodies were compelled to take action in banning its use.</p>

<h2 class="heading-beta" id="what-we-can-learn">What we can learn</h2>

<p>There can be a lot of external forces that compel our technology choices, who we have implement them, and how they go about it. Unlike the prewar era, we now know a lot more about how technologies are built, how they work, and what their short and potential long-term effects are.</p>

<p>We should recognize the <a href="https://en.m.wikipedia.org/wiki/Law_of_the_instrument">law of the instrument</a>.</p>

<p>Blanket-applying radium to everything created horrific outcomes, some that we’re still being affected by today. Bottles of radium-infused beverages still show up in antique stores with some frequency. If they’re recognized as such, specialized containment and cleanup crews are brought in.</p>

<p>This being said, radium has some positive applications. Contemporary uses include treating some forms of cancer, checking machined metal parts for defects, and sourcing neutrons. These are situations where radium’s properties are purposefully and deliberately applied.</p>

<p>There’s a bit of nuance behind radium’s practical applications, as well: Many of its uses have been replaced by safer, more efficient innovations building off what it pioneered. The industries that use these technologies understand the importance of radium’s initial establishing role, but also utilize <a href="https://svelte.dev/">its successors</a>.</p>

<p>Technology drives outcomes, but <a href="https://macwright.com/2020/08/22/clean-starts-for-the-web.html">its selection doesn’t live in a vacuum</a>. As technology workers, we have a responsibility to make <a href="https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/">careful and deliberate technology choices</a> and not cause undue immediate or long-term harm.</p>

<p>A five page marketing website may not need <a href="https://css-tricks.com/radeventlistener-a-tale-of-client-side-framework-performance/">a Single Page Application approach</a>. Consider what you’re trying to do, how you’re going to do it, and how you treat the people that help you get there.</p>
  </main>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>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 type="text/javascript">
    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>