A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  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>How Blogging Changes The Way You Think (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://clivethompson.medium.com/how-blogging-changes-the-way-you-think-526734dc86d1">
  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>How Blogging Changes The Way You Think</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://clivethompson.medium.com/how-blogging-changes-the-way-you-think-526734dc86d1" title="Lien vers le contenu original">Source originale</a>
  70. </p>
  71. </nav>
  72. <hr>
  73. <p>On the value of thinking in public — and writing 200,000 words on Medium this year</p>
  74. <p>Two hands typing on a laptop, which sits on a white table. The picture is taken with the hands and laptop sideways, to the lefthand side of the picture. A green plant is slightly off frame on the right hand side
  75. Photo by NordWood Themes on Unsplash</p>
  76. <p>Holy moses, I wrote a ton of words on Medium this year.</p>
  77. <p>Around 200,000, in fact. That’s the equivalent of writing two entire books. (Man, I hope my actual book editor isn’t reading this, lol.)</p>
  78. <p>I write three times a week here — two essays plus a “Linkfest” where I collect together the best stuff I’ve seen in the last week. It’s a firehose of prose.</p>
  79. <p>All of which makes me wonder: What exactly does writing that much do to you?</p>
  80. <p>I ponder this a lot, because one of my long-time interests is how tools for expression affect the way we think, and thereby the way we understand the world. You can’t write that much and have it not affect you, in some way!</p>
  81. <p>So let’s unpack it. In no particular order of importance, here are some year-end thoughts on How Blogging Changes You, Cognitively and Creatively:
  82. 1) Blogging encourages me to develop an idea</p>
  83. <p>Like most people, my head is full of thoughts and stuff I have opinions on. I conduct enthusiastic debates in my head, and internally anyway, I’m always super convincing, right?</p>
  84. <p>But when I sit down to write a blog post about something — that’s when I have to figure out what I really think, and what I really know, about a subject.</p>
  85. <p>Very often, the process of writing a blog post sharpens my focus. Yesterday, for example, I started composing a blog post about the newfangled “Arc” browser, which initially I intended to be a soup-to-nuts review of how Arc works. But as I sketched out my notes — using my weird, lower-case-and-forward-slash technique for writing a draft (which I blogged about here) — I realized I was mostly only interested in one part of Arc: Its fascinating “Easel” technology, which lets you create little dashboards with live snippets from other websites. It turned out that my only interesting thoughts were on that subject, so I zeroed in.</p>
  86. <p>Robert Frost famously described the act of writing poetry as figuring out, on the page, what the heck the poem was supposed to be about: “the surprise of remembering something I didn’t know I knew.” There’s an element of that in all writing, and I routinely encounter it while blogging.</p>
  87. <p>Or to take the cognitive-philosophical approach, we could ponder the “extended mind” theory of Andy Clark — who posits that when we’re writing, the instruments we use (pen and paper, keyboard and screen) become an inextricable part of our thinking process. By writing something down, we enlargen our working memory. We externalize our thought processes, and can thus ponder them in a fresh way: Huh, do my ideas actually make sense?
  88. 2) The “audience effect” really helps</p>
  89. <p>So, writing forces you to engage in a very useful type of thinking.</p>
  90. <p>But blogging has another benefit, which is that it triggers the “audience effect”.</p>
  91. <p>The audience effect is precisely what it sounds like: When we’re working on something that will soon go before an audience, we work far harder than if we’re doing work that’s for our eyes only.</p>
  92. <p>For decades, psychologists have documented the audience effect in studies: If you have experimental subjects write out an explanation for other people, for example, it’ll be far longer and clearer and more comprehensive than if you ask them to write it merely for themselves. I’ve interviewed many teachers who’ve noticed the same thing: The essays that students write for their professors (a captive and inaorganic audience) are lifeless and dull compared to the witty, persuasive text the kids will pour out in online forums.</p>
  93. <p>The audience effect is hugely powerful on Medium. Every time I open up a new Medium story to start writing, that little green “Publish” button in the top-right corner looms: Dude, real live people are gonna read this thing. Better make it <em>not suck</em>!</p>
  94. <p>It really makes me work harder. I do more research, find more data or stories, and sharpen my prose. Nobody wants to look like a lazy dork in front of the world.
  95. 3) You figure out passions you didn’t know you had</p>
  96. <p>One of things I like about blogging is that it gives me rein to write about stuff that’s outside my normal “beat”.</p>
  97. <p>In my professional life as a magazine journalist, I’m known mostly as a tech and science writer. It’s not like I can’t write about stuff outside that beat! But the truth is, after 25 years I’m very knowledgeable about science and tech — and I really enjoy writing those stories; I’m a big nerd from way back. So editors tend to appreciate when I plough that field. When I’m blogging, that’s often what I write about too.</p>
  98. <p>But with blogging, it’s also easier to stray far afield. There’s no editor to rein me in, for good and for ill. This means I wind up writing essays about stuff that I probably wouldn’t think to pitch in my professional life …</p>
  99. <p>… like cycling! In the last few years, I’ve become a hardcore urban cyclist, to the point where I rarely take the subway or drive anymore in NYC. I’ve also done a bunch of wildly ambitious intercity trips, as when this summer I biked from Brooklyn to Montreal. This mid-life transformation into a full-blown athlete has surprised no-one more than me, a former monitor-tanned geek who fled the gladiatorial world of high-school sports back in the 80s.</p>
  100. <p>So I’ve written a lot of essays on it. I’ve written about what it’s like becoming active later in life, why urban cycling is like playing a video game, and how cycling affects your thought processes.</p>
  101. <p>If I hadn’t been for my blogging, I seriously doubt I’d have put this stuff down in words. I’ve discovered an entirely new beat. It might even become the subject of my next book.
  102. 4) It keeps my mind moving forward</p>
  103. <p>Because I set the goal of writing a ton of blog posts, it had the secondary effect of making me read a ton.</p>
  104. <p>To feed my blogging, I am constantly reading books, magazine articles, academic papers, and a sprawling network of blogs (I follow about 400 via my RSS feed on Feedly). Much as writing catalyzes thinking, reading catalyzes writing; the vast majority of ideas I get for blog posts come from reading something and having it trigger a “wait, what about …” moment.</p>
  105. <p>This is particularly true of writing my Linkfests. They’re old-school linkblogging; the goal is to find incredibly cool stuff for my readers. They’re a blast to write, but they require me to inhale the Internet the way a bowhead whale devours krill — mouth wide open, swimming eternally forward.</p>
  106. <p>(Indeed, of all the things I write, the Linkfests are the most work-intensive — to the point where I plan to scale them back in 2023, and/or possibly shift them from Medium to a paid newsletter. I’m not sure there’s enough of an audience for hardcore linkblogging to make it a going concern as a newsletter, though. We’ll see; I’ll decide in the next month.)</p>
  107. <p>The overall point, though, holds: Blogging a lot means reading a lot, which keeps my mind moving forward.</p>
  108. </article>
  109. <hr>
  110. <footer>
  111. <p>
  112. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  113. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  114. </svg> Accueil</a> •
  115. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  116. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  117. </svg> Suivre</a> •
  118. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  120. </svg> Pro</a> •
  121. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  122. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  123. </svg> Email</a> •
  124. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  125. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  126. </svg> Légal</abbr>
  127. </p>
  128. <template id="theme-selector">
  129. <form>
  130. <fieldset>
  131. <legend><svg class="icon icon-brightness-contrast">
  132. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  133. </svg> Thème</legend>
  134. <label>
  135. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  136. </label>
  137. <label>
  138. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  139. </label>
  140. <label>
  141. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  142. </label>
  143. </fieldset>
  144. </form>
  145. </template>
  146. </footer>
  147. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  148. <script>
  149. function loadThemeForm(templateName) {
  150. const themeSelectorTemplate = document.querySelector(templateName)
  151. const form = themeSelectorTemplate.content.firstElementChild
  152. themeSelectorTemplate.replaceWith(form)
  153. form.addEventListener('change', (e) => {
  154. const chosenColorScheme = e.target.value
  155. localStorage.setItem('theme', chosenColorScheme)
  156. toggleTheme(chosenColorScheme)
  157. })
  158. const selectedTheme = localStorage.getItem('theme')
  159. if (selectedTheme && selectedTheme !== 'undefined') {
  160. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  161. }
  162. }
  163. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  164. window.addEventListener('load', () => {
  165. let hasDarkRules = false
  166. for (const styleSheet of Array.from(document.styleSheets)) {
  167. let mediaRules = []
  168. for (const cssRule of styleSheet.cssRules) {
  169. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  170. continue
  171. }
  172. // WARNING: Safari does not have/supports `conditionText`.
  173. if (cssRule.conditionText) {
  174. if (cssRule.conditionText !== prefersColorSchemeDark) {
  175. continue
  176. }
  177. } else {
  178. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  179. continue
  180. }
  181. }
  182. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  183. }
  184. // WARNING: do not try to insert a Rule to a styleSheet you are
  185. // currently iterating on, otherwise the browser will be stuck
  186. // in a infinite loop…
  187. for (const mediaRule of mediaRules) {
  188. styleSheet.insertRule(mediaRule.cssText)
  189. hasDarkRules = true
  190. }
  191. }
  192. if (hasDarkRules) {
  193. loadThemeForm('#theme-selector')
  194. }
  195. })
  196. </script>
  197. </body>
  198. </html>