A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 22KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="en">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Tomorrow & Tomorrow & Tomorrow (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Is that even respected? Retrospectively? What a shAItshow…
  28. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  29. <meta name="robots" content="noai, noimageai">
  30. <!-- Documented, feel free to shoot an email. -->
  31. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  32. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  33. <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>
  34. <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>
  35. <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>
  36. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  37. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  38. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  39. <script>
  40. function toggleTheme(themeName) {
  41. document.documentElement.classList.toggle(
  42. 'forced-dark',
  43. themeName === 'dark'
  44. )
  45. document.documentElement.classList.toggle(
  46. 'forced-light',
  47. themeName === 'light'
  48. )
  49. }
  50. const selectedTheme = localStorage.getItem('theme')
  51. if (selectedTheme !== 'undefined') {
  52. toggleTheme(selectedTheme)
  53. }
  54. </script>
  55. <meta name="robots" content="noindex, nofollow">
  56. <meta content="origin-when-cross-origin" name="referrer">
  57. <!-- Canonical URL for SEO purposes -->
  58. <link rel="canonical" href="https://erinkissane.com/tomorrow-and-tomorrow-and-tomorrow">
  59. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  60. <article>
  61. <header>
  62. <h1>Tomorrow & Tomorrow & Tomorrow</h1>
  63. </header>
  64. <nav>
  65. <p class="center">
  66. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  68. </svg> Accueil</a> •
  69. <a href="https://erinkissane.com/tomorrow-and-tomorrow-and-tomorrow" title="Lien vers le contenu original">Source originale</a>
  70. <br>
  71. Mis en cache le 2024-01-11
  72. </p>
  73. </nav>
  74. <hr>
  75. <blockquote>
  76. <p>
  77. We realize then that it is just the patterns of events in space which are repeating in the building or the town: and nothing else.
  78. </p>
  79. <p>
  80. Nothing of any importance happens in a building or a town except what is defined within the patterns which repeat themselves.
  81. </p>
  82. <p>
  83. —Christopher Alexander, <em>The Timeless Way of Building</em>
  84. </p>
  85. </blockquote>
  86. <p>At the core of Christopher Alexander’s work is the belief that the shape and character of our spaces cannot help but influence the events that repeat inside them. The characteristics of the built environment don’t explain everything—the enveloping cultural context is a massive force—but they explain a lot.</p>
  87. <p>Over the past 20 years, this is very much what I’ve come to believe about the shape of the things we’ve built online. Software design isn’t the <em>only</em> thing that shapes our behavior, but the idea—which I’ve seen a lot this past few weeks—that interface design/network structure/feature sets don’t actually matter at all is as wrong as the idea that a bedroom with huge unshaded windows will allow for restorative sleep, or an open-plan office will permit a state of flow.</p>
  88. <p>So in my work life, I’m trying to sharpen my sense of how and why the patterns we build on the internet shape the behaviors we enact inside them. But I keep getting sidetracked into the opposite formulation—how repeated behavior shapes our spaces, how rituals turn to hauntings, how buried things keep erupting into the present.</p>
  89. <hr>
  90. <p>In the early 1980s, British engineer Vic Tandy was working for a company that made medical equipment used in life-support and anesthesia. In a coincidence that changed the course of Tandy’s career, the converted garage that served as the company’s laboratory was—according to some of Tandy’s colleagues and a night cleaner—haunted.</p>
  91. <p>Having dismissed his colleagues’ experiences as nonsense, Tandy himself noticed a few emotional and physical symptoms—depression, cold shivers, growing discomfort—but ignored them until he was working alone in the lab one night:</p>
  92. <blockquote>
  93. <p>As he sat at the desk writing he began to feel increasingly uncomfortable. He was sweating but cold and the feeling of depression was noticeable. The cats were moving around and the groans and creaks from what was now a deserted factory were<span class="push-double"></span> <span class="pull-double">“</span>spooky”, but there was also something else. It was as though something was in the room with V.T. […] As he was writing he became aware that he was being watched, and a figure slowly emerged to his left. It was indistinct and on the periphery of his vision but it moved as V.T. would expect a person to. The apparition was grey and made no sound. The hair was standing up on V.T.’s neck and there was a distinct chill in the room. As V.T. recalls,<span class="push-double"></span> <span class="pull-double">“</span>It would not be unreasonable to suggest I was terrified”. V.T. was unable to see any detail and finally built up the courage to turn and face the thing. As he turned the apparition faded and disappeared. There was absolutely no evidence to support what he had seen so he decided he must be cracking up and
  94. went home.</p>
  95. </blockquote>
  96. <p>The next day, Tandy, a competitive fencer, brought a foil blade into the lab to use the bench vise to cut threads into the blade for attachment to a tang. While clamped in the vise, the blade began<span class="push-double"></span> <span class="pull-double">“</span>frantically vibrating up and down,” which spooked the hell out of him. By moving the vise around the lab, Tandy located a low frequency (~19 <span class="small-caps">HZ</span>) standing wave that was eventually traced to a fan in the air-extraction system. When the fan’s mounting was modified, the standing wave disappeared—as did the lab’s oppressive feeling and sense of ghostly presence.</p>
  97. <p>Tandy and a fellow professor at Coventry University wrote up his experiences and subsequent speculations on the mechanisms of low-frequency hauntings in <a href="http://www.richardwiseman.com/resources/ghost-in-machine.pdf">a short paper for the <em>Journal of the Society for Psychical Research</em></a> that remains one of the prizes in my collection of obscure PDFs. Tandy went on to conduct large-scale experiments on the physical properties of hauntedness.</p>
  98. <p>I think about the vibrating foil blade every time anyone mentions <em>engagement</em>.</p>
  99. <hr>
  100. <p>The quasi-McLuhan quotation about shaping the tools that thereafter shape us traces back to <a href="https://api.parliament.uk/historic-hansard/commons/1943/oct/28/house-of-commons-rebuilding">Winston Churchill’s case for rebuilding the bombed-out Commons Chamber of Parliament</a> along its original lines. When he he wrote that<span class="push-double"></span> <span class="pull-double">“</span>we shape our buildings and afterwards our buildings shape us,” he was explicitly writing about the shape of the Chamber as a way of maintaining exactly two sharply opposing political parties rather than a left-right gradient, and about concentrating the energy of the deliberating body by making the room a little bit too small, thus forcing its members to squeeze in and hustle for a seat.</p>
  101. <p>It was a characteristically unsubtle speech:</p>
  102. <blockquote>
  103. <p>The House has shown itself able to face the possibility of national destruction with classical composure. It can change Governments, and has changed them by heat of passion. It can sustain Governments in long, adverse, disappointing struggles through many dark, grey months and even years until the sun comes out again. I do not know how else this country can be governed other than by the House of Commons playing its part in all its broad freedom in British public life. We have learned—with these so recently confirmed facts around us and before us—not to alter improvidently the physical structures which have enabled so remarkable an organism to carry on its work of banning dictatorships within this island and pursuing and beating into ruin all dictators who have molested us from outside.</p>
  104. </blockquote>
  105. <p>I’d known about the Churchill speech for a long time, but <span class="small-caps">WWII</span> isn’t my period and until this year, I’d assumed that the quotation dealt with <em>postwar</em> rebuilding. It’s actually from <a href="https://en.wikipedia.org/wiki/Timeline_of_World_War_II_(1943)">1943</a>, the year of the Warsaw Ghetto Uprising—well after the Blitz, but with the war’s outcomes still unknown. And as much as Churchill goes on at length about the health and vigor of the House over the long term, it’s ultimately a wartime argument: change cannot be risked.</p>
  106. <hr>
  107. <p>The structures of our network commons have concentrated our responses to the forces already pressing against our livelihoods and children and futures. Within their engagement-optimized interfaces, we’ve built ourselves into a standing wave: Abusive posts became network-wide events that require a response not only from moderating authorities, but from every user.</p>
  108. <p>In this machine, silence transmutes to approval of the worst thing happening; via entirely real human needs for signals of safety and support, continuous attention and engagement become mandatory. Simply <em>bad</em> posts are opportunities for demonstrations of prowess. People we agree with become footholds for demonstrating all the subtle ways in which they don’t quite understand. Sometimes—rarely—these moves result in policy changes, but <em>fight</em> and <em>flight</em> and <em>status display</em> all taste the same to the machine.</p>
  109. <p>Maybe for you, it didn’t start on Twitter. Maybe was forums or the blogosphere or Reddit. Maybe it was Facebook with terrible people from high school or TikTok with people who hate you for liking a thing, or not liking it enough. But we built the machines around our weird amygdalas and then we went inside them and now the machine is no longer confined to a stack of software + policy + vibes; we carry it in ourselves. We haunt each new place we enter. We can feel this happening in our bodies, which is why <em>touch grass</em> is so accidentally real.</p>
  110. <p>We shape our structures and afterward our structures shape us, but the <em>we</em> of the first clause and the <em>us</em> of the second are not the same.</p>
  111. <p>The secret heart of every panopticon is not the all-seeing-eye, but the confessional. Like a god, the machine already knows what we’ve done. We confess to reclaim our own voices, or sometimes in search of grace—though in the machine, grace is only available to some people, until we make it available to none. The gears of commercial networks are surveillance systems built on structures that elicit a continuous stream of confessions made public. Confessions in public become testimony; testimony summons congregations. We raise our voices in defiance or affirmation, knowing there will be consequences we don’t understand. The databanks grow.</p>
  112. <hr>
  113. <p>I started reading Susan Cooper’s <em>The Dark Is Rising</em> series to my kid between Christmas and New Year’s this year. The first two books in the sequence, published in 1964 and 1973, feel like products of the 1960s—there’s a clarity of motion and a starkness of contrast and a residual sweetness in the descriptions of rural landscapes that I recognize from my own childhood spent reading books that were already old then.</p>
  114. <p>The third book, <em>Greenwitch</em>, is another thing altogether. Published in 1974, it’s dreamlike and nightmarish and packed with images I associate more with folk horror than children’s fantasy adventure, down to the Greenwitch, a wicker woman built of living branches and inhabited by a childlike consciousness that is born anew each year to be sacrificed and reunited with the wild magic from which it came. The true line of the book’s plot hinges on the heroine’s instinctive and ultimately world-changing moment of recognition of the entity as not a human, but a person. Plenty of adventures swirl around this moment, but everything that <em>matters</em> is inward, invisible, and relational. (It’s a kind of book that doesn’t get published anymore.)</p>
  115. <p>During a series of action scenes that would, in a more straightforwardly adventurous book, form the plot’s climax, the protagonist of <em>Greenwitch</em> is asleep, unaware of the terrifying events taking place just outside her house. And all those action scenes our girl misses while she’s sleeping are <em>also</em> dreams: They seem to be an entire village’s collective nightmares of terrible incidents of mass violence, some just barely within living memory and some that stretch much further back. The ancient dead arise in a collective dream and take up arms beside the living dreamers, who die and suffer. A ghost ship rises from the sea and sails over the moors, and eventually out of time. The town burns. But the next morning brings apparent normalcy; the stage resets.</p>
  116. <p><em>Greenwitch</em> offers no lasting resolution for the village’s ghostly violence. At the book’s end, even the Greenwitch entity herself remains trapped in her sacrificial cycle. And unlike the sleeping child heroine, the reader saw everything that happened in the dark, and is left with no assurance that the ghostly standing waves of past violence are not merely waiting to be summoned again.</p>
  117. <hr>
  118. <p>In the machine, we are always forgetting, chasing the same discourses and panics in circles. Instead of making restitution, we wait for the cycle to erase the screen and carry on as before. Stay long enough and everything rhymes with something that gave you scars, but that everyone else has forgotten. Resolution eludes us online even more than off. But then, the paradox: Nothing stays gone, either. Fast search resuscitates archives without even a bump in load time. Screenshots jump networks and decades; we have the receipts. Somewhere between the continual etch-a-sketch and structurally eidetic memory, the provisional and crucial ties of solidarity recede, always just out of reach.</p>
  119. <p>I logged into Twitter to see if my stupid, painstakingly deleted tweets <a href="https://www.theverge.com/2023/5/22/23732497/twitter-bug-restoring-deleted-tweets-retweets">had been un-deleted</a>: they had been, by the thousands. It’s a little on the nose.</p>
  120. <p>We won’t technologize our way out of the ghost machine. I don’t think we’ll mod our way out, either. Actual trust and real safety do require protection from griefers and villains—and abuses of authority—but that’s table stakes: that’s the <em>floor</em>.</p>
  121. <blockquote>
  122. <p>
  123. A building or a town becomes alive when every pattern in it is alive: when it allows each person in it, and each plant and animal, and every stream, and bridge, and wall and roof, and every human group and every road, to become alive in its own terms.
  124. </p>
  125. <p>
  126. And as that happens, the whole town reaches the state that individual people sometimes reach at their best and happiest moments, when they are most free.
  127. </p>
  128. <p>
  129. —Christopher Alexander, <em>The Timeless Way of Building</em>
  130. </p>
  131. </blockquote>
  132. <p>Here in my body, I want to be more human in service of a less painfully haunted world. I want ways of being together that let us pay our respects and build different kinds of power. I want to practice being free.</p>
  133. </article>
  134. <hr>
  135. <footer>
  136. <p>
  137. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  138. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  139. </svg> Accueil</a> •
  140. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  141. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  142. </svg> Suivre</a> •
  143. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  144. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  145. </svg> Pro</a> •
  146. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  147. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  148. </svg> Email</a> •
  149. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  150. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  151. </svg> Légal</abbr>
  152. </p>
  153. <template id="theme-selector">
  154. <form>
  155. <fieldset>
  156. <legend><svg class="icon icon-brightness-contrast">
  157. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  158. </svg> Thème</legend>
  159. <label>
  160. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  161. </label>
  162. <label>
  163. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  164. </label>
  165. <label>
  166. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  167. </label>
  168. </fieldset>
  169. </form>
  170. </template>
  171. </footer>
  172. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  173. <script>
  174. function loadThemeForm(templateName) {
  175. const themeSelectorTemplate = document.querySelector(templateName)
  176. const form = themeSelectorTemplate.content.firstElementChild
  177. themeSelectorTemplate.replaceWith(form)
  178. form.addEventListener('change', (e) => {
  179. const chosenColorScheme = e.target.value
  180. localStorage.setItem('theme', chosenColorScheme)
  181. toggleTheme(chosenColorScheme)
  182. })
  183. const selectedTheme = localStorage.getItem('theme')
  184. if (selectedTheme && selectedTheme !== 'undefined') {
  185. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  186. }
  187. }
  188. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  189. window.addEventListener('load', () => {
  190. let hasDarkRules = false
  191. for (const styleSheet of Array.from(document.styleSheets)) {
  192. let mediaRules = []
  193. for (const cssRule of styleSheet.cssRules) {
  194. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  195. continue
  196. }
  197. // WARNING: Safari does not have/supports `conditionText`.
  198. if (cssRule.conditionText) {
  199. if (cssRule.conditionText !== prefersColorSchemeDark) {
  200. continue
  201. }
  202. } else {
  203. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  204. continue
  205. }
  206. }
  207. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  208. }
  209. // WARNING: do not try to insert a Rule to a styleSheet you are
  210. // currently iterating on, otherwise the browser will be stuck
  211. // in a infinite loop…
  212. for (const mediaRule of mediaRules) {
  213. styleSheet.insertRule(mediaRule.cssText)
  214. hasDarkRules = true
  215. }
  216. }
  217. if (hasDarkRules) {
  218. loadThemeForm('#theme-selector')
  219. }
  220. })
  221. </script>
  222. </body>
  223. </html>