davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
							<!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>
    Vision
  — 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="But if you were to try just one thing using Vision Pro — just one thing — it has to be watching a movie in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your wallet.">
  <!-- 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">
  
<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>Vision</h1>
      <p>Le <time datetime="2024-02-01">1 février 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/01/31/"
           title="Publication précédente : Mécénat">← 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/02/02/"
            title="Publication suivante : Valeurs">Suivant →</a>
      
    </p>
  </nav>
  

<blockquote lang="en">
<p>But if you were to try just one thing using Vision Pro — just one thing — it has to be <mark>watching a movie</mark> in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your&nbsp;wallet.</p>
<p><cite><em><a data-link-domain="daringfireball.net" href="https://daringfireball.net/2024/01/the_vision_pro" hreflang="en"
            title="Consultation de l’article (anglais)">Daring Fireball: The Vision Pro</a>
            <a href="/david/cache/2024/cd9184008ba5d9e4c9be4d0a0eea4f60/" hreflang="en"
                data-tippy data-description="A headset, a spatial productivity platform, and a personal entertainment device."
                data-source="https://daringfireball.net/2024/01/the_vision_pro"
                data-date="2024-01-31"
                data-favicon="https://daringfireball.net/graphics/favicon.ico?v=005"
                data-domain="daringfireball.net"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Ce jouet est bien trop cher… et c’est une bonne chose. D’une certaine manière, c’est la seule innovation de 2023&nbsp;qui ne comporte pas IA dans le premier écran marketing, c’est déjà pas mal. Je n’ai pas la naïveté de penser que la version 2&nbsp;ne nous amènera pas vers le <em>SpatIAl Computing</em> pour autant, restons&nbsp;sérieux.</p>
<p>Je peux imaginer des des <a data-link-domain="theinfiniteexperience.world" href="https://theinfiniteexperience.world">expériences immersives</a> dans des endroits dédiés, de la location comme on pouvait louer un DVD il y a des années, des salles dédiées en bibliothèques (ambiance dystopie cyberpunk assurée), à un moment il pourrait même y avoir un espace pour ça (payant&#8239;?) dans les <em>Apple Store</em>. Si le son est aussi bon que ce que peut décrire <em>Daring Fanboy</em>, j’aurais vraiment envie de me retrouver au milieu d’un concert, d’avoir le choix entre plusieurs points de vues et&nbsp;acoustiques.</p>
<p>Le côté immersif aurait aussi sa place en terme d’apprentissage / transmission. Être au premier rang d’une conférence ou d’un cours pourrait permettre de redéfinir son attention&nbsp;(?) et sachant que la dernière version de l’iPhone permet de capter de telles vidéos, c’est peut-être un moyen de faire entrer quelqu’un dans son salon ce qui produirait un autre type&nbsp;d’intimité.</p>
<p>En parlant de captation et d’intimité, avec les <em>deepfakes</em> il devient possible de se retrouver dans un salon mais dans une autre tenue. Toute prise de vidéo devient une menace potentielle. Impossible de ne pas penser à des objets connectés / synchronisés autour de la&nbsp;pornographie…</p>
<a href="#hr-59" title="Lien vers cette section de la page"><hr id="hr-59" /></a>

<blockquote lang="en">
<p>The “i” in iPhone stands for “inequality”. […]</p>
<p><mark>iPhone owners live in a different world</mark> than high-end Android buyers, and light-years away what the bulk of the market experiences. No matter how you slice it, the performance inequality gap is growing for CPU-bound workloads like JavaScript-heavy web&nbsp;apps.</p>
<p><cite><em><a data-link-domain="infrequently.org" href="https://infrequently.org/2024/01/performance-inequality-gap-2024/" hreflang="en"
            title="Consultation de l’article (anglais)">The Performance Inequality Gap, 2024</a>
            <a href="/david/cache/2024/0676c7ccf1ab2b380641866789366d26/" hreflang="en"
                data-tippy data-description="How much HTML, CSS, and JavaScript can we afford? More than in years past, but much less than frontend developers are burdening users with."
                data-source="https://infrequently.org/2024/01/performance-inequality-gap-2024/"
                data-date="2024-01-31"
                data-favicon="https://infrequently.org/assets/images/favicons/ino-dark-opt-192x192.png"
                data-domain="infrequently.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Ce rapport me rappelle que la notion d’accessibilité est très vaste. Et je suis mal placé pour donner des leçons en vous faisant charger 5&nbsp;polices de caractères pour vous afficher une page… je n’ai pas encore travaillé les performances du thème de l’année et c’est une&nbsp;erreur.</p>

<blockquote lang="en">
<p>We got to a place where performance has been a constant problem in large part because a tribe of programmers convinced themselves that it <em>wasn’t</em> and <em>wouldn’t be</em>. […]</p>
<p>But tribalism-boosted confirmation bias mixed with JavaScript’s toxic positivity culture to precipitate out a Silicon Prosperity Gospel; all resources would go infinite if you just <em>believed</em>. […]</p>
<p>The solutions are social, not technical, because <mark>the delusions are social,</mark> rather than&nbsp;technical.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>Ça&nbsp;pique.</p>
<a href="#hr-60" title="Lien vers cette section de la page"><hr id="hr-60" /></a>

<blockquote lang="en">
<p>Rather, the biggest benefits I see are <em>collective</em>, cutting across the industry as a whole. I think web components can make the entire web more accessible. They have the potential to unify currently fragmented communities, including various JavaScript frameworks <em>and</em> <mark>those who avoid them</mark>.</p>
<p>[…] Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks. We probably won’t even all learn how to write&nbsp;them!</p>
<p><cite><em><a data-link-domain="jakelazaroff.com" href="https://jakelazaroff.com/words/the-web-component-success-story/" hreflang="en"
            title="Consultation de l’article (anglais)">The Web Component Success Story</a>
            <a href="/david/cache/2024/f4d2d42eba58062be910407690ae447c/" hreflang="en"
                data-tippy data-description="Web components won't take web development by storm, or show us the One True Way to build websites. What they will do is let us collectively build a rich ecosystem of dynamic components that work with any web stack."
                data-source="https://jakelazaroff.com/words/the-web-component-success-story/"
                data-date="2024-01-31"
                data-favicon="https://jakelazaroff.com/favicon.ico"
                data-domain="jakelazaroff.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Très bon article et la boite de prévisualisation au survol de chaque lien ressemble beaucoup à ce que j’avais l’intention de faire pour régler mes soucis d’accès à la version archivée tout en affichant le domaine. Actuellement chaque lien devient trop long et hache le texte lorsque ça n’est pas en pied de citation (et encore). Il faut que je creuse comment cela est fait, via un <em>web component</em> réutilisable&nbsp;j’imagine&nbsp;:-).</p>
<p>PS&nbsp;: si vous minifiez votre JavaScript, les <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap">SourceMap</a> sont un moyen de partager votre expérience. Sinon l’aspect <q lang="en">collective</q> est beaucoup moins&nbsp;pertinent.</p>

  
    <nav>
      <p>
        
          <a href="/david/2024/accessibilite/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#accessibilité</a>
        
          <a href="/david/2024/dystopie/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#dystopie</a>
        
          <a href="/david/2024/evolution/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#évolution</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/01/31/"
           title="Publication précédente : Mécénat">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/02/02/"
            title="Publication suivante : Valeurs">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
        const annotation = annotate(
          markElement, {
            type: 'highlight',
            multiline: true,
            color: markBackground,
            animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
          }
        )
        annotation.show()
        observer.unobserve(markElement)
      }
    }, {threshold: 1.0})

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

  </body>
</html>