davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Browse Source

Links

master
David Larlet 2 months ago
parent
e36dffe300
commit
608039e76a
Signed by: David Larlet <david@larlet.fr> GPG Key ID: 3E2953A359E7E7BD
12 changed files with 1862 additions and 2 deletions
Split View Show Diff Stats
  1. 201
    0
      cache/2024/0deb984b2f799d391607afcaa488446d/index.html
  2. 34
    0
      cache/2024/0deb984b2f799d391607afcaa488446d/index.md
  3. 2
    2
      cache/2024/291cddda62f18ec9355ec98761b7e9d9/index.md
  4. 359
    0
      cache/2024/71b177818657a209fc76f23c08c21d25/index.html
  5. 193
    0
      cache/2024/71b177818657a209fc76f23c08c21d25/index.md
  6. 209
    0
      cache/2024/af0aee71fef1821c89ce368622f9a464/index.html
  7. 42
    0
      cache/2024/af0aee71fef1821c89ce368622f9a464/index.md
  8. 462
    0
      cache/2024/bf61b62532f71e39e7b92c76dc36bb0f/index.html
  9. 154
    0
      cache/2024/bf61b62532f71e39e7b92c76dc36bb0f/index.md
  10. 186
    0
      cache/2024/f5b5c3dff862cc55318684cf434b8d74/index.html
  11. 10
    0
      cache/2024/f5b5c3dff862cc55318684cf434b8d74/index.md
  12. 10
    0
      cache/2024/index.html

+ 201
- 0
cache/2024/0deb984b2f799d391607afcaa488446d/index.html View File

