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

index.html 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  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>7 Reasons why I don’t write (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://mxb.dev/blog/seven-reasons-why-i-dont-write/">
  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>7 Reasons why I don’t write</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://mxb.dev/blog/seven-reasons-why-i-dont-write/" title="Lien vers le contenu original">Source originale</a>
  70. </p>
  71. </nav>
  72. <hr>
  73. <p class="lead">I have recently been made aware that the frequency of new content published on my site has gone down quite a bit.</p>
  74. <p>Ok fine, I <a href="https://front-end.social/@matuzo/109768438608948867">trash-talked Manuel’s website</a> on Mastodon and he correctly pointed out that while I wrote an impressive two (2) blogposts last year, he wrote around 90 (while also doing talks, audits, raising an infant daughter and probably training for a marathon or some shit like that, I mean let’s face it the guy is annoyingly productive).</p>
  75. <p>I know I was slacking off a bit and those numbers speak for themselves. While I generally want to write, ideas rarely make it all the way to a published post.</p>
  76. <p>Like many others, <em>“write more”</em> is high up on my imaginary list of life improvements and although I don’t usually do new year’s resolutions, now feels like a good time to re-evaluate what’s stopping me there.</p>
  77. <p>I came up with seven reasons that I use to justify why I’m not writing. In a confusing twist of perspective, I’m also going to try and talk myself out of them by explaining to you, dear Reader, why they are bullshit.</p>
  78. <p class="u-align-center" aria-hidden="true">···</p>
  79. <h2 id="h-i-don%E2%80%99t-have-time"><a class="heading-anchor" href="#h-i-don%E2%80%99t-have-time" aria-hidden="true">#</a> I don’t have time</h2>
  80. <p>This is the big one, right? We all have other things to do, and writing takes time. In my case, I’ve been really swamped with client projects and other work last year.</p>
  81. <p>I think if you actually want to write though, it’s more a lack of routine than a lack of time itself. People who consistently produce content have learned to make a habit out of it. I read <a href="https://jamesclear.com/atomic-habits">“Atomic Habits”</a> by James Clear a couple of months ago and its message kinda stuck with me. It’s about conditioning yourself to do certain things more often by building a routine.</p>
  82. <p>Take 15 minutes every day before you check your email and <a href="https://www.sarasoueidan.com/desk/just-write/">just write</a>. Or do it on your commute to work if possible! The trick is to use amounts of time that are so small you can’t possibly <strong>not</strong> fit them in your schedule. It may not be enough for a fully-fledged article, but enough to build a habit.</p>
  83. <p>It’s also worth noting that your writing doesn’t always have to be well-crafted longform blogposts. It can just be a few paragraphs about your thoughts, linking out to other stuff. <a href="https://chriscoyier.net/">Chris</a> does a great job at this, and others have recently adopted <a href="https://nerdy.dev/">even shorter</a> <a href="https://jhey.dev/">formats</a>, mimicking social media posts in length.</p>
  84. <h2 id="h-i-don%E2%80%99t-have-anything-interesting-to-say"><a class="heading-anchor" href="#h-i-don%E2%80%99t-have-anything-interesting-to-say" aria-hidden="true">#</a> I don’t have anything interesting to say</h2>
  85. <p>The classic impostor syndrome comes out here. I don’t know anything special, so why bother?</p>
  86. <p>The truth is that <em>everyone</em> has something interesting to say because everyone faces different challenges. You don’t have to go viral and make buzzword-riddled thinkpieces about the current hot topic - There’s enough sites who already do that, and <a href="https://maggieappleton.com/ai-dark-forest">AI will soon produce a shitton more of it</a>.</p>
  87. <p>A better plan is to write about what you know and experience in your day-to-day life instead. Authentic posts are always helpful, and you will solidify your own knowledge in the process too.</p>
  88. <p>Here are a few common writing prompts and examples for blogposts I love to read:</p>
  89. <h2 id="h-i-gotta-fix-%5Bx%5D-on-my-site-first"><a class="heading-anchor" href="#h-i-gotta-fix-%5Bx%5D-on-my-site-first" aria-hidden="true">#</a> I gotta fix [X] on my site first</h2>
  90. <p>This one is especially popular among developers. “How can I possibly write anything before the typography is perfect? How can I ever publish anything when comments are not implemented yet?” We love to tinker with our websites and that’s cool, but at some point it gets in the way of actually <em>using</em> your blog and creating content.</p>
  91. <p>Despite what we tell ourselves, it really doesn’t matter too much how a blog looks or what features it has. People come for the content, and as long as they can read it, they’re happy. Throw in an RSS feed so everyone can use their own reader and you’re golden. It pains me to say it but <a href="https://front-end.social/@matuzo/109768438608948867">Manuel is absolutely correct</a> here.</p>
  92. <p>And if he can be “redesigning in the open” for three years while churning out massive amounts of CSS knowledge, your site will be fine too. 😉</p>
  93. <h2 id="h-others-have-already-written-about-this"><a class="heading-anchor" href="#h-others-have-already-written-about-this" aria-hidden="true">#</a> Others have already written about this</h2>
  94. <p>Sometimes I’ve got a great idea for a post, but an initial Google search reveals that someone else already beat me to it. The novelty has worn off and that other post is way better than what I could have come up with anyway, I tell myself.</p>
  95. <p>That’s not a real reason of course, nobody has a monopoly on a subject. Others may have already covered the topic - but not in your voice, not from your perspective. You could write a post about the exact same thing and still provide valuable information the other author has missed. Or you could approach the subject from a different angle, for a different skill-level or for a different audience.</p>
  96. <p>Another way is to read the material that is already available and take notes about all the questions you still have afterwards. Try to actually do the thing (write the code, use the app, whatever) and see what other information would have been helpful for you to have. Write that!</p>
  97. <h2 id="h-the-moment-for-this-has-passed"><a class="heading-anchor" href="#h-the-moment-for-this-has-passed" aria-hidden="true">#</a> The moment for this has passed</h2>
  98. <p>There are writing ideas that are inspired by some event or conversation. Maybe something big happened on the web or I’ve had a particularly interesting discussion on social media. So I sketch out a quick outline for a post and stick it in my <code>drafts</code> folder, thinking I’ll get back to it later.</p>
  99. <p>Three weeks pass and that lonely draft sits around gathering dust, and by the time I remember it, the moment has passed. The conversation has moved on, and so the post is abandoned and eventually deleted.</p>
  100. <p>The internet moves pretty fast and there’s always a “hot topic of the day”, but that doesn’t mean that nobody is interested in anything else. A beautiful thing about blogs is that they’re asynchronous. You can just write things and put them out there, and even if they don’t hit a nerve immediately, people can discover them in their own time.</p>
  101. <p>Older posts can also get re-discovered years later and get a second wind, not to mention that people constantly search for specific things - and your post might be just what they’re looking for then! Some of my old posts about <a href="/blog/webring-kit/">webrings</a> and the IndieWeb have recently found readers again since Twitter has started going down the drain. You never know!</p>
  102. <h2 id="h-i-can%E2%80%99t-get-it-to-sound-right"><a class="heading-anchor" href="#h-i-can%E2%80%99t-get-it-to-sound-right" aria-hidden="true">#</a> I can’t get it to sound right</h2>
  103. <p>Most of the (tech) blogs I read are in English, even though its authors are from all over the world. For a non-native english speaker like myself, it can sometimes be daunting to write in a foreign language. This is a barrier when it comes to producing “polished” text - there’s extra brain cycles involved in getting your ideas to “sound” right.</p>
  104. <p>This is probably not a big deal though. People don’t expect to read world-class literature when they come to check out a blogpost about “Lobster Mode”. As long as you can get your point across, it’s fine if you don’t use fancy words. It can also be an advantage: for an international audience, simple English might even be easier to understand.</p>
  105. <p>That being said, this is a usecase where AI might actually be helpful! While <abbr title="Large Language Models">LLMs</abbr> like GPT-3 and co are <a href="https://themarkup.org/hello-world/2023/01/28/decoding-the-hype-about-ai">useless at creating actual content</a> or original thoughts, they’re great at making sentences sound nice. Tools like <a href="https://www.jasper.ai/">Jasper</a> can rewrite your copy and improve the tone without changing the contained information. Sort of like <a href="https://prettier.io/">prettier</a> but for English prose.</p>
  106. <h2 id="h-nobody%E2%80%99s-going-to-read-it-anyway"><a class="heading-anchor" href="#h-nobody%E2%80%99s-going-to-read-it-anyway" aria-hidden="true">#</a> Nobody’s going to read it anyway</h2>
  107. <p>Let’s be honest: nobody likes to shout into the void. Everyone wants their content to be seen, and social validation is the sweet sweet dopamine reward we all crave.</p>
  108. <p>There’s nothing wrong with sharing your work on social media or popular orange link aggregators either, but sometimes there just won’t be much of a reaction after you publish. That can feel frustrating - but ultimately I think obesessing over vanity metrics is not worth it anyway. Just because something doesn’t make the frontpage of Reddit does not mean it’s not valuable.</p>
  109. <p>Don’t underestimate how many people actively read personal blogs though! The web dev community is especially fond of RSS, and with the Fediverse gaining more and more popularity, original content on your own domain has a much better reach now than before.</p>
  110. <p class="u-align-center" aria-hidden="true">···</p>
  111. <p>Right, I realize it’s a bit weird to write a post about how I don’t write posts. But I hope to push back on this in 2023 and find more time for writing. I also suspect that other people have similar reasons and maybe talking about them helps a bit.</p>
  112. <p>In any case, that’s one more post in the bank!</p>
  113. </article>
  114. <hr>
  115. <footer>
  116. <p>
  117. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  118. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  119. </svg> Accueil</a> •
  120. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  121. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  122. </svg> Suivre</a> •
  123. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  124. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  125. </svg> Pro</a> •
  126. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  127. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  128. </svg> Email</a> •
  129. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  130. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  131. </svg> Légal</abbr>
  132. </p>
  133. <template id="theme-selector">
  134. <form>
  135. <fieldset>
  136. <legend><svg class="icon icon-brightness-contrast">
  137. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  138. </svg> Thème</legend>
  139. <label>
  140. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  141. </label>
  142. <label>
  143. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  144. </label>
  145. <label>
  146. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  147. </label>
  148. </fieldset>
  149. </form>
  150. </template>
  151. </footer>
  152. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  153. <script>
  154. function loadThemeForm(templateName) {
  155. const themeSelectorTemplate = document.querySelector(templateName)
  156. const form = themeSelectorTemplate.content.firstElementChild
  157. themeSelectorTemplate.replaceWith(form)
  158. form.addEventListener('change', (e) => {
  159. const chosenColorScheme = e.target.value
  160. localStorage.setItem('theme', chosenColorScheme)
  161. toggleTheme(chosenColorScheme)
  162. })
  163. const selectedTheme = localStorage.getItem('theme')
  164. if (selectedTheme && selectedTheme !== 'undefined') {
  165. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  166. }
  167. }
  168. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  169. window.addEventListener('load', () => {
  170. let hasDarkRules = false
  171. for (const styleSheet of Array.from(document.styleSheets)) {
  172. let mediaRules = []
  173. for (const cssRule of styleSheet.cssRules) {
  174. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  175. continue
  176. }
  177. // WARNING: Safari does not have/supports `conditionText`.
  178. if (cssRule.conditionText) {
  179. if (cssRule.conditionText !== prefersColorSchemeDark) {
  180. continue
  181. }
  182. } else {
  183. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  184. continue
  185. }
  186. }
  187. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  188. }
  189. // WARNING: do not try to insert a Rule to a styleSheet you are
  190. // currently iterating on, otherwise the browser will be stuck
  191. // in a infinite loop…
  192. for (const mediaRule of mediaRules) {
  193. styleSheet.insertRule(mediaRule.cssText)
  194. hasDarkRules = true
  195. }
  196. }
  197. if (hasDarkRules) {
  198. loadThemeForm('#theme-selector')
  199. }
  200. })
  201. </script>
  202. </body>
  203. </html>