|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464 |
- <!doctype html><!-- This is a valid HTML5 document. -->
- <!-- Screen readers, SEO, extensions and so on. -->
- <html lang="fr">
- <!-- Has to be within the first 1024 bytes, hence before the `title` element
- See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
- <meta charset="utf-8">
- <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
- <!-- The viewport meta is quite crowded and we are responsible for that.
- See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <!-- Required to make a valid HTML5 document. -->
- <title>Writing for Engineers (archive) — David Larlet</title>
- <meta name="description" content="Publication mise en cache pour en conserver une trace.">
- <!-- That good ol' feed, subscribe :). -->
- <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
- <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
- <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
- <link rel="manifest" href="/static/david/icons2/site.webmanifest">
- <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
- <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
- <meta name="msapplication-TileColor" content="#f7f7f7">
- <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
- <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
- <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
- <!-- Documented, feel free to shoot an email. -->
- <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
- <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
- <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>
- <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>
- <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>
- <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
- <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
- <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
- <script>
- function toggleTheme(themeName) {
- document.documentElement.classList.toggle(
- 'forced-dark',
- themeName === 'dark'
- )
- document.documentElement.classList.toggle(
- 'forced-light',
- themeName === 'light'
- )
- }
- const selectedTheme = localStorage.getItem('theme')
- if (selectedTheme !== 'undefined') {
- toggleTheme(selectedTheme)
- }
- </script>
-
- <meta name="robots" content="noindex, nofollow">
- <meta content="origin-when-cross-origin" name="referrer">
- <!-- Canonical URL for SEO purposes -->
- <link rel="canonical" href="https://www.heinrichhartmann.com/posts/writing/">
-
- <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
-
-
- <article>
- <header>
- <h1>Writing for Engineers</h1>
- </header>
- <nav>
- <p class="center">
- <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
- <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
- </svg> Accueil</a> •
- <a href="https://www.heinrichhartmann.com/posts/writing/" title="Lien vers le contenu original">Source originale</a>
- </p>
- </nav>
- <hr>
- <p>Writing is key to have impact in large organizations. As a senior software
- engineer chances are that writing is the most important skill you have to
- acquire in order to increase your scope beyond the team and advance your career.</p>
- <p>Writing is hard. Many Software engineers struggle with writing. Personally I
- never had an intrinsic interest in literature, so writing did not naturally come
- to me either. I have spent days and weeks agonizing and procrastinating around
- larger writing tasks. And to this day, having pressure to produce high-quality
- documents on a deadline gives me nightmares.</p>
- <p>This article contains some learnings that have helped me (and others) to become
- better and more productive as a writer over the past 15 years. I am sharing them
- in the hope, that you find them useful. However, don’t think that I am always
- able to follow this advice myself 😅. I still have a lot to learn.</p>
-
- <h2 id="before-you-begin">Before you begin</h2>
- <h3 id="have-something-to-say">Have something to say</h3>
- <p>This statement seems obvious, but turns out to be a problem surprisingly often.
- <strong>The goal of writing is to deliver a message to an audience in an effective
- way.</strong> If you don’t have a good message, you will struggle to write something
- useful.</p>
- <blockquote>
- <p>During my time at University, I was tasked multiple times with writing long
- reporting documents for EU projects. This was terrible experience, because the
- main goal was to look good and fill pages. Generally, I had a good idea of the
- domain, but did not have a clear message or sufficient depth. For me, this made
- it incredibly hard to write anything. Thinking about this now, I think
- <a href="https://en.wikipedia.org/wiki/GPT-3">GPT-3</a> would be amazing at writing EU
- Project reports.</p>
- </blockquote>
- <blockquote>
- <p>One of my most successful <a href="https://www.circonus.com/2018/08/latency-slos-done-right/">blog
- posts</a> (that led to a
- <a href="https://archive.fosdem.org/2019/schedule/event/latency_slos_done_right/">series</a>
- <a href="https://www.usenix.org/conference/srecon19asia/presentation/schlossnagle-latency">of</a>
- <a href="https://www.usenix.org/conference/srecon19americas/presentation/moyer">talks</a>
- on the topic) was written over the course of 3 hours in a hotel room, and
- published the next day. It was a followup to a discussion that I had on that
- same day with a few Google SREs at SRECon EMEA 2018. I knew what I wanted to
- say. I knew who I wanted to reach. That made writing the post super easy.</p>
- </blockquote>
- <p>If you don’t have a clear message in your head, your are not ready to start
- writing a narrative yet. You have other things to do first: Research the topic
- and find your message. It’s important to realize that these are different tasks.
- They may involve writing in the form of note-taking or journaling, but this is
- not material you would directly use in the final document.</p>
- <h3 id="dont-confuse-writing-and-learning">Don’t confuse writing and learning</h3>
- <p>The realization that you don’t have the complete message in your head, will
- often only become apparent while writing. This surfaces as inability to find a
- good punch-line or to express yourself clearly. In fact, writing is a great test
- to see if you have a good understanding of a topic, and have a firm grasp on the
- vocabulary of the domain. There is a saying that:</p>
- <blockquote>
- <p>Writing is god’s way to show you how imperfect your thoughts are.</p>
- </blockquote>
- <p>And similarly:</p>
- <blockquote>
- <p>An argument is only half as good once you are uttering it.</p>
- </blockquote>
- <p>If you run into this problem, it means that you are learning things. Writing is
- generally a great way to learn, but one has to realize that you are doing it.
- Learning is a slow process and requires patience. It is not helped much by
- agonizing in front of a screen, trying to squeeze out another sentence. Doing
- more research on the topic by reading a book, blog or paper and taking notes may
- be a better time investment.</p>
- <h3 id="know-your-audience">Know your audience</h3>
- <p>The better you know and understand your audience the easier it will be to reach
- the goal of delivering a message to them. The intended audience of the text
- influences the terminology you can use, the context you can assume and the
- writing style (casual/formal).</p>
- <p>When writing an article, I generally <strong>visualize a concrete person as
- representative of the audience</strong>, that I am directing this text towards. This
- will usually also be the first person, that will get a draft to read. It’s
- generally much easier to tell a story “to someone” as opposed to talking into
- the void.</p>
- <blockquote>
- <p>Most of my <a href="/#math">#math</a> posts on this blog are actually lacking a good
- audience. They are only readable for people who are proficient in abstract
- mathematics, but they are only interesting for people working in software. The
- intersection of both groups is tiny. Hence I don’t expect a lot of resonance or
- impact with those. They are documenting things that I wanted to learn myself.</p>
- </blockquote>
- <h3 id="respect-your-state-of-mind">Respect your state-of-mind</h3>
- <p>Writing requires intense focus over long periods of time. Ideally you want to
- get into a flow state where you are zoned in and working on the text for hours
- on-end. This is by far the most efficient way to write a narrative or a
- blog-post – at least for me.</p>
- <p><strong>Prepare for a writing task, like you would for a hike. You are in for a grind.</strong>
- Find a comfortable space to sit. Grab a beverage/snack of your preference. Most
- importantly make sure that you are rested and able to focus. Don’t start a
- writing task when you are already tired. There is no way you will get anything
- useful written.</p>
- <p>Also, avoid distractions as much as you can. Most importantly: Mute the Chat.
- Block at least 3h in your calendar for a writing session. If I am writing longer
- documents for work, I will try to block a full afternoon. For me, the most
- effective writing sessions happen on weekends or vacations where I don’t have
- any meetings at all.</p>
- <h3 id="work-the-iron-while-its-hot">Work the iron while it’s hot</h3>
- <p>Just like programming, writing requires a lot of context that you hold in your
- short term memory. You need to recall a lot of details about the topic you are
- writing about, as well as your punch-line and the current state of the document.
- All this state takes time to load into memory, and is easily lost by
- distractions or context switching.</p>
- <p>If you have loaded a lot of useful context in your brain at any given point in
- time, use this context to do something useful with it. Try to milk that moment,
- and make space when you realize you are in a position to write effectively on
- your topic.</p>
- <h3 id="heat-the-iron-before-working-it">Heat the iron before working it</h3>
- <p>Conversely, if you don’t have the context in your brain right now, you have
- two options (1) don’t write or (2) start loading the context into your brain.</p>
- <p>Missing context is a frequent source of agony and procrastination. Don’t expect
- to take a TODO like “Write conference talk” from your list, and start working on
- it right way. You need to invest time into loading context before you have a
- chance to write even a single sentence.</p>
- <p>Good ways to load some context are:</p>
- <ol>
- <li>Go through your notes that you took about the topic.</li>
- <li>Discuss the topic with a coworker / random stranger / family member.</li>
- <li>Read some books / blogs / papers on the topic.</li>
- </ol>
- <p>Bad ways to load the context are surfing HackerNews or YouTube.</p>
- <h2 id="while-writing">While writing</h2>
- <h3 id="start-at-the-top-not-the-beginning">Start at the Top not the Beginning</h3>
- <p>This is by far the most common and damaging mistake I see people make. They
- start with writing at the beginning of the narrative:</p>
- <blockquote>
- <p>“Once upon a time, in a galaxy far, far away …”</p>
- </blockquote>
- <p>Do you really think that those were the first words that George Lucas brought
- to paper, when writing the original Star Wars trilogy?</p>
- <p>For documents that are more than a page long you must take a top-down approach
- and start with an <strong>outline</strong>. An outline is a list of sections together with
- 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
- outline</a> looked something like this:</p>
- <pre tabindex="0"><code># How to Write?
-
- - Audience: Senior+ SWE
- - Goal: Upskill and unblock writing
-
- ## Have something to say
-
- - Goal: Deliver message to audience.
- - Without message writing is agony: Squeezing a water from a stone.
-
- ## Know your audience
-
- ## Work the iron while it's hot
-
- - Be aware of your brain context
- - Start/Stay on task, if you have the right context
- - Load context before you start
-
- ## Separate Editing, Publishing and Writing
-
- - If you are fiddling with git/emacs before starting to write,
- you are doing something wrong.
-
- ...
- </code></pre>
- <p>Note that, the section titles are not just generic scaffolding (e.g.
- “Introduction” / “Body” / “Conclusion”) but already tell the whole story.</p>
- <h3 id="fix-the-story-line-before-fleshing-things-out">Fix the story-line before fleshing things out</h3>
- <p>When building a house, you finish the brick-work before applying the paint. When
- writing, you want to arrive at a good story-line for you document, before you
- start fleshing out and polishing the text. A outline should be the
- first milestone for any larger document you are writing. The outline, should
- convey the main message and provide a clear “red thread” that guides your reader
- through your argument.</p>
- <blockquote>
- <p>When working for <a href="https://www.mckinsey.com/">a consulting firm</a>, I saw my
- senior colleagues spending a lot of time polishing and iterating the structure
- of their slide decks before working on the details. They would print the deck on
- paper, pin the slides to a wall, and keep re-arranging them until they were
- happy with the story-line. The slides would remain on the wall and subject to
- re-arrangement until the deck was finalized.</p>
- </blockquote>
- <p>Fixing the story-line of a document becomes MUCH more expensive once you have
- already fleshed out the paragraphs. In some cases, the best thing you can do
- is to stash away the whole content and go back to an outline before building
- the document up again.</p>
- <h3 id="finish-the-content-before-starting-to-polish">Finish the content before starting to polish</h3>
- <p>A trap I have found myself in way too many times, is to get distracted by
- adjacent tasks that are not needed to produce the narrative. Those tasks
- include:</p>
- <ol>
- <li><strong>Editing</strong>. Fixing spelling, wording or restructuring paragraphs.</li>
- <li><strong>Publishing</strong>. Fiddling with formatting, tuning WordPress, automating your
- git+hugo+heroku deployments.</li>
- <li><strong>Producing Figures</strong>. Sketching figures on paper or browsing the web for
- images that you can use in your presentation.</li>
- </ol>
- <p>Remember: <strong>The first milestone for your document is an outline. Everything that
- is not directly contributing to this goal is a distraction.</strong></p>
- <p>When you are happy with the outline, <strong>the second milestone is a fully fleshed
- out text, where all notes have been converted to paragraphs.</strong> The text should
- cover the intended content but does not need to be polished or well written.</p>
- <p>Once you are at this point, you start worrying about polish: Remove typos,
- improve wording, restructure paragraphs. Also work on figures and publishing can
- be delayed to this point without any problems.</p>
- <h3 id="make-your-text-skimable">Make your text skimable</h3>
- <p>According to <a href="https://www.towermarketing.net/blog/winning-the-fight-against-a-website-users-attention-span/">someone on the
- internet</a>:</p>
- <blockquote>
- <p>Eight seconds. A website user’s attention span lies somewhere around eight seconds.</p>
- </blockquote>
- <p>In these eight seconds, your document has to reveal enough value to the user,
- that he/she is willing to invest more time into actually reading the document.</p>
- <p>If you want your voice to be heard (and also improve the
- <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&pf_rd_p=3676f086-9496-4fd7-8490-77cf7f43f846&pf_rd_r=CGY8ZQY3T7ESSFA4W7RD&pd_rd_r=a1baa3bd-3e30-402a-afe2-9d01086d2fc5&pd_rd_wg=eMOQZ&pd_rd_i=0321965515&psc=1">usability</a>
- of your text) you have to design your document for “skim-ability”. You do this
- by providing anchor points that allow the user to gauge the content without
- actually reading it. You want the outline and key arguments to keep standing out
- in the final version of the document.</p>
- <p>Section Headings and Lists are the key anchor points you want to use to reach
- this goal. Also Figures, Quotes and Highlights are features that stand out and
- grab attention while skimming.</p>
- <blockquote>
- <p>If you are writing a slide-deck, a good approach to ensure skim-ability is the
- use of Action Titles. Action Titles are slide titles that summarize the content
- of a slide in a complete sentence. By doing this you allow the reader to get the
- gist of your document by just reading the titles. This highly annoying guy on
- the internet does a fine job of explaining the concept
- <a href="https://youtu.be/rSk11YqnXoc?t=131">here</a> and ideas around it.</p>
- </blockquote>
- <h3 id="provide-summary-sections">Provide Summary Sections</h3>
- <p>Summary sections are commonly found in document templates and academic writing.
- They are usability features, that provide a high-level overview about the
- content for readers in a hurry. Expect that a large fraction of your audience
- will only read a summary.</p>
- <ul>
- <li>
- <p><strong>Abstract</strong> / <strong>Executive Summary</strong> / <strong>TL;DR</strong>. This section summarizes the
- content of the document, deliberately duplicating information. It’s generally
- the first section of your document, and is intended for reader that has not
- yet read the document. A good abstract describes context, motivates the
- problem summarizes the findings but also leaves some suspension to motivate
- further reading.</p>
- </li>
- <li>
- <p><strong>Conclusion.</strong> This section also summarizes the content and is hence similar
- to an abstract. The difference is that it is the last section in your
- document, focuses on the outcomes and is deliberately referencing back to the
- content. The basic idea is that the reader had read the document before he/she
- arrives there, but this is in practice almost never the case.</p>
- </li>
- </ul>
- <p>It’s important to note that these summary sections are independent of the main
- story line, and are hence an artifact that can be prepared independently.
- Generally, I would recommend to start working on summary sections (like
- Abstract/Conclusion) last, since only then will you be certain what your
- document actually covers.</p>
- <h2 id="the-practice-of-writing">The Practice of Writing</h2>
- <h3 id="keep-writing">Keep Writing</h3>
- <p>The only way to improve your writing is by writing. As with practice in general,
- valuing quantity over quality is generally a good idea. Developing a writing
- muscle, and writing relatively short medium quality documents every week will
- make you a much better writer than crafting highly polished documents once a
- year.</p>
- <blockquote>
- <p>My English teacher in school used to say: “Writing. Only writing brings
- blessing.” I did not think much about this slogan, but it was catchy enough to
- stick with me. Now I consider it a deep truth, and keep it at the top of my
- blog, as a reminder.</p>
- </blockquote>
- <h3 id="leverage-small-writing-tasks-as-exercise">Leverage small writing tasks as exercise</h3>
- <p>Most of the rules that apply to writing long-form documents like Tech
- Narratives, Blog Posts or Papers hold up for writing short documents like
- E-Mails or issue tickets. Use this documents to practice your writing skills, by
- make them well structured, usable and polished.</p>
- <h3 id="get-early-feedback-on-your-outline">Get early feedback on your outline</h3>
- <p>Once you have constructed an outline and polished the story-line you are at a
- great place to get initial feedback on your document. This allows you to uncover
- flaws in your story-line early, and make sure you are on-target with the
- content. Also, reading an outline is a very quick thing to do, so it will not
- take a lot of effort for your reviewer to go through your text.</p>
- <p>This is most important for long documents, that you are producing on request of
- a stakeholder (manager).</p>
- <h3 id="circulate-drafts-of-the-text-to-the-selected-audience">Circulate drafts of the text to the selected audience</h3>
- <p>Once you fleshed out the content, and did a first editing pass removing the most
- glaring grammar and spelling mistakes, you are at a good point to sent the
- document to a few selected members of the target audience.</p>
- <p>This practice has three benefits:</p>
- <ol>
- <li>You will get a pair of fresh eyes on the text that will at the very least
- catch a few grammar quirks that remained in the text.</li>
- <li>You take a break from working on the text yourself, until you received the
- feedback, allowing yourself to take a fresh look at your writing.</li>
- <li>You have an excuse to reach out to old friends that you had neglected for far
- too long.</li>
- </ol>
- <p>Hint: Don’t forget to thank your reviewers in an “Acknowledgements” section.</p>
- <h1 id="acknowledgements">Acknowledgements</h1>
- <p>Thanks to my sister, Johanna Hartmann, and <a href="https://twitter.com/andrewhowdencom">Andrew
- Howden</a> for feedback on earlier versions of
- this document.</p>
- </article>
-
-
- <hr>
-
- <footer>
- <p>
- <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
- <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
- </svg> Accueil</a> •
- <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
- <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
- </svg> Suivre</a> •
- <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
- <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
- </svg> Pro</a> •
- <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
- <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
- </svg> Email</a> •
- <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
- <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
- </svg> Légal</abbr>
- </p>
- <template id="theme-selector">
- <form>
- <fieldset>
- <legend><svg class="icon icon-brightness-contrast">
- <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
- </svg> Thème</legend>
- <label>
- <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
- </label>
- <label>
- <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
- </label>
- <label>
- <input type="radio" value="light" name="chosen-color-scheme"> Clair
- </label>
- </fieldset>
- </form>
- </template>
- </footer>
- <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
- <script>
- function loadThemeForm(templateName) {
- const themeSelectorTemplate = document.querySelector(templateName)
- const form = themeSelectorTemplate.content.firstElementChild
- themeSelectorTemplate.replaceWith(form)
-
- form.addEventListener('change', (e) => {
- const chosenColorScheme = e.target.value
- localStorage.setItem('theme', chosenColorScheme)
- toggleTheme(chosenColorScheme)
- })
-
- const selectedTheme = localStorage.getItem('theme')
- if (selectedTheme && selectedTheme !== 'undefined') {
- form.querySelector(`[value="${selectedTheme}"]`).checked = true
- }
- }
-
- const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
- window.addEventListener('load', () => {
- let hasDarkRules = false
- for (const styleSheet of Array.from(document.styleSheets)) {
- let mediaRules = []
- for (const cssRule of styleSheet.cssRules) {
- if (cssRule.type !== CSSRule.MEDIA_RULE) {
- continue
- }
- // WARNING: Safari does not have/supports `conditionText`.
- if (cssRule.conditionText) {
- if (cssRule.conditionText !== prefersColorSchemeDark) {
- continue
- }
- } else {
- if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
- continue
- }
- }
- mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
- }
-
- // WARNING: do not try to insert a Rule to a styleSheet you are
- // currently iterating on, otherwise the browser will be stuck
- // in a infinite loop…
- for (const mediaRule of mediaRules) {
- styleSheet.insertRule(mediaRule.cssText)
- hasDarkRules = true
- }
- }
- if (hasDarkRules) {
- loadThemeForm('#theme-selector')
- }
- })
- </script>
- </body>
- </html>
|