davidbgk
/
larlet-fr-david-cache
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
浏览代码

Links

master
David Larlet 1年前
父节点
63bf7c13de
当前提交
510d576804
共有 5 个文件被更改，包括 552 次插入 和 0 次删除
分列视图 显示文件统计
  1. 232
    0
      cache/2023/29dac969af1faa8ba0338a2e7e59ebbd/index.html
  2. 65
    0
      cache/2023/29dac969af1faa8ba0338a2e7e59ebbd/index.md
  3. 209
    0
      cache/2023/78d79db0da7f60c48a02cfd088885085/index.html
  4. 42
    0
      cache/2023/78d79db0da7f60c48a02cfd088885085/index.md
  5. 4
    0
      cache/2023/index.html

+ 232
- 0
cache/2023/29dac969af1faa8ba0338a2e7e59ebbd/index.html 查看文件

@@ -0,0 +1,232 @@
<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>A notification center for progress bars that sounds like birdsong (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://interconnected.org/home/2023/02/10/progress">

<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>A notification center for progress bars that sounds like birdsong</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://interconnected.org/home/2023/02/10/progress" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<p class="measure-wide f6 f5-l lh-copy black-80">The return of dead time!</p>
<p class="measure-wide f6 f5-l lh-copy black-80">One curious experience in <a href="/home/2023/02/07/braggoscope">hacking on Braggoscope</a>: there’s a lot of <em>waiting for the AI.</em> Asking GPT-3 to extract some data costs 3 cents and takes 5 seconds. Stick it in a loop and that’s 80 minutes for the 1,000 episodes in the <em>In Our Time</em> archive.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Now I’ve saved myself a few days writing code by asking the AI to do the heavy lifting so 80 minutes and pennies per inference is neither here nor there, but what am I supposed to <em>do?</em></p>
<p class="measure-wide f6 f5-l lh-copy black-80">This has come up before:</p>
<ul class="list ph0 ph0-ns bulleted-list">
<li class="measure-wide f6 f5-l lh-copy black-80">in my undergrad, analysing quasar spectra, running data jobs overnight and over lunch</li>
<li class="measure-wide f6 f5-l lh-copy black-80">writing firmware for a radio prototype, wanting to test my latest changes and hitting compile and staring at the wall for minutes while the computer did its THING.</li>
</ul>
<p class="measure-wide f6 f5-l lh-copy black-80"><em>Long-running processes</em> are kinda the norm, even though we have this narrative about computers being instant? Whether that’s waiting for a 3D render, or running the test suite on a codebase and going off to make a cup of tea while it does its thing.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Or waiting for a restaurant delivery! Or a cab to arrive! Many process are human-machine hybrids.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">tbh I never know what to do with myself.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">I can never move on for that 80 minutes. I can never multiplex tasks. Even though I <em>know</em> it’s only a fraction of the way through, cognitively the computer’s task is still lodged in my head, and all I can do is doomscroll Twitter or shuffle my shoes or whatever until it completes. Nothing productive.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">I blame notifications.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Operating systems are really good at dinging when the machine has finished (and it’s my turn now).</p>
<p class="measure-wide f6 f5-l lh-copy black-80">An absolute <em>ton</em> of effort has gone into effective dinging, over the years. Apps can all ding. I can make my hobby code ding. There’s a top-level OS feature called the Notification Center which is all about collecting dings, so that I have a list of all the balls which are now in my court to deal with.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Engagement!</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Computers and phones are not so good at, say, <em>humming</em> to say: hey you don’t need to do anything here. Don’t panic. Go away.</p>
<hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
<p class="measure-wide f6 f5-l lh-copy black-80">So, <em>progress bars,</em> right?</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Progress bars let me see that I’m only 10% of the way through a process, and the pixels are creeping up oh so slowly, so I can safely get on and THINK ABOUT SOMETHING ELSE secure in the knowledge that I won’t be interrupted by a ding.</p>
<p class="measure-wide f6 f5-l lh-copy black-80"><em>Clever</em> progress bars even show an estimate time of completion.</p>
<p class="measure-wide f6 f5-l lh-copy black-80"><em>(There’s a command line tool, I forget the name of it right now, where you - a developer - give it only minimal information, and it deduces the rest, providing a user interface with percentages and times and everything you’d need.)</em></p>
<p class="measure-wide f6 f5-l lh-copy black-80">I know we laugh at progress bars because they were often comically inaccurate with time estimates – but we could have solved that with better design I’m sure? Visually provided lower bounds (this process will not complete in less than X) and confidence levels? Or just made them funny? <q>Reticulating splines,</q> that was good.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">But we didn’t take on that design challenge…</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Instead we got…</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Spinners.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Spinners are the dumbest progress bar.</p>
<p class="measure-wide f6 f5-l lh-copy black-80"><em>“I’m busy and I may come back to you in 3 minutes or I may come back to you in half a second but I’m not going to say which, and anyway the network may have hung so just wait forever, I’ll just be here looking exactly the same, spinning.”</em></p>
<hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
<p class="measure-wide f6 f5-l lh-copy black-80">Imagine if all the effort put into managing notifications had gone into progress bars.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">We would have…</p>
<ul class="list ph0 ph0-ns bulleted-list">
<li class="measure-wide f6 f5-l lh-copy black-80">all my progress bars consolidated in one place, not hidden behind other windows, a reassuring design feature that shows me that the computer is WORKING for me!</li>
<li class="measure-wide f6 f5-l lh-copy black-80">AI predictions based on current churning away, and previous performance, with increasingly confident percentages and automatic time-till-done</li>
<li class="measure-wide f6 f5-l lh-copy black-80">easy-to-integrate progress bars for app developers and hobbyist coders alike</li>
<li class="measure-wide f6 f5-l lh-copy black-80">extra features, like integrated pause/resume when you need more battery, or the ability to hook up completion milestones to ding (I suppose) or vibrate my watch or whatever</li>
<li class="measure-wide f6 f5-l lh-copy black-80"><em>cloud</em> progress bars, so I can see the progress of an Amazon delivery right next to the job that is using machine learning to generate my new profile image photos, all in a pane that swipes down from the top of the screen.</li>
</ul>
<p class="measure-wide f6 f5-l lh-copy black-80">Why do I want this?</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Well, the motivation as for the Notification Center itself: notifications are consolidated because it helps manage attention. It’s less stressful to have <em>“things I need to look at”</em> effectively as a to-do list rather than having to keep all the dings in my own brain.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Progress Bar Center, same same: it would help me manage my attention. By listing all the things I DON’T need to look at, and letting me know that I definitely <em>don’t need to look at these for the next X minutes</em> then it means I can cognitively stand down: I need no longer inhabit a state of perpetual readiness.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">And so I can finally focus on something else instead.</p>
<hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
<p class="measure-wide f6 f5-l lh-copy black-80">Imagining, for a second, a Progress Bar Center on my laptop or my phone:</p>
<p class="measure-wide f6 f5-l lh-copy black-80">It would be a home for my podcast <em>Now Playing</em> too. And for my current Google Maps journey. So this is semi-interactive.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Given that interactivity, I can imagine the commercial angle too: the progress bar for a cloud render or my Amazon order may have a pay-for <em>Boost</em> button to buy more GPUs or upgrade to next-day delivery or whatever. The process economy instead of the engagement economy.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">And of course my GPT-3 tasks running, and Photoshop filters calculating, and my movies downloading –</p>
<p class="measure-wide f6 f5-l lh-copy black-80">all, collectively, reassuringly telling me: the machine is busy on my behalf. I can relax, I’m already being productive, put it all out of my mind, there’s nothing I need to do.</p>
<hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
<p class="measure-wide f6 f5-l lh-copy black-80">And pulling on that thread of <em>putting attention aside…</em></p>
<p class="measure-wide f6 f5-l lh-copy black-80">It’s easier to do that when the locus of attention is physically elsewhere?</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Like: when music is coming from the speaker behind me, rather than from the same location as the code problem I’m trying to crack on-screen, <a href="/home/2021/11/19/airpods">it seems less likely to distract me</a>.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">All these things asking for my attention from the same locus is fatiguing, in the same way that staring into a point source of bright light is fatiguing, but a diffuse glow from all around can can be just as bright and not fatiguing at all – just illuminating.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">So the equivalent for attention is (because <a href="/home/2023/01/20/map_room">I’ve been thinking about room-scale computing recently</a>) to scatter those progress bars around the room.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">And thinking of the <em>chugga chugga chugga</em> of old hard drives and other <a href="/home/2021/08/27/data_sense">synaesthetic data senses for machines</a> – it maybe would be cool to <em>sonify</em> these progress bars?</p>
<p class="measure-wide f6 f5-l lh-copy black-80">The idea of making a soundscape of the workings of the machine has been around for a while of course but I’ve found it hard to see a plausible route to get there in this era of notifications. A room of dinging things would be torture.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">But based it on this framework for progress bars!</p>
<p class="measure-wide f6 f5-l lh-copy black-80">You could do it for cheap with tiny speakers and Bluetooth, sell progress bars by the handful like AirTags.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">I would love it if sitting in my home office had the ambient sound of a rainforest. Everything, I would think, listening, is working as it should.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">The frogs are reaching a crescendo! (I am about to get a notification that a job has finished, I think to myself.)</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Or stepping into an office and hearing all the non-human workers sonified and layered – the sound of progress as the distant hum of traffic, or the wind.</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>

+ 65
- 0
cache/2023/29dac969af1faa8ba0338a2e7e59ebbd/index.md 查看文件

@@ -0,0 +1,65 @@
title: A notification center for progress bars that sounds like birdsong
url: https://interconnected.org/home/2023/02/10/progress
hash_url: 29dac969af1faa8ba0338a2e7e59ebbd

<p class="measure-wide f6 f5-l lh-copy black-80">The return of dead time!</p>
<p class="measure-wide f6 f5-l lh-copy black-80">One curious experience in <a href="/home/2023/02/07/braggoscope">hacking on Braggoscope</a>: there’s a lot of <em>waiting for the AI.</em> Asking GPT-3 to extract some data costs 3 cents and takes 5 seconds. Stick it in a loop and that’s 80 minutes for the 1,000 episodes in the <em>In Our Time</em> archive.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Now I’ve saved myself a few days writing code by asking the AI to do the heavy lifting so 80 minutes and pennies per inference is neither here nor there, but what am I supposed to <em>do?</em></p>
<p class="measure-wide f6 f5-l lh-copy black-80">This has come up before:</p>
<ul class="list ph0 ph0-ns bulleted-list">
<li class="measure-wide f6 f5-l lh-copy black-80">in my undergrad, analysing quasar spectra, running data jobs overnight and over lunch</li>
<li class="measure-wide f6 f5-l lh-copy black-80">writing firmware for a radio prototype, wanting to test my latest changes and hitting compile and staring at the wall for minutes while the computer did its THING.</li>
</ul>
<p class="measure-wide f6 f5-l lh-copy black-80"><em>Long-running processes</em> are kinda the norm, even though we have this narrative about computers being instant? Whether that’s waiting for a 3D render, or running the test suite on a codebase and going off to make a cup of tea while it does its thing.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Or waiting for a restaurant delivery! Or a cab to arrive! Many process are human-machine hybrids.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">tbh I never know what to do with myself.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">I can never move on for that 80 minutes. I can never multiplex tasks. Even though I <em>know</em> it’s only a fraction of the way through, cognitively the computer’s task is still lodged in my head, and all I can do is doomscroll Twitter or shuffle my shoes or whatever until it completes. Nothing productive.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">I blame notifications.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Operating systems are really good at dinging when the machine has finished (and it’s my turn now).</p>
<p class="measure-wide f6 f5-l lh-copy black-80">An absolute <em>ton</em> of effort has gone into effective dinging, over the years. Apps can all ding. I can make my hobby code ding. There’s a top-level OS feature called the Notification Center which is all about collecting dings, so that I have a list of all the balls which are now in my court to deal with.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Engagement!</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Computers and phones are not so good at, say, <em>humming</em> to say: hey you don’t need to do anything here. Don’t panic. Go away.</p>
<hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
<p class="measure-wide f6 f5-l lh-copy black-80">So, <em>progress bars,</em> right?</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Progress bars let me see that I’m only 10% of the way through a process, and the pixels are creeping up oh so slowly, so I can safely get on and THINK ABOUT SOMETHING ELSE secure in the knowledge that I won’t be interrupted by a ding.</p>
<p class="measure-wide f6 f5-l lh-copy black-80"><em>Clever</em> progress bars even show an estimate time of completion.</p>
<p class="measure-wide f6 f5-l lh-copy black-80"><em>(There’s a command line tool, I forget the name of it right now, where you - a developer - give it only minimal information, and it deduces the rest, providing a user interface with percentages and times and everything you’d need.)</em></p>
<p class="measure-wide f6 f5-l lh-copy black-80">I know we laugh at progress bars because they were often comically inaccurate with time estimates – but we could have solved that with better design I’m sure? Visually provided lower bounds (this process will not complete in less than X) and confidence levels? Or just made them funny? <q>Reticulating splines,</q> that was good.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">But we didn’t take on that design challenge…</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Instead we got…</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Spinners.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Spinners are the dumbest progress bar.</p>
<p class="measure-wide f6 f5-l lh-copy black-80"><em>“I’m busy and I may come back to you in 3 minutes or I may come back to you in half a second but I’m not going to say which, and anyway the network may have hung so just wait forever, I’ll just be here looking exactly the same, spinning.”</em></p>
<hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
<p class="measure-wide f6 f5-l lh-copy black-80">Imagine if all the effort put into managing notifications had gone into progress bars.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">We would have…</p>
<ul class="list ph0 ph0-ns bulleted-list">
<li class="measure-wide f6 f5-l lh-copy black-80">all my progress bars consolidated in one place, not hidden behind other windows, a reassuring design feature that shows me that the computer is WORKING for me!</li>
<li class="measure-wide f6 f5-l lh-copy black-80">AI predictions based on current churning away, and previous performance, with increasingly confident percentages and automatic time-till-done</li>
<li class="measure-wide f6 f5-l lh-copy black-80">easy-to-integrate progress bars for app developers and hobbyist coders alike</li>
<li class="measure-wide f6 f5-l lh-copy black-80">extra features, like integrated pause/resume when you need more battery, or the ability to hook up completion milestones to ding (I suppose) or vibrate my watch or whatever</li>
<li class="measure-wide f6 f5-l lh-copy black-80"><em>cloud</em> progress bars, so I can see the progress of an Amazon delivery right next to the job that is using machine learning to generate my new profile image photos, all in a pane that swipes down from the top of the screen.</li>
</ul>
<p class="measure-wide f6 f5-l lh-copy black-80">Why do I want this?</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Well, the motivation as for the Notification Center itself: notifications are consolidated because it helps manage attention. It’s less stressful to have <em>“things I need to look at”</em> effectively as a to-do list rather than having to keep all the dings in my own brain.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Progress Bar Center, same same: it would help me manage my attention. By listing all the things I DON’T need to look at, and letting me know that I definitely <em>don’t need to look at these for the next X minutes</em> then it means I can cognitively stand down: I need no longer inhabit a state of perpetual readiness.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">And so I can finally focus on something else instead.</p>
<hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
<p class="measure-wide f6 f5-l lh-copy black-80">Imagining, for a second, a Progress Bar Center on my laptop or my phone:</p>
<p class="measure-wide f6 f5-l lh-copy black-80">It would be a home for my podcast <em>Now Playing</em> too. And for my current Google Maps journey. So this is semi-interactive.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Given that interactivity, I can imagine the commercial angle too: the progress bar for a cloud render or my Amazon order may have a pay-for <em>Boost</em> button to buy more GPUs or upgrade to next-day delivery or whatever. The process economy instead of the engagement economy.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">And of course my GPT-3 tasks running, and Photoshop filters calculating, and my movies downloading –</p>
<p class="measure-wide f6 f5-l lh-copy black-80">all, collectively, reassuringly telling me: the machine is busy on my behalf. I can relax, I’m already being productive, put it all out of my mind, there’s nothing I need to do.</p>
<hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
<p class="measure-wide f6 f5-l lh-copy black-80">And pulling on that thread of <em>putting attention aside…</em></p>
<p class="measure-wide f6 f5-l lh-copy black-80">It’s easier to do that when the locus of attention is physically elsewhere?</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Like: when music is coming from the speaker behind me, rather than from the same location as the code problem I’m trying to crack on-screen, <a href="/home/2021/11/19/airpods">it seems less likely to distract me</a>.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">All these things asking for my attention from the same locus is fatiguing, in the same way that staring into a point source of bright light is fatiguing, but a diffuse glow from all around can can be just as bright and not fatiguing at all – just illuminating.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">So the equivalent for attention is (because <a href="/home/2023/01/20/map_room">I’ve been thinking about room-scale computing recently</a>) to scatter those progress bars around the room.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">And thinking of the <em>chugga chugga chugga</em> of old hard drives and other <a href="/home/2021/08/27/data_sense">synaesthetic data senses for machines</a> – it maybe would be cool to <em>sonify</em> these progress bars?</p>
<p class="measure-wide f6 f5-l lh-copy black-80">The idea of making a soundscape of the workings of the machine has been around for a while of course but I’ve found it hard to see a plausible route to get there in this era of notifications. A room of dinging things would be torture.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">But based it on this framework for progress bars!</p>
<p class="measure-wide f6 f5-l lh-copy black-80">You could do it for cheap with tiny speakers and Bluetooth, sell progress bars by the handful like AirTags.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">I would love it if sitting in my home office had the ambient sound of a rainforest. Everything, I would think, listening, is working as it should.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">The frogs are reaching a crescendo! (I am about to get a notification that a job has finished, I think to myself.)</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Or stepping into an office and hearing all the non-human workers sonified and layered – the sound of progress as the distant hum of traffic, or the wind.</p>

+ 209
- 0
cache/2023/78d79db0da7f60c48a02cfd088885085/index.html 查看文件

@@ -0,0 +1,209 @@
<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>The (extremely) loud minority (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://andy-bell.co.uk/the-extremely-loud-minority/">

<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>The (extremely) loud minority</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://andy-bell.co.uk/the-extremely-loud-minority/" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<p>Often on Twitter, we’ll hear stuff like this:</p>
<blockquote class="wp-block-quote">
<p>Best practices don’t actually work</p>
</blockquote>
<p>Or: </p>
<blockquote class="wp-block-quote">
<p>TypeScript has won, and it’s only a matter of time you’re using it whether you like it or not.</p>
</blockquote>
<p>These may be true for a <em>tiny</em> minority of cases, such as in a code-factory: full of developers, independently working on small pieces of a very large product, but this doesn’t represent the web industry. In fact, the JS-driven cohort represents a <em>tiny</em> percentage of the web industry as a whole.</p>
<p>How small is that percentage, though? I’m glad you asked. We’re going to be using data from <a href="https://w3techs.com/faq">W3Techs, who crawl the <strong>top 10 million websites</strong></a> to calculate what market share certain technologies have. For this example, I’ll compare WordPress with React and Vue, because if you didn’t look at the data, you’d think everyone was building with them, right? Absolutely wrong. </p>
<blockquote class="wp-block-quote">
<p>WordPress is used by 63.4% of all the websites whose content management system we know. This is <strong>43.1% of all websites</strong>.</p>
<cite><a href="https://w3techs.com/technologies/details/cm-wordpress">W3Techs</a></cite></blockquote>
<p>And to compare:</p>
<blockquote class="wp-block-quote">
<p>React is used by 4.0% of all the websites whose JavaScript library we know. <strong>This is 3.3% of all websites</strong>.</p>
<cite><a href="https://w3techs.com/technologies/details/js-react">W3Techs</a></cite></blockquote>
<p>And finally:</p>
<blockquote class="wp-block-quote">
<p>Vue.js is used by 0.9% of all the websites whose JavaScript library we know. <strong>This is 0.8% of all websites.</strong></p>
<cite><a href="https://w3techs.com/technologies/details/js-vuejs">W3Techs</a></cite></blockquote>
<p>Emphasis on both examples, mine and the data is accurate as of February 14th, 2023. Also worth mentioning that this is just one data source. You could merge various sources, but the difference between the majority of the web industry—AKA people slinging websites with WordPress etc—and the loud, but very small web industry is <strong>huge.</strong></p>
<p>Even when you consider the reality that these technology paths likely cross and some sites hide the tech they are using, the difference is <em>extreme</em>. Even if you <a href="https://w3techs.com/technologies/comparison/js-react,js-vuejs">add together React and Vue</a>, it’s still <strong>less than 5% of all websites</strong>.</p>
<p>It’s also worth caveating (for the sake of my mentions) that React and Vue usage doesn’t mean that we’re only talking about single page apps (SPAs). Those likely account for such a small percentage of the web, it’s barely worth counting. That percentage is likely going to fall now too, because the JavaScript community have seemingly finally woken up to the idea that SPAs are not good actually. <a href="https://infrequently.org/2022/12/performance-baseline-2023/">Shame about the decade we lost on them</a>…</p>
<p>Just for fun, here’s React and Vue’s combined, rounded market share, visually represented by 100 people:</p>
<p class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"></p>
<p>Now, here’s WordPress:</p>
<p class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"></p>
<h2 id="heading-the-point-i-am-trying-to-make">The point I am trying to make</h2>
<p>It’s understandable to think that JavaScript frameworks and their communities are eating the web because places like Twitter are <em>awash with very loud voices from said communities</em>.</p>
<p>Always remember that although a <strong>subset of the JavaScript community</strong> can be <strong>very loud</strong>, they represent a <strong>paltry portion of the web as a whole</strong>. This means that when <em>they</em> say something like “Best practices don’t actually work”—what they mean is “Best practices don’t actually work for a small subset of less than 5 percent of the web”.</p>
<p>Now when you look at it like that, it makes you wonder why we give these people such a large stage while the <em>very quiet</em> <strong>majority</strong> don’t get a voice at all. The very quiet majority are out there building more than 90% of the web, after all.</p>
<p>Even a slight change in that dynamic would likely have a massive positive impact.</p>
<hr class="wp-block-separator has-alpha-channel-opacity">
<p><strong>Update</strong>: I just want to emphasise that W3Tech’s data is for the top 10 million websites. Based on that, React’s &lt; 4% share is probably microscopic on the web as a whole. Even if you discount that: considering React has been around for a decade now, &lt; 4% share of the top 10 million websites is <em>pathetic</em>, considering how much we are made to feel like it is the “biggest framework” (well, at least in bundle size, that’s true).</p>
<p>Another point I want to address is the “well, the web is massive and old, so of course there are loads of WordPress sites”. This is very true, but WordPress keeps growing in popularity*! I’d accept that if its share was depleting. Also, again, all of the above is in reference to the top 10 million websites, which if React is as popular as it’s made out to be, it would feature a lot more prominently…</p>
<p></p>
<p>* based on when I last monitored this report for <a href="https://www.youtube.com/watch?v=8oMekThCB9k">my talk on CUBE CSS</a> when WordPress’ share was around 36%.</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>

+ 42
- 0
cache/2023/78d79db0da7f60c48a02cfd088885085/index.md 查看文件

@@ -0,0 +1,42 @@
title: The (extremely) loud minority
url: https://andy-bell.co.uk/the-extremely-loud-minority/
hash_url: 78d79db0da7f60c48a02cfd088885085

<p>Often on Twitter, we’ll hear stuff like this:</p>
<blockquote class="wp-block-quote">
<p>Best practices don’t actually work</p>
</blockquote>
<p>Or: </p>
<blockquote class="wp-block-quote">
<p>TypeScript has won, and it’s only a matter of time you’re using it whether you like it or not.</p>
</blockquote>
<p>These may be true for a <em>tiny</em> minority of cases, such as in a code-factory: full of developers, independently working on small pieces of a very large product, but this doesn’t represent the web industry. In fact, the JS-driven cohort represents a <em>tiny</em> percentage of the web industry as a whole.</p>
<p>How small is that percentage, though? I’m glad you asked. We’re going to be using data from <a href="https://w3techs.com/faq">W3Techs, who crawl the <strong>top 10 million websites</strong></a> to calculate what market share certain technologies have. For this example, I’ll compare WordPress with React and Vue, because if you didn’t look at the data, you’d think everyone was building with them, right? Absolutely wrong. </p>
<blockquote class="wp-block-quote">
<p>WordPress is used by 63.4% of all the websites whose content management system we know. This is <strong>43.1% of all websites</strong>.</p>
<cite><a href="https://w3techs.com/technologies/details/cm-wordpress">W3Techs</a></cite></blockquote>
<p>And to compare:</p>
<blockquote class="wp-block-quote">
<p>React is used by 4.0% of all the websites whose JavaScript library we know. <strong>This is 3.3% of all websites</strong>.</p>
<cite><a href="https://w3techs.com/technologies/details/js-react">W3Techs</a></cite></blockquote>
<p>And finally:</p>
<blockquote class="wp-block-quote">
<p>Vue.js is used by 0.9% of all the websites whose JavaScript library we know. <strong>This is 0.8% of all websites.</strong></p>
<cite><a href="https://w3techs.com/technologies/details/js-vuejs">W3Techs</a></cite></blockquote>
<p>Emphasis on both examples, mine and the data is accurate as of February 14th, 2023. Also worth mentioning that this is just one data source. You could merge various sources, but the difference between the majority of the web industry—AKA people slinging websites with WordPress etc—and the loud, but very small web industry is <strong>huge.</strong></p>
<p>Even when you consider the reality that these technology paths likely cross and some sites hide the tech they are using, the difference is <em>extreme</em>. Even if you <a href="https://w3techs.com/technologies/comparison/js-react,js-vuejs">add together React and Vue</a>, it’s still <strong>less than 5% of all websites</strong>.</p>
<p>It’s also worth caveating (for the sake of my mentions) that React and Vue usage doesn’t mean that we’re only talking about single page apps (SPAs). Those likely account for such a small percentage of the web, it’s barely worth counting. That percentage is likely going to fall now too, because the JavaScript community have seemingly finally woken up to the idea that SPAs are not good actually. <a href="https://infrequently.org/2022/12/performance-baseline-2023/">Shame about the decade we lost on them</a>…</p>
<p>Just for fun, here’s React and Vue’s combined, rounded market share, visually represented by 100 people:</p>
<p class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"></p>
<p>Now, here’s WordPress:</p>
<p class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"></p>
<h2 id="heading-the-point-i-am-trying-to-make">The point I am trying to make</h2>
<p>It’s understandable to think that JavaScript frameworks and their communities are eating the web because places like Twitter are <em>awash with very loud voices from said communities</em>.</p>
<p>Always remember that although a <strong>subset of the JavaScript community</strong> can be <strong>very loud</strong>, they represent a <strong>paltry portion of the web as a whole</strong>. This means that when <em>they</em> say something like “Best practices don’t actually work”—what they mean is “Best practices don’t actually work for a small subset of less than 5 percent of the web”.</p>
<p>Now when you look at it like that, it makes you wonder why we give these people such a large stage while the <em>very quiet</em> <strong>majority</strong> don’t get a voice at all. The very quiet majority are out there building more than 90% of the web, after all.</p>
<p>Even a slight change in that dynamic would likely have a massive positive impact.</p>
<hr class="wp-block-separator has-alpha-channel-opacity">
<p><strong>Update</strong>: I just want to emphasise that W3Tech’s data is for the top 10 million websites. Based on that, React’s &lt; 4% share is probably microscopic on the web as a whole. Even if you discount that: considering React has been around for a decade now, &lt; 4% share of the top 10 million websites is <em>pathetic</em>, considering how much we are made to feel like it is the “biggest framework” (well, at least in bundle size, that’s true).</p>
<p>Another point I want to address is the “well, the web is massive and old, so of course there are loads of WordPress sites”. This is very true, but WordPress keeps growing in popularity*! I’d accept that if its share was depleting. Also, again, all of the above is in reference to the top 10 million websites, which if React is as popular as it’s made out to be, it would feature a lot more prominently…</p>
<p></p>
<p>* based on when I last monitored this report for <a href="https://www.youtube.com/watch?v=8oMekThCB9k">my talk on CUBE CSS</a> when WordPress’ share was around 36%.</p>

+ 4
- 0
cache/2023/index.html 查看文件

@@ -79,6 +79,8 @@
<li><a href="/david/cache/2022/f8b7c3246cf1d4e06c735ee163be32a0/" title="Accès à l’article dans le cache local : The Content Management System of my Dreams (part 2) - The trouble with dynamic publishing">The Content Management System of my Dreams (part 2) - The trouble with dynamic publishing</a> (<a href="https://www.padawan.info/en/2023/02/the-content-management-system-of-my-dreams-part-2-the-trouble-with-dynamic-publishing.html" title="Accès à l’article original distant : The Content Management System of my Dreams (part 2) - The trouble with dynamic publishing">original</a>)</li>
<li><a href="/david/cache/2022/78d79db0da7f60c48a02cfd088885085/" title="Accès à l’article dans le cache local : The (extremely) loud minority">The (extremely) loud minority</a> (<a href="https://andy-bell.co.uk/the-extremely-loud-minority/" title="Accès à l’article original distant : The (extremely) loud minority">original</a>)</li>
<li><a href="/david/cache/2022/c45d25b1d1062fcf10fbf7caaf9e21b1/" title="Accès à l’article dans le cache local : Exercices (de feuille) de styles">Exercices (de feuille) de styles</a> (<a href="https://blog.professeurjoachim.com/billet/2023-01-05-exercices-de-feuille-de-styles" title="Accès à l’article original distant : Exercices (de feuille) de styles">original</a>)</li>
<li><a href="/david/cache/2022/1ae1896e5eb2ccc03f2295f38090048e/" title="Accès à l’article dans le cache local : Être jeune et vivre une pandémie">Être jeune et vivre une pandémie</a> (<a href="https://cremis.ca/publications/articles-et-medias/etre-jeune-et-vivre-une-pandemie/" title="Accès à l’article original distant : Être jeune et vivre une pandémie">original</a>)</li>
@@ -125,6 +127,8 @@
<li><a href="/david/cache/2022/c9441324cd8ba32c33817cdbc720bfda/" title="Accès à l’article dans le cache local : Grande Traversée du Poisson Blanc 2023">Grande Traversée du Poisson Blanc 2023</a> (<a href="https://poissonblanc.ca/experiences/la-grande-traversee/" title="Accès à l’article original distant : Grande Traversée du Poisson Blanc 2023">original</a>)</li>
<li><a href="/david/cache/2022/29dac969af1faa8ba0338a2e7e59ebbd/" title="Accès à l’article dans le cache local : A notification center for progress bars that sounds like birdsong">A notification center for progress bars that sounds like birdsong</a> (<a href="https://interconnected.org/home/2023/02/10/progress" title="Accès à l’article original distant : A notification center for progress bars that sounds like birdsong">original</a>)</li>
<li><a href="/david/cache/2022/055ec9ce09151d35309f39b824189c61/" title="Accès à l’article dans le cache local : In Praise of Shadows">In Praise of Shadows</a> (<a href="https://www.robinrendle.com/essays/in-praise-of-shadows/" title="Accès à l’article original distant : In Praise of Shadows">original</a>)</li>
<li><a href="/david/cache/2022/dddffbc175fe6802b5e33a92ebc440ec/" title="Accès à l’article dans le cache local : Année 2022 en revue">Année 2022 en revue</a> (<a href="https://blog.hello-bokeh.fr/2022/12/30/annee-2022-en-revue/" title="Accès à l’article original distant : Année 2022 en revue">original</a>)</li>

撰写 预览
正在加载...
取消
保存