davidbgk
/
larlet-fr-david

<!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>
    Aurores
  — David Larlet</title>
  <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>
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <meta name="description" content="13h17 : Elle m’informe qu’il y a une énorme tâche solaire visible avec les lunettes d’éclipse actuellement sur le soleil. J’oublie de regarder.">
  <!-- 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">
  <!-- To get attribution when linking on mastodon. -->
  <meta name="fediverse:creator" content="@david@larlet.fr">
  
<style type="text/css">
  .tippy-content {
    min-width: 280px;
    padding: .5rem;
    font-size: calc(var(--fluid-0) * 0.8);
    font-family: var(--labor-font);
    letter-spacing: initial;
    text-align: left;
  }
  .tippy-content h3 {
    margin-top: 0;
  }
  .tippy-content h3 img {
    max-width: 2rem;
    max-height: 2rem;
    display: inline-block;
  }
  .tippy-content .tippy-links {
    display: flex;
    justify-content: space-around;
  }
  .tippy-content a {
    padding: .4rem;
    color: #F06048;
  }
</style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>Aurores</h1>
      <p>Le <time datetime="2024-05-10">10 mai 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/05/05/"
           title="Publication précédente : Jour 2">← Précédent</a> •
      
      <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
      •
      <a href="/david/recherche/"
         title="Aller à la page de recherche"
         rel="search" data-no-instant>Recherche</a>
      
        • <a rel="next"
            href="/david/2024/05/12/"
            title="Publication suivante : Alien">Suivant →</a>
      
    </p>
  </nav>
  
<p>13h17&nbsp;: Elle m’informe qu’il y a une énorme tâche solaire visible avec les lunettes d’éclipse actuellement sur le soleil. J’oublie de&nbsp;regarder.</p>
<p>19h28&nbsp;: Un ami m’indique qu’<a data-link-domain="ici.radio-canada.ca" href="https://ici.radio-canada.ca/nouvelle/2071742/tempte-solaire-geomagnetique-10-mai">une tempête solaire arrive sur le Canada</a>. J’ai un peu de mal à faire le lien direct avec les aurores boréales, surtout que je suis à Montréal donc je n’y pense même&nbsp;pas.</p>
<p>20h17&nbsp;: Je creuse un peu et apparemment ça va vraiment être exceptionnel, genre <a data-link-domain="espaces.ca" href="https://www.espaces.ca/articles/actualites/23173-des-aurores-boreales-spectaculaires-partout-au-quebec-cette-fin-de-semaine">le plus important de ces 19&nbsp;dernières années</a>. Je lui partage ma déception d’être en ville pour cette opportunité&nbsp;improbable.</p>
<p>20h36&nbsp;: On s’appelle et on convient d’aller au parc à 200&nbsp;mètres de chez moi avec les enfants et de quoi avoir chaud, au pire ça fera une sortie nocturne marrante. <a data-link-domain="swpc.noaa.gov" href="https://www.swpc.noaa.gov/products/aurora-30-minute-forecast">Le site le plus populaire à ce sujet</a> semble dire que ça serait visible même depuis notre latitude. Le ciel est complètement&nbsp;dégagé.</p>
<p>21h22&nbsp;: On est bien installés dans le coin le moins lumineux du parc que je connais comme ma poche. Une bonne occasion de réaliser l’activité nocturne de la faune locale. Je n’y crois qu’à 1% mais ne faire que quelques mètres pour espérer réaliser un rêve c’est une aubaine qui ne se refuse pas. Joachim a eu besoin d’aller <a data-link-domain="blog.professeurjoachim.com" href="https://blog.professeurjoachim.com/billet/2023-03-31-aller-voir-les-aurores-boreales-en-train">pas mal plus loin</a> l’année&nbsp;dernière.</p>
<p>22h03&nbsp;: Soudain, venant de l’ouest, l’équivalent d’un rideau de pluie verte/rose qui s’avance vers le nord. C’est juste incroyable à vivre et ça vient compléter <a href="/david/2024/04/08/" title="Éclipse">l’éclipse</a> en terme d’intensité émotionnelle. Je suis tellement surpris que je mets un moment à sortir l’appareil photo sur lequel je n’avais rien réglé, n’y croyant pas&nbsp;vraiment.</p>
<figure>
    <a href="/static/david/2024/2024-05-10-aurore-boreale.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-05-10-aurore-boreale.jpg"
            width="3840" height="2560"
            srcset="/static/david/2024/2024-05-10-aurore-boreale.jpg 3840w, /static/david/2024/2024-05-10-aurore-boreale_660x440.jpg 660w, /static/david/2024/2024-05-10-aurore-boreale_990x660.jpg 990w, /static/david/2024/2024-05-10-aurore-boreale_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3840 / 2560))"
            loading="lazy"
            decoding="async"
            alt="Une aurore boréale depuis Montréal.">
    </a>
    <figcaption>La première photo, avec beaucoup d’ISO et une grande ouverture, à main levée, tout ce qu’il ne fallait&nbsp;pas…</figcaption>
