A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  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>Four fours - Sentiers Media (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. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://sentiers.media/four-fours/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Four fours - Sentiers Media</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://sentiers.media/four-fours/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p class="has-large-font-size">How do you work? I think productivity gets somewhat of a bad rap, some people talk and write about it nonstop, for some it’s a way to optimize their workaholic tendencies, and sometimes it leads to too much focus on details, not enough on what you are actually trying to get done. On the other hand, I think it <i>is</i> useful to see how others work, and to try to have and evolve your own system, not simply diving in heads down in the morning and hoping for the best.</p>
  71. <p>In the spirit of “this might be useful to someone else” but also, more so, with the goal of putting some low level peer-pressure on myself, I thought I’d share how I’m trying to structure 2021. Because I like alliterations and repeating things, but also simply because of our calendar, I call it the Four fours. Or 4x4x4x4.</p>
  72. <ul><li>Four solid hours of knowledge work a day.
  73. </li><li>Four work days a week.
  74. </li><li>Four things delivered each week.
  75. </li><li>Four projects a year.
  76. </li></ul>
  77. <h2 id="Four solid hours of knowledge work a day">Four solid hours of knowledge work a day</h2>
  78. <p>This one is 100% lifted from Doug Belshaw. I’ve <a href="https://i.never.nu/four-hours-of-knowledge-work/">written about it before</a> and it’s really <a href="https://dougbelshaw.com/blog/2017/03/17/my-daily-routine/">Doug’s routine</a> and his mention of it that got me to think this way.</p>
  79. <blockquote class="wp-block-quote"><p>My time is precious. of solid knowledge work is what I aim for each day <a href="http://thinksimplenow.com/productivity/the-4-hour-workday/">Four hours</a> as <a href="http://www.economist.com/blogs/freeexchange/2013/09/working-hours">research</a> backs up my theory that this is optimal. I feel sorry for people who work in offices who have long commutes each way, have to spend time maintaining relationships with colleagues they don’t particularly like, and in meetings that are a waste of time.</p></blockquote>
  80. <p>There are a couple of links in the quote above, and I could find a few more through the research I was doing back in the day when I was writing a newsletter on lifelong learning. Four hours of focused work is roughly the most we can expect, and dozens of great creators had this type of schedule.</p>
  81. <p>Like Doug, I don’t just work four hours; admin, emails, and meetings are not counted in there. But, especially in pandemic times with the kid at home more, if I manage four good hours of focused work, I consider it a good day. One hour, a quick break, another hour. Morning and afternoon, the rest falls around those hours. It’s a case of managing expectations. If only for morale reasons, it’s good to have a reasonable idea of what you can get done in a day and not expect too much of yourself in a tense time.</p>
  82. <h2 id="Four work days a week">Four work days a week</h2>
  83. <p>On this one I’m blatantly cheating. I do work five days a week but Friday is for writing <i>Sentiers</i>, which is not work per se. On that day I don’t book meetings or plan on anything else than catching up on readings, curating what goes in, and writing the insights/summaries. I’m doing all the same things as when I’m working but it’s for my own thing, written for readers but also for myself.</p>
  84. <h2 id="Four things delivered each week">Four things delivered each week</h2>
  85. <p>This is the new one and why I came up with this post. In his <a href="https://twitter.com/lennysan/status/1347642516481351680">excellent thread on writing a newsletter</a>, Lenny Rachitsky said this: “Just sending an email to a few friends regularly with your concrete goals about writing (and anything else) works wonders.” (Example below.)</p>
  86. <figure class="wp-block-image alignwide size-large"><img src="https://pbs.twimg.com/media/ErPAnzOVoAEPfvT?format=jpg&amp;name=large" alt data-lazy-src="https://pbs.twimg.com/media/ErPAnzOVoAEPfvT?format=jpg&amp;name=large&amp;is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img src="https://pbs.twimg.com/media/ErPAnzOVoAEPfvT?format=jpg&amp;name=large" alt=""></noscript><figcaption>Lenny’s example, lifted from his thread.</figcaption></figure>
  87. <p>I thought about it a bit, but I couldn’t really think of enough friends who would be interested in getting this <i>and</i> pay attention to have a critical mass of some of them replying or inquiring. And thus, no pressure yet “bugging” people with it anyway. Also, I’m already achieving roughly that level of things, I wanted pressure for more smaller things and the flexibility of changing things up, as long as I complete them.</p>
  88. <p>And so, I thought I’d start writing weeknotes. A <a href="https://medium.com/job-garden/a-pre-history-of-weeknotes-plus-why-i-write-them-and-perhaps-why-you-should-too-week-16-31a4a5cbf7b0">well established practice</a> a lot of people have been doing these for years. I plan on a simple version, a list of things delivered that week, potentially some more thoughts, and usually one “practice related” article read during the week.</p>
  89. <p>By “things delivered” I’m just thinking of almost any kind of work completed. For example, this week:</p>
  90. <ol><li>Researched and wrote-up two posts for DA VINCI. (Yeah! Finally using project names!)
  91. </li><li>Wrote up two posts for the <i>Sentiers</i> website (this one and another scheduled to publish).
  92. </li><li>Wrapped up the archive conversion for ECO.
  93. </li><li>Completed and posted the report for CRICHTON.
  94. </li></ol>
  95. <p>I’m setting this up for two mental tricks on myself; the routine of writing these, and the (almost) entirely imagined peer-pressure of posting them in public.</p>
  96. <h2 id="Four projects a year">Four projects a year</h2>
  97. <p>This one I’ve already shared in <a href="https://sentiers.media/on-projects/">On projects, newsletters, products, and formats</a>. At this point, three projects of four months each might have been a better idea, but allowing for relatively blurry lines between each, I’m still hopeful to manage to ship four larger things a year. The first, ECO, was supposed to be over the last quarter of 2020 but is ongoing. I’m lining up a smaller project and might get both done before March 31st (😳). Although if the BABBAGE client project gets off the ground, maybe not.</p>
  98. <h2 id="Two hundred fifty-six">Two hundred fifty-six</h2>
  99. <p>Hopefully this can somehow be useful to others, and hopefully writing it and putting it out there, along with the weeknotes, helps me stick to the schedule and complete things with more regularity.</p>
  100. </article>
  101. <hr>
  102. <footer>
  103. <p>
  104. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  105. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  106. </svg> Accueil</a> •
  107. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  108. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  109. </svg> Suivre</a> •
  110. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  111. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  112. </svg> Pro</a> •
  113. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  114. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  115. </svg> Email</a> •
  116. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  117. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  118. </svg> Légal</abbr>
  119. </p>
  120. <template id="theme-selector">
  121. <form>
  122. <fieldset>
  123. <legend><svg class="icon icon-brightness-contrast">
  124. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  125. </svg> Thème</legend>
  126. <label>
  127. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  128. </label>
  129. <label>
  130. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  131. </label>
  132. <label>
  133. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  134. </label>
  135. </fieldset>
  136. </form>
  137. </template>
  138. </footer>
  139. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  140. <script>
  141. function loadThemeForm(templateName) {
  142. const themeSelectorTemplate = document.querySelector(templateName)
  143. const form = themeSelectorTemplate.content.firstElementChild
  144. themeSelectorTemplate.replaceWith(form)
  145. form.addEventListener('change', (e) => {
  146. const chosenColorScheme = e.target.value
  147. localStorage.setItem('theme', chosenColorScheme)
  148. toggleTheme(chosenColorScheme)
  149. })
  150. const selectedTheme = localStorage.getItem('theme')
  151. if (selectedTheme && selectedTheme !== 'undefined') {
  152. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  153. }
  154. }
  155. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  156. window.addEventListener('load', () => {
  157. let hasDarkRules = false
  158. for (const styleSheet of Array.from(document.styleSheets)) {
  159. let mediaRules = []
  160. for (const cssRule of styleSheet.cssRules) {
  161. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  162. continue
  163. }
  164. // WARNING: Safari does not have/supports `conditionText`.
  165. if (cssRule.conditionText) {
  166. if (cssRule.conditionText !== prefersColorSchemeDark) {
  167. continue
  168. }
  169. } else {
  170. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  171. continue
  172. }
  173. }
  174. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  175. }
  176. // WARNING: do not try to insert a Rule to a styleSheet you are
  177. // currently iterating on, otherwise the browser will be stuck
  178. // in a infinite loop…
  179. for (const mediaRule of mediaRules) {
  180. styleSheet.insertRule(mediaRule.cssText)
  181. hasDarkRules = true
  182. }
  183. }
  184. if (hasDarkRules) {
  185. loadThemeForm('#theme-selector')
  186. }
  187. })
  188. </script>
  189. </body>
  190. </html>