A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  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>What you see | everything changes (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://everythingchanges.us/blog/what-you-see/">
  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>What you see | everything changes</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://everythingchanges.us/blog/what-you-see/" title="Lien vers le contenu original">Source originale</a>
  70. <br>
  71. Mis en cache le 2024-04-22
  72. </p>
  73. </nav>
  74. <hr>
  75. <p>IN 1999, Christopher Chabris and Daniel Simons ran a simple research study: they screened a short video in which a group of people passed a basketball between them, and asked subjects to count the number of passes. At the conclusion of the video, they asked a few questions, among them: how many passes did you observe? And—did you notice the gorilla?</p>
  76. <p>Halfway through the video, a person in a gorilla suit had walked through the field of play. But in the initial and subsequent studies, more than half of the subjects hadn’t noticed the gorilla at all. <a href="https://en.wikipedia.org/wiki/Inattentional_blindness#Invisible_Gorilla_Test">Chabris and Simons refer to this phenomena as “inattentional blindness,”</a> and note that we can consider it both a limiting factor of our perception, as well as a useful consequence of our ability to stay focused. That is, whether or not we are able to <em>see</em> something is as much a product of our <em>attention</em> as our eyes; just as importantly, the ability to focus on one task or object necessarily entails ignoring—even to the point of being entirely unaware of—other things that cross our path.</p>
  77. <p>In other words, we’re all of us, all of the time, watching out for our own version of the ball, the things that we’ve learned (or been taught) to care about, while at the same time remaining blissfully unaware of entire bands of gorillas thumping their chests before our eyes.</p>
  78. <h1 id="what-you-get">What you get</h1>
  79. <p>Most of us have learned by now that we should give feedback on <em>observations</em>—not judgments, not assumptions, not interpretations or explanations. Only things we can observe, with our eyes and ears. The purpose of this guidance (which is good, by the way) is to avoid triggering someone’s defenses when you share feedback. You want to deliver feedback in a way that it can be received and accepted, and you want—as much as possible—to skip past the ramparts and archers that most people keep on hand to defend against potential harm. By making an observation, rather than delivering a judgment, you can slip through a side door, shed some light on something that happened, and let the recipient of the feedback arrive at the proper conclusion—without their soldiers so much as twitching their thumbs.</p>
  80. <p>The trouble arises when we realize that even our observations are sullied by our perspectives and beliefs. I may notice the basketball because I’ve been instructed or incentivized to pay attention to it, or have simply made a choice to do so, even while you are—for probably very good reasons—concerned about the gorilla.</p>
  81. <p>In reality, we cannot make observations without first deciding what is worth noticing, and that decision—to see the ball, to follow the gorilla, to do something else altogether—is itself a kind of judgment or interpretation of the world. Any observation has behind it a human doing the observing—a human with experience and ideas and perspectives, which can’t simply be jettisoned when they are inconvenient. We can try to aim ourselves at some theoretical objective ideal, but at best we can only approach it asymptotically, and often our efforts to move closer to the line only take us alongside it.</p>
  82. <h1 id="start-at-the-beginning">Start at the beginning</h1>
  83. <p>And yet, making observations is a good starting point for giving feedback. The trouble arises when we assume that those observations are both the start <em>and the end,</em> that we’re walking along a very short track.</p>
  84. <p>Things get more interesting when you accept your observations as the <em>beginning</em> of something, rather than the conclusion. You can get curious about what you’re observing, and what it says about you at that moment in time. Let’s say you notice that a member of your team seems routinely distracted during standup. Instead of gearing up for a feedback conversation, you might first ask yourself <em>why</em> you happened to notice that particular behavior. Why is <em>this</em> the thing you’re paying attention to? What does it say about your own needs or concerns? Maybe you’re noticing this behavior because you’re on alert to potential attrition after multiple rounds of layoffs. In which case, the task at hand isn’t to give feedback, but to better understand what people need to stick around.</p>
  85. <p>And this means you also need to get curious about your colleague. Getting curious here does <em>not</em> mean giving feedback: feedback may <em>follow</em> that curiosity, but it’s often premature if it arrives beforehand. Instead, you might check in with her and ask how she’s doing, if there’s anything about the project she’s concerned or frustrated with, if there’s anything she thinks should change or be attended to. And then listen, without drawing any immediate conclusions, without honing in on what you think is going on, but staying open to learning something new—something you haven’t yet fixed your attention on to.</p>
  86. <p>That’s the tricky bit here—you have to be willing to let your attention wander, to release your grip on whatever was drawing your eye, to be willing to notice something that, until just a moment ago, you couldn’t see at all.</p>
  87. <h1 id="stay-on-the-track">Stay on the track</h1>
  88. <p>Too often, I notice that the instinct to give feedback works to cut off that kind of exploration. We assume that the person who is the object of our feedback has something to learn and fail to notice the same thing about ourselves. We presume that if something uncomfortable or unexpected happens, it represents an opportunity (or even an obligation) to give feedback—rather than an opportunity to get curious, to inquire into what’s going on.</p>
  89. <p>We’ve funneled so much energy into feedback processes that I fear we’ve neglected more foundational skills: the ability to ask questions, to listen deeply, to see the things before us that we’re wont to ignore.</p>
  90. <p>This is not to say that there is <em>never</em> a good time for feedback, but that there are better times for it—notably, after you’ve asked some questions and listened attentively to the answers. After all, you may be worried about the ball, while your colleagues busy themselves corralling a horde of gorillas. But you’ll never know if you don’t first give yourself a chance to look around.<svg class="stopmark"><use xlink:href="https://everythingchanges.us/assets/img/ec-symbols.svg#stopmark"></use></svg></p>
  91. </article>
  92. <hr>
  93. <footer>
  94. <p>
  95. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  96. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  97. </svg> Accueil</a> •
  98. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  99. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  100. </svg> Suivre</a> •
  101. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  102. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  103. </svg> Pro</a> •
  104. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  105. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  106. </svg> Email</a> •
  107. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  108. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  109. </svg> Légal</abbr>
  110. </p>
  111. <template id="theme-selector">
  112. <form>
  113. <fieldset>
  114. <legend><svg class="icon icon-brightness-contrast">
  115. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  116. </svg> Thème</legend>
  117. <label>
  118. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  119. </label>
  120. <label>
  121. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  122. </label>
  123. <label>
  124. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  125. </label>
  126. </fieldset>
  127. </form>
  128. </template>
  129. </footer>
  130. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  131. <script>
  132. function loadThemeForm(templateName) {
  133. const themeSelectorTemplate = document.querySelector(templateName)
  134. const form = themeSelectorTemplate.content.firstElementChild
  135. themeSelectorTemplate.replaceWith(form)
  136. form.addEventListener('change', (e) => {
  137. const chosenColorScheme = e.target.value
  138. localStorage.setItem('theme', chosenColorScheme)
  139. toggleTheme(chosenColorScheme)
  140. })
  141. const selectedTheme = localStorage.getItem('theme')
  142. if (selectedTheme && selectedTheme !== 'undefined') {
  143. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  144. }
  145. }
  146. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  147. window.addEventListener('load', () => {
  148. let hasDarkRules = false
  149. for (const styleSheet of Array.from(document.styleSheets)) {
  150. let mediaRules = []
  151. for (const cssRule of styleSheet.cssRules) {
  152. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  153. continue
  154. }
  155. // WARNING: Safari does not have/supports `conditionText`.
  156. if (cssRule.conditionText) {
  157. if (cssRule.conditionText !== prefersColorSchemeDark) {
  158. continue
  159. }
  160. } else {
  161. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  162. continue
  163. }
  164. }
  165. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  166. }
  167. // WARNING: do not try to insert a Rule to a styleSheet you are
  168. // currently iterating on, otherwise the browser will be stuck
  169. // in a infinite loop…
  170. for (const mediaRule of mediaRules) {
  171. styleSheet.insertRule(mediaRule.cssText)
  172. hasDarkRules = true
  173. }
  174. }
  175. if (hasDarkRules) {
  176. loadThemeForm('#theme-selector')
  177. }
  178. })
  179. </script>
  180. </body>
  181. </html>