</figure>
<p>Pendant plus d’une heure, on profite d’être au milieu de tous ces échanges magnétiques. Je remercie le soleil d’avoir pété un bon coup et la lune d’être restée discrète ce soir là. La lumière est tellement exceptionnelle, on se sent au milieu de l’aurore —&nbsp;ce qui fait des photos moins spectaculaires, ça devient une expérience à vivre. Rétrospectivement, la première vague était vraiment la plus contrastée et&nbsp;magnifique.</p>
<p>23h19&nbsp;: On rentre finalement car les enfants ont eu une rude journée et ne tiennent plus le coup. J’ai la banane, de trop nombreuses fois j’ai espéré me réveiller en pleine nuit l’hiver dans la forêt pour observer ce phénomème, je ne pensais vraiment pas que ça allait être possible entouré de pollution lumineuse… et surtout de pouvoir le faire avec l’enfant encore&nbsp;éveillé&#8239;!</p>
<p>16h50 (lendemain)&nbsp;: Je rédige ce billet après avoir développé les photos et publié une <a data-link-domain="media.larlet.fr" href="https://media.larlet.fr/2024-05-aurores-01.html">galerie dédiée</a>. J’ai un petit souci éthique au développement car il est très facile de pousser les curseurs des couleurs pour que ça fasse un effet très éloigné du réel. J’essaye de rester raisonnable tout en sachant que chaque moniteur affichera ses propres couleurs de toute façon. Les particules colorées qui ont atteint mon cœur ce soir là ne sont pas prêtes de s’estomper, je me sens encore&nbsp;euphorique.</p>

  
    <nav>
      <p>
        
          <a href="/david/2024/enthousiasme/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#enthousiasme</a>
        
          <a href="/david/2024/parentalite/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#parentalité</a>
        
          <a href="/david/2024/photographie/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#photographie</a>
        
        <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
      </p>
    </nav>
  
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/05/05/"
           title="Publication précédente : Jour 2">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/05/12/"
            title="Publication suivante : Alien">Suivant →</a>
      
    </p>
  </nav>

      
        <form action="/david/recherche/" method="get">
          <fieldset>
            <legend>Recherche</legend>
            <label for="input-search">Termes de votre recherche :</label>
            <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
            <input type="submit" value="Chercher">
            <p id="indexation-infos">
              <small>
                Seuls les contenus de ces 8 dernières années sont indexés.
              </small>
            </p>
          </fieldset>
        </form>
      
      <aside>
        <theme-toggle></theme-toggle>
      </aside>
    </article>
    <hr>
    <footer>
      <p>
        <a href="/david/" title="Aller à l’accueil">Accueil</a>
        •
        <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
        •
        <a href="http://larlet.com"
           title="Go to my English profile"
           data-instant>Pro</a>
        •
        <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
        •
        <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset div {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème</legend>
            <div>
              <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>
            </div>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      class ThemeToggle extends HTMLElement {
        constructor() {
          super()
          const themeSelectorTemplate = document.querySelector('#theme-selector')
          const form = themeSelectorTemplate.content.firstElementChild
          this.attachShadow({ mode: 'open' })
          this.shadowRoot.appendChild(form.cloneNode(true))
        }

        connectedCallback() {
          const form = this.shadowRoot.querySelector('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 colorsLayer = undefined
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
          let mediaRules = []
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.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) {
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
    
  <script src="/static/david/js/popper-2.11.8.min.js"></script>
  <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  <script>
    tippy('[data-tippy]', {
      content(reference) {
        reference.addEventListener('click', (e) => e.preventDefault())
        return `
        <h3 lang="fr">
          <img src="${reference.dataset.favicon}" loading="lazy">
          <a href="${reference.dataset.source}"
            >Article sur ${reference.dataset.domain}</a></h3>
        <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
        <div class="tippy-links" lang="fr">
          <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
        </div>
        `
      },
      allowHTML: true,
      interactive: true,
      delay: [150, 700],
      hideOnClick: false
    })
  </script>
  <script type="module">
    import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'

    const markObserver = new IntersectionObserver((entries, observer) => {
      const computedStyle = getComputedStyle(document.documentElement)
      const markBackground = computedStyle.getPropertyValue('--mark-background')
      for (const entry of entries) {
        if (entry.intersectionRatio === 0) continue
        const markElement = entry.target
        markElement.style.backgroundColor = 'inherit'
        const annotation = annotate(
          markElement, {
            type: 'highlight',
            multiline: true,
            color: markBackground,
            // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
            animate: false
          }
        )
        annotation.show()
        observer.unobserve(markElement)
      }
    }, {threshold: 1.0})

    for (const markElement of document.querySelectorAll('mark')) {
      markObserver.observe(markElement)
    }
  </script>

  </body>
</html>