@@ -0,0 +1,201 @@
<!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>Announcing Interop 2024 (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://hacks.mozilla.org/2024/02/announcing-interop-2024/">

<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>Announcing Interop 2024</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://hacks.mozilla.org/2024/02/announcing-interop-2024/" title="Lien vers le contenu original">Source originale</a>
<br>
Mis en cache le 2024-02-03
</p>
</nav>
<hr>
<p>The <a href="https://github.com/web-platform-tests/interop#the-interop-project">Interop Project</a> has become one of the key ways that browser vendors come together to improve the web platform. By working to identify and improve key areas where differences between browser engines are impacting users and web developers, Interop is a critical tool in ensuring the long-term health of the open web.</p>
<p>The web platform is built on interoperability based on common standards. This offers users a degree of choice and control that sets the web apart from proprietary platforms defined by a single implementation. A commitment to ensuring that the web remains open and interoperable forms a fundamental part of Mozilla’s <a href="https://www.mozilla.org/about/manifesto/">manifesto</a> and <a href="https://www.mozilla.org/en-US/about/webvision/">web vision</a>, and is why we’re so committed to shipping Firefox with our own <a href="https://en.wikipedia.org/wiki/Gecko_(software)">Gecko</a> engine.</p>
<p>However interoperability requires care and attention to maintain. When implementations ship with differences between the standard and each other, this creates a <a href="https://2023.stateofcss.com/en-US/usage/#css_pain_points">pain point</a> for web authors; they have to choose between avoiding the problematic feature entirely and coding to specific implementation quirks. Over time if enough authors produce implementation-specific content then interoperability is lost, and along with it user agency.</p>
<p>This is the problem that the Interop Project is designed to address. By bringing browser vendors together to focus on interoperability, the project allows identifying areas where interoperability issues are causing problems, or may do in the near future. Tracking progress on those issues with a public metric provides accountability to the broader web community on addressing the problems.</p>
<p>The project works by identifying a set of high-priority focus areas: parts of the web platform where everyone agrees that making interoperability improvements will be of high value. These can be existing features where we know browsers have slightly different behaviors that are causing problems for authors, or they can be new features which web developer feedback shows is in high demand and which we want to launch across multiple implementations with high interoperability from the start. For each focus area a set of web-platform-tests is selected to cover that area, and the score is computed from the pass rate of these tests.</p>
<h2>Interop 2023</h2>
<p>The <a href="https://hacks.mozilla.org/2023/02/announcing-interop-2023/">Interop 2023</a> project covered high profile features like the new :has() selector, and web-codecs, as well as areas of historically poor interoperability such as pointer events.</p>
<p><img decoding="async" fetchpriority="high" class="alignnone size-large wp-image-48086" src="https://hacks.mozilla.org/files/2024/01/Interop-2023-500x407.png" alt="" srcset="https://hacks.mozilla.org/files/2024/01/Interop-2023-500x407.png 500w, https://hacks.mozilla.org/files/2024/01/Interop-2023-250x204.png 250w, https://hacks.mozilla.org/files/2024/01/Interop-2023.png 767w" sizes="(max-width: 500px) 100vw, 500px"></p>
<p>The <a href="https://wpt.fyi/interop-2023">results</a> of the project speak for themselves: every browser ended the year with scores in excess of 97% for the prerelease versions of their browsers. Moreover, the overall Interoperability score — that is the fraction of focus area tests that pass in all participating browser engines — increased from 59% at the start of the year to 95% now. This result represents a huge improvement in the consistency and reliability of the web platform. For users this will result in a more seamless experience, with sites behaving reliably in whichever browser they prefer.</p>
<p>For the :has() selector — which we know from author feedback has been one of the most in-demand CSS features for a long time — every implementation is <a href="https://wpt.fyi/results/css/selectors?label=experimental&amp;label=master&amp;product=chrome&amp;product=firefox&amp;product=safari&amp;aligned&amp;view=interop&amp;q=label%3Ainterop-2023-has">now passing 100%</a> of the web-platform-tests selected for the focus area. Launching a major new platform feature with this level of interoperability demonstrates the power of the Interop project to progress the platform without compromising on implementation diversity, developer experience, or user choice.</p>
<p>As well as focus areas, the Interop project also has “investigations”. These are areas where we know that we need to improve interoperability, but aren’t at the stage of having specific tests which can be used to measure that improvement. In 2023 we had two investigations. The first was for accessibility, which covered writing many more tests for ARIA <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">computed role</a> and <a href="https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name">accessible name</a>, and ensuring they could be run in different browsers. The second was for mobile testing, which has resulted in both Mobile Firefox and Chrome for Android having their initial <a href="https://wpt.fyi/runs?label=master&amp;from=2024-01-10T00%3A00&amp;product=firefox_android&amp;product=chrome_android">results in wpt.fyi</a>.</p>
<h2>Interop 2024</h2>
<p>Following the success of Interop 2023, we are pleased to confirm that the project will continue in 2024 with a new selection of focus areas, representing areas of the web platform where we think we can have the biggest positive impact on users and web developers.</p>
<h3>New Focus Areas</h3>
<p>New focus areas for 2024 include, among other things:</p>
<ul>
<li aria-level="1"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a> – This provides a declarative mechanism to create content that always renders in the topmost-layer, so that it overlays other web page content. This can be useful for building features like tooltips and notifications. Support for popover was the #1 author request in the recent State of HTML survey.</li>
<li aria-level="1"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting">CSS Nesting</a> – This is a feature that’s already shipping, which allows writing more compact and readable CSS files, without the need for external tooling such as preprocessors. However different browsers shipped slightly different behavior based on different revisions of the spec, and Interop will help ensure that everyone aligns on a single, reliable, syntax for this popular feature.</li>
<li aria-level="1">Accessibility – Ensuring that the web is accessible to all users is a critical part of <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla’s manifesto</a>. Our ability to include Accessibility testing in Interop 2024 is a direct result of the success of the Interop 2023 Accessibility Investigation in increasing the test coverage of key accessibility features.</li>
</ul>
<p>The full list of focus areas is available in the <a href="https://github.com/web-platform-tests/interop/blob/main/2024/README.md">project README</a>.</p>
<h3>Carryover</h3>
<p>In addition to the new focus areas, we will carry over some of the 2023 focus areas where there’s still more work to be done. Of particular interest is the Layout focus area, which will combine the previous <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid">Grid</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid">Subgrid</a> focus area into one area covering all the most important layout primitives for the modern web. On top of that the Custom Properties, URL and Mouse and Pointer Events focus areas will be carried over. These represent cases where, even though we’ve already seen large improvements in Interoperability, we believe that users and web authors will benefit from even greater convergence between implementations.</p>
<h3>Investigations</h3>
<p>As well as focus areas, Interop 2024 will also feature a new investigation into improving the integration of WebAssembly testing into web-platform-tests. This will open up the possibility of including WASM features in future Interop projects. In addition we will extend the Accessibility and Mobile Testing investigations, as there is more work to be done to make those aspects of the platform fully testable across different implementations.</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>

+ 34
- 0
cache/2024/0deb984b2f799d391607afcaa488446d/index.md View File

@@ -0,0 +1,34 @@
title: Announcing Interop 2024
url: https://hacks.mozilla.org/2024/02/announcing-interop-2024/
hash_url: 0deb984b2f799d391607afcaa488446d
archive_date: 2024-02-03
og_image: https://hacks.mozilla.org/files/2024/02/Screenshot-2024-02-01-at-15.29.02.png
description: Following the success of Interop 2023, we are pleased to confirm that the project will continue in 2024 with a new selection of focus areas.
favicon: https://hacks.mozilla.org/wp-content/themes/Hax/favicon.ico
language: en_US

<p>The <a href="https://github.com/web-platform-tests/interop#the-interop-project">Interop Project</a> has become one of the key ways that browser vendors come together to improve the web platform. By working to identify and improve key areas where differences between browser engines are impacting users and web developers, Interop is a critical tool in ensuring the long-term health of the open web.</p>
<p>The web platform is built on interoperability based on common standards. This offers users a degree of choice and control that sets the web apart from proprietary platforms defined by a single implementation. A commitment to ensuring that the web remains open and interoperable forms a fundamental part of Mozilla’s <a href="https://www.mozilla.org/about/manifesto/">manifesto</a> and <a href="https://www.mozilla.org/en-US/about/webvision/">web vision</a>, and is why we’re so committed to shipping Firefox with our own <a href="https://en.wikipedia.org/wiki/Gecko_(software)">Gecko</a> engine.</p>
<p>However interoperability requires care and attention to maintain. When implementations ship with differences between the standard and each other, this creates a <a href="https://2023.stateofcss.com/en-US/usage/#css_pain_points">pain point</a> for web authors; they have to choose between avoiding the problematic feature entirely and coding to specific implementation quirks. Over time if enough authors produce implementation-specific content then interoperability is lost, and along with it user agency.</p>
<p>This is the problem that the Interop Project is designed to address. By bringing browser vendors together to focus on interoperability, the project allows identifying areas where interoperability issues are causing problems, or may do in the near future. Tracking progress on those issues with a public metric provides accountability to the broader web community on addressing the problems.</p>
<p>The project works by identifying a set of high-priority focus areas: parts of the web platform where everyone agrees that making interoperability improvements will be of high value. These can be existing features where we know browsers have slightly different behaviors that are causing problems for authors, or they can be new features which web developer feedback shows is in high demand and which we want to launch across multiple implementations with high interoperability from the start. For each focus area a set of web-platform-tests is selected to cover that area, and the score is computed from the pass rate of these tests.</p>
<h2>Interop 2023</h2>
<p>The <a href="https://hacks.mozilla.org/2023/02/announcing-interop-2023/">Interop 2023</a> project covered high profile features like the new :has() selector, and web-codecs, as well as areas of historically poor interoperability such as pointer events.</p>
<p><img decoding="async" fetchpriority="high" class="alignnone size-large wp-image-48086" src="https://hacks.mozilla.org/files/2024/01/Interop-2023-500x407.png" alt="" srcset="https://hacks.mozilla.org/files/2024/01/Interop-2023-500x407.png 500w, https://hacks.mozilla.org/files/2024/01/Interop-2023-250x204.png 250w, https://hacks.mozilla.org/files/2024/01/Interop-2023.png 767w" sizes="(max-width: 500px) 100vw, 500px"></p>
<p>The <a href="https://wpt.fyi/interop-2023">results</a> of the project speak for themselves: every browser ended the year with scores in excess of 97% for the prerelease versions of their browsers. Moreover, the overall Interoperability score — that is the fraction of focus area tests that pass in all participating browser engines — increased from 59% at the start of the year to 95% now. This result represents a huge improvement in the consistency and reliability of the web platform. For users this will result in a more seamless experience, with sites behaving reliably in whichever browser they prefer.</p>
<p>For the :has() selector — which we know from author feedback has been one of the most in-demand CSS features for a long time — every implementation is <a href="https://wpt.fyi/results/css/selectors?label=experimental&amp;label=master&amp;product=chrome&amp;product=firefox&amp;product=safari&amp;aligned&amp;view=interop&amp;q=label%3Ainterop-2023-has">now passing 100%</a> of the web-platform-tests selected for the focus area. Launching a major new platform feature with this level of interoperability demonstrates the power of the Interop project to progress the platform without compromising on implementation diversity, developer experience, or user choice.</p>
<p>As well as focus areas, the Interop project also has “investigations”. These are areas where we know that we need to improve interoperability, but aren’t at the stage of having specific tests which can be used to measure that improvement. In 2023 we had two investigations. The first was for accessibility, which covered writing many more tests for ARIA <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">computed role</a> and <a href="https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name">accessible name</a>, and ensuring they could be run in different browsers. The second was for mobile testing, which has resulted in both Mobile Firefox and Chrome for Android having their initial <a href="https://wpt.fyi/runs?label=master&amp;from=2024-01-10T00%3A00&amp;product=firefox_android&amp;product=chrome_android">results in wpt.fyi</a>.</p>
<h2>Interop 2024</h2>
<p>Following the success of Interop 2023, we are pleased to confirm that the project will continue in 2024 with a new selection of focus areas, representing areas of the web platform where we think we can have the biggest positive impact on users and web developers.</p>
<h3>New Focus Areas</h3>
<p>New focus areas for 2024 include, among other things:</p>
<ul>
<li aria-level="1"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a> – This provides a declarative mechanism to create content that always renders in the topmost-layer, so that it overlays other web page content. This can be useful for building features like tooltips and notifications. Support for popover was the #1 author request in the recent State of HTML survey.</li>
<li aria-level="1"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting">CSS Nesting</a> – This is a feature that’s already shipping, which allows writing more compact and readable CSS files, without the need for external tooling such as preprocessors. However different browsers shipped slightly different behavior based on different revisions of the spec, and Interop will help ensure that everyone aligns on a single, reliable, syntax for this popular feature.</li>
<li aria-level="1">Accessibility – Ensuring that the web is accessible to all users is a critical part of <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla’s manifesto</a>. Our ability to include Accessibility testing in Interop 2024 is a direct result of the success of the Interop 2023 Accessibility Investigation in increasing the test coverage of key accessibility features.</li>
</ul>
<p>The full list of focus areas is available in the <a href="https://github.com/web-platform-tests/interop/blob/main/2024/README.md">project README</a>.</p>
<h3>Carryover</h3>
<p>In addition to the new focus areas, we will carry over some of the 2023 focus areas where there’s still more work to be done. Of particular interest is the Layout focus area, which will combine the previous <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid">Grid</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid">Subgrid</a> focus area into one area covering all the most important layout primitives for the modern web. On top of that the Custom Properties, URL and Mouse and Pointer Events focus areas will be carried over. These represent cases where, even though we’ve already seen large improvements in Interoperability, we believe that users and web authors will benefit from even greater convergence between implementations.</p>
<h3>Investigations</h3>
<p>As well as focus areas, Interop 2024 will also feature a new investigation into improving the integration of WebAssembly testing into web-platform-tests. This will open up the possibility of including WASM features in future Interop projects. In addition we will extend the Accessibility and Mobile Testing investigations, as there is more work to be done to make those aspects of the platform fully testable across different implementations.</p>

+ 2
- 2
cache/2024/291cddda62f18ec9355ec98761b7e9d9/index.md View File

@@ -4,7 +4,7 @@ hash_url: 291cddda62f18ec9355ec98761b7e9d9
archive_date: 2024-01-21
og_image: https://ia.net/wp-content/uploads/2023/11/keep-it-real-writing-with-AI-1024x475.png
description: When ChatGPT came out one year ago, we wanted to know whether and how it could be used for writing. We put it to the test.
favicon: https://ia.net/wp-content/themes/iA-library/assets/hotlink-ok/favicon-192x192.png
favicon: https://ia.net/wp-content/themes/iA-library/assets/favicons/favicon.ico
language: en_US

<p>When ChatGPT came out one year ago, we wanted to know whether and how it could be used for writing. We put it to the test and came up with a careful answer.</p>
@@ -126,4 +126,4 @@ language: en_US
<li>How do we make human and artificial text discernible as we write without adding a lot of methodical, technical and graphical complexity?</li>
</ul>
<p>At first we thought that we should simply quote AI like we quote other authors. <em>Maybe we could use single straight quotes for AI text, or something like that.</em> But we soon found out that markup doesn’t work at all. Quoting AI is not the same as quoting people. When we use artificial text, we don’t necessarily quote entire sentences or paragraphs. What happens is nitty-gritty patchwork. And ideally, in the end we edit all AI away. How should that work? This is a riddle we had to solve in design and code. Stay tuned to see our solution.</p>
<p><em>This article is part two of a series about the <a href="https://ia.net/topics/no-feature">history</a>, reason, and the <a href="https://ia.net/topics/ia-writer-7">design</a> of iA Writer 7, our cautious response to AI.</em></p>
<p><em>This article is part two of a series about the <a href="https://ia.net/topics/no-feature">history</a>, reason, and the <a href="https://ia.net/topics/ia-writer-7">design</a> of iA Writer 7, our cautious response to AI.</em></p>

+ 359
- 0
cache/2024/71b177818657a209fc76f23c08c21d25/index.html View File

@@ -0,0 +1,359 @@
<!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>Dude, you broke the future! (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://www.antipope.org/charlie/blog-static/2018/01/dude-you-broke-the-future.html">

<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>Dude, you broke the future!</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://www.antipope.org/charlie/blog-static/2018/01/dude-you-broke-the-future.html" title="Lien vers le contenu original">Source originale</a>
<br>
Mis en cache le 2024-02-03
</p>
</nav>
<hr>
<p><em>Abstract: We're living in yesterday's future, and it's nothing like the speculations of our authors and film/TV producers. As a working science fiction novelist, I take a professional interest in how we get predictions about the future wrong, and why, so that I can avoid repeating the same mistakes. Science fiction is written by people embedded within a society with expectations and political assumptions that bias us towards looking at the shiny surface of new technologies rather than asking how human beings will use them, and to taking narratives of progress at face value rather than asking what hidden agenda they serve.</em></p>

<p><em>In this talk, author Charles Stross will give a rambling, discursive, and angry tour of what went wrong with the 21st century, why we didn't see it coming, where we can expect it to go next, and a few suggestions for what to do about it if we don't like it. </em></p>

<hr />
<p>Good morning. I'm Charlie Stross, and it's my job to tell lies for money. Or rather, I write science fiction, much of it about our near future, which has in recent years become ridiculously hard to predict. </p>

<p>Our species, Homo Sapiens Sapiens, is <a href="https://www.nytimes.com/2017/06/07/science/human-fossils-morocco.html">roughly three hundred thousand years old</a>. (Recent discoveries pushed back the date of our earliest remains that far, we may be even older.) For all but the last three centuries of that span, predicting the future was easy: natural disasters aside, everyday life in fifty years time would resemble everyday life fifty years ago. </p>

<p>Let that sink in for a moment: for 99.9% of human existence, the future was static. Then <em>something</em> happened, and the future began to change, increasingly rapidly, until we get to the present day when things are moving so fast that it's barely possible to anticipate trends from month to month.</p>

<p>As an eminent computer scientist once remarked, computer science is no more about computers than astronomy is about building telescopes. The same can be said of my field of work, written science fiction. Scifi is seldom about science—and even more rarely about predicting the future. But sometimes we dabble in futurism, and lately it's gotten very difficult.</p>

<h2>How to predict the near future</h2>

<p>When I write a near-future work of fiction, one set, say, a decade hence, there used to be a recipe that worked eerily well. Simply put, 90% of the next decade's stuff is already here today. Buildings are designed to last many years. Automobiles have a design life of about a decade, so half the cars on the road will probably still be around in 2027. People ... there will be new faces, aged ten and under, and some older people will have died, but most adults will still be around, albeit older and grayer. This is the 90% of the near future that's already here.</p>

<p>After the already-here 90%, another 9% of the future a decade hence used to be easily predictable. You look at trends dictated by physical limits, such as Moore's Law, and you look at Intel's road map, and you use a bit of creative extrapolation, and you won't go too far wrong. If I predict that in 2027 LTE cellular phones will be everywhere, 5G will be available for high bandwidth applications, and fallback to satellite data service will be available at a price, you won't laugh at me. It's not like I'm predicting that airliners will fly slower and Nazis will take over the United States, is it?</p>

<p>And therein lies the problem: it's the 1% of unknown unknowns that throws off all calculations. As it happens, airliners today <em>are</em> slower than they were in the 1970s, and don't get me started about Nazis. Nobody in 2007 was expecting a Nazi revival in 2017, right? (Only this time round Germans get to be the good guys.)</p>

<p>My recipe for fiction set ten years in the future used to be 90% already-here, 9% not-here-yet but predictable, and 1% who-ordered-<em>that</em>. But unfortunately the ratios have changed. I think we're now down to maybe 80% already-here—climate change takes a huge toll on infrastructure—then 15% not-here-yet but predictable, and a whopping 5% of utterly unpredictable deep craziness.</p>

<p><strong>Ruling out the singularity</strong></p>

<p>Some of you might assume that, as the author of books like "Singularity Sky" and "Accelerando", I attribute this to an impending technological singularity, to our development of self-improving artificial intelligence and mind uploading and the whole wish-list of transhumanist aspirations promoted by the likes of Ray Kurzweil. Unfortunately this isn't the case. I think transhumanism is a warmed-over Christian heresy. While its adherents tend to be vehement atheists, they can't quite escape from the history that gave rise to our current western civilization. Many of you are familiar with design patterns, an approach to software engineering that focusses on abstraction and simplification in order to promote reusable code. When you look at the AI singularity as a narrative, and identify the numerous places in the story where the phrase "... and then a miracle happens" occurs, it becomes apparent pretty quickly that they've reinvented Christianity. </p>

<p>Indeed, the wellsprings of today's transhumanists draw on a long, rich history of <a href="https://en.wikipedia.org/wiki/Russian_cosmism">Russian Cosmist philosophy</a> exemplified by the Russian Orthodox theologian <a href="https://en.wikipedia.org/wiki/Nikolai_Fyodorovich_Fyodorov">Nikolai Fyodorvitch Federov</a>, by way of his disciple <a href="https://en.wikipedia.org/wiki/Konstantin_Tsiolkovsky">Konstantin Tsiolkovsky</a>, whose derivation of the rocket equation makes him essentially the father of modern spaceflight. And once you start probing the nether regions of transhumanist thought and run into concepts like <a href="https://rationalwiki.org/wiki/Roko%27s_basilisk">Roko's Basilisk</a>—by the way, any of you who didn't know about the Basilisk before are now doomed to an eternity in AI hell—you realize they've mangled it to match some of the nastiest ideas in Presybterian Protestantism.</p>

<p>If it walks like a duck and quacks like a duck, it's probably a duck. And if it looks like a religion it's probably a religion. I don't see much evidence for human-like, self-directed artificial intelligences coming along any time now, and a fair bit of evidence that nobody except some freaks in university cognitive science departments even want it. What we're getting, instead, is self-optimizing tools that defy human comprehension but are not, in fact, any more like our kind of intelligence than a Boeing 737 is like a seagull. So I'm going to wash my hands of the singularity as an explanatory model without further ado—I'm one of those vehement atheists too—and try and come up with a better model for what's happening to us.</p>

<h2>Towards a better model for the future</h2>

<p>As my fellow SF author Ken MacLeod likes to say, the secret weapon of science fiction is history. History, loosely speaking, is the written record of what and how people did things in past times—times that have slipped out of our personal memories. We science fiction writers tend to treat history as a giant toy chest to raid whenever we feel like telling a story. With a little bit of history it's really easy to whip up an entertaining yarn about a galactic empire that mirrors the development and decline of the Hapsburg Empire, or to re-spin the October Revolution as a tale of how Mars got its independence. </p>

<p>But history is useful for so much more than that.</p>

<p>It turns out that our personal memories don't span very much time at all. I'm 53, and I barely remember the 1960s. I only remember the 1970s with the eyes of a 6-16 year old. My father, who died last year aged 93, just about remembered the 1930s. Only those of my father's generation are able to directly remember the great depression and compare it to the 2007/08 global financial crisis directly. But westerners tend to pay little attention to cautionary tales told by ninety-somethings. We modern, change-obsessed humans tend to repeat our biggest social mistakes when they slip out of living memory, which means they recur on a time scale of seventy to a hundred years. </p>

<p>So if our personal memories are usless, it's time for us to look for a better cognitive toolkit.</p>

<p>History gives us the perspective to see what went wrong in the past, and to look for patterns, and check whether those patterns apply to the present and near future. And looking in particular at the history of the past 200-400 years—the age of increasingly rapid change—one glaringly obvious deviation from the norm of the preceding three thousand centuries—is the development of Artificial Intelligence, which happened <a href="https://en.wikipedia.org/wiki/Corporation#History">no earlier than 1553 and no later than 1844</a>. </p>

<p>I'm talking about the very old, very slow AIs we call corporations, of course. What lessons from the history of the company can we draw that tell us about the likely behaviour of the type of artificial intelligence we are all interested in today?</p>

<p><strong>Old, slow AI</strong></p>

<p>Let me crib from Wikipedia for a moment:</p>

<p>In the late 18th century, <a href="https://en.wikipedia.org/wiki/Stewart_Kyd">Stewart Kyd</a>, the author of the first treatise on corporate law in English, defined a corporation as:</p>

<blockquote>
<p>a collection of many individuals united into one body, under a special denomination, having perpetual succession under an artificial form, and vested, by policy of the law, with the capacity of acting, in several respects, as an individual, particularly of taking and granting property, of contracting obligations, and of suing and being sued, of enjoying privileges and immunities in common, and of exercising a variety of political rights, more or less extensive, according to the design of its institution, or the powers conferred upon it, either at the time of its creation, or at any subsequent period of its existence.</p>
</blockquote>

<p>—A Treatise on the Law of Corporations, Stewart Kyd (1793-1794)</p>

<p>In 1844, the British government passed the Joint Stock Companies Act, which created a register of companies and allowed any legal person, for a fee, to register a company, which existed as a separate legal person. Subsequently, the law was extended to limit the liability of individual shareholders in event of business failure, and both Germany and the United States added their own unique extensions to what we see today as the doctrine of corporate personhood.</p>

<p>(Of course, there were plenty of other things happening between the sixteenth and twenty-first centuries that changed the shape of the world we live in. I've skipped changes in agricultural productivity due to energy economics, which finally broke the Malthusian trap our predecessors lived in. This in turn broke the long term cap on economic growth of around 0.1% per year in the absence of famine, plagues, and wars depopulating territories and making way for colonial invaders. I've skipped the germ theory of diseases, and the development of trade empires in the age of sail and gunpowder that were made possible by advances in accurate time-measurement. I've skipped the rise and—hopefully—decline of the pernicious theory of scientific racism that underpinned western colonialism and the slave trade. I've skipped the rise of feminism, the ideological position that women are human beings rather than property, and the decline of patriarchy. I've skipped the whole of the Enlightenment and the age of revolutions! But this is a technocentric congress, so I want to frame this talk in terms of AI, which we all like to think we understand.)</p>

<p>Here's the thing about corporations: they're clearly artificial, but legally they're people. They have goals, and operate in pursuit of these goals. And they have a natural life cycle. In the 1950s, a typical US corporation on the S&amp;P 500 index had a lifespan of 60 years, but today it's down to <a href="https://uk.finance.yahoo.com/news/technology-killing-off-corporate-america-173100680.html">less than 20 years</a>.</p>

<p>Corporations are cannibals; they consume one another. They are also hive superorganisms, like bees or ants. For their first century and a half they relied entirely on human employees for their internal operation, although they are automating their business processes increasingly rapidly this century. Each human is only retained so long as they can perform their assigned tasks, and can be replaced with another human, much as the cells in our own bodies are functionally interchangeable (and a group of cells can, in extremis, often be replaced by a prosthesis). To some extent corporations can be trained to service the personal desires of their chief executives, but even CEOs can be dispensed with if their activities damage the corporation, as Harvey Weinstein found out a couple of months ago.</p>

<p>Finally, our legal environment today has been tailored for the convenience of corporate persons, rather than human persons, to the point where our governments now mimic corporations in many of their internal structures.</p>

<p><strong>What do AIs want?</strong></p>

<p>What do our current, actually-existing AI overlords <em>want</em>?</p>

<p>Elon Musk—who I believe you have all heard of—has an obsessive fear of one particular hazard of artificial intelligence—which he conceives of as being <a href="(https://www.thenational.ae/arts-culture/mark-zuckerberg-and-elon-musk-s-debate-over-artificial-intelligence-will-robots-go-rogue-1.616530">a piece of software that functions like a brain-in-a-box</a>)—namely, the <a href="https://wiki.lesswrong.com/wiki/Paperclip_maximizer">paperclip maximizer</a>. A paperclip maximizer is a term of art for a goal-seeking AI that has a single priority, for example maximizing the number of paperclips in the universe. The paperclip maximizer is able to improve itself in pursuit of that goal but has no ability to vary its goal, so it will ultimately attempt to convert all the metallic elements in the solar system into paperclips, even if this is obviously detrimental to the wellbeing of the humans who designed it.</p>

<p>Unfortunately, Musk isn't paying enough attention. Consider his own companies. <a href="https://en.wikipedia.org/wiki/Gigafactory_1">Tesla is a battery maximizer</a>—an electric car is a battery with wheels and seats. SpaceX is an orbital payload maximizer, driving down the cost of space launches in order to encourage more sales for the service it provides. Solar City is a photovoltaic panel maximizer. And so on. All three of Musk's very own slow AIs are based on an architecture that is designed to maximize return on shareholder investment, even if by doing so they cook the planet the shareholders have to live on. (But if you're Elon Musk, that's okay: you plan to retire on Mars.)</p>

<p>The problem with corporations is that despite their overt goals—whether they make electric vehicles or beer or sell life insurance policies—they are all subject to <a href="https://wiki.lesswrong.com/wiki/Paperclip_maximizer">instrumental convergence</a> insofar as they all have a common implicit paperclip-maximizer goal: to generate revenue. If they don't make money, they are eaten by a bigger predator or they go bust. Making money is an <em>instrumental goal</em>—it's as vital to them as breathing is for us mammals, and without pursuing it they will fail to achieve their final goal, whatever it may be. Corporations generally pursue their instrumental goals—notably maximizing revenue—as a side-effect of the pursuit of their overt goal. But sometimes they try instead to manipulate the regulatory environment they operate in, to ensure that money flows towards them regardless.</p>

<p>Human tool-making culture has become increasingly complicated over time. New technologies always come with an implicit political agenda that seeks to extend its use, governments react by legislating to control the technologies, and sometimes we end up with industries indulging in legal duels. </p>

<p>For example, consider the automobile. You can't have mass automobile transport without gas stations and fuel distribution pipelines. These in turn require access to whoever owns the land the oil is extracted from—and before you know it, you end up with a permanent occupation force in Iraq and a client dictatorship in Saudi Arabia. Closer to home, automobiles imply jaywalking laws and drink-driving laws. They affect town planning regulations and encourage suburban sprawl, the construction of human infrastructure on the scale required by automobiles, not pedestrians. This in turn is bad for competing transport technologies like buses or trams (which work best in cities with a high population density). </p>

<p>To get these laws in place, providing an environment conducive to doing business, corporations spend money on political lobbyists—and, when they can get away with it, on bribes. Bribery need not be blatant, of course. For example, the reforms of the British railway network in the 1960s <a href="https://en.wikipedia.org/wiki/Beeching_cuts">dismembered many branch services</a> and coincided with a surge in road building and automobile sales. These reforms were orchestrated by <a href="https://en.wikipedia.org/wiki/Ernest_Marples">Transport Minister Ernest Marples</a>, who was purely a politician. However, Marples accumulated a considerable personal fortune during this time by owning shares in <a href="https://en.wikipedia.org/wiki/Marples_Ridgway">a motorway construction corporation</a>. (So, no conflict of interest there!) </p>

<p>The automobile industry in isolation isn't a pure paperclip maximizer. But if you look at it in conjunction with the fossil fuel industries, the road-construction industry, the accident insurance industry, and so on, you begin to see the outline of a paperclip maximizing <em>ecosystem</em> that invades far-flung lands and grinds up and <a href="http://www.who.int/gho/road_safety/mortality/en/">kills around one and a quarter million people per year</a>—that's the global death toll from automobile accidents according to the world health organization: it rivals the first world war on an ongoing basis—as side-effects of its drive to sell you a new car.</p>

<p>Automobiles are not, of course, a total liability. Today's cars are <a href="https://en.wikipedia.org/wiki/Automobile_safety">regulated stringently for safety</a> and, in theory, to reduce toxic emissions: they're fast, efficient, and comfortable. We can thank legally mandated regulations for this, of course. Go back to the 1970s and cars didn't have crumple zones. Go back to the 1950s and cars didn't come with seat belts as standard. In the 1930s, indicators—turn signals—and brakes on all four wheels were optional, and your best hope of surviving a 50km/h crash was to be thrown clear of the car and land somewhere without breaking your neck. Regulatory agencies are our current political systems' tool of choice for preventing paperclip maximizers from running amok. But unfortunately they don't always work.</p>

<p>One failure mode that you should be aware of is <a href="https://en.wikipedia.org/wiki/Regulatory_capture">regulatory capture</a>, where regulatory bodies are captured by the industries they control. <a href="https://en.wikipedia.org/wiki/Ajit_Pai">Ajit Pai</a>, head of the American Federal Communications Commission who just voted to eliminate net neutrality rules, has worked as Associate General Counsel for Verizon Communications Inc, the largest current descendant of the Bell telephone system monopoly. Why should someone with a transparent interest in a technology corporation end up in charge of a regulator for the industry that corporation operates within? Well, if you're going to regulate a highly complex technology, you need to recruit your regulators from among those people who understand it. And unfortunately most of those people are industry insiders. Ajit Pai is clearly very much aware of how Verizon is regulated, and <a href="https://www.washingtonpost.com/news/made-by-history/wp/2017/11/27/what-fcc-chair-ajit-pai-gets-wrong-about-net-neutrality/">wants to do something about it</a>—just not necessarily in the public interest. When regulators end up staffed by people drawn from the industries they are supposed to control, they frequently end up working with their former officemates to make it easier to turn a profit, either by raising barriers to keep new insurgent companies out, or by dismantling safeguards that protect the public.</p>

<p>Another failure mode is regulatory lag, when a technology advances so rapidly that regulations are laughably obsolete by the time they're issued. Consider the <a href="https://en.wikipedia.org/wiki/Privacy_and_Electronic_Communications_Directive_2002">EU directive requiring cookie notices on websites</a>, to caution users that their activities were tracked and their privacy might be violated. This would have been a good idea, had it shown up in 1993 or 1996, but unfortunately it didn't show up until 2011, by which time the web was vastly more complex. Fingerprinting and tracking mechanisms that had nothing to do with cookies were already widespread by then. Tim Berners-Lee observed in 1995 that five years' worth of change was happening on the web for every twelve months of real-world time; by that yardstick, the cookie law came out nearly a century too late to do any good. </p>

<p>Again, look at Uber. This month the European Court of Justice ruled that <a href="https://www.theguardian.com/technology/2017/dec/20/uber-european-court-of-justice-ruling-barcelona-taxi-drivers-ecj-eu">Uber is a taxi service</a>, not just a web app. This is arguably correct; the problem is, Uber has spread globally since it was founded eight years ago, subsidizing its drivers to put competing private hire firms out of business. Whether this is a net good for society is arguable; the problem is, a taxi driver can get awfully hungry if she has to wait eight years for a court ruling against a predator intent on disrupting her life.</p>

<p>So, to recap: firstly, we already have paperclip maximizers (and Musk's AI alarmism is curiously mirror-blind). Secondly, we have mechanisms for keeping them in check, but they don't work well against <a href="https://en.wikipedia.org/wiki/Greyball">AIs that deploy the dark arts</a>—especially corruption and bribery—and they're even worse againt true AIs that evolve too fast for human-mediated mechanisms like the Law to keep up with. Finally, unlike the naive vision of a paperclip maximizer, existing AIs have multiple agendas—their overt goal, but also profit-seeking, and expansion into new areas, and to accomodate the desires of whoever is currently in the driver's seat.</p>

<p><strong>How it all went wrong</strong></p>

<p>It seems to me that our current political upheavals are best understood as arising from the capture of post-1917 democratic institutions by large-scale AIs. Everywhere I look I see voters protesting angrily against an entrenched establishment that seems determined to ignore the wants and needs of their human voters in favour of the machines. The Brexit upset was largely the result of a protest vote against the British political establishment; the election of Donald Trump likewise, with a side-order of racism on top. Our major political parties are led by people who are compatible with the system as it exists—a system that has been shaped over decades by corporations distorting our government and regulatory environments. We humans are living in a world shaped by the desires and needs of AIs, forced to live on their terms, and we are taught that we are valuable only insofar as we contribute to the rule of the machines.</p>

<p>Now, this is CCC, and we're all more interested in computers and communications technology than this historical crap. But as I said earlier, history is a secret weapon if you know how to use it. What history is good for is enabling us to spot recurring patterns in human behaviour that repeat across time scales outside our personal experience—decades or centuries apart. If we look at our historical very slow AIs, what lessons can we learn from them about modern AI—the flash flood of unprecedented deep learning and big data technologies that have overtaken us in the past decade? </p>

<p>We made a fundamentally flawed, terrible design decision back in 1995, that has damaged democratic political processes, crippled our ability to truly understand the world around us, and led to the angry upheavals of the present decade. That mistake was to fund the build-out of the public world wide web—as opposed to the earlier, government-funded corporate and academic internet—by monetizing eyeballs via advertising revenue. </p>

<p>(<strong>Note</strong>: Cory Doctorow <a href="https://boingboing.net/2017/12/29/llcs-are-slow-ais.html">has a contrarian thesis</a>: <em>The dotcom boom was also an economic bubble because the dotcoms came of age at a tipping point in financial deregulation, the point at which the Reagan-Clinton-Bush reforms that took the Depression-era brakes off financialization were really picking up steam. That meant that the tech industry's heady pace of development was the first testbed for treating corporate growth as the greatest virtue, built on the lie of the fiduciary duty to increase profit above all other considerations.</em> I think he's entirely right about this, <em>but</em> it's a bit of a chicken-and-egg argument: we wouldn't have had a commercial web in the first place without a permissive, deregulated financial environment. My memory of working in the dot-com 1.0 bubble is that, outside of a couple of specific environments (the Silicon Valley area and the Boston-Cambridge corridor) venture capital was hard to find until late 1998 or thereabouts: the bubble's initial inflation was demand-driven rather than capital-driven, as the non-tech investment sector was late to the party. Caveat: I didn't win the lottery, so what do <em>I</em> know?)</p>

<p>The ad-supported web that we live with today wasn't inevitable. If you recall the web as it was in 1994, there were very few ads at all, and not much in the way of commerce. (What ads there were were mostly spam, on usenet and via email.) 1995 was the year the world wide web really came to public attention in the anglophone world and consumer-facing websites began to appear. Nobody really knew how this thing was going to be paid for (the original dot com bubble was <s>all</s> largely about working out how to monetize the web for the first time, and a lot of people lost their shirts in the process). And the naive initial assumption was that the transaction cost of setting up a TCP/IP connection over modem was too high to be supported by per-use microbilling, so we would bill customers indirectly, by shoving advertising banners in front of their eyes and hoping they'd click through and buy something.</p>

<p>Unfortunately, advertising is an industry. Which is to say, it's the product of one of those old-fashioned very slow AIs I've been talking about. Advertising tries to maximize its hold on the attention of the minds behind each human eyeball: the coupling of advertising with web search was an inevitable outgrowth. (How better to attract the attention of reluctant subjects than to find out what they're <em>really</em> interested in seeing, and sell ads that relate to those interests?) </p>

<p>The problem with applying the paperclip maximizer approach to monopolizing eyeballs, however, is that eyeballs are a scarce resource. There are only 168 hours in every week in which I can gaze at banner ads. Moreover, most ads are irrelevant to my interests and it doesn't matter how often you flash an ad for dog biscuits at me, I'm never going to buy any. (I'm a cat person.) To make best revenue-generating use of our eyeballs, it is necessary for the ad industry to learn who we are and what interests us, and to target us increasingly minutely in hope of hooking us with stuff we're attracted to.</p>

<p>At this point in a talk I'd usually go into an impassioned rant about the hideous corruption and evil of Facebook, but I'm guessing you've heard it all before so I won't bother. The too-long-didn't-read summary is, Facebook is as much a search engine as Google or Amazon. Facebook searches are optimized for Faces, that is, for human beings. If you want to find someone you fell out of touch with thirty years ago, Facebook probably knows where they live, what their favourite colour is, what size shoes they wear, and what they said about you to your friends all those years ago that made you cut them off. </p>

<p><a href="https://www.theguardian.com/technology/2015/apr/10/facebook-admits-it-tracks-non-users-but-denies-claims-it-breaches-eu-privacy-law">Even if you don't have a Facebook account, Facebook has a You account</a>—a hole in their social graph with a bunch of connections pointing into it and your name tagged on your friends' photographs. They know a lot about you, and they sell access to their social graph to advertisers who then target you, even if you don't think you use Facebook. Indeed, there's barely any point in <em>not</em> using Facebook these days: they're the social media Borg, resistance is futile. </p>

<p>However, Facebook is trying to get eyeballs on ads, as is Twitter, as is Google. To do this, they fine-tune the content they show you to make it more attractive to your eyes—and by 'attractive' I do not mean pleasant. We humans have an evolved automatic reflex to pay attention to threats and horrors as well as pleasurable stimuli: consider the way highway traffic always slows to a crawl as it is funnelled past an accident site. The algorithms that determine what to show us when we look at Facebook or Twitter take this bias into account. You might react more strongly to a public hanging in Iran than to a couple kissing: the algorithm knows, and will show you whatever makes you pay attention.</p>

<p>This brings me to another interesting point about computerized AI, as opposed to corporatized AI: AI algorithms tend to embody the prejudices and beliefs of the programmers. A couple of years ago I ran across an account of a webcam developed by mostly-pale-skinned silicon valley engineers that <a href="http://edition.cnn.com/2009/TECH/12/22/hp.webcams/index.html">have difficulty focusing or achieving correct colour balance when pointing at dark-skinned faces</a>. That's an example of human-programmer-induced bias. But with today's deep learning, bias can creep in via the data sets the neural networks are trained on. Microsoft's first foray into a conversational chatbot driven by machine learning, Tay, was yanked offline within days because when 4chan and Reddit based trolls discovered they could <a href="https://www.theguardian.com/technology/2016/mar/24/tay-microsofts-ai-chatbot-gets-a-crash-course-in-racism-from-twitter">train it towards racism and sexism</a> for shits and giggles. </p>

<p>Humans may be biased, but at least we're accountable and if someone gives you racist or sexist abuse to your face you can complain (or punch them). But it's impossible to punch a corporation, and it may not even be possible to identify the source of unfair bias when you're dealing with a machine learning system.</p>

<p>AI-based systems that concretize existing prejudices and social outlooks make it harder for activists like us to achieve social change. Traditional advertising works by playing on the target customer's insecurity and fear as much as on their aspirations, which in turn play on the target's relationship with their surrounding cultural matrix. Fear of loss of social status and privilege is a powerful stimulus, and fear and xenophobia are useful tools for attracting eyeballs.</p>

<p>What happens when we get pervasive social networks with learned biases against, say, feminism or Islam or melanin? Or deep learning systems trained on data sets contaminated by racist dipshits? Deep learning systems like the ones inside Facebook that <a href="http://www.slate.com/articles/technology/cover_story/2016/01/how_facebook_s_news_feed_algorithm_works.html">determine which stories to show you</a> to get you to pay as much attention as possible to the adverts?</p>

<p>I think you already know the answer to that.</p>

<p><strong>Look to the future (it's bleak!)</strong></p>

<p>Now, if this is sounding a bit bleak and unpleasant, you'd be right. I write sci-fi, you read or watch or play sci-fi; we're acculturated to think of science and technology as good things, that make our lives better. </p>

<p>But plenty of technologies have, historically, been heavily regulated or even criminalized for good reason, and once you get past the reflexive indignation at any criticism of technology and progress, you might agree that it is reasonable to ban individuals from owning nuclear weapons or nerve gas. Less obviously: they may not be weapons, but we've banned chlorofluorocarbon refrigerants because they were building up in the high stratosphere and destroying the ozone layer that protects us from UV-B radiation. And we banned <a href="https://en.wikipedia.org/wiki/Tetraethyllead">tetraethyl lead additive in gasoline</a>, because it poisoned people and <a href="https://en.wikipedia.org/wiki/Lead-crime_hypothesis">led to a crime wave</a>.</p>

<p>Nerve gas and leaded gasoline were 1930s technologies, promoted by 1930s corporations. Halogenated refrigerants and nuclear weapons are totally 1940s, and intercontinental ballistic missiles date to the 1950s. I submit that the 21st century is throwing up dangerous new technologies—just as our existing strategies for regulating very slow AIs have broken down.</p>

<p>Let me give you four examples—of new types of AI applications—that are going to warp our societies even worse than the old slow AIs of yore have done. This isn't an exhaustive list: these are just examples. We need to work out a general strategy for getting on top of this sort of AI before they get on top of us.</p>

<p>(Note that I do <strong>not</strong> have a solution to the regulatory problems I highlighted earlier, in the context of AI. This essay is polemical, intended to highlight the existence of a problem and spark a discussion, rather than a canned solution. After all, if the problem was easy to solve it wouldn't be a problem, would it?)</p>

<p>Firstly, Political hacking tools: social graph-directed propaganda</p>

<p>Topping my list of dangerous technologies that need to be regulated, this is low-hanging fruit after the electoral surprises of 2016. <a href="https://www.theguardian.com/politics/2017/mar/04/nigel-oakes-cambridge-analytica-what-role-brexit-trump">Cambridge Analytica</a> pioneered the use of deep learning by scanning the Facebook and Twitter social graphs to indentify voters' political affiliations. They identified individuals vulnerable to persuasion who lived in electorally sensitive districts, and canvas them with propaganda that targeted their personal hot-button issues. The tools developed by web advertisers to sell products have now been weaponized for political purposes, and the amount of personal information about our affiliations that we expose on social media makes us vulnerable. Aside from the last US presidential election, there's mounting evidence that the British referendum on leaving the EU was subject to foreign cyberwar attack via weaponized social media, as was <a href="http://www.france24.com/en/20170426-france-macron-cyber-security-russia-presidential-campaign">the most recent French presidential election</a>. </p>

<p>I'm biting my tongue and trying not to take sides here: I have my own political affiliation, after all. But if social media companies don't work out how to identify and flag micro-targeted propaganda then democratic elections will be replaced by victories for whoever can buy the most trolls. And this won't simply be billionaires like the Koch brothers and Robert Mercer in the United States throwing elections to whoever will hand them the biggest tax cuts. <a href="https://www.nytimes.com/2016/08/29/world/europe/russia-sweden-disinformation.html">Russian military cyberwar doctrine</a> calls for the use of social media to confuse and disable perceived enemies, in addition to the increasingly familiar use of zero-day exploits for espionage via spear phishing and distributed denial of service attacks on infrastructure (which are practiced by western agencies as well). Sooner or later, the use of propaganda bot armies in cyberwar will go global, and at that point, our social discourse will be irreparably poisoned.</p>

<p>(By the way, I <em>really hate</em> the cyber- prefix; it usually indicates that the user has no idea what they're talking about. Unfortunately the term 'cyberwar' seems to have stuck. But I digress.)</p>

<p>Secondly, an adjunct to deep learning targeted propaganda is the use of neural network generated false video media.</p>

<p>We're used to Photoshopped images these days, but faking video and audio is still labour-intensive, right? Unfortunately, that's a nope: we're seeing first generation <a href="https://motherboard.vice.com/en_us/article/gydydm/gal-gadot-fake-ai-porn">AI-assisted video porn</a>, in which the faces of film stars are mapped onto those of other people in a video clip using software rather than a laborious human process. (Yes, <em>of course</em> porn is the first application: Rule 34 of the Internet applies.) Meanwhile, we have <a href="https://deepmind.com/blog/wavenet-generative-model-raw-audio/">WaveNet</a>, a system for generating realistic-sounding speech in the voice of a human speaker the neural network has been trained to mimic. This stuff is still geek-intensive and requires relatively expensive GPUs. But in less than a decade it'll be out in the wild, and just about anyone will be able to fake up a realistic-looking video of someone they don't like doing something horrible. </p>

<p>We're already seeing alarm over <a href="https://medium.com/@jamesbridle/something-is-wrong-on-the-internet-c39c471271d2">bizarre YouTube channels that attempt to monetize children's TV brands</a> by scraping the video content off legitimate channels and adding their own advertising and keywords. Many of these channels are shaped by paperclip-maximizer advertising AIs that are simply trying to maximize their search ranking on YouTube. Add neural network driven tools for inserting Character A into Video B to click-maximizing bots and <a href="https://theoutline.com/post/1239/youtube-has-a-fake-peppa-pig-problem">things are going to get very weird</a> (and <em>nasty</em>). And they're only going to get weirder when these tools are deployed for political gain.</p>

<p>We tend to evaluate the inputs from our eyes and ears much less critically than what random strangers on the internet tell us—and we're already too vulnerable to fake news as it is. Soon they'll come for us, armed with believable video evidence. The smart money says that by 2027 you won't be able to believe anything you see in video unless there are cryptographic signatures on it, linking it back to the device that shot the raw feed—and you know how good most people are at using encryption? The dumb money is on total chaos.</p>

<p>Paperclip maximizers that focus on eyeballs are so 20th century. Advertising as an industry can only exist because of a quirk of our nervous system—that we are susceptible to addiction. Be it tobacco, gambling, or heroin, we recognize addictive behaviour when we see it. Or do we? It turns out that the human brain's reward feedback loops are relatively easy to game. Large corporations such as Zynga (Farmville) exist solely because of it; free-to-use social media platforms like Facebook and Twitter are dominant precisely because they are structured to reward frequent interaction and to generate emotional responses (not necessarily positive emotions—anger and hatred are just as good when it comes to directing eyeballs towards advertisers). "Smartphone addiction" is a side-effect of advertising as a revenue model: frequent short bursts of interaction keep us coming back for more.</p>

<p>Thanks to deep learning, neuroscientists have mechanised the process of making apps more addictive. <a href="https://techcrunch.com/2017/02/13/dopamine-labs-slings-tools-to-boost-and-reduce-app-addiction/">Dopamine Labs</a>
is one startup that provides tools to app developers to make any app more addictive, as well as to reduce the desire to continue a behaviour if it's undesirable. It goes a bit beyond automated A/B testing; A/B testing allows developers to plot a binary tree path between options, but true deep learning driven addictiveness maximizers can optimize for multiple attractors simultaneously. Now, Dopamine Labs seem, going by their public face, to have ethical qualms about the misuse of addiction maximizers in software. But neuroscience isn't a secret, and sooner or later some really unscrupulous people will try to see how far they can push it.</p>

<p>Let me give you a more specific scenario.</p>

<p>Apple have put a lot of effort into making <a href="https://www.macworld.com/article/3225406/iphone-ipad/face-id-iphone-x-faq.html">realtime face recognition</a> work with the iPhone X. You can't fool an iPhone X with a photo or even a simple mask: it does depth mapping to ensure your eyes are in the right place (and can tell whether they're open or closed) and recognize your face from underlying bone structure through makeup and bruises. It's running continuously, checking pretty much as often as every time you'd hit the home button on a more traditional smartphone UI, and it can see where your eyeballs are pointing. The purpose of this is to make it difficult for a phone thief to get anywhere if they steal your device. but it means your phone can monitor your facial expressions and correlate it against app usage. Your phone will be aware of precisely what you like to look at on its screen. With addiction-seeking deep learning and neural-network generated images, it is in principle possible to feed you an endlessly escallating payload of arousal-maximizing inputs. It might be Facebook or Twitter messages optimized to produce outrage, or it could be porn generated by AI to appeal to kinks you aren't even consciously aware of. But either way, the app now owns your central nervous system—and you <strong>will</strong> be monetized.</p>

<p>Finally, I'd like to raise a really hair-raising spectre that goes well beyond the use of deep learning and targeted propaganda in cyberwar.</p>

<p>Back in 2011, an obscure Russian software house launched an iPhone app for pickup artists called <a href="http://www.antipope.org/charlie/blog-static/2012/03/not-an-april-fool-1.html">Girls around Me</a>. (Spoiler: Apple pulled it like a hot potato when word got out.) The app works out where the user is using GPS, then queried FourSquare and Facebook for people matching a simple relational search—for single females (per Facebook) who have checked in (or been checked in by their friends) in your vicinity (via FourSquare). The app then displayed their locations on a map, along with links to their social media profiles. </p>

<p>If they were doing it today the interface would be gamified, showing strike rates and a leaderboard and flagging targets who succumbed to harassment as easy lays. But these days the cool kids and single adults are all using dating apps with a missing vowel in the name: only a creeper would want something like "Girls around Me", right?</p>

<p>Unfortunately there are even nastier uses than scraping social media to find potential victims for serial rapists. Does your social media profile indicate your political or religious affiliation? Nope? Don't worry, Cambridge Analytica can work them out with 99.9% precision just by scanning the tweets and Facebook comments you liked. Add a service that can identify peoples affiliation and location, and you have the beginning of a flash mob app: one that will show you people like Us and people like Them on a hyper-local map. </p>

<p>Imagine you're young, female, and a supermarket has figured out you're pregnant by analysing the pattern of your recent purchases, like <a href="http://www.nytimes.com/2012/02/19/magazine/shopping-habits.html?_r=1&amp;hp=&amp;pagewanted=all">Target back in 2012</a>. </p>

<p>Now imagine that all the anti-abortion campaigners in your town have an app called "babies at risk" on their phones. Someone has paid for the analytics feed from the supermarket and the result is that every time you go near a family planning clinic a group of unfriendly anti-abortion protesters engulfs you. </p>

<p>Or imagine you're male and gay, and the "God Hates Fags" crowd has invented a 100% reliable Gaydar app (based on your Grindr profile) and is getting their fellow travellers to queer bash gay men <em>only when they're alone or out-numbered 10:1</em>. (That's the special horror of precise geolocation.) Or imagine you're in Pakistan and Christian/Muslim tensions are mounting, or you're in rural Alabama, or ... the possibilities are endless</p>

<p>Someone out there is working on it: a geolocation-aware social media scraping deep learning application, that uses a gamified, competitive interface to reward its "players" for joining in acts of mob violence against whoever the app developer hates. Probably it has an inoccuous-seeming but highly addictive training mode to get the users accustomed to working in teams and obeying the app's instructions—think Ingress or Pokemon Go. Then, at some pre-planned zero hour, it switches mode and starts rewarding players for violence—players who have been primed to think of their targets as vermin, by a steady drip-feed of micro-targeted dehumanizing propaganda delivered over a period of months.</p>

<p>And the worst bit of this picture? </p>

<p>Is that the app developer isn't a nation-state trying to disrupt its enemies, or an extremist political group trying to murder gays, jews, or muslims; <strong>it's just a paperclip maximizer doing what it does—and you are the paper</strong>.</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>

+ 193
- 0
cache/2024/71b177818657a209fc76f23c08c21d25/index.md View File

@@ -0,0 +1,193 @@
title: Dude, you broke the future!
url: https://www.antipope.org/charlie/blog-static/2018/01/dude-you-broke-the-future.html
hash_url: 71b177818657a209fc76f23c08c21d25
archive_date: 2024-02-03
og_image: http://www.antipope.org/mt/mt-static/images/default-userpic-90.jpg
description: In this talk, author Charles Stross will give a rambling, discursive, and angry tour of what went wrong with the 21st century, why we didn't see it coming, where we can expect it to go next, and a few suggestions for what to do about it if we don't like it.
favicon: https://www.antipope.org/favicon.ico
language: en_US

<p><em>Abstract: We're living in yesterday's future, and it's nothing like the speculations of our authors and film/TV producers. As a working science fiction novelist, I take a professional interest in how we get predictions about the future wrong, and why, so that I can avoid repeating the same mistakes. Science fiction is written by people embedded within a society with expectations and political assumptions that bias us towards looking at the shiny surface of new technologies rather than asking how human beings will use them, and to taking narratives of progress at face value rather than asking what hidden agenda they serve.</em></p>

<p><em>In this talk, author Charles Stross will give a rambling, discursive, and angry tour of what went wrong with the 21st century, why we didn't see it coming, where we can expect it to go next, and a few suggestions for what to do about it if we don't like it. </em></p>

---

<p>Good morning. I'm Charlie Stross, and it's my job to tell lies for money. Or rather, I write science fiction, much of it about our near future, which has in recent years become ridiculously hard to predict. </p>

<p>Our species, Homo Sapiens Sapiens, is <a href="https://www.nytimes.com/2017/06/07/science/human-fossils-morocco.html">roughly three hundred thousand years old</a>. (Recent discoveries pushed back the date of our earliest remains that far, we may be even older.) For all but the last three centuries of that span, predicting the future was easy: natural disasters aside, everyday life in fifty years time would resemble everyday life fifty years ago. </p>

<p>Let that sink in for a moment: for 99.9% of human existence, the future was static. Then <em>something</em> happened, and the future began to change, increasingly rapidly, until we get to the present day when things are moving so fast that it's barely possible to anticipate trends from month to month.</p>

<p>As an eminent computer scientist once remarked, computer science is no more about computers than astronomy is about building telescopes. The same can be said of my field of work, written science fiction. Scifi is seldom about science—and even more rarely about predicting the future. But sometimes we dabble in futurism, and lately it's gotten very difficult.</p>

<h2>How to predict the near future</h2>

<p>When I write a near-future work of fiction, one set, say, a decade hence, there used to be a recipe that worked eerily well. Simply put, 90% of the next decade's stuff is already here today. Buildings are designed to last many years. Automobiles have a design life of about a decade, so half the cars on the road will probably still be around in 2027. People ... there will be new faces, aged ten and under, and some older people will have died, but most adults will still be around, albeit older and grayer. This is the 90% of the near future that's already here.</p>

<p>After the already-here 90%, another 9% of the future a decade hence used to be easily predictable. You look at trends dictated by physical limits, such as Moore's Law, and you look at Intel's road map, and you use a bit of creative extrapolation, and you won't go too far wrong. If I predict that in 2027 LTE cellular phones will be everywhere, 5G will be available for high bandwidth applications, and fallback to satellite data service will be available at a price, you won't laugh at me. It's not like I'm predicting that airliners will fly slower and Nazis will take over the United States, is it?</p>

<p>And therein lies the problem: it's the 1% of unknown unknowns that throws off all calculations. As it happens, airliners today <em>are</em> slower than they were in the 1970s, and don't get me started about Nazis. Nobody in 2007 was expecting a Nazi revival in 2017, right? (Only this time round Germans get to be the good guys.)</p>

<p>My recipe for fiction set ten years in the future used to be 90% already-here, 9% not-here-yet but predictable, and 1% who-ordered-<em>that</em>. But unfortunately the ratios have changed. I think we're now down to maybe 80% already-here—climate change takes a huge toll on infrastructure—then 15% not-here-yet but predictable, and a whopping 5% of utterly unpredictable deep craziness.</p>

<p><strong>Ruling out the singularity</strong></p>

<p>Some of you might assume that, as the author of books like "Singularity Sky" and "Accelerando", I attribute this to an impending technological singularity, to our development of self-improving artificial intelligence and mind uploading and the whole wish-list of transhumanist aspirations promoted by the likes of Ray Kurzweil. Unfortunately this isn't the case. I think transhumanism is a warmed-over Christian heresy. While its adherents tend to be vehement atheists, they can't quite escape from the history that gave rise to our current western civilization. Many of you are familiar with design patterns, an approach to software engineering that focusses on abstraction and simplification in order to promote reusable code. When you look at the AI singularity as a narrative, and identify the numerous places in the story where the phrase "... and then a miracle happens" occurs, it becomes apparent pretty quickly that they've reinvented Christianity. </p>

<p>Indeed, the wellsprings of today's transhumanists draw on a long, rich history of <a href="https://en.wikipedia.org/wiki/Russian_cosmism">Russian Cosmist philosophy</a> exemplified by the Russian Orthodox theologian <a href="https://en.wikipedia.org/wiki/Nikolai_Fyodorovich_Fyodorov">Nikolai Fyodorvitch Federov</a>, by way of his disciple <a href="https://en.wikipedia.org/wiki/Konstantin_Tsiolkovsky">Konstantin Tsiolkovsky</a>, whose derivation of the rocket equation makes him essentially the father of modern spaceflight. And once you start probing the nether regions of transhumanist thought and run into concepts like <a href="https://rationalwiki.org/wiki/Roko%27s_basilisk">Roko's Basilisk</a>—by the way, any of you who didn't know about the Basilisk before are now doomed to an eternity in AI hell—you realize they've mangled it to match some of the nastiest ideas in Presybterian Protestantism.</p>

<p>If it walks like a duck and quacks like a duck, it's probably a duck. And if it looks like a religion it's probably a religion. I don't see much evidence for human-like, self-directed artificial intelligences coming along any time now, and a fair bit of evidence that nobody except some freaks in university cognitive science departments even want it. What we're getting, instead, is self-optimizing tools that defy human comprehension but are not, in fact, any more like our kind of intelligence than a Boeing 737 is like a seagull. So I'm going to wash my hands of the singularity as an explanatory model without further ado—I'm one of those vehement atheists too—and try and come up with a better model for what's happening to us.</p>

<h2>Towards a better model for the future</h2>

<p>As my fellow SF author Ken MacLeod likes to say, the secret weapon of science fiction is history. History, loosely speaking, is the written record of what and how people did things in past times—times that have slipped out of our personal memories. We science fiction writers tend to treat history as a giant toy chest to raid whenever we feel like telling a story. With a little bit of history it's really easy to whip up an entertaining yarn about a galactic empire that mirrors the development and decline of the Hapsburg Empire, or to re-spin the October Revolution as a tale of how Mars got its independence. </p>

<p>But history is useful for so much more than that.</p>

<p>It turns out that our personal memories don't span very much time at all. I'm 53, and I barely remember the 1960s. I only remember the 1970s with the eyes of a 6-16 year old. My father, who died last year aged 93, just about remembered the 1930s. Only those of my father's generation are able to directly remember the great depression and compare it to the 2007/08 global financial crisis directly. But westerners tend to pay little attention to cautionary tales told by ninety-somethings. We modern, change-obsessed humans tend to repeat our biggest social mistakes when they slip out of living memory, which means they recur on a time scale of seventy to a hundred years. </p>

<p>So if our personal memories are usless, it's time for us to look for a better cognitive toolkit.</p>

<p>History gives us the perspective to see what went wrong in the past, and to look for patterns, and check whether those patterns apply to the present and near future. And looking in particular at the history of the past 200-400 years—the age of increasingly rapid change—one glaringly obvious deviation from the norm of the preceding three thousand centuries—is the development of Artificial Intelligence, which happened <a href="https://en.wikipedia.org/wiki/Corporation#History">no earlier than 1553 and no later than 1844</a>. </p>

<p>I'm talking about the very old, very slow AIs we call corporations, of course. What lessons from the history of the company can we draw that tell us about the likely behaviour of the type of artificial intelligence we are all interested in today?</p>

<p><strong>Old, slow AI</strong></p>

<p>Let me crib from Wikipedia for a moment:</p>

<p>In the late 18th century, <a href="https://en.wikipedia.org/wiki/Stewart_Kyd">Stewart Kyd</a>, the author of the first treatise on corporate law in English, defined a corporation as:</p>

<blockquote>
<p>a collection of many individuals united into one body, under a special denomination, having perpetual succession under an artificial form, and vested, by policy of the law, with the capacity of acting, in several respects, as an individual, particularly of taking and granting property, of contracting obligations, and of suing and being sued, of enjoying privileges and immunities in common, and of exercising a variety of political rights, more or less extensive, according to the design of its institution, or the powers conferred upon it, either at the time of its creation, or at any subsequent period of its existence.</p>
</blockquote>

<p>—A Treatise on the Law of Corporations, Stewart Kyd (1793-1794)</p>

<p>In 1844, the British government passed the Joint Stock Companies Act, which created a register of companies and allowed any legal person, for a fee, to register a company, which existed as a separate legal person. Subsequently, the law was extended to limit the liability of individual shareholders in event of business failure, and both Germany and the United States added their own unique extensions to what we see today as the doctrine of corporate personhood.</p>

<p>(Of course, there were plenty of other things happening between the sixteenth and twenty-first centuries that changed the shape of the world we live in. I've skipped changes in agricultural productivity due to energy economics, which finally broke the Malthusian trap our predecessors lived in. This in turn broke the long term cap on economic growth of around 0.1% per year in the absence of famine, plagues, and wars depopulating territories and making way for colonial invaders. I've skipped the germ theory of diseases, and the development of trade empires in the age of sail and gunpowder that were made possible by advances in accurate time-measurement. I've skipped the rise and—hopefully—decline of the pernicious theory of scientific racism that underpinned western colonialism and the slave trade. I've skipped the rise of feminism, the ideological position that women are human beings rather than property, and the decline of patriarchy. I've skipped the whole of the Enlightenment and the age of revolutions! But this is a technocentric congress, so I want to frame this talk in terms of AI, which we all like to think we understand.)</p>

<p>Here's the thing about corporations: they're clearly artificial, but legally they're people. They have goals, and operate in pursuit of these goals. And they have a natural life cycle. In the 1950s, a typical US corporation on the S&amp;P 500 index had a lifespan of 60 years, but today it's down to <a href="https://uk.finance.yahoo.com/news/technology-killing-off-corporate-america-173100680.html">less than 20 years</a>.</p>

<p>Corporations are cannibals; they consume one another. They are also hive superorganisms, like bees or ants. For their first century and a half they relied entirely on human employees for their internal operation, although they are automating their business processes increasingly rapidly this century. Each human is only retained so long as they can perform their assigned tasks, and can be replaced with another human, much as the cells in our own bodies are functionally interchangeable (and a group of cells can, in extremis, often be replaced by a prosthesis). To some extent corporations can be trained to service the personal desires of their chief executives, but even CEOs can be dispensed with if their activities damage the corporation, as Harvey Weinstein found out a couple of months ago.</p>

<p>Finally, our legal environment today has been tailored for the convenience of corporate persons, rather than human persons, to the point where our governments now mimic corporations in many of their internal structures.</p>

<p><strong>What do AIs want?</strong></p>

<p>What do our current, actually-existing AI overlords <em>want</em>?</p>

<p>Elon Musk—who I believe you have all heard of—has an obsessive fear of one particular hazard of artificial intelligence—which he conceives of as being <a href="(https://www.thenational.ae/arts-culture/mark-zuckerberg-and-elon-musk-s-debate-over-artificial-intelligence-will-robots-go-rogue-1.616530">a piece of software that functions like a brain-in-a-box</a>)—namely, the <a href="https://wiki.lesswrong.com/wiki/Paperclip_maximizer">paperclip maximizer</a>. A paperclip maximizer is a term of art for a goal-seeking AI that has a single priority, for example maximizing the number of paperclips in the universe. The paperclip maximizer is able to improve itself in pursuit of that goal but has no ability to vary its goal, so it will ultimately attempt to convert all the metallic elements in the solar system into paperclips, even if this is obviously detrimental to the wellbeing of the humans who designed it.</p>

<p>Unfortunately, Musk isn't paying enough attention. Consider his own companies. <a href="https://en.wikipedia.org/wiki/Gigafactory_1">Tesla is a battery maximizer</a>—an electric car is a battery with wheels and seats. SpaceX is an orbital payload maximizer, driving down the cost of space launches in order to encourage more sales for the service it provides. Solar City is a photovoltaic panel maximizer. And so on. All three of Musk's very own slow AIs are based on an architecture that is designed to maximize return on shareholder investment, even if by doing so they cook the planet the shareholders have to live on. (But if you're Elon Musk, that's okay: you plan to retire on Mars.)</p>

<p>The problem with corporations is that despite their overt goals—whether they make electric vehicles or beer or sell life insurance policies—they are all subject to <a href="https://wiki.lesswrong.com/wiki/Paperclip_maximizer">instrumental convergence</a> insofar as they all have a common implicit paperclip-maximizer goal: to generate revenue. If they don't make money, they are eaten by a bigger predator or they go bust. Making money is an <em>instrumental goal</em>—it's as vital to them as breathing is for us mammals, and without pursuing it they will fail to achieve their final goal, whatever it may be. Corporations generally pursue their instrumental goals—notably maximizing revenue—as a side-effect of the pursuit of their overt goal. But sometimes they try instead to manipulate the regulatory environment they operate in, to ensure that money flows towards them regardless.</p>

<p>Human tool-making culture has become increasingly complicated over time. New technologies always come with an implicit political agenda that seeks to extend its use, governments react by legislating to control the technologies, and sometimes we end up with industries indulging in legal duels. </p>

<p>For example, consider the automobile. You can't have mass automobile transport without gas stations and fuel distribution pipelines. These in turn require access to whoever owns the land the oil is extracted from—and before you know it, you end up with a permanent occupation force in Iraq and a client dictatorship in Saudi Arabia. Closer to home, automobiles imply jaywalking laws and drink-driving laws. They affect town planning regulations and encourage suburban sprawl, the construction of human infrastructure on the scale required by automobiles, not pedestrians. This in turn is bad for competing transport technologies like buses or trams (which work best in cities with a high population density). </p>

<p>To get these laws in place, providing an environment conducive to doing business, corporations spend money on political lobbyists—and, when they can get away with it, on bribes. Bribery need not be blatant, of course. For example, the reforms of the British railway network in the 1960s <a href="https://en.wikipedia.org/wiki/Beeching_cuts">dismembered many branch services</a> and coincided with a surge in road building and automobile sales. These reforms were orchestrated by <a href="https://en.wikipedia.org/wiki/Ernest_Marples">Transport Minister Ernest Marples</a>, who was purely a politician. However, Marples accumulated a considerable personal fortune during this time by owning shares in <a href="https://en.wikipedia.org/wiki/Marples_Ridgway">a motorway construction corporation</a>. (So, no conflict of interest there!) </p>

<p>The automobile industry in isolation isn't a pure paperclip maximizer. But if you look at it in conjunction with the fossil fuel industries, the road-construction industry, the accident insurance industry, and so on, you begin to see the outline of a paperclip maximizing <em>ecosystem</em> that invades far-flung lands and grinds up and <a href="http://www.who.int/gho/road_safety/mortality/en/">kills around one and a quarter million people per year</a>—that's the global death toll from automobile accidents according to the world health organization: it rivals the first world war on an ongoing basis—as side-effects of its drive to sell you a new car.</p>

<p>Automobiles are not, of course, a total liability. Today's cars are <a href="https://en.wikipedia.org/wiki/Automobile_safety">regulated stringently for safety</a> and, in theory, to reduce toxic emissions: they're fast, efficient, and comfortable. We can thank legally mandated regulations for this, of course. Go back to the 1970s and cars didn't have crumple zones. Go back to the 1950s and cars didn't come with seat belts as standard. In the 1930s, indicators—turn signals—and brakes on all four wheels were optional, and your best hope of surviving a 50km/h crash was to be thrown clear of the car and land somewhere without breaking your neck. Regulatory agencies are our current political systems' tool of choice for preventing paperclip maximizers from running amok. But unfortunately they don't always work.</p>

<p>One failure mode that you should be aware of is <a href="https://en.wikipedia.org/wiki/Regulatory_capture">regulatory capture</a>, where regulatory bodies are captured by the industries they control. <a href="https://en.wikipedia.org/wiki/Ajit_Pai">Ajit Pai</a>, head of the American Federal Communications Commission who just voted to eliminate net neutrality rules, has worked as Associate General Counsel for Verizon Communications Inc, the largest current descendant of the Bell telephone system monopoly. Why should someone with a transparent interest in a technology corporation end up in charge of a regulator for the industry that corporation operates within? Well, if you're going to regulate a highly complex technology, you need to recruit your regulators from among those people who understand it. And unfortunately most of those people are industry insiders. Ajit Pai is clearly very much aware of how Verizon is regulated, and <a href="https://www.washingtonpost.com/news/made-by-history/wp/2017/11/27/what-fcc-chair-ajit-pai-gets-wrong-about-net-neutrality/">wants to do something about it</a>—just not necessarily in the public interest. When regulators end up staffed by people drawn from the industries they are supposed to control, they frequently end up working with their former officemates to make it easier to turn a profit, either by raising barriers to keep new insurgent companies out, or by dismantling safeguards that protect the public.</p>

<p>Another failure mode is regulatory lag, when a technology advances so rapidly that regulations are laughably obsolete by the time they're issued. Consider the <a href="https://en.wikipedia.org/wiki/Privacy_and_Electronic_Communications_Directive_2002">EU directive requiring cookie notices on websites</a>, to caution users that their activities were tracked and their privacy might be violated. This would have been a good idea, had it shown up in 1993 or 1996, but unfortunately it didn't show up until 2011, by which time the web was vastly more complex. Fingerprinting and tracking mechanisms that had nothing to do with cookies were already widespread by then. Tim Berners-Lee observed in 1995 that five years' worth of change was happening on the web for every twelve months of real-world time; by that yardstick, the cookie law came out nearly a century too late to do any good. </p>

<p>Again, look at Uber. This month the European Court of Justice ruled that <a href="https://www.theguardian.com/technology/2017/dec/20/uber-european-court-of-justice-ruling-barcelona-taxi-drivers-ecj-eu">Uber is a taxi service</a>, not just a web app. This is arguably correct; the problem is, Uber has spread globally since it was founded eight years ago, subsidizing its drivers to put competing private hire firms out of business. Whether this is a net good for society is arguable; the problem is, a taxi driver can get awfully hungry if she has to wait eight years for a court ruling against a predator intent on disrupting her life.</p>

<p>So, to recap: firstly, we already have paperclip maximizers (and Musk's AI alarmism is curiously mirror-blind). Secondly, we have mechanisms for keeping them in check, but they don't work well against <a href="https://en.wikipedia.org/wiki/Greyball">AIs that deploy the dark arts</a>—especially corruption and bribery—and they're even worse againt true AIs that evolve too fast for human-mediated mechanisms like the Law to keep up with. Finally, unlike the naive vision of a paperclip maximizer, existing AIs have multiple agendas—their overt goal, but also profit-seeking, and expansion into new areas, and to accomodate the desires of whoever is currently in the driver's seat.</p>

<p><strong>How it all went wrong</strong></p>

<p>It seems to me that our current political upheavals are best understood as arising from the capture of post-1917 democratic institutions by large-scale AIs. Everywhere I look I see voters protesting angrily against an entrenched establishment that seems determined to ignore the wants and needs of their human voters in favour of the machines. The Brexit upset was largely the result of a protest vote against the British political establishment; the election of Donald Trump likewise, with a side-order of racism on top. Our major political parties are led by people who are compatible with the system as it exists—a system that has been shaped over decades by corporations distorting our government and regulatory environments. We humans are living in a world shaped by the desires and needs of AIs, forced to live on their terms, and we are taught that we are valuable only insofar as we contribute to the rule of the machines.</p>

<p>Now, this is CCC, and we're all more interested in computers and communications technology than this historical crap. But as I said earlier, history is a secret weapon if you know how to use it. What history is good for is enabling us to spot recurring patterns in human behaviour that repeat across time scales outside our personal experience—decades or centuries apart. If we look at our historical very slow AIs, what lessons can we learn from them about modern AI—the flash flood of unprecedented deep learning and big data technologies that have overtaken us in the past decade? </p>

<p>We made a fundamentally flawed, terrible design decision back in 1995, that has damaged democratic political processes, crippled our ability to truly understand the world around us, and led to the angry upheavals of the present decade. That mistake was to fund the build-out of the public world wide web—as opposed to the earlier, government-funded corporate and academic internet—by monetizing eyeballs via advertising revenue. </p>

<p>(<strong>Note</strong>: Cory Doctorow <a href="https://boingboing.net/2017/12/29/llcs-are-slow-ais.html">has a contrarian thesis</a>: <em>The dotcom boom was also an economic bubble because the dotcoms came of age at a tipping point in financial deregulation, the point at which the Reagan-Clinton-Bush reforms that took the Depression-era brakes off financialization were really picking up steam. That meant that the tech industry's heady pace of development was the first testbed for treating corporate growth as the greatest virtue, built on the lie of the fiduciary duty to increase profit above all other considerations.</em> I think he's entirely right about this, <em>but</em> it's a bit of a chicken-and-egg argument: we wouldn't have had a commercial web in the first place without a permissive, deregulated financial environment. My memory of working in the dot-com 1.0 bubble is that, outside of a couple of specific environments (the Silicon Valley area and the Boston-Cambridge corridor) venture capital was hard to find until late 1998 or thereabouts: the bubble's initial inflation was demand-driven rather than capital-driven, as the non-tech investment sector was late to the party. Caveat: I didn't win the lottery, so what do <em>I</em> know?)</p>

<p>The ad-supported web that we live with today wasn't inevitable. If you recall the web as it was in 1994, there were very few ads at all, and not much in the way of commerce. (What ads there were were mostly spam, on usenet and via email.) 1995 was the year the world wide web really came to public attention in the anglophone world and consumer-facing websites began to appear. Nobody really knew how this thing was going to be paid for (the original dot com bubble was <s>all</s> largely about working out how to monetize the web for the first time, and a lot of people lost their shirts in the process). And the naive initial assumption was that the transaction cost of setting up a TCP/IP connection over modem was too high to be supported by per-use microbilling, so we would bill customers indirectly, by shoving advertising banners in front of their eyes and hoping they'd click through and buy something.</p>

<p>Unfortunately, advertising is an industry. Which is to say, it's the product of one of those old-fashioned very slow AIs I've been talking about. Advertising tries to maximize its hold on the attention of the minds behind each human eyeball: the coupling of advertising with web search was an inevitable outgrowth. (How better to attract the attention of reluctant subjects than to find out what they're <em>really</em> interested in seeing, and sell ads that relate to those interests?) </p>

<p>The problem with applying the paperclip maximizer approach to monopolizing eyeballs, however, is that eyeballs are a scarce resource. There are only 168 hours in every week in which I can gaze at banner ads. Moreover, most ads are irrelevant to my interests and it doesn't matter how often you flash an ad for dog biscuits at me, I'm never going to buy any. (I'm a cat person.) To make best revenue-generating use of our eyeballs, it is necessary for the ad industry to learn who we are and what interests us, and to target us increasingly minutely in hope of hooking us with stuff we're attracted to.</p>

<p>At this point in a talk I'd usually go into an impassioned rant about the hideous corruption and evil of Facebook, but I'm guessing you've heard it all before so I won't bother. The too-long-didn't-read summary is, Facebook is as much a search engine as Google or Amazon. Facebook searches are optimized for Faces, that is, for human beings. If you want to find someone you fell out of touch with thirty years ago, Facebook probably knows where they live, what their favourite colour is, what size shoes they wear, and what they said about you to your friends all those years ago that made you cut them off. </p>

<p><a href="https://www.theguardian.com/technology/2015/apr/10/facebook-admits-it-tracks-non-users-but-denies-claims-it-breaches-eu-privacy-law">Even if you don't have a Facebook account, Facebook has a You account</a>—a hole in their social graph with a bunch of connections pointing into it and your name tagged on your friends' photographs. They know a lot about you, and they sell access to their social graph to advertisers who then target you, even if you don't think you use Facebook. Indeed, there's barely any point in <em>not</em> using Facebook these days: they're the social media Borg, resistance is futile. </p>

<p>However, Facebook is trying to get eyeballs on ads, as is Twitter, as is Google. To do this, they fine-tune the content they show you to make it more attractive to your eyes—and by 'attractive' I do not mean pleasant. We humans have an evolved automatic reflex to pay attention to threats and horrors as well as pleasurable stimuli: consider the way highway traffic always slows to a crawl as it is funnelled past an accident site. The algorithms that determine what to show us when we look at Facebook or Twitter take this bias into account. You might react more strongly to a public hanging in Iran than to a couple kissing: the algorithm knows, and will show you whatever makes you pay attention.</p>

<p>This brings me to another interesting point about computerized AI, as opposed to corporatized AI: AI algorithms tend to embody the prejudices and beliefs of the programmers. A couple of years ago I ran across an account of a webcam developed by mostly-pale-skinned silicon valley engineers that <a href="http://edition.cnn.com/2009/TECH/12/22/hp.webcams/index.html">have difficulty focusing or achieving correct colour balance when pointing at dark-skinned faces</a>. That's an example of human-programmer-induced bias. But with today's deep learning, bias can creep in via the data sets the neural networks are trained on. Microsoft's first foray into a conversational chatbot driven by machine learning, Tay, was yanked offline within days because when 4chan and Reddit based trolls discovered they could <a href="https://www.theguardian.com/technology/2016/mar/24/tay-microsofts-ai-chatbot-gets-a-crash-course-in-racism-from-twitter">train it towards racism and sexism</a> for shits and giggles. </p>

<p>Humans may be biased, but at least we're accountable and if someone gives you racist or sexist abuse to your face you can complain (or punch them). But it's impossible to punch a corporation, and it may not even be possible to identify the source of unfair bias when you're dealing with a machine learning system.</p>

<p>AI-based systems that concretize existing prejudices and social outlooks make it harder for activists like us to achieve social change. Traditional advertising works by playing on the target customer's insecurity and fear as much as on their aspirations, which in turn play on the target's relationship with their surrounding cultural matrix. Fear of loss of social status and privilege is a powerful stimulus, and fear and xenophobia are useful tools for attracting eyeballs.</p>

<p>What happens when we get pervasive social networks with learned biases against, say, feminism or Islam or melanin? Or deep learning systems trained on data sets contaminated by racist dipshits? Deep learning systems like the ones inside Facebook that <a href="http://www.slate.com/articles/technology/cover_story/2016/01/how_facebook_s_news_feed_algorithm_works.html">determine which stories to show you</a> to get you to pay as much attention as possible to the adverts?</p>

<p>I think you already know the answer to that.</p>

<p><strong>Look to the future (it's bleak!)</strong></p>

<p>Now, if this is sounding a bit bleak and unpleasant, you'd be right. I write sci-fi, you read or watch or play sci-fi; we're acculturated to think of science and technology as good things, that make our lives better. </p>

<p>But plenty of technologies have, historically, been heavily regulated or even criminalized for good reason, and once you get past the reflexive indignation at any criticism of technology and progress, you might agree that it is reasonable to ban individuals from owning nuclear weapons or nerve gas. Less obviously: they may not be weapons, but we've banned chlorofluorocarbon refrigerants because they were building up in the high stratosphere and destroying the ozone layer that protects us from UV-B radiation. And we banned <a href="https://en.wikipedia.org/wiki/Tetraethyllead">tetraethyl lead additive in gasoline</a>, because it poisoned people and <a href="https://en.wikipedia.org/wiki/Lead-crime_hypothesis">led to a crime wave</a>.</p>

<p>Nerve gas and leaded gasoline were 1930s technologies, promoted by 1930s corporations. Halogenated refrigerants and nuclear weapons are totally 1940s, and intercontinental ballistic missiles date to the 1950s. I submit that the 21st century is throwing up dangerous new technologies—just as our existing strategies for regulating very slow AIs have broken down.</p>

<p>Let me give you four examples—of new types of AI applications—that are going to warp our societies even worse than the old slow AIs of yore have done. This isn't an exhaustive list: these are just examples. We need to work out a general strategy for getting on top of this sort of AI before they get on top of us.</p>

<p>(Note that I do <strong>not</strong> have a solution to the regulatory problems I highlighted earlier, in the context of AI. This essay is polemical, intended to highlight the existence of a problem and spark a discussion, rather than a canned solution. After all, if the problem was easy to solve it wouldn't be a problem, would it?)</p>

<p>Firstly, Political hacking tools: social graph-directed propaganda</p>

<p>Topping my list of dangerous technologies that need to be regulated, this is low-hanging fruit after the electoral surprises of 2016. <a href="https://www.theguardian.com/politics/2017/mar/04/nigel-oakes-cambridge-analytica-what-role-brexit-trump">Cambridge Analytica</a> pioneered the use of deep learning by scanning the Facebook and Twitter social graphs to indentify voters' political affiliations. They identified individuals vulnerable to persuasion who lived in electorally sensitive districts, and canvas them with propaganda that targeted their personal hot-button issues. The tools developed by web advertisers to sell products have now been weaponized for political purposes, and the amount of personal information about our affiliations that we expose on social media makes us vulnerable. Aside from the last US presidential election, there's mounting evidence that the British referendum on leaving the EU was subject to foreign cyberwar attack via weaponized social media, as was <a href="http://www.france24.com/en/20170426-france-macron-cyber-security-russia-presidential-campaign">the most recent French presidential election</a>. </p>

<p>I'm biting my tongue and trying not to take sides here: I have my own political affiliation, after all. But if social media companies don't work out how to identify and flag micro-targeted propaganda then democratic elections will be replaced by victories for whoever can buy the most trolls. And this won't simply be billionaires like the Koch brothers and Robert Mercer in the United States throwing elections to whoever will hand them the biggest tax cuts. <a href="https://www.nytimes.com/2016/08/29/world/europe/russia-sweden-disinformation.html">Russian military cyberwar doctrine</a> calls for the use of social media to confuse and disable perceived enemies, in addition to the increasingly familiar use of zero-day exploits for espionage via spear phishing and distributed denial of service attacks on infrastructure (which are practiced by western agencies as well). Sooner or later, the use of propaganda bot armies in cyberwar will go global, and at that point, our social discourse will be irreparably poisoned.</p>

<p>(By the way, I <em>really hate</em> the cyber- prefix; it usually indicates that the user has no idea what they're talking about. Unfortunately the term 'cyberwar' seems to have stuck. But I digress.)</p>

<p>Secondly, an adjunct to deep learning targeted propaganda is the use of neural network generated false video media.</p>

<p>We're used to Photoshopped images these days, but faking video and audio is still labour-intensive, right? Unfortunately, that's a nope: we're seeing first generation <a href="https://motherboard.vice.com/en_us/article/gydydm/gal-gadot-fake-ai-porn">AI-assisted video porn</a>, in which the faces of film stars are mapped onto those of other people in a video clip using software rather than a laborious human process. (Yes, <em>of course</em> porn is the first application: Rule 34 of the Internet applies.) Meanwhile, we have <a href="https://deepmind.com/blog/wavenet-generative-model-raw-audio/">WaveNet</a>, a system for generating realistic-sounding speech in the voice of a human speaker the neural network has been trained to mimic. This stuff is still geek-intensive and requires relatively expensive GPUs. But in less than a decade it'll be out in the wild, and just about anyone will be able to fake up a realistic-looking video of someone they don't like doing something horrible. </p>

<p>We're already seeing alarm over <a href="https://medium.com/@jamesbridle/something-is-wrong-on-the-internet-c39c471271d2">bizarre YouTube channels that attempt to monetize children's TV brands</a> by scraping the video content off legitimate channels and adding their own advertising and keywords. Many of these channels are shaped by paperclip-maximizer advertising AIs that are simply trying to maximize their search ranking on YouTube. Add neural network driven tools for inserting Character A into Video B to click-maximizing bots and <a href="https://theoutline.com/post/1239/youtube-has-a-fake-peppa-pig-problem">things are going to get very weird</a> (and <em>nasty</em>). And they're only going to get weirder when these tools are deployed for political gain.</p>

<p>We tend to evaluate the inputs from our eyes and ears much less critically than what random strangers on the internet tell us—and we're already too vulnerable to fake news as it is. Soon they'll come for us, armed with believable video evidence. The smart money says that by 2027 you won't be able to believe anything you see in video unless there are cryptographic signatures on it, linking it back to the device that shot the raw feed—and you know how good most people are at using encryption? The dumb money is on total chaos.</p>

<p>Paperclip maximizers that focus on eyeballs are so 20th century. Advertising as an industry can only exist because of a quirk of our nervous system—that we are susceptible to addiction. Be it tobacco, gambling, or heroin, we recognize addictive behaviour when we see it. Or do we? It turns out that the human brain's reward feedback loops are relatively easy to game. Large corporations such as Zynga (Farmville) exist solely because of it; free-to-use social media platforms like Facebook and Twitter are dominant precisely because they are structured to reward frequent interaction and to generate emotional responses (not necessarily positive emotions—anger and hatred are just as good when it comes to directing eyeballs towards advertisers). "Smartphone addiction" is a side-effect of advertising as a revenue model: frequent short bursts of interaction keep us coming back for more.</p>

<p>Thanks to deep learning, neuroscientists have mechanised the process of making apps more addictive. <a href="https://techcrunch.com/2017/02/13/dopamine-labs-slings-tools-to-boost-and-reduce-app-addiction/">Dopamine Labs</a>
is one startup that provides tools to app developers to make any app more addictive, as well as to reduce the desire to continue a behaviour if it's undesirable. It goes a bit beyond automated A/B testing; A/B testing allows developers to plot a binary tree path between options, but true deep learning driven addictiveness maximizers can optimize for multiple attractors simultaneously. Now, Dopamine Labs seem, going by their public face, to have ethical qualms about the misuse of addiction maximizers in software. But neuroscience isn't a secret, and sooner or later some really unscrupulous people will try to see how far they can push it.</p>

<p>Let me give you a more specific scenario.</p>

<p>Apple have put a lot of effort into making <a href="https://www.macworld.com/article/3225406/iphone-ipad/face-id-iphone-x-faq.html">realtime face recognition</a> work with the iPhone X. You can't fool an iPhone X with a photo or even a simple mask: it does depth mapping to ensure your eyes are in the right place (and can tell whether they're open or closed) and recognize your face from underlying bone structure through makeup and bruises. It's running continuously, checking pretty much as often as every time you'd hit the home button on a more traditional smartphone UI, and it can see where your eyeballs are pointing. The purpose of this is to make it difficult for a phone thief to get anywhere if they steal your device. but it means your phone can monitor your facial expressions and correlate it against app usage. Your phone will be aware of precisely what you like to look at on its screen. With addiction-seeking deep learning and neural-network generated images, it is in principle possible to feed you an endlessly escallating payload of arousal-maximizing inputs. It might be Facebook or Twitter messages optimized to produce outrage, or it could be porn generated by AI to appeal to kinks you aren't even consciously aware of. But either way, the app now owns your central nervous system—and you <strong>will</strong> be monetized.</p>

<p>Finally, I'd like to raise a really hair-raising spectre that goes well beyond the use of deep learning and targeted propaganda in cyberwar.</p>

<p>Back in 2011, an obscure Russian software house launched an iPhone app for pickup artists called <a href="http://www.antipope.org/charlie/blog-static/2012/03/not-an-april-fool-1.html">Girls around Me</a>. (Spoiler: Apple pulled it like a hot potato when word got out.) The app works out where the user is using GPS, then queried FourSquare and Facebook for people matching a simple relational search—for single females (per Facebook) who have checked in (or been checked in by their friends) in your vicinity (via FourSquare). The app then displayed their locations on a map, along with links to their social media profiles. </p>

<p>If they were doing it today the interface would be gamified, showing strike rates and a leaderboard and flagging targets who succumbed to harassment as easy lays. But these days the cool kids and single adults are all using dating apps with a missing vowel in the name: only a creeper would want something like "Girls around Me", right?</p>

<p>Unfortunately there are even nastier uses than scraping social media to find potential victims for serial rapists. Does your social media profile indicate your political or religious affiliation? Nope? Don't worry, Cambridge Analytica can work them out with 99.9% precision just by scanning the tweets and Facebook comments you liked. Add a service that can identify peoples affiliation and location, and you have the beginning of a flash mob app: one that will show you people like Us and people like Them on a hyper-local map. </p>

<p>Imagine you're young, female, and a supermarket has figured out you're pregnant by analysing the pattern of your recent purchases, like <a href="http://www.nytimes.com/2012/02/19/magazine/shopping-habits.html?_r=1&amp;hp=&amp;pagewanted=all">Target back in 2012</a>. </p>

<p>Now imagine that all the anti-abortion campaigners in your town have an app called "babies at risk" on their phones. Someone has paid for the analytics feed from the supermarket and the result is that every time you go near a family planning clinic a group of unfriendly anti-abortion protesters engulfs you. </p>

<p>Or imagine you're male and gay, and the "God Hates Fags" crowd has invented a 100% reliable Gaydar app (based on your Grindr profile) and is getting their fellow travellers to queer bash gay men <em>only when they're alone or out-numbered 10:1</em>. (That's the special horror of precise geolocation.) Or imagine you're in Pakistan and Christian/Muslim tensions are mounting, or you're in rural Alabama, or ... the possibilities are endless</p>

<p>Someone out there is working on it: a geolocation-aware social media scraping deep learning application, that uses a gamified, competitive interface to reward its "players" for joining in acts of mob violence against whoever the app developer hates. Probably it has an inoccuous-seeming but highly addictive training mode to get the users accustomed to working in teams and obeying the app's instructions—think Ingress or Pokemon Go. Then, at some pre-planned zero hour, it switches mode and starts rewarding players for violence—players who have been primed to think of their targets as vermin, by a steady drip-feed of micro-targeted dehumanizing propaganda delivered over a period of months.</p>

<p>And the worst bit of this picture? </p>

<p>Is that the app developer isn't a nation-state trying to disrupt its enemies, or an extremist political group trying to murder gays, jews, or muslims; <strong>it's just a paperclip maximizer doing what it does—and you are the paper</strong>.</p>

+ 209
- 0
cache/2024/af0aee71fef1821c89ce368622f9a464/index.html View File

@@ -0,0 +1,209 @@
<!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>Accessibility | Tippy.js (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://atomiks.github.io/tippyjs/v6/accessibility/">

<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>Accessibility | Tippy.js</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://atomiks.github.io/tippyjs/v6/accessibility/" title="Lien vers le contenu original">Source originale</a>
<br>
Mis en cache le 2024-02-03
</p>
</nav>
<hr>
<div class="css-cbke9o exyshz41"><h2>Accessibility</h2><p>Tooltip and popovers are usually not mouse-only UI elements. If vital
functionality or information is contained within them, they should be accessible
to keyboard and touch inputs so that users who navigate interfaces without using
a mouse are not locked out. This is especially true for people with disabilities
such as low vision who rely on screen reader technology to assist them with
using an application.</p><p>To ensure these users get the best possible experience, Tippy already employs
baked-in defaults to ensure accessibility. However, some special consideration
should be taken into account when using the library so you can be aware of
potential accessibility problems that may arise.</p><h3><a class="link-icon css-wumm7u e1fogcta0" id="use-natively-focusable-elements" href="#use-natively-focusable-elements">#</a>Use natively focusable elements</h3><p>Tooltips should only be applied to natively focusable elements like <code>&lt;button&gt;</code>
or <code>&lt;input&gt;</code>. If you are using a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> element, ensure you add
<code>tabindex="0"</code> so that it can receive focus.</p><h3><a class="link-icon css-wumm7u e1fogcta0" id="mouse-keyboard-and-touch-input" href="#mouse-keyboard-and-touch-input">#</a>Mouse, keyboard, and touch input</h3><p>The default trigger for tooltips is <code>"mouseenter focus"</code> This means both a hover
via mouse and focus via keyboard navigation will trigger a tooltip. Both of
these events also cover touch devices via a tap, with some mobile browsers
firing <code>mouseenter</code> and others <code>focus</code> (or both).</p><h3><a class="link-icon css-wumm7u e1fogcta0" id="announcing-tooltip-content" href="#announcing-tooltip-content">#</a>Announcing tooltip content</h3><p>Non-interactive tooltips give the reference element an <code>aria-describedby</code>
attribute once they show:</p><pre class="grvsc-container moonlight-ii" data-language="html" data-index="0"><p data-elastic-wrapper="true"><code class="grvsc-code"><span class="grvsc-line"><span class="mtk5">&lt;</span><span class="mtk14">button </span><span class="mtk8">aria-describedby</span><span class="mtk5">="</span><span class="mtk11">tippy-1</span><span class="mtk5">"&gt;</span><span class="mtk1">Text</span><span class="mtk5">&lt;/</span><span class="mtk14">button</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk5">&lt;</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">tippy-1</span><span class="mtk5">"</span><span class="mtk14"> </span><span class="mtk8">data-tippy-root</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk3">&lt;!-- inner elements --&gt;</span></span>
<span class="grvsc-line"><span class="mtk5">&lt;/</span><span class="mtk14">div</span><span class="mtk5">&gt;</span></span></code></p></pre><p>This allows screen reader software to announce the tooltip content describing
the reference element once it's in focus.</p><h3><a class="link-icon css-wumm7u e1fogcta0" id="interactivity" href="#interactivity">#</a>Interactivity</h3><p>Tippy uses two techniques to ensure interactive popovers are accessible:</p><ul><li><code>aria-expanded</code> attribute</li><li><code>appendTo: "parent"</code></li></ul><p>This means once the reference element has focus, the assistive technology will
let the user know it has an expandable popover attached to it.</p><p>Once they open it, elements within the tippy can be tabbed to immediately once
focus has left the reference element. This relies on there being no more
focusable sibling elements after the reference element itself.</p><p>Before opening the popover:</p><pre class="grvsc-container moonlight-ii" data-language="html" data-index="1"><p data-elastic-wrapper="true"><code class="grvsc-code"><span class="grvsc-line"><span class="mtk5">&lt;</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">parent</span><span class="mtk5">"&gt;</span></span>
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk5">&lt;</span><span class="mtk14">button </span><span class="mtk8">aria-expanded</span><span class="mtk5">="</span><span class="mtk11">false</span><span class="mtk5">"&gt;</span><span class="mtk1">Text</span><span class="mtk5">&lt;/</span><span class="mtk14">button</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk5">&lt;/</span><span class="mtk14">div</span><span class="mtk5">&gt;</span></span></code></p></pre><p>After opening the popover:</p><pre class="grvsc-container moonlight-ii" data-language="html" data-index="2"><p data-elastic-wrapper="true"><code class="grvsc-code"><span class="grvsc-line"><span class="mtk5">&lt;</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">parent</span><span class="mtk5">"&gt;</span></span>
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk5">&lt;</span><span class="mtk14">button </span><span class="mtk8">aria-expanded</span><span class="mtk5">="</span><span class="mtk11">true</span><span class="mtk5">"&gt;</span><span class="mtk1">Text</span><span class="mtk5">&lt;/</span><span class="mtk14">button</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk5">&lt;</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">tippy-1</span><span class="mtk5">"</span><span class="mtk14"> </span><span class="mtk8">data-tippy-root</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk3">&lt;!-- inner elements, with focusable content --&gt;</span></span>
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk5">&lt;/</span><span class="mtk14">div</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk5">&lt;/</span><span class="mtk14">div</span><span class="mtk5">&gt;</span></span></code></p></pre><p>You should wrap the reference element in its own parent element (<code>&lt;div&gt;</code> or
<code>&lt;span&gt;</code>) if it's not the only focusable sibling element.</p><h4><a class="link-icon css-wumm7u e1fogcta0" id="clipping-issues" href="#clipping-issues">#</a>Clipping issues</h4><p>Sometimes, this behavior won't work for your app due to clipping issues. In this
case, you need to specify a custom <code>appendTo</code> element outside of the parent node
context and use a focus management solution to handle keyboard navigation.
<a href="../faq/#my-tooltip-appears-cut-off-or-is-not-showing-at-all" class="css-pom0h5 e1fogcta1">More details here</a>.</p></div>
</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>

+ 42
- 0
cache/2024/af0aee71fef1821c89ce368622f9a464/index.md View File

@@ -0,0 +1,42 @@
title: Accessibility | Tippy.js
url: https://atomiks.github.io/tippyjs/v6/accessibility/
hash_url: af0aee71fef1821c89ce368622f9a464
archive_date: 2024-02-03
og_image: https://atomiks.github.io/tippyjs/static/logo-ebc385458e03fdb24af078536af88065.svg
description: Tooltip and popovers are usually not mouse-only UI elements. If vital functionality or information is contained within them, they should be accessible to keyboard and touch inputs so that users who navigate interfaces without using a mouse are not locked out.
favicon: https://atomiks.github.io/tippyjs/favicon-32x32.png?v=68cd85fe631cbce4dad8be8ef26f93f3
language: en_US

<div class="css-cbke9o exyshz41"><h2>Accessibility</h2><p>Tooltip and popovers are usually not mouse-only UI elements. If vital
functionality or information is contained within them, they should be accessible
to keyboard and touch inputs so that users who navigate interfaces without using
a mouse are not locked out. This is especially true for people with disabilities
such as low vision who rely on screen reader technology to assist them with
using an application.</p><p>To ensure these users get the best possible experience, Tippy already employs
baked-in defaults to ensure accessibility. However, some special consideration
should be taken into account when using the library so you can be aware of
potential accessibility problems that may arise.</p><h3><a class="link-icon css-wumm7u e1fogcta0" id="use-natively-focusable-elements" href="#use-natively-focusable-elements">#</a>Use natively focusable elements</h3><p>Tooltips should only be applied to natively focusable elements like <code>&lt;button&gt;</code>
or <code>&lt;input&gt;</code>. If you are using a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> element, ensure you add
<code>tabindex="0"</code> so that it can receive focus.</p><h3><a class="link-icon css-wumm7u e1fogcta0" id="mouse-keyboard-and-touch-input" href="#mouse-keyboard-and-touch-input">#</a>Mouse, keyboard, and touch input</h3><p>The default trigger for tooltips is <code>"mouseenter focus"</code> This means both a hover
via mouse and focus via keyboard navigation will trigger a tooltip. Both of
these events also cover touch devices via a tap, with some mobile browsers
firing <code>mouseenter</code> and others <code>focus</code> (or both).</p><h3><a class="link-icon css-wumm7u e1fogcta0" id="announcing-tooltip-content" href="#announcing-tooltip-content">#</a>Announcing tooltip content</h3><p>Non-interactive tooltips give the reference element an <code>aria-describedby</code>
attribute once they show:</p><pre class="grvsc-container moonlight-ii" data-language="html" data-index="0"><p data-elastic-wrapper="true"><code class="grvsc-code"><span class="grvsc-line"><span class="mtk5">&lt;</span><span class="mtk14">button </span><span class="mtk8">aria-describedby</span><span class="mtk5">="</span><span class="mtk11">tippy-1</span><span class="mtk5">"&gt;</span><span class="mtk1">Text</span><span class="mtk5">&lt;/</span><span class="mtk14">button</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk5">&lt;</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">tippy-1</span><span class="mtk5">"</span><span class="mtk14"> </span><span class="mtk8">data-tippy-root</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk3">&lt;!-- inner elements --&gt;</span></span>
<span class="grvsc-line"><span class="mtk5">&lt;/</span><span class="mtk14">div</span><span class="mtk5">&gt;</span></span></code></p></pre><p>This allows screen reader software to announce the tooltip content describing
the reference element once it's in focus.</p><h3><a class="link-icon css-wumm7u e1fogcta0" id="interactivity" href="#interactivity">#</a>Interactivity</h3><p>Tippy uses two techniques to ensure interactive popovers are accessible:</p><ul><li><code>aria-expanded</code> attribute</li><li><code>appendTo: "parent"</code></li></ul><p>This means once the reference element has focus, the assistive technology will
let the user know it has an expandable popover attached to it.</p><p>Once they open it, elements within the tippy can be tabbed to immediately once
focus has left the reference element. This relies on there being no more
focusable sibling elements after the reference element itself.</p><p>Before opening the popover:</p><pre class="grvsc-container moonlight-ii" data-language="html" data-index="1"><p data-elastic-wrapper="true"><code class="grvsc-code"><span class="grvsc-line"><span class="mtk5">&lt;</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">parent</span><span class="mtk5">"&gt;</span></span>
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk5">&lt;</span><span class="mtk14">button </span><span class="mtk8">aria-expanded</span><span class="mtk5">="</span><span class="mtk11">false</span><span class="mtk5">"&gt;</span><span class="mtk1">Text</span><span class="mtk5">&lt;/</span><span class="mtk14">button</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk5">&lt;/</span><span class="mtk14">div</span><span class="mtk5">&gt;</span></span></code></p></pre><p>After opening the popover:</p><pre class="grvsc-container moonlight-ii" data-language="html" data-index="2"><p data-elastic-wrapper="true"><code class="grvsc-code"><span class="grvsc-line"><span class="mtk5">&lt;</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">parent</span><span class="mtk5">"&gt;</span></span>
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk5">&lt;</span><span class="mtk14">button </span><span class="mtk8">aria-expanded</span><span class="mtk5">="</span><span class="mtk11">true</span><span class="mtk5">"&gt;</span><span class="mtk1">Text</span><span class="mtk5">&lt;/</span><span class="mtk14">button</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk5">&lt;</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">tippy-1</span><span class="mtk5">"</span><span class="mtk14"> </span><span class="mtk8">data-tippy-root</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk3">&lt;!-- inner elements, with focusable content --&gt;</span></span>
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk5">&lt;/</span><span class="mtk14">div</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk5">&lt;/</span><span class="mtk14">div</span><span class="mtk5">&gt;</span></span></code></p></pre><p>You should wrap the reference element in its own parent element (<code>&lt;div&gt;</code> or
<code>&lt;span&gt;</code>) if it's not the only focusable sibling element.</p><h4><a class="link-icon css-wumm7u e1fogcta0" id="clipping-issues" href="#clipping-issues">#</a>Clipping issues</h4><p>Sometimes, this behavior won't work for your app due to clipping issues. In this
case, you need to specify a custom <code>appendTo</code> element outside of the parent node
context and use a focus management solution to handle keyboard navigation.
<a href="../faq/#my-tooltip-appears-cut-off-or-is-not-showing-at-all" class="css-pom0h5 e1fogcta1">More details here</a>.</p></div>

+ 462
- 0
cache/2024/bf61b62532f71e39e7b92c76dc36bb0f/index.html View File

@@ -0,0 +1,462 @@
<!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>Popover API (Explainer) (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://open-ui.org/components/popover.research.explainer/">

<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>Popover API (Explainer)</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://open-ui.org/components/popover.research.explainer/" title="Lien vers le contenu original">Source originale</a>
<br>
Mis en cache le 2024-02-03
</p>
</nav>
<hr>
<ul><li><a href="https://github.com/mfreed7">@mfreed7</a>, <a href="https://github.com/scottaohara">@scottaohara</a>, <a href="https://github.com/BoCupp-Microsoft">@BoCupp-Microsoft</a>, <a href="https://github.com/domenic">@domenic</a>, <a href="https://github.com/gregwhitworth">@gregwhitworth</a>, <a href="https://github.com/chrishtr">@chrishtr</a>, <a href="https://github.com/dandclark">@dandclark</a>, <a href="https://github.com/una">@una</a>, <a href="https://github.com/smhigley">@smhigley</a>, <a href="https://github.com/aleventhal">@aleventhal</a>, <a href="https://github.com/jh3y">@jh3y</a></li><li>May 4, 2023</li></ul>
<p><strong>NOTE:</strong> This Popover API explainer was mostly useful during the development of the feature. While it is roughly still in line with the actual feature, it might be more informative to look at either of these two sources of documentation:</p>
<ol><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">The MDN page documenting the Popover API</a></li><li><a href="https://html.spec.whatwg.org/multipage/C#the-popover-attribute">The HTML spec for the popover attribute</a></li></ol>
<p>A very common UI pattern on the Web, for which there is no native API, is “popover UI”, also sometimes called “popovers”, “pop up UI”, or “popovers”. Popovers are a general class of UI that have three common behaviors:</p>
<ol><li>Popovers always appear <strong>on top of other page content</strong>.</li><li>Popovers are <strong>ephemeral</strong>. When the user “moves on” to another part of the page (e.g. by clicking elsewhere, or hitting ESC), the popover hides.</li><li>Popovers (of a particular type) are generally <strong>“one at a time”</strong> - opening one popover closes others.</li></ol>
<p>This document proposes a set of APIs to make this type of UI easy to build.</p>
<p>Here are the goals for this API:</p>
<ul><li>Allow any element and its (arbitrary) descendants to be rendered on top of <strong>all other content</strong> in the host web application.</li><li>Include <strong>“light dismiss” management functionality</strong>, to remove the element/descendants from the top-layer upon certain actions such as hitting Esc (or any <a href="https://wicg.github.io/close-watcher/#close-signal">close signal</a>) or clicking outside the element bounds.</li><li>Allow this “top layer” content to be fully styled, sized, and positioned at the author’s discretion, including properties which require compositing with other layers of the host web application (e.g. the box-shadow or backdrop-filter CSS properties).</li><li>Allow these top layer elements to reside at semantically-relevant positions in the DOM. I.e. it should not be required to re-parent a top layer element as the last child of the <code>document.body</code> simply to escape ancestor containment and transforms.</li><li>Include an appropriate user input and focus management experience, with flexibility to modify behaviors such as initial focus.</li><li><strong>Accessible by default</strong>, with the ability to further extend semantics/behaviors as needed for the author’s specific use case.</li><li>Avoid developer footguns, such as improper stacking of dialogs and popovers, and incorrect accessibility mappings.</li><li>Avoid the need for any JavaScript for most common cases.</li><li>Easy animation of show/hide operations.</li></ul>
<p>See the <a href="https://open-ui.org/components/popup.research.explainer-v1">original <code>&lt;popup&gt;</code> element explainer</a>, and also the comments on <a href="https://github.com/openui/open-ui/issues/410">Issue 410</a> and <a href="https://github.com/openui/open-ui/issues/417">Issue 417</a>. See also <a href="https://github.com/w3c/csswg-drafts/issues/6965">this CSSWG discussion</a> which has mostly been about a CSS alternative for top layer.</p>
<p>This proposal was discussed in OpenUI on <a href="https://github.com/openui/open-ui/issues/455">Issue 455</a>, which was closed as <a href="https://github.com/openui/open-ui/issues/455#issuecomment-1050172067">resolved</a>. In WHATWG/html, <a href="https://github.com/whatwg/html/issues/7785">Issue 7785</a> tracks the addition of this feature.</p>
<p>There have been <strong>many</strong> discussions and resolutions at OpenUI of various aspects of this proposal, and those are listed in the <a href="#design-decisions-via-openui">Design Decisions</a> section. Requests for standards positions have been requested from <a href="https://github.com/mozilla/standards-positions/issues/698">Gecko</a> and <a href="https://github.com/WebKit/standards-positions/issues/74">WebKit</a>.</p>
<p>There have been three TAG reviews for this set of functionality: <a href="https://github.com/w3ctag/design-reviews/issues/599">#599</a> (closed waiting for anchor positioning), <a href="https://github.com/w3ctag/design-reviews/issues/680">#680</a> (closed recommending change from <code>&lt;popup&gt;</code> to <code>popup</code> attribute), <a href="https://github.com/w3ctag/design-reviews/issues/743">#743</a> (open).</p>
<p>A natural question that <a href="https://github.com/openui/open-ui/issues/581">commonly arises</a> is: what’s the difference between a “popover” and a “dialog”? There are two ways to interpret this question:</p>
<ol><li>What are the difference between these general UX patterns and words?</li><li>What are the technical implementation differences between <code>&lt;div popover&gt;</code> and <code>&lt;dialog&gt;</code>?</li></ol>
<p>In both cases, an important distinction needs to be made between <strong>modal</strong> and <strong>non-modal</strong> (or <strong>modeless</strong>) dialogs. With a <strong>modal</strong> dialog, the rest of the page (outside the dialog) is rendered <strong><code>inert</code></strong>, so that only the contents of the dialog are interactable. Importantly, a popover is <strong>non-modal</strong>. Almost by definition, a popover is not permanent: it goes away (via light dismiss) when the user changes their attention to something else, by clicking or tabbing to something else. For these reasons, if the dialog in question needs to be <strong>modal</strong>, then the <code>&lt;dialog&gt;</code> element is the way to go.</p>
<p>Having said that, dialogs can also be <strong>non-modal</strong>, and popovers can be set to not light-dismiss (via <strong><code>popover=manual</code></strong>). There is a significant area of overlap between the two Web features. Some use cases that lie in this area of overlap include:</p>
<ol><li>“Toasts” or asynchronous notifications, which stay onscreen until dismissed manually or via a timer.</li><li>Persistent UI, such as teaching-UI, that needs to stay on screen while the user interacts with the page.</li><li>Custom components that need to “manually” control popover behavior.</li></ol>
<p>Given these use cases, it’s important to call out the technical differences between a non-modal <code>&lt;dialog&gt;</code> and a <code>&lt;div popover=manual&gt;</code>:</p>
<ul><li>A <code>&lt;div popover=manual&gt;</code> is <strong>in the top layer</strong>, so it draws on top of other content. The same is not true for a non-modal <code>&lt;dialog&gt;</code>. This is likely the most impactful difference, as it tends to be difficult to ensure that a non-modal <code>&lt;dialog&gt;</code> is painted on top of other page content.</li><li>A <code>&lt;dialog&gt;</code> element always has <strong><code>role=dialog</code></strong>, while the <code>popover</code> attribute can be applied to the <strong>most-semantically-relevant HTML element</strong>, including the <code>&lt;dialog&gt;</code> element itself: <code>&lt;dialog popover&gt;</code>.</li><li>The popover API comes with some <strong>“nice to haves”</strong>:<ul><li>popovers are easy to animate both the show and hide transitions, via pure CSS. In contrast, JS is required in order to animate <code>dialog.close()</code>.</li><li>popovers work with the invoking attributes (e.g. <code>popovertarget</code>) to declaratively show/hide them with pure HTML. In contrast, JS is required to show/close a <code>&lt;dialog&gt;</code>.</li><li>popovers fire both a “popovershow” and a “popoverhide” event. In contrast, a <code>&lt;dialog&gt;</code> only fires <code>cancel</code> and <code>close</code>, but no event is fired when it is shown.</li></ul></li></ul>
<p>For the above reasons, it seems clear that for use cases that need a <strong>non-modal</strong> dialog which has popover behavior, a <code>&lt;dialog popover&gt;</code> (with the most appropriate value for the <code>popover</code> attribute) should be preferred. Importantly, if the use case is <strong>not</strong> meant to be exposed as a “dialog”, then another (non-<code>&lt;dialog&gt;</code>) element should be used with the <code>popover</code> attribute, or a generic <code>&lt;div popover role=something&gt;</code> should be used with the appropriate role added.</p>
<p>This section lays out the full details of this proposal. If you’d prefer, you can <strong><a href="#example-use-cases">skip to the examples section</a> to see the code</strong>.</p>
<p>A new content attribute, <strong><code>popover</code></strong>, controls both the top layer status and the dismiss behavior. There are several allowed values for this attribute:</p>
<ul><li><strong><code>popover=auto</code></strong> - A top layer element following “Auto” dismiss behaviors (see below).</li><li><strong><code>popover=manual</code></strong> - A top layer element following “Manual” dismiss behaviors (see below).</li></ul>
<p>Additional values for the <code>popover</code> attribute may become available in the future.</p>
<p>So this markup represents popover content:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>&lt;</span><span>div</span><span> popover</span><span>=</span><span>"auto"</span><span>&gt;I am a popover&lt;/</span><span>div</span><span>&gt;</span></span></code></pre>
<p>As written above, the <code>&lt;div&gt;</code> will be rendered <code>display:none</code> by the UA stylesheet, meaning it will not be shown when the page is loaded. To show the popover, one of several methods can be used: <a href="#declarative-triggers">declarative triggering</a>, <a href="#javascript-trigger">JavaScript triggering</a>.</p>
<p>Additionally, the <code>popover</code> attribute can be used without a value (or with an empty string <code>""</code> value), and in that case it will behave identically to <code>popover=auto</code>:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>&lt;</span><span>div</span><span> popover</span><span>=</span><span>"auto"</span><span>&gt;I am a popover&lt;/</span><span>div</span><span>&gt;</span></span>
<span class="line"><span>&lt;</span><span>div</span><span> popover</span><span>&gt;I am also an "auto" popover&lt;/</span><span>div</span><span>&gt;</span></span>
<span class="line"><span>&lt;</span><span>div</span><span> popover</span><span>=</span><span>""</span><span>&gt;So am I&lt;/</span><span>div</span><span>&gt;</span></span></code></pre>
<p>For convenience and brevity, the remainder of this explainer will use this boolean-like syntax in most cases, e.g. <code>&lt;div popover&gt;</code>.</p>
<p>There are several ways to “show” a popover, and they are discussed in this section. When any of these methods are used to show a popover, it will be made visible and moved (by the UA) to the <a href="https://fullscreen.spec.whatwg.org/#top-layer">top layer</a>. The top layer is a layer that paints on top of all other page content, with the exception of other elements currently in the top layer. This allows, for example, a “stack” of popovers to exist.</p>
<blockquote><p>Note: It is intended that <a href="/components/invokers.explainer"><code>invoketarget</code></a> will replace <code>popovertarget</code> leading to <code>popovertarget</code>’s eventual deprecation.</p></blockquote>
<p>A common design pattern is to have a button which makes a popover visible. To facilitate this pattern, and avoid the need for JavaScript in this common case, two content attributes (<code>popovertarget</code> and <code>popovertargetaction</code>) allow the developer to declaratively toggle, show, or hide a popover. To do so, the attribute’s value should be set to the idref of another element:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>&lt;</span><span>button</span><span> popovertarget</span><span>=</span><span>"foo"</span><span>&gt;Toggle the popover&lt;/</span><span>button</span><span>&gt;</span></span>
<span class="line"><span>&lt;</span><span>div</span><span> id</span><span>=</span><span>"foo"</span><span> popover</span><span>&gt;Popover content&lt;/</span><span>div</span><span>&gt;</span></span></code></pre>
<p>When the button in this example is activated, the UA will call <code>.showPopover()</code> on the <code>&lt;div id=foo popover&gt;</code> element if it is currently hidden, or <code>hidePopover()</code> if it is showing. In this way, no JavaScript will be necessary for this use case.</p>
<p>If the desire is to have a button that only shows or only hides a popover, the following markup can be used:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>&lt;</span><span>button</span><span> popovertarget</span><span>=</span><span>"foo"</span><span>&gt;Toggle the popover&lt;/</span><span>button</span><span>&gt;</span></span>
<span class="line"><span>&lt;</span><span>button</span><span> popovertarget</span><span>=</span><span>"foo"</span><span> popovertargetaction</span><span>=</span><span>"show"</span><span>&gt;This button only shows the popover&lt;/</span><span>button</span><span>&gt;</span></span>
<span class="line"><span>&lt;</span><span>button</span><span> popovertarget</span><span>=</span><span>"foo"</span><span> popovertargetaction</span><span>=</span><span>"hide"</span><span>&gt;This button only hides the popover&lt;/</span><span>button</span><span>&gt;</span></span>
<span class="line"><span>&lt;</span><span>div</span><span> id</span><span>=</span><span>"foo"</span><span> popover</span><span>&gt;Popover content&lt;/</span><span>div</span><span>&gt;</span></span></code></pre>
<p>Note that the default value for <code>popovertargetaction</code> is “toggle” which can also be explicitly specified.</p>
<p>When the <code>popovertarget</code> attribute is applied to an activating element, the UA will automatically map this element with the appropriate accessibility semantics. For instance, the initial implementation will expose the appropriate <code>aria-expanded</code> state based on whether the popover is shown or hidden. As the popover API matures, there may need to be further discussion with the ARIA working group to determine if additional ARIA semantics, if any, are necessary.</p>
<p>These attributes are only supported on buttons (including <code>&lt;button&gt;</code>, <code>&lt;input type=button&gt;</code>, etc.) as long as the button would not otherwise submit a form. For example, this is not supported: <code>&lt;form&gt;&lt;input type=submit popovertarget=foo&gt;&lt;/form&gt;</code>. In that case, the form would be submitted, and the popover would <strong>not</strong> be toggled.</p>
<p>The declarative trigger attributes can also be accessed via IDL:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>// Note that `popoverTargetElement` directly sets an element reference:</span></span>
<span class="line"><span>myButton.popoverTargetElement </span><span>=</span><span> myElement</span></span>
<span class="line"><span>myButton.popoverTargetAction </span><span>=</span><span> 'show'</span></span></code></pre>
<p>To show and hide the popover via JavaScript, there are three methods on HTMLElement:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>const</span><span> popover</span><span> =</span><span> document.</span><span>querySelector</span><span>(</span><span>'[popover]'</span><span>)</span></span>
<span class="line"><span>popover.</span><span>showPopover</span><span>() </span><span>// Show the popover</span></span>
<span class="line"><span>popover.</span><span>hidePopover</span><span>() </span><span>// Hide a visible popover</span></span>
<span class="line"><span>popover.</span><span>togglePopover</span><span>() </span><span>// Toggle the open/closed state of a popover</span></span></code></pre>
<p>Calling <code>showPopover()</code> on an element that has a valid value for the <code>popover</code> attribute will cause the UA to remove the <code>display:none</code> rule from the element and move it to the top layer. Calling <code>hidePopover()</code> on a showing popover will remove it from the top layer, and re-apply <code>display:none</code>.</p>
<p>There are several conditions that will cause <code>showPopover()</code>, <code>hidePopover()</code>, and <code>togglePopover()</code> to throw an exception:</p>
<ol><li>Calling <code>showPopover()</code> on a valid popover that is already in the showing state. This will throw an <code>InvalidStateError</code> <code>DOMException</code>.</li><li>Calling <code>hidePopover()</code> on a valid popover that is not currently showing. This will throw an <code>InvalidStateError</code> <code>DOMException</code>.</li><li>Calling any of the three methods on an element that does not contain a <a href="#html-content-attribute">valid value</a> of the <code>popover</code> attribute. This will throw a <code>NotSupportedError</code> <code>DOMException</code>.</li><li>Calling any of the three methods on a valid popover that is not connected to a document. This will throw an <code>InvalidStateError</code> <code>DOMException</code>.</li></ol>
<p>When a popover is open, it will match the <code>:popover-open</code> pseudo class:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>const</span><span> popover</span><span> =</span><span> document.</span><span>createElement</span><span>(</span><span>'div'</span><span>)</span></span>
<span class="line"><span>popover.popover </span><span>=</span><span> 'auto'</span></span>
<span class="line"><span>popover.</span><span>matches</span><span>(</span><span>':popover-open'</span><span>) </span><span>===</span><span> false</span></span>
<span class="line"><span>popover.</span><span>showPopover</span><span>()</span></span>
<span class="line"><span>popover.</span><span>matches</span><span>(</span><span>':popover-open'</span><span>) </span><span>===</span><span> true</span></span></code></pre>
<p>The UA stylesheet for popovers will look like this:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>[</span><span>popover</span><span>] {</span></span>
<span class="line"><span> position</span><span>: </span><span>fixed</span><span>;</span></span>
<span class="line"><span> inset</span><span>: </span><span>0</span><span>;</span></span>
<span class="line"><span> width</span><span>: </span><span>fit-content</span><span>;</span></span>
<span class="line"><span> height</span><span>: </span><span>fit-content</span><span>;</span></span>
<span class="line"><span> margin</span><span>: </span><span>auto</span><span>;</span></span>
<span class="line"><span> border</span><span>: </span><span>solid</span><span>;</span></span>
<span class="line"><span> padding</span><span>: </span><span>0.25</span><span>em</span><span>;</span></span>
<span class="line"><span> overflow</span><span>: </span><span>auto</span><span>;</span></span>
<span class="line"><span> color</span><span>: CanvasText;</span></span>
<span class="line"><span> background-color</span><span>: Canvas;</span></span>
<span class="line"><span>}</span></span>
<span class="line"></span>
<span class="line"><span>[</span><span>popover</span><span>]</span><span>::backdrop</span><span> {</span></span>
<span class="line"><span> pointer-events</span><span>: </span><span>none</span><span> !important</span><span>;</span></span>
<span class="line"><span>}</span></span>
<span class="line"></span>
<span class="line"><span>[</span><span>popover</span><span>]{</span><span>match</span><span> this</span><span> when</span><span> popover</span><span> is</span><span> hidden</span><span>} {</span></span>
<span class="line"><span> display</span><span>: </span><span>none</span><span>;</span></span>
<span class="line"><span>}</span></span></code></pre>
<p>As seen above, the styling rules manage “showing” vs. “hidden” via these UA stylesheet rules:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>[</span><span>popover</span><span>]{</span><span>when</span><span> hidden</span><span>}: {</span></span>
<span class="line"><span> display</span><span>: </span><span>none</span><span>;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>[</span><span>popover</span><span>] {</span></span>
<span class="line"><span> position</span><span>: </span><span>fixed</span><span>;</span></span>
<span class="line"><span>}</span></span></code></pre>
<p>The above rules mean that a popover, when not “shown”, has <code>display:none</code> applied, and that style is removed when one of the methods above is used to show the popover. Note that the <code>display:none</code> UA stylesheet rule is not <code>!important</code>. In other words, developer style rules can be used to override this UA style to make a not-showing popover visible in the page. In this case, the popover will <strong>not</strong> be displayed in the top layer, but rather at its ordinary <code>z-index</code> position within the document. This can be used, for example, to make popover content “return to the page” instead of becoming hidden. Care must be taken, if the <code>display</code> property is set by developer CSS, to ensure the popover visibility isn’t adversely affected. For example, developer CSS could do this:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>[</span><span>popover</span><span>] {</span></span>
<span class="line"><span> /* Make the popover a flexbox: */</span></span>
<span class="line"><span> display</span><span>: </span><span>flex</span><span>;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>[</span><span>popover</span><span>]</span><span>:not</span><span>(:</span><span>popover-open</span><span>) {</span></span>
<span class="line"><span> /* But make sure not to show it unless it's open: */</span></span>
<span class="line"><span> display</span><span>: </span><span>none</span><span>;</span></span>
<span class="line"><span>}</span></span></code></pre>
<p>Be mindful when using other stylesheets that you haven’t authored. These may set the <code>display</code> value on your popover elements. For example, if you use a <code>menu</code> element as a <code>popover</code> and you use earlier versions of <a href="https://necolas.github.io/normalize.css/">normalize.css</a>. In this case, normalize.css has a rule that sets <code>display: flex</code> on <code>menu</code> elements.</p>
<p>An early version of the Popover API included custom behaviors to make animations and transitions of popovers trivially easy. During the standardization process, however, this functionality was removed, with the intention to replace it with a more general capability for the web platform that also applies to other top layer elements. This section describes how that new set of capabilities will work together to help animate popovers (and modal <code>&lt;dialog&gt;</code>s). There is also <a href="https://github.com/chrishtr/rendering/blob/master/entry-exit-animations.md">a separate explainer</a> for this set of features.</p>
<p>The new capabilities include the ones described in these five CSSWG issues:</p>
<p>Assuming all five of the above features land in specs and browsers in roughly the form they’re currently being discussed, then to animate a popover’s show/hide transitions you would use:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>[</span><span>popover</span><span>] {</span></span>
<span class="line"><span> --transition-time</span><span>: </span><span>0.5</span><span>s</span><span>;</span></span>
<span class="line"><span> transition</span><span>: display </span><span>var</span><span>(</span><span>--transition-time</span><span>), overlay-behavior </span><span>var</span><span>(</span><span>--transition-time</span><span>),</span></span>
<span class="line"><span> opacity </span><span>var</span><span>(</span><span>--transition-time</span><span>);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>[</span><span>popover</span><span>]:</span><span>popover-open</span><span> {</span></span>
<span class="line"><span> @</span><span>initial</span><span> {</span></span>
<span class="line"><span> opacity</span><span>: </span><span>0</span><span>;</span></span>
<span class="line"><span> }</span></span>
<span class="line"><span> opacity: 1;</span></span>
<span class="line"><span>}</span></span></code></pre>
<p>The above CSS will result in the opacity (and also <code>display</code> and top-layer-ness) being transitioned during both show and hide transitions.</p>
<p>This can also be achieved with the equivalent CSS animations:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>[</span><span>popover</span><span>]:</span><span>popover-open</span><span> {</span></span>
<span class="line"><span> animation</span><span>: fadein </span><span>0.5</span><span>s</span><span>;</span></span>
<span class="line"><span> transition</span><span>: overlay-behavior </span><span>0.5</span><span>s</span><span>;</span></span>
<span class="line"><span> opacity</span><span>: </span><span>1</span><span>; </span><span>/* UA default */</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>@keyframes</span><span> fadein</span><span> {</span></span>
<span class="line"><span> from</span><span> {</span></span>
<span class="line"><span> opacity</span><span>: </span><span>0</span><span>;</span></span>
<span class="line"><span> }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>[</span><span>popover</span><span>]:closed {</span></span>
<span class="line"><span> animation</span><span>: fadeout </span><span>0.5</span><span>s</span><span>;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>@keyframes</span><span> fadeout</span><span> {</span></span>
<span class="line"><span> from</span><span> {</span></span>
<span class="line"><span> display</span><span>: </span><span>block</span><span>;</span></span>
<span class="line"><span> }</span></span>
<span class="line"><span> to</span><span> {</span></span>
<span class="line"><span> opacity</span><span>: </span><span>0</span><span>;</span></span>
<span class="line"><span> }</span></span>
<span class="line"><span>}</span></span></code></pre>
<p>Again, the above descriptions depend on all five CSSWG issues above landing in standards and browsers.</p>
<p>The <code>popover</code> content attribute will be <a href="https://html.spec.whatwg.org/#reflect">reflected</a> as a nullable IDL attribute:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>[Exposed=Window]</span></span>
<span class="line"><span>partial interface Element {</span></span>
<span class="line"><span> attribute DOMString? popover;</span></span>
<span class="line"><span>}</span></span></code></pre>
<p>This not only allows developer ease-of-use from JavaScript, but also allows for a feature detection mechanism:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>function</span><span> supportsPopover</span><span>() {</span></span>
<span class="line"><span> return</span><span> HTMLElement</span><span>.</span><span>prototype</span><span>.</span><span>hasOwnProperty</span><span>(</span><span>'popover'</span><span>)</span></span>
<span class="line"><span>}</span></span></code></pre>
<p>Further, only <a href="#html-content-attribute">valid values</a> of the content attribute will be reflected to the IDL property, with invalid values being reflected as the value <code>manual</code>. For example:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>const</span><span> div</span><span> =</span><span> document.</span><span>createElement</span><span>(</span><span>'div'</span><span>)</span></span>
<span class="line"><span>div.</span><span>setAttribute</span><span>(</span><span>'popover'</span><span>, </span><span>'AUTO'</span><span>)</span></span>
<span class="line"><span>div.popover </span><span>===</span><span> 'auto'</span><span> // true (note lowercase)</span></span>
<span class="line"><span>div.</span><span>setAttribute</span><span>(</span><span>'popover'</span><span>, </span><span>'invalid!'</span><span>)</span></span>
<span class="line"><span>div.popover </span><span>===</span><span> 'manual'</span><span> // true</span></span>
<span class="line"><span>div.</span><span>removeAttribute</span><span>(</span><span>'popover'</span><span>)</span></span>
<span class="line"><span>div.popover </span><span>===</span><span> null</span><span> // true</span></span></code></pre>
<p>This allows feature detection of the values, for forward compatibility:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>function</span><span> supportsPopoverType</span><span>(</span><span>type</span><span>) {</span></span>
<span class="line"><span> if</span><span> (</span><span>!</span><span>HTMLElement</span><span>.</span><span>prototype</span><span>.</span><span>hasOwnProperty</span><span>(</span><span>'popover'</span><span>)) </span><span>return</span><span> false</span><span> // Popover API not supported</span></span>
<span class="line"><span> const</span><span> testElement</span><span> =</span><span> document.</span><span>createElement</span><span>(</span><span>'div'</span><span>)</span></span>
<span class="line"><span> testElement.popover </span><span>=</span><span> type</span></span>
<span class="line"><span> return</span><span> testElement.popover </span><span>==</span><span> type.</span><span>toLowerCase</span><span>()</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>supportsPopoverType</span><span>(</span><span>'manual'</span><span>) </span><span>===</span><span> true</span></span>
<span class="line"><span>supportsPopoverType</span><span>(</span><span>'invalid!'</span><span>) </span><span>===</span><span> false</span></span></code></pre>
<p>An event is fired synchronously when a popover is shown or hidden. This event can be used, for example, to populate content for the popover just in time before it is shown, or update server data when it closes. The event provides a <code>currentState</code> and <code>newState</code> for the popover. The value of these properties can either be “open” or “closed”. The events looks like this:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>const</span><span> popover</span><span> =</span><span> Object.</span><span>assign</span><span>(document.</span><span>createElement</span><span>(</span><span>'div'</span><span>), { popover: </span><span>'auto'</span><span> })</span></span>
<span class="line"><span>popover.</span><span>addEventListener</span><span>(</span><span>'beforetoggle'</span><span>, ({ </span><span>currentState</span><span>, </span><span>newState</span><span> }) </span><span>=&gt;</span><span> {</span></span>
<span class="line"><span> if</span><span> (currentState </span><span>===</span><span> 'closed'</span><span>) console.</span><span>info</span><span>(</span><span>'Popover is closed'</span><span>)</span></span>
<span class="line"><span> if</span><span> (newState </span><span>===</span><span> 'open'</span><span>) console.</span><span>info</span><span>(</span><span>'Popover is being shown'</span><span>)</span></span>
<span class="line"><span>})</span></span></code></pre>
<p>The <code>beforetoggle</code> event is cancellable when the <code>newState</code> is equal to “open”. Doing so keeps the popover from being shown. You can’t cancel the hiding of a popover as that would interfere with the one-at-a-time and light-dismiss behaviors. The <code>beforetoggle</code> event is fired synchronously.</p>
<p>Elements that move into the top layer may require focus to be moved to that element, or a descendant element. However, not all elements in the top layer will require focus. For example, a modal <code>&lt;dialog&gt;</code> will have focus set to its first interactive element, if not the dialog element itself, because a modal dialog is something that requires immediate attention. On the other hand, a <code>&lt;div popover=manual&gt;</code>, which may represent a dynamic notification message (commonly referred to as a “notification”, “toast”, or “alert”), or potentially a persistent chat widget, should not immediately receive focus, even if it contains focusable elements. This is because such popovers are meant for out-of-band communication of state, and are not meant to interrupt a user’s current action. Additionally, if the top layer element <strong>should</strong> receive immediate focus, there is a question about <strong>which</strong> part of the element gets that initial focus. For example, the element itself could receive focus, or one of its focusable descendants could receive focus.</p>
<p>To provide control over these behaviors, the <code>autofocus</code> attribute can be used on or within popovers. When present on a popover or one of its descendants, it will result in focus being moved to the popover or the specified element when the popover is shown. Note that <code>autofocus</code> is <a href="https://html.spec.whatwg.org/multipage/interaction.html#the-autofocus-attribute">already a global attribute</a>, but the existing behavior applies to element focus on <strong>page load</strong>. This proposal extends that definition to be used within popovers, and the focus behavior happens <strong>when they are shown</strong>. Note that adding <code>autofocus</code> to a popover descendant does <strong>not</strong> cause the popover to be shown on page load, and therefore it does not cause focus to be moved into the popover <strong>on page load</strong>, unless the <code>defaultopen</code> attribute is also used.</p>
<p>The <code>autofocus</code> attribute allows control over the focus behavior when the popover is shown. When the popover is hidden, often the most user friendly thing to do is to return focus to the previously-focused element. The <code>&lt;dialog&gt;</code> element currently behaves this way. However, for popovers, there are some nuances. For example, if the popover is being hidden via light dismiss, because the user clicked on another element outside the popover, the focus should <strong>not</strong> be returned to another element, it should go to the clicked element (if focusable, or <code>&lt;body&gt;</code> if not). There are a number of other such considerations. The behavior on hiding the popover is:</p>
<ul><li><p>A popover element has a <strong>previously focused element</strong>, initially <code>null</code>, which is set equal to <code>document.activeElement</code> when the popover is shown, if a) the popover is a <code>auto</code> popover, and b) if the <a href="#the-popover-stack">popover stack</a> is currently empty. The <strong>previously focused element</strong> is set back to <code>null</code> when a popover is hidden.</p></li><li><p>When a popover is hidden, focus is set back to the <strong>previously focused element</strong>, if it is non-<code>null</code>, in the following cases:</p><ol><li>Light dismiss via <a href="https://wicg.github.io/close-watcher/#close-signal">close signal</a> (e.g. Escape key pressed).</li><li>Hide popover from JavaScript via <code>hidePopover()</code>.</li><li>Hide popover via a <strong>popover-contained</strong>* triggering element with `popovertargetaction=“hide” or “toggle”. The triggering element must be popover-contained, otherwise the keyboard or mouse activation of the triggering element should have already moved focus to that element.</li><li>Hide popover because its <code>popover</code> type changes (e.g. via <code>myPopover.popover='something else';</code>).</li></ol></li><li><p>Any other actions which hide the popover will <strong>not</strong> cause the focus to be changed when the popover hides. In these cases, the “normal” behavior happens for each action. Some examples include:</p><ol><li>Click outside the popover (focus the clicked thing).</li><li>Click on a <strong>non-popover-contained</strong>* triggering element to close popover (focus the triggering element). This is a special case of the point just above.</li><li>Tab-navigate (focus the next tabbable element in the document’s focus order).</li><li>Hide popover because it was removed from the document (event handlers not allowed while removing elements).</li><li>Hide popover when a modal dialog or fullscreen element is shown (follow dialog/fullscreen focusing steps).</li><li>Hide popover via <code>showPopover()</code> on another popover that hides this one (follow new popover focusing steps).</li></ol></li></ul>
<p>The intention of the above set of behaviors is to return focus to the previously focused element when that makes sense, and not do so when the user’s intention is to move focus elsewhere or when it would be confusing.</p>
<p>* In the above, “a popover contained triggering element” means the triggering element is contained within <strong>the popover being hidden</strong>, not any arbitrary popover.</p>
<p>A new attribute, <code>anchor</code>, can be used on a popover element to refer to the popover’s “anchor”. The value of the attribute is a string idref corresponding to the <code>id</code> of another element (the “anchor element”). This anchoring relationship is used for two things:</p>
<ol><li>Establish the provided anchor element as an <a href="#nearest-open-ancestral-popover">“ancestor”</a> of this popover, for light-dismiss behaviors. In other words, the <code>anchor</code> attribute can be used to form nested popovers.</li><li>The referenced anchor element could be used by the <a href="https://drafts.csswg.org/css-anchor-1/">Anchor Positioning feature</a>.</li></ol>
<p>The anchor attribute can also be accessed via IDL:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>// This sets the IDREF for the anchor element, and not the element itself:</span></span>
<span class="line"><span>myPopover.anchor </span><span>=</span><span> idref</span></span></code></pre>
<p>Akin to modal <code>&lt;dialog&gt;</code> and fullscreen elements, popovers allow access to a <code>::backdrop</code> pseudo element, which is a full-screen element placed directly behind the popover in the top layer. This allows the developer to do things like blur out the background when a popover is showing:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>&lt;</span><span>div</span><span> popover</span><span>&gt;I'm a popover&lt;/</span><span>div</span><span>&gt;</span></span>
<span class="line"><span>&lt;</span><span>style</span><span>&gt;</span></span>
<span class="line"><span> [</span><span>popover</span><span>]</span><span>::backdrop</span><span> {</span></span>
<span class="line"><span> backdrop-filter</span><span>: </span><span>blur</span><span>(</span><span>3</span><span>px</span><span>);</span></span>
<span class="line"><span> }</span></span>
<span class="line"><span>&lt;/</span><span>style</span><span>&gt;</span></span></code></pre>
<p>Note that in contrast to the <code>::backdrop</code> pseudo element for modal dialogs and fullscreen elements, the <code>::backdrop</code> for a popover is styled by a UA stylesheet rule <code>pointer-events: none !important</code>, which means it cannot trap clicks outside the popover. This ensures the “click outside” light dismiss behavior continues to function. For this reason, and because <code>popover=manual</code> popovers do not have light-dismiss behavior, it is not recommended that the <code>::backdrop</code> be styled in a non-transparent way for <code>popover=manual</code> popovers. Doing so would obscure the rest of the page, while still allowing the user to click or keyboard navigate to obscured elements. In this case, a better approach might be to use a modal <code>&lt;dialog&gt;</code> element, which will trap focus within the <code>&lt;dialog&gt;</code>.</p>
<p>For elements that are displayed on the top layer via this API, there are a number of things that can cause the element to be removed from the top-layer, besides the ones <a href="#showing-and-hiding-a-popover">described above</a>. These fall into three main categories:</p>
<ul><li><strong>One at a Time.</strong> Another element being added to the top-layer causes existing top layer elements to be removed. This is typically used for “one at a time” type elements: when one popover is shown, other popovers should be hidden, so that only one is on-screen at a time. This is also used when “more important” top layer elements get added. For example, fullscreen elements should close all open popovers.</li><li><strong>Light Dismiss.</strong> User action such as clicking outside the element, hitting Escape, or causing keyboard focus to leave the element should all cause a displayed popover to be hidden. This is typically called “light dismiss”, and is discussed in more detail in <a href="#light-dismiss">this section</a>.</li><li><strong>Other Reasons.</strong> Because the top layer is a UA-managed resource, it may have other reasons (for example a user preference) to forcibly remove elements from the top layer.</li></ul>
<p>In all such cases, the UA is allowed to forcibly remove an element from the top layer and re-apply the <code>display:none</code> popover UA rule. The rules the UA uses to manage these interactions depends on the element types, and this is described in more detail in <a href="#classes-of-top-layer-ui">this section</a>.</p>
<p>The term “light dismiss” for a popover is used to describe the user “moving on” to another part of the page, or generally being done interacting with the popover. When this happens, the popover should be hidden. Several actions trigger light dismiss of a popover:</p>
<ol><li>Clicking or tapping outside the bounds of the popover. Any <code>mousedown</code> event will trigger <strong>all open popovers</strong> to be hidden, starting from the top of <a href="#the-popover-stack">the popover stack</a>, and ending with the <a href="#nearest-open-ancestral-popover">nearest open ancestral popover</a> of the <code>mousedown</code> event’s <code>target</code> <code>Node</code>. This means clicking on a popover or its trigger or anchor elements will not hide that popover.</li><li>Hitting the Escape key, or generally any <a href="#close-signal">“close signal”</a>. This will cause the topmost popover on <a href="#the-popover-stack">the popover stack</a> to be hidden.</li></ol>
<p>For <code>popover=auto</code> only, it is possible to have “nested” popovers. I.e. two popovers that are allowed to both be open at the same time, due to their relationship with each other. A simple example where this would be desired is a popover menu that contains sub-menus: it is commonly expected to support this pattern, and keep the main menu showing while the sub-menu is shown.</p>
<p>Popover nesting is not possible/applicable to the other popover types, such as <code>popover=manual</code>.</p>
<p>The <code>Document</code> contains a “stack of open popovers”, which is initially empty. When a <code>popover=auto</code> element is shown, that popover is pushed onto the top of the stack, and when a <code>popover=auto</code> element is hidden, it is popped from the top of the stack.</p>
<p>The “nearest open ancestral popover” <code>P</code> to a given <code>Node</code> N is defined in this way:</p>
<blockquote><p><code>P</code> is the topmost popover in <a href="#the-popover-stack">the popover stack</a> for which any one of the following is true:</p><ol><li><code>P</code> is a flat-tree DOM ancestor of <code>N</code>.</li><li><code>N</code> is a descendant of another popover <code>P2</code>, which has an <code>anchor</code> attribute whose value is equal to <code>P</code>’s <code>id</code> or any of <code>P</code>’s flat-tree descendant’s <code>id</code>s.</li><li><code>P</code> contains a <a href="#declarative-triggers">triggering element</a> whose target is another popover <code>P2</code>, which contains <code>N</code>.</li></ol><p>If none of the popovers in <a href="#the-popover-stack">the popover stack</a> match the above conditions, then <code>P</code> is <code>null</code>.</p></blockquote>
<p>The purpose of the algorithm above is to allow “nesting” of <code>popover=auto</code> popovers in several natural ways:</p>
<ol><li><strong>Using traditional DOM tree descendants:</strong> when one popover is a descendant of another popover, these two are “nested”.</li><li><strong>Using the <code>anchor</code> attribute:</strong> when a popover has an <code>anchor</code> attribute that points to another popover (or descendant of another popover), these two are “nested”. This allows the <code>anchor</code> attribute to be used with the <a href="https://tabatkins.github.io/specs/css-anchor-position/">Anchor Positioning API</a>, transparently defining a clear “nested” relationship between the popovers. It is not necessary to use the Anchor Positioning API.</li><li><strong>Using a <a href="#declarative-triggers">declarative triggering element</a> (i.e. one using the <code>popovertarget</code> attribute):</strong> when a triggering element is contained in a popover, and can therefore trigger another popover, the second popover is “nested” within the first.</li></ol>
<p>Note that because <a href="#the-popover-stack">the popover stack</a> can only contain <code>popover=auto</code> popovers, it is only possible to “nest” popovers within <code>popover=auto</code> popovers.</p>
<p>The “close signal” <a href="https://wicg.github.io/close-watcher/#close-signal">proposal</a> attempts to unify the concept of “closing” something. Most typically, the Escape key is the standard close signal, but there are others, including the Android back button, Accessibility Tools dismiss gestures, and the Playstation square button. Any of these close signals is a light dismiss trigger for the topmost popover.</p>
<p>As described in this section, the popover types (<code>auto</code> and <code>manual</code>) each have slightly different interactions with each other. For example, <code>auto</code>s hide other <code>auto</code>s, but <code>manual</code>s do not close each other. Additionally, there are other (non-popover) elements that participate in the top layer. This section describes the general interactions between the various top layer element types, including the various flavors of popover:</p>
<ul><li>Popover (<strong><code>popover=auto</code></strong>)<ul><li>When opened, force-closes other <code>popover=auto</code>s, except for <a href="#nearest-open-ancestral-popover">ancestor popovers</a>.</li><li>It would generally be expected that a popover of this type would either receive focus, or a descendant element would receive focus when invoked.</li><li>Dismisses on <a href="https://wicg.github.io/close-watcher/#close-signal">close signal</a> or a click outside the element.</li></ul></li><li>Manual (<strong><code>popover=manual</code></strong>)<ul><li>Does not force-close any other element type.</li><li>Does not light-dismiss - closes via timer or explicit close action.</li></ul></li><li>Dialog (<strong><code>&lt;dialog&gt;.showModal()</code></strong>)<ul><li>When opened, force-closes <code>popover=auto</code>.</li><li>Dismisses on <a href="https://wicg.github.io/close-watcher/#close-signal">close signal</a></li></ul></li><li>Fullscreen (<strong><code>&lt;div&gt;.requestFullscreen()</code></strong>)<ul><li>When opened, force-closes <code>popover=auto</code>, and (with spec changes) dialog</li><li>Dismisses on <a href="https://wicg.github.io/close-watcher/#close-signal">close signal</a></li></ul></li></ul>
<p>Since the <code>popover</code> content attribute can be applied to any element, and this only impacts the element’s presentation (top layer vs not top layer), this addition does not have any direct semantic or accessibility impact. The element with the <code>popover</code> attribute will keep its existing semantics and AOM representation. For example, <code>&lt;article popover&gt;...&lt;/article&gt;</code> will continue to be exposed as an implicit <code>role=article</code>, but will be able to be displayed on top of other content. Similarly, ARIA can be used to modify accessibility mappings in <a href="https://w3c.github.io/html-aria/">the normal way</a>, for example <code>&lt;div popover role=note&gt;...&lt;/div&gt;</code>.</p>
<p>As mentioned in the <a href="#declarative-triggers">Declarative Triggers</a> section, accessibility mappings will be automatically configured to associate the popover with its trigger element, as needed.</p>
<p>While the popover API can be used on most elements, there are some limitations. It is legal to apply the <code>popover</code> attribute to a <code>&lt;dialog&gt;</code> element, for example. However, doing so causes <code>dialog.showModal()</code> (the <code>&lt;dialog&gt;</code> API to show it modally) to throw an exception. This is because it is confusing that an element with <code>popover</code> can be shown in a modal fashion. Similarly, calling <code>element.requestFullscreen()</code> on an element that has the <code>popover</code> attribute will return a rejected promise.</p>
<p>This section contains several HTML examples, showing how various UI elements might be constructed using this API.</p>
<p><strong>Note:</strong> these examples are for demonstrative purposes of how to use the <code>popovertarget</code> and <code>popover</code> attributes. They may not represent all necessary HTML, ARIA or JavaScript features needed to fully create such components.</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>&lt;</span><span>button</span><span> popovertarget</span><span>=</span><span>"datepicker"</span><span>&gt;Pick a date&lt;/</span><span>button</span><span>&gt;</span></span>
<span class="line"><span>&lt;</span><span>my-date-picker</span><span> role</span><span>=</span><span>"dialog"</span><span> id</span><span>=</span><span>"datepicker"</span><span> popover</span><span>&gt;...date picker contents...&lt;/</span><span>my-date-picker</span><span>&gt;</span></span>
<span class="line"></span>
<span class="line"><span>&lt;!-- No script - the popovertarget attribute takes care of activation, and</span></span>
<span class="line"><span> the `popover` attribute takes care of the popover behavior. --&gt;</span></span></code></pre>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>&lt;</span><span>selectmenu</span><span>&gt;</span></span>
<span class="line"><span> &lt;</span><span>div</span><span> popover</span><span> slot</span><span>=</span><span>"listbox"</span><span> behavior</span><span>=</span><span>"listbox"</span><span>&gt;</span></span>
<span class="line"><span> &lt;</span><span>option</span><span>&gt;Option 1&lt;/</span><span>option</span><span>&gt;</span></span>
<span class="line"><span> &lt;</span><span>option</span><span>&gt;Option 2&lt;/</span><span>option</span><span>&gt;</span></span>
<span class="line"><span> &lt;/</span><span>div</span><span>&gt;</span></span>
<span class="line"><span>&lt;/</span><span>selectmenu</span><span>&gt;</span></span>
<span class="line"></span>
<span class="line"><span>&lt;!-- No script - `&lt;selectmenu&gt;`'s listbox is provided by a `&lt;div popover&gt;` element,</span></span>
<span class="line"><span> which takes care of popover behavior --&gt;</span></span></code></pre>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>&lt;</span><span>div</span><span> role</span><span>=</span><span>"alert"</span><span>&gt;</span></span>
<span class="line"><span> &lt;</span><span>my-manual-container</span><span> popover</span><span>=</span><span>"manual"</span><span>&gt;&lt;/</span><span>my-manual-container</span><span>&gt;</span></span>
<span class="line"><span>&lt;/</span><span>div</span><span>&gt;</span></span>
<span class="line"></span>
<span class="line"><span>&lt;</span><span>script</span><span>&gt;</span></span>
<span class="line"><span> window.</span><span>addEventListener</span><span>(</span><span>'message'</span><span>, (</span><span>e</span><span>) </span><span>=&gt;</span><span> {</span></span>
<span class="line"><span> const</span><span> container</span><span> =</span><span> document.</span><span>querySelector</span><span>(</span><span>'my-manual-container'</span><span>)</span></span>
<span class="line"><span> container.</span><span>appendChild</span><span>(document.</span><span>createTextNode</span><span>(</span><span>'Msg: '</span><span> +</span><span> e.data))</span></span>
<span class="line"><span> container.</span><span>showPopover</span><span>()</span></span>
<span class="line"><span> })</span></span>
<span class="line"><span>&lt;/</span><span>script</span><span>&gt;</span></span></code></pre>
<p>Allowing a popover/top-layer element to exceed the bounds of its containing frame poses a serious security risk: such an element could spoof browser UI or containing-page content. While the <a href="https://open-ui.org/components/popup.research.explainer-v1">original <code>&lt;popup&gt;</code> proposal</a> did not discuss this issue, the <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ControlUICustomization/explainer.md#security"><code>&lt;selectmenu&gt;</code> proposal</a> does have a specific section at least mentioning this issue. Some top-layer APIs (e.g. the fullscreen API) make it possible for an element to exceed the frame bounds in some cases, great care must be taken in these cases to ensure user safety. Given the complete flexibility offered by the popover API (any element, arbitrary content, etc.), there would be no way to ensure the safety of this feature if it were allowed to exceed frame bounds.</p>
<p>For completeness, several use counters were added to Chromium to measure how often this type of behavior (content exceeding the frame bounds) might be needed. These are approximations, as they merely measure the total number of times one of the built-in “popover” windows, which can exceed frame bounds because of their carefully-controlled content, is shown. The popovers included in this count include the <code>&lt;select&gt;</code> popover, the <code>&lt;input type=color&gt;</code> color picker, and the <code>&lt;input type=date/etc&gt;</code> date/time picker. Data can be found here:</p>
<p>So about 11% of all popovers currently exceed their owner frame bounds. That should be considered a rough upper bound, as it is possible that some of those popovers <strong>could</strong> have fit within their frame if an attempt was made to do so, but they just happened to exceed the bounds anyway.</p>
<p>In any case, it is important to note that this API cannot be used to render content outside the containing frame.</p>
<p>Note that using the API described in this explainer, it is possible for elements contained within a shadow root to be popovers. For example, it is possible to construct a custom element that wraps a popover type UI element, such as a <code>&lt;my-popover&gt;</code>, with this DOM structure:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>&lt;</span><span>my-popover</span><span>&gt;</span></span>
<span class="line"><span> &lt;</span><span>template</span><span> shadowroot</span><span>=</span><span>"closed"</span><span>&gt;</span></span>
<span class="line"><span> &lt;</span><span>div</span><span> popover</span><span>=</span><span>"auto"</span><span>&gt;</span></span>
<span class="line"><span> This is a popover:</span></span>
<span class="line"><span> &lt;</span><span>slot</span><span>&gt;&lt;/</span><span>slot</span><span>&gt;</span></span>
<span class="line"><span> &lt;/</span><span>div</span><span>&gt;</span></span>
<span class="line"><span> &lt;/</span><span>template</span><span>&gt;</span></span>
<span class="line"><span> Popover text here!</span></span>
<span class="line"><span>&lt;/</span><span>my-popover</span><span>&gt;</span></span></code></pre>
<p>In this case, the (closed) shadow root contains a <code>&lt;div&gt;</code> that has <code>popover=auto</code> and that element will be shown on the top layer when the custom element calls <code>div.showPopover()</code>.</p>
<p>This is “normal”, and the only point of this section is to point out that even shadow dom children can be promoted to the top layer, in the same way that a shadow root can contain a <code>&lt;dialog&gt;</code> that can be <code>showModal()</code>‘d, or a <code>&lt;div&gt;</code> that can be <code>requestFullscreen()</code>‘d.</p>
<p>There might come a time, sooner or later, where a new popover-type HTML element is desired which combines strong semantics and purpose-built behaviors. For example, a <code>&lt;notification&gt;</code> or <code>&lt;listbox&gt;</code> element. Those elements could be relatively easily built via the APIs proposed in this document. For example, a <code>&lt;notification&gt;</code> element could be defined to have <code>role=alert</code> and <code>popover=manual</code>, and therefore re-use this popover API for always-on-top rendering. In other words, these new elements could be <em>explained</em> in terms of the lower-level primitives being proposed for this API.</p>
<p>Many decisions and choices were made in the design of this API, and those decisions were made via numerous discussions (live and on issues) in <a href="https://open-ui.org/">OpenUI</a>, a WHATWG <a href="https://open-ui.org/working-mode">Community Group</a>.</p>
<p>To achieve the <a href="#goals">goals</a> of this project, a number of approaches could have been used:</p>
<ul><li>An HTML content attribute (this proposal).</li><li>A dedicated <code>&lt;popup&gt;</code> element.</li><li>A CSS property.</li><li>A JavaScript API.</li></ul>
<p>Each of these options is significantly different from the others. To properly evaluate them, each option was fleshed out in some detail. Please see this document for the details of that effort:</p>
<p>That document discusses the pros and cons for each alternative. After exploring these options, the <a href="#html-content-attribute">HTML content attribute</a> approach <a href="https://github.com/openui/open-ui/issues/455#issuecomment-1050172067">was resolved by OpenUI</a> to be the best overall.</p>
<p>Again, refer to the <a href="/components/popup.proposal.alternatives">Other Alternatives Considered</a> document for an exhaustive look at the other alternatives. That document runs through a fairly complete design of the other alternatives, to see what they would look like.</p>
<p>This section simply tries to summarize the primary reason that a content attribute was chosen to enable the popover behavior: a content attribute allows <em>behavior</em> to be applied to <em>any element</em>. That is useful:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>&lt;</span><span>dialog</span><span> popover</span><span>=</span><span>"auto"</span><span>&gt;</span></span>
<span class="line"><span> This is a "light dismiss" dialog</span></span>
<span class="line"><span> &lt;</span><span>button</span><span>&gt;Ok&lt;/</span><span>button</span><span>&gt;</span></span>
<span class="line"><span> &lt;</span><span>button</span><span>&gt;Cancel&lt;/</span><span>button</span><span>&gt;</span></span>
<span class="line"><span>&lt;/</span><span>dialog</span><span>&gt;</span></span></code></pre>
<p>Here, the developer is building <strong>a dialog</strong>. Since HTML <a href="https://html.spec.whatwg.org/multipage/dom.html#semantics-2">strongly encourages</a> the use of the correct element that properly represents the <strong>semantics of the content</strong>, the proper element in this case is a <code>&lt;dialog&gt;</code>.</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>&lt;</span><span>menu</span><span> popover</span><span>=</span><span>"auto"</span><span>&gt;</span></span>
<span class="line"><span> &lt;</span><span>li</span><span>&gt;&lt;</span><span>button</span><span>&gt;Item 1&lt;/</span><span>button</span><span>&gt;&lt;/</span><span>li</span><span>&gt;</span></span>
<span class="line"><span> &lt;</span><span>li</span><span>&gt;&lt;</span><span>button</span><span>&gt;Item 2&lt;/</span><span>button</span><span>&gt;&lt;/</span><span>li</span><span>&gt;</span></span>
<span class="line"><span> &lt;</span><span>li</span><span>&gt;&lt;</span><span>button</span><span>&gt;Item 3&lt;/</span><span>button</span><span>&gt;&lt;/</span><span>li</span><span>&gt;</span></span>
<span class="line"><span>&lt;/</span><span>menu</span><span>&gt;</span></span></code></pre>
<p>Similarly here, the developer is building <strong>a menu</strong>, so they should use the <code>&lt;menu&gt;</code> element. This adheres to the semantic definition of a <code>&lt;menu&gt;</code> element, and allows the content to be programmatically exposed as a listing of buttons.</p>
<p>In both cases, not only does the use of the semantically-correct element make it easier to understand the content, it also enforces the appropriate content rules and behaviors that are specific to each element. Further, using the correct element allows the UA to correctly represent the content in the accessibility tree, making assistive technologies better able to assist users in navigating the content.</p>
<p>In an alternative proposal where the popover behavior is enabled via a special element, e.g. <code>&lt;popup&gt;</code>, all of the above would need to be carefully managed by the developer via ARIA roles and attributes, as there is no single role that can consistently be used to identify a <code>&lt;popup&gt;</code> element:</p>
<pre class="astro-code github-dark" tabindex="0"><code><span class="line"><span>&lt;</span><span>popup</span><span> role</span><span>=</span><span>"dialog"</span><span>&gt;</span></span>
<span class="line"><span> &lt;</span><span>popup</span><span> role</span><span>=</span><span>"list"</span><span>&gt;...etc...&lt;/</span><span>popup</span><span>&gt;</span></span>
<span class="line"><span>&lt;/</span><span>popup</span><span>&gt;</span></span></code></pre>
<p>and that violates the <a href="https://www.w3.org/TR/using-aria/#firstrule">first rule of ARIA</a>, which is essentially that if there’s an element that properly represents the content, use that, and don’t use ARIA.</p>
<p>By having <code>popover</code> be a content attribute that purely confers behavior upon an existing element, the above problems are nicely resolved. Semantics are provided by elements, and behaviors are confered on those elements via attributes. This situation is exactly analogous to <code>contenteditable</code> or <code>tabindex</code>, which confer specific behaviors on any element. Imagine a Web in which those two attributes were instead elements: <code>&lt;contenteditable&gt;</code> and <code>&lt;tabindex index=0&gt;</code>. In that Web, many common patterns would either be very convoluted or simply not possible.</p>
<p>Many small (and large!) behavior questions were answered via discussions at OpenUI. This section contains links to some of those:</p>
<p>Here are all non-spec-text related OpenUI popover issues, both open and closed:</p>
<p><a href="https://github.com/openui/open-ui/issues?q=is%3Aissue+label%3Apopover+-label%3Apopover-spec">https://github.com/openui/open-ui/issues?q=is%3Aissue+label%3Apopover+-label%3Apopover-spec</a></p>
<p>Here are all current, open, non-spec-text related OpenUI popover issues:</p>
<p><a href="https://github.com/openui/open-ui/issues?q=is%3Aissue+is%3Aopen+label%3Apopover+-label%3Apopover-spec+-label%3Apopover-v2">https://github.com/openui/open-ui/issues?q=is%3Aissue+is%3Aopen+label%3Apopover+-label%3Apopover-spec+-label%3Apopover-v2</a></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>

+ 154
- 0
cache/2024/bf61b62532f71e39e7b92c76dc36bb0f/index.md
File diff suppressed because it is too large
View File


+ 186
- 0
cache/2024/f5b5c3dff862cc55318684cf434b8d74/index.html View File

@@ -0,0 +1,186 @@
<!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>“We Are All Socialists in Our Private Lives” (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://erinremblance.substack.com/p/we-are-all-socialists-in-our-private">

<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>“We Are All Socialists in Our Private Lives”</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://erinremblance.substack.com/p/we-are-all-socialists-in-our-private" title="Lien vers le contenu original">Source originale</a>
<br>
Mis en cache le 2024-02-03
</p>
</nav>
<hr>
<p>Tomorrow night my husband and I are going out to dinner with some friends to celebrate my best friend’s birthday. While we are out our friends, who also happen to be our neighbours, will be looking after our children. I would normally ask my Mum to look after them but she has recently had a knee replacement and can’t drive for a few weeks. Before we go out to dinner tomorrow we will be watching my youngest daughter perform in her end of year dance concert. We will be giving another friend and her children, who live on our street, a lift to the concert and back so that her daughter can perform and she and her son can watch her. </p>
<p>This afternoon my daughter will be getting a lift to and from her touch football game with a neighbour who lives two doors down, as our daughters are in the same team. Last week my son went to a friend’s house before his cricket training and the friend’s Mum took both my son and her son to training. We looked after her son the following day before and after their cricket match. Today a friend dropped around her beautiful golden retriever dog, Ruby, as we are looking after her for a couple of nights while her family are away for the weekend. Ruby’s family looked after our labrador for a week in the last school holidays while we were away. </p>
<p><span>I could go on, but I think I’ve illustrated my point. In not a single case that I’ve mentioned above has there been an expectation that anyone should profit from helping the other person out. We certainly are grateful and willing to reciprocate where we can, we may even give a gift to say thank you. But that is very different from an outright expectation that we should be financially better off after having helped a friend or family member. I’m sure you can think of similar examples in your own life. That is because, according to the late anthropologist </span><a href="https://davidgraeber.org" rel>David Graeber</a><span>, “we are all socialists in our private lives”.</span></p>
<p><span>But humans are, of course, a part of nature, so it begs the question - do we see this desire to help others without private gain in the rest of nature too? The answer is yes, we do! Trees, for example, communicate potential dangers to other trees via “</span><a href="https://www.smithsonianmag.com/science-nature/the-whispering-trees-180968084/#:~:text=Trees%20share%20water%20and%20nutrients,Scientists%20call%20these%20mycorrhizal%20networks." rel>pheromones and other scent signals</a><span>” released into the air to warn of an impending threat, allowing at-risk trees to release chemicals to proactively defend themselves against the threat. Similarly, tiny fungal threads (mycelium) - which are much thinner than a human hair - form an underground “</span><a href="https://www.nationalforests.org/blog/underground-mycorrhizal-network" rel>mycorrhizal network</a><span>” which connects individual trees together to share water, nitrogen, carbon and other minerals. It is through this </span><a href="https://www.nationalforests.org/blog/underground-mycorrhizal-network" rel>process</a><span> that larger trees provide weaker trees with the nutrients they need to survive and thrive. They do this without the expectation of profiting from their assistance.</span></p>
<p><span>Chimpanzees help </span><a href="https://www.sapiens.org/culture/margaret-mead-femur/" rel>treat the wounds</a><span> of community members by applying insects to the injury. </span><a href="https://blog.londolozi.com/2023/06/29/do-wild-animals-have-a-moral-compass/" rel>Monkeys</a><span> share food, protect each other from threats and even groom each other. </span><a href="https://blog.londolozi.com/2023/06/29/do-wild-animals-have-a-moral-compass/" rel>Elephants</a><span> are a particularly cooperative species, looking after each other both physically and emotionally and raising calves cooperatively to ensure their safety and well-being. Female </span><a href="https://blog.londolozi.com/2023/06/29/do-wild-animals-have-a-moral-compass/" rel>white rhinos</a><span> regularly adopt older calves into their family, “</span><a href="https://blog.londolozi.com/2023/06/29/do-wild-animals-have-a-moral-compass/" rel>investing time</a><span>, energy, and resources in raising another individual’s offspring, an act of care that extends beyond their own genetic lineage”. Bees, ants and termites (and many other insects) all act cooperatively to collect food, build nests and raise their young. </span></p>
<p><span>Far from being surprising, as evolutionary biologist Lynn Margulis’ research proved, evolution happens as much through cooperation as competition: “</span><a href="https://timjackson.org.uk/ecological-economics/postgrowth-book/" rel>[a]nimal</a><span> and plant life evolved from bacteria through symbiosis.” We evolved </span><em><strong>because</strong></em><span> we cooperate, not despite it. So, how do we find ourselves stuck in a growth-based primarily capitalist economic system that doesn’t reflect not just human nature, but nature in general? </span></p>
<p>It is because we reward behaviours that more cooperative systems would have had a natural ‘check’ in place to guard against. Where cooperative systems wouldn’t allow one person to gain wealth at the expense of others, in this economic system the hoarding of wealth is idolised even though if we saw it happen in a non-human animal or plant species we would be very concerned: </p>
<blockquote><p>If a monkey hoarded more bananas than it could eat, while most of the other monkeys starved, scientists would study that monkey to figure out what the heck was wrong with it. When humans do it, we put them on the cover of Forbes.</p></blockquote>
<p><em><span>Source: </span><a href="https://x.com/welcomewords/status/1356724663452319744?s=20" rel>Nathalie Robin Justice Gravel</a><span> on X</span></em></p>
<p>If we want a system that is consistent with the flourishing of life on earth, we will need a system that mimics nature. Our current economic model doesn’t - for many reasons - and needs to change. Looking at nature, including our own human nature in our private lives, gives us many ideas for what this new, harmonious system could look like.</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>

+ 10
- 0
cache/2024/f5b5c3dff862cc55318684cf434b8d74/index.md
File diff suppressed because it is too large
View File


+ 10
- 0
cache/2024/index.html View File

@@ -76,6 +76,8 @@
<li><a href="/david/cache/2024/fd6eda56671045e0c1e2d215e07f1a6f/" title="Accès à l’article dans le cache local : EffVer: Version your code by the effort required to upgrade">EffVer: Version your code by the effort required to upgrade</a> (<a href="https://jacobtomlinson.dev/effver/" title="Accès à l’article original distant : EffVer: Version your code by the effort required to upgrade">original</a>)</li>
<li><a href="/david/cache/2024/bf61b62532f71e39e7b92c76dc36bb0f/" title="Accès à l’article dans le cache local : Popover API (Explainer)">Popover API (Explainer)</a> (<a href="https://open-ui.org/components/popover.research.explainer/" title="Accès à l’article original distant : Popover API (Explainer)">original</a>)</li>
<li><a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Accès à l’article dans le cache local : Reconsider your partnership with Brave">Reconsider your partnership with Brave</a> (<a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6" title="Accès à l’article original distant : Reconsider your partnership with Brave">original</a>)</li>
<li><a href="/david/cache/2024/790f724c45b26de460f9eeac04d48884/" title="Accès à l’article dans le cache local : carnet d'archéologue">carnet d'archéologue</a> (<a href="https://www.la-grange.net/2024/01/22/carnet" title="Accès à l’article original distant : carnet d'archéologue">original</a>)</li>
@@ -130,6 +132,10 @@
<li><a href="/david/cache/2024/b351cda8d2ccd73362ca1729845b7e79/" title="Accès à l’article dans le cache local : New HTML Control Lands in Safari">New HTML Control Lands in Safari</a> (<a href="https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari" title="Accès à l’article original distant : New HTML Control Lands in Safari">original</a>)</li>
<li><a href="/david/cache/2024/f5b5c3dff862cc55318684cf434b8d74/" title="Accès à l’article dans le cache local : “We Are All Socialists in Our Private Lives”">“We Are All Socialists in Our Private Lives”</a> (<a href="https://erinremblance.substack.com/p/we-are-all-socialists-in-our-private" title="Accès à l’article original distant : “We Are All Socialists in Our Private Lives”">original</a>)</li>
<li><a href="/david/cache/2024/0deb984b2f799d391607afcaa488446d/" title="Accès à l’article dans le cache local : Announcing Interop 2024">Announcing Interop 2024</a> (<a href="https://hacks.mozilla.org/2024/02/announcing-interop-2024/" title="Accès à l’article original distant : Announcing Interop 2024">original</a>)</li>
<li><a href="/david/cache/2024/ffaf50bf5d5e4cf870a618b518ee5ba7/" title="Accès à l’article dans le cache local : Portable EPUBs">Portable EPUBs</a> (<a href="https://willcrichton.net/notes/portable-epubs/" title="Accès à l’article original distant : Portable EPUBs">original</a>)</li>
<li><a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Accès à l’article dans le cache local : plaisir d'ébauche">plaisir d'ébauche</a> (<a href="https://www.la-grange.net/2024/01/06/ebauche" title="Accès à l’article original distant : plaisir d'ébauche">original</a>)</li>
@@ -156,6 +162,8 @@
<li><a href="/david/cache/2024/82b88d48d8043d79425ce8afd8dff42e/" title="Accès à l’article dans le cache local : Echoing Wirth's plea for lean software">Echoing Wirth's plea for lean software</a> (<a href="https://blog.testdouble.com/posts/2024-01-24-plea-for-lean/" title="Accès à l’article original distant : Echoing Wirth's plea for lean software">original</a>)</li>
<li><a href="/david/cache/2024/71b177818657a209fc76f23c08c21d25/" title="Accès à l’article dans le cache local : Dude, you broke the future!">Dude, you broke the future!</a> (<a href="https://www.antipope.org/charlie/blog-static/2018/01/dude-you-broke-the-future.html" title="Accès à l’article original distant : Dude, you broke the future!">original</a>)</li>
<li><a href="/david/cache/2024/f4d2d42eba58062be910407690ae447c/" title="Accès à l’article dans le cache local : The Web Component Success Story">The Web Component Success Story</a> (<a href="https://jakelazaroff.com/words/the-web-component-success-story/" title="Accès à l’article original distant : The Web Component Success Story">original</a>)</li>
<li><a href="/david/cache/2024/ea2cfc9aa425a6967d2cacd9f96ceb9e/" title="Accès à l’article dans le cache local : Ask LukeW: New Ways into Web Content">Ask LukeW: New Ways into Web Content</a> (<a href="https://lukew.com/ff/entry.asp?2008" title="Accès à l’article original distant : Ask LukeW: New Ways into Web Content">original</a>)</li>
@@ -184,6 +192,8 @@
<li><a href="/david/cache/2024/09c0739036ea4a8b6c985e127fe7e3c8/" title="Accès à l’article dans le cache local : ☕️ Journal : Carnets">☕️ Journal : Carnets</a> (<a href="https://thom4.net/2023/02/01/carnets/" title="Accès à l’article original distant : ☕️ Journal : Carnets">original</a>)</li>
<li><a href="/david/cache/2024/af0aee71fef1821c89ce368622f9a464/" title="Accès à l’article dans le cache local : Accessibility | Tippy.js">Accessibility | Tippy.js</a> (<a href="https://atomiks.github.io/tippyjs/v6/accessibility/" title="Accès à l’article original distant : Accessibility | Tippy.js">original</a>)</li>
<li><a href="/david/cache/2024/cd9184008ba5d9e4c9be4d0a0eea4f60/" title="Accès à l’article dans le cache local : Daring Fireball: The Vision Pro">Daring Fireball: The Vision Pro</a> (<a href="https://daringfireball.net/2024/01/the_vision_pro" title="Accès à l’article original distant : Daring Fireball: The Vision Pro">original</a>)</li>
<li><a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Accès à l’article dans le cache local : Ma page /now (ou plutôt /en-ce-moment)">Ma page /now (ou plutôt /en-ce-moment)</a> (<a href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment" title="Accès à l’article original distant : Ma page /now (ou plutôt /en-ce-moment)">original</a>)</li>

Write Preview
Loading…
Cancel
Save