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 26KB

2 vuotta sitten
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  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>Writing for Engineers (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://www.heinrichhartmann.com/posts/writing/">
  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>Writing for Engineers</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://www.heinrichhartmann.com/posts/writing/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>Writing is key to have impact in large organizations. As a senior software
  71. engineer chances are that writing is the most important skill you have to
  72. acquire in order to increase your scope beyond the team and advance your career.</p>
  73. <p>Writing is hard. Many Software engineers struggle with writing. Personally I
  74. never had an intrinsic interest in literature, so writing did not naturally come
  75. to me either. I have spent days and weeks agonizing and procrastinating around
  76. larger writing tasks. And to this day, having pressure to produce high-quality
  77. documents on a deadline gives me nightmares.</p>
  78. <p>This article contains some learnings that have helped me (and others) to become
  79. better and more productive as a writer over the past 15 years. I am sharing them
  80. in the hope, that you find them useful. However, don’t think that I am always
  81. able to follow this advice myself 😅. I still have a lot to learn.</p>
  82. <h2 id="before-you-begin">Before you begin</h2>
  83. <h3 id="have-something-to-say">Have something to say</h3>
  84. <p>This statement seems obvious, but turns out to be a problem surprisingly often.
  85. <strong>The goal of writing is to deliver a message to an audience in an effective
  86. way.</strong> If you don’t have a good message, you will struggle to write something
  87. useful.</p>
  88. <blockquote>
  89. <p>During my time at University, I was tasked multiple times with writing long
  90. reporting documents for EU projects. This was terrible experience, because the
  91. main goal was to look good and fill pages. Generally, I had a good idea of the
  92. domain, but did not have a clear message or sufficient depth. For me, this made
  93. it incredibly hard to write anything. Thinking about this now, I think
  94. <a href="https://en.wikipedia.org/wiki/GPT-3">GPT-3</a> would be amazing at writing EU
  95. Project reports.</p>
  96. </blockquote>
  97. <blockquote>
  98. <p>One of my most successful <a href="https://www.circonus.com/2018/08/latency-slos-done-right/">blog
  99. posts</a> (that led to a
  100. <a href="https://archive.fosdem.org/2019/schedule/event/latency_slos_done_right/">series</a>
  101. <a href="https://www.usenix.org/conference/srecon19asia/presentation/schlossnagle-latency">of</a>
  102. <a href="https://www.usenix.org/conference/srecon19americas/presentation/moyer">talks</a>
  103. on the topic) was written over the course of 3 hours in a hotel room, and
  104. published the next day. It was a followup to a discussion that I had on that
  105. same day with a few Google SREs at SRECon EMEA 2018. I knew what I wanted to
  106. say. I knew who I wanted to reach. That made writing the post super easy.</p>
  107. </blockquote>
  108. <p>If you don’t have a clear message in your head, your are not ready to start
  109. writing a narrative yet. You have other things to do first: Research the topic
  110. and find your message. It’s important to realize that these are different tasks.
  111. They may involve writing in the form of note-taking or journaling, but this is
  112. not material you would directly use in the final document.</p>
  113. <h3 id="dont-confuse-writing-and-learning">Don’t confuse writing and learning</h3>
  114. <p>The realization that you don’t have the complete message in your head, will
  115. often only become apparent while writing. This surfaces as inability to find a
  116. good punch-line or to express yourself clearly. In fact, writing is a great test
  117. to see if you have a good understanding of a topic, and have a firm grasp on the
  118. vocabulary of the domain. There is a saying that:</p>
  119. <blockquote>
  120. <p>Writing is god’s way to show you how imperfect your thoughts are.</p>
  121. </blockquote>
  122. <p>And similarly:</p>
  123. <blockquote>
  124. <p>An argument is only half as good once you are uttering it.</p>
  125. </blockquote>
  126. <p>If you run into this problem, it means that you are learning things. Writing is
  127. generally a great way to learn, but one has to realize that you are doing it.
  128. Learning is a slow process and requires patience. It is not helped much by
  129. agonizing in front of a screen, trying to squeeze out another sentence. Doing
  130. more research on the topic by reading a book, blog or paper and taking notes may
  131. be a better time investment.</p>
  132. <h3 id="know-your-audience">Know your audience</h3>
  133. <p>The better you know and understand your audience the easier it will be to reach
  134. the goal of delivering a message to them. The intended audience of the text
  135. influences the terminology you can use, the context you can assume and the
  136. writing style (casual/formal).</p>
  137. <p>When writing an article, I generally <strong>visualize a concrete person as
  138. representative of the audience</strong>, that I am directing this text towards. This
  139. will usually also be the first person, that will get a draft to read. It’s
  140. generally much easier to tell a story “to someone” as opposed to talking into
  141. the void.</p>
  142. <blockquote>
  143. <p>Most of my <a href="/#math">#math</a> posts on this blog are actually lacking a good
  144. audience. They are only readable for people who are proficient in abstract
  145. mathematics, but they are only interesting for people working in software. The
  146. intersection of both groups is tiny. Hence I don’t expect a lot of resonance or
  147. impact with those. They are documenting things that I wanted to learn myself.</p>
  148. </blockquote>
  149. <h3 id="respect-your-state-of-mind">Respect your state-of-mind</h3>
  150. <p>Writing requires intense focus over long periods of time. Ideally you want to
  151. get into a flow state where you are zoned in and working on the text for hours
  152. on-end. This is by far the most efficient way to write a narrative or a
  153. blog-post – at least for me.</p>
  154. <p><strong>Prepare for a writing task, like you would for a hike. You are in for a grind.</strong>
  155. Find a comfortable space to sit. Grab a beverage/snack of your preference. Most
  156. importantly make sure that you are rested and able to focus. Don’t start a
  157. writing task when you are already tired. There is no way you will get anything
  158. useful written.</p>
  159. <p>Also, avoid distractions as much as you can. Most importantly: Mute the Chat.
  160. Block at least 3h in your calendar for a writing session. If I am writing longer
  161. documents for work, I will try to block a full afternoon. For me, the most
  162. effective writing sessions happen on weekends or vacations where I don’t have
  163. any meetings at all.</p>
  164. <h3 id="work-the-iron-while-its-hot">Work the iron while it’s hot</h3>
  165. <p>Just like programming, writing requires a lot of context that you hold in your
  166. short term memory. You need to recall a lot of details about the topic you are
  167. writing about, as well as your punch-line and the current state of the document.
  168. All this state takes time to load into memory, and is easily lost by
  169. distractions or context switching.</p>
  170. <p>If you have loaded a lot of useful context in your brain at any given point in
  171. time, use this context to do something useful with it. Try to milk that moment,
  172. and make space when you realize you are in a position to write effectively on
  173. your topic.</p>
  174. <h3 id="heat-the-iron-before-working-it">Heat the iron before working it</h3>
  175. <p>Conversely, if you don’t have the context in your brain right now, you have
  176. two options (1) don’t write or (2) start loading the context into your brain.</p>
  177. <p>Missing context is a frequent source of agony and procrastination. Don’t expect
  178. to take a TODO like “Write conference talk” from your list, and start working on
  179. it right way. You need to invest time into loading context before you have a
  180. chance to write even a single sentence.</p>
  181. <p>Good ways to load some context are:</p>
  182. <ol>
  183. <li>Go through your notes that you took about the topic.</li>
  184. <li>Discuss the topic with a coworker / random stranger / family member.</li>
  185. <li>Read some books / blogs / papers on the topic.</li>
  186. </ol>
  187. <p>Bad ways to load the context are surfing HackerNews or YouTube.</p>
  188. <h2 id="while-writing">While writing</h2>
  189. <h3 id="start-at-the-top-not-the-beginning">Start at the Top not the Beginning</h3>
  190. <p>This is by far the most common and damaging mistake I see people make. They
  191. start with writing at the beginning of the narrative:</p>
  192. <blockquote>
  193. <p>“Once upon a time, in a galaxy far, far away …”</p>
  194. </blockquote>
  195. <p>Do you really think that those were the first words that George Lucas brought
  196. to paper, when writing the original Star Wars trilogy?</p>
  197. <p>For documents that are more than a page long you must take a top-down approach
  198. and start with an <strong>outline</strong>. An outline is a list of sections together with
  199. rough notes, often in the form of bullet points. For this document the <a href="https://github.com/HeinrichHartmann/HeinrichHartmann.github.io/commit/46be4c95faeda16996baf6799eca8a551b282565">first
  200. outline</a> looked something like this:</p>
  201. <pre tabindex="0"><code># How to Write?
  202. - Audience: Senior+ SWE
  203. - Goal: Upskill and unblock writing
  204. ## Have something to say
  205. - Goal: Deliver message to audience.
  206. - Without message writing is agony: Squeezing a water from a stone.
  207. ## Know your audience
  208. ## Work the iron while it's hot
  209. - Be aware of your brain context
  210. - Start/Stay on task, if you have the right context
  211. - Load context before you start
  212. ## Separate Editing, Publishing and Writing
  213. - If you are fiddling with git/emacs before starting to write,
  214. you are doing something wrong.
  215. ...
  216. </code></pre>
  217. <p>Note that, the section titles are not just generic scaffolding (e.g.
  218. “Introduction” / “Body” / “Conclusion”) but already tell the whole story.</p>
  219. <h3 id="fix-the-story-line-before-fleshing-things-out">Fix the story-line before fleshing things out</h3>
  220. <p>When building a house, you finish the brick-work before applying the paint. When
  221. writing, you want to arrive at a good story-line for you document, before you
  222. start fleshing out and polishing the text. A outline should be the
  223. first milestone for any larger document you are writing. The outline, should
  224. convey the main message and provide a clear “red thread” that guides your reader
  225. through your argument.</p>
  226. <blockquote>
  227. <p>When working for <a href="https://www.mckinsey.com/">a consulting firm</a>, I saw my
  228. senior colleagues spending a lot of time polishing and iterating the structure
  229. of their slide decks before working on the details. They would print the deck on
  230. paper, pin the slides to a wall, and keep re-arranging them until they were
  231. happy with the story-line. The slides would remain on the wall and subject to
  232. re-arrangement until the deck was finalized.</p>
  233. </blockquote>
  234. <p>Fixing the story-line of a document becomes MUCH more expensive once you have
  235. already fleshed out the paragraphs. In some cases, the best thing you can do
  236. is to stash away the whole content and go back to an outline before building
  237. the document up again.</p>
  238. <h3 id="finish-the-content-before-starting-to-polish">Finish the content before starting to polish</h3>
  239. <p>A trap I have found myself in way too many times, is to get distracted by
  240. adjacent tasks that are not needed to produce the narrative. Those tasks
  241. include:</p>
  242. <ol>
  243. <li><strong>Editing</strong>. Fixing spelling, wording or restructuring paragraphs.</li>
  244. <li><strong>Publishing</strong>. Fiddling with formatting, tuning WordPress, automating your
  245. git+hugo+heroku deployments.</li>
  246. <li><strong>Producing Figures</strong>. Sketching figures on paper or browsing the web for
  247. images that you can use in your presentation.</li>
  248. </ol>
  249. <p>Remember: <strong>The first milestone for your document is an outline. Everything that
  250. is not directly contributing to this goal is a distraction.</strong></p>
  251. <p>When you are happy with the outline, <strong>the second milestone is a fully fleshed
  252. out text, where all notes have been converted to paragraphs.</strong> The text should
  253. cover the intended content but does not need to be polished or well written.</p>
  254. <p>Once you are at this point, you start worrying about polish: Remove typos,
  255. improve wording, restructure paragraphs. Also work on figures and publishing can
  256. be delayed to this point without any problems.</p>
  257. <h3 id="make-your-text-skimable">Make your text skimable</h3>
  258. <p>According to <a href="https://www.towermarketing.net/blog/winning-the-fight-against-a-website-users-attention-span/">someone on the
  259. internet</a>:</p>
  260. <blockquote>
  261. <p>Eight seconds. A website user’s attention span lies somewhere around eight seconds.</p>
  262. </blockquote>
  263. <p>In these eight seconds, your document has to reveal enough value to the user,
  264. that he/she is willing to invest more time into actually reading the document.</p>
  265. <p>If you want your voice to be heard (and also improve the
  266. <a href="https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=pd_sbs_sccl_1/142-5208579-0665727?pd_rd_w=IgY9h&amp;pf_rd_p=3676f086-9496-4fd7-8490-77cf7f43f846&amp;pf_rd_r=CGY8ZQY3T7ESSFA4W7RD&amp;pd_rd_r=a1baa3bd-3e30-402a-afe2-9d01086d2fc5&amp;pd_rd_wg=eMOQZ&amp;pd_rd_i=0321965515&amp;psc=1">usability</a>
  267. of your text) you have to design your document for “skim-ability”. You do this
  268. by providing anchor points that allow the user to gauge the content without
  269. actually reading it. You want the outline and key arguments to keep standing out
  270. in the final version of the document.</p>
  271. <p>Section Headings and Lists are the key anchor points you want to use to reach
  272. this goal. Also Figures, Quotes and Highlights are features that stand out and
  273. grab attention while skimming.</p>
  274. <blockquote>
  275. <p>If you are writing a slide-deck, a good approach to ensure skim-ability is the
  276. use of Action Titles. Action Titles are slide titles that summarize the content
  277. of a slide in a complete sentence. By doing this you allow the reader to get the
  278. gist of your document by just reading the titles. This highly annoying guy on
  279. the internet does a fine job of explaining the concept
  280. <a href="https://youtu.be/rSk11YqnXoc?t=131">here</a> and ideas around it.</p>
  281. </blockquote>
  282. <h3 id="provide-summary-sections">Provide Summary Sections</h3>
  283. <p>Summary sections are commonly found in document templates and academic writing.
  284. They are usability features, that provide a high-level overview about the
  285. content for readers in a hurry. Expect that a large fraction of your audience
  286. will only read a summary.</p>
  287. <ul>
  288. <li>
  289. <p><strong>Abstract</strong> / <strong>Executive Summary</strong> / <strong>TL;DR</strong>. This section summarizes the
  290. content of the document, deliberately duplicating information. It’s generally
  291. the first section of your document, and is intended for reader that has not
  292. yet read the document. A good abstract describes context, motivates the
  293. problem summarizes the findings but also leaves some suspension to motivate
  294. further reading.</p>
  295. </li>
  296. <li>
  297. <p><strong>Conclusion.</strong> This section also summarizes the content and is hence similar
  298. to an abstract. The difference is that it is the last section in your
  299. document, focuses on the outcomes and is deliberately referencing back to the
  300. content. The basic idea is that the reader had read the document before he/she
  301. arrives there, but this is in practice almost never the case.</p>
  302. </li>
  303. </ul>
  304. <p>It’s important to note that these summary sections are independent of the main
  305. story line, and are hence an artifact that can be prepared independently.
  306. Generally, I would recommend to start working on summary sections (like
  307. Abstract/Conclusion) last, since only then will you be certain what your
  308. document actually covers.</p>
  309. <h2 id="the-practice-of-writing">The Practice of Writing</h2>
  310. <h3 id="keep-writing">Keep Writing</h3>
  311. <p>The only way to improve your writing is by writing. As with practice in general,
  312. valuing quantity over quality is generally a good idea. Developing a writing
  313. muscle, and writing relatively short medium quality documents every week will
  314. make you a much better writer than crafting highly polished documents once a
  315. year.</p>
  316. <blockquote>
  317. <p>My English teacher in school used to say: “Writing. Only writing brings
  318. blessing.” I did not think much about this slogan, but it was catchy enough to
  319. stick with me. Now I consider it a deep truth, and keep it at the top of my
  320. blog, as a reminder.</p>
  321. </blockquote>
  322. <h3 id="leverage-small-writing-tasks-as-exercise">Leverage small writing tasks as exercise</h3>
  323. <p>Most of the rules that apply to writing long-form documents like Tech
  324. Narratives, Blog Posts or Papers hold up for writing short documents like
  325. E-Mails or issue tickets. Use this documents to practice your writing skills, by
  326. make them well structured, usable and polished.</p>
  327. <h3 id="get-early-feedback-on-your-outline">Get early feedback on your outline</h3>
  328. <p>Once you have constructed an outline and polished the story-line you are at a
  329. great place to get initial feedback on your document. This allows you to uncover
  330. flaws in your story-line early, and make sure you are on-target with the
  331. content. Also, reading an outline is a very quick thing to do, so it will not
  332. take a lot of effort for your reviewer to go through your text.</p>
  333. <p>This is most important for long documents, that you are producing on request of
  334. a stakeholder (manager).</p>
  335. <h3 id="circulate-drafts-of-the-text-to-the-selected-audience">Circulate drafts of the text to the selected audience</h3>
  336. <p>Once you fleshed out the content, and did a first editing pass removing the most
  337. glaring grammar and spelling mistakes, you are at a good point to sent the
  338. document to a few selected members of the target audience.</p>
  339. <p>This practice has three benefits:</p>
  340. <ol>
  341. <li>You will get a pair of fresh eyes on the text that will at the very least
  342. catch a few grammar quirks that remained in the text.</li>
  343. <li>You take a break from working on the text yourself, until you received the
  344. feedback, allowing yourself to take a fresh look at your writing.</li>
  345. <li>You have an excuse to reach out to old friends that you had neglected for far
  346. too long.</li>
  347. </ol>
  348. <p>Hint: Don’t forget to thank your reviewers in an “Acknowledgements” section.</p>
  349. <h1 id="acknowledgements">Acknowledgements</h1>
  350. <p>Thanks to my sister, Johanna Hartmann, and <a href="https://twitter.com/andrewhowdencom">Andrew
  351. Howden</a> for feedback on earlier versions of
  352. this document.</p>
  353. </article>
  354. <hr>
  355. <footer>
  356. <p>
  357. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  358. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  359. </svg> Accueil</a> •
  360. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  361. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  362. </svg> Suivre</a> •
  363. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  364. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  365. </svg> Pro</a> •
  366. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  367. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  368. </svg> Email</a> •
  369. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  370. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  371. </svg> Légal</abbr>
  372. </p>
  373. <template id="theme-selector">
  374. <form>
  375. <fieldset>
  376. <legend><svg class="icon icon-brightness-contrast">
  377. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  378. </svg> Thème</legend>
  379. <label>
  380. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  381. </label>
  382. <label>
  383. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  384. </label>
  385. <label>
  386. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  387. </label>
  388. </fieldset>
  389. </form>
  390. </template>
  391. </footer>
  392. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  393. <script>
  394. function loadThemeForm(templateName) {
  395. const themeSelectorTemplate = document.querySelector(templateName)
  396. const form = themeSelectorTemplate.content.firstElementChild
  397. themeSelectorTemplate.replaceWith(form)
  398. form.addEventListener('change', (e) => {
  399. const chosenColorScheme = e.target.value
  400. localStorage.setItem('theme', chosenColorScheme)
  401. toggleTheme(chosenColorScheme)
  402. })
  403. const selectedTheme = localStorage.getItem('theme')
  404. if (selectedTheme && selectedTheme !== 'undefined') {
  405. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  406. }
  407. }
  408. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  409. window.addEventListener('load', () => {
  410. let hasDarkRules = false
  411. for (const styleSheet of Array.from(document.styleSheets)) {
  412. let mediaRules = []
  413. for (const cssRule of styleSheet.cssRules) {
  414. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  415. continue
  416. }
  417. // WARNING: Safari does not have/supports `conditionText`.
  418. if (cssRule.conditionText) {
  419. if (cssRule.conditionText !== prefersColorSchemeDark) {
  420. continue
  421. }
  422. } else {
  423. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  424. continue
  425. }
  426. }
  427. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  428. }
  429. // WARNING: do not try to insert a Rule to a styleSheet you are
  430. // currently iterating on, otherwise the browser will be stuck
  431. // in a infinite loop…
  432. for (const mediaRule of mediaRules) {
  433. styleSheet.insertRule(mediaRule.cssText)
  434. hasDarkRules = true
  435. }
  436. }
  437. if (hasDarkRules) {
  438. loadThemeForm('#theme-selector')
  439. }
  440. })
  441. </script>
  442. </body>
  443. </html>