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

1 anno fa
1 anno fa
1 anno fa
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  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>Some thoughts on how to make a book, three months after I made one (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://www.baldurbjarnason.com/2023/how-i-made-my-book/">
  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>Some thoughts on how to make a book, three months after I made one</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://www.baldurbjarnason.com/2023/how-i-made-my-book/" title="Lien vers le contenu original">Source originale</a>
  70. </p>
  71. </nav>
  72. <hr>
  73. <p>Writing a book is both very complicated and extremely simple.</p>
  74. <p>It’s simple: you only need to have something to say, and then you say it until you’ve made your point.</p>
  75. <p>How you do any of those things is fractally complicated—a divergent problem, in <a href="https://en.wikipedia.org/wiki/A_Guide_for_the_Perplexed#Two_types_of_problems">E. F. Schumacher’s framing</a>, that gets more and more complicated the closer you look. Even finding out what you have to say can be a bit involved.</p>
  76. <p>Thankfully, there is an endless selection of books to help you with the task.</p>
  77. <p>Some of my favourites:</p>
  78. <p>There are a lot of them out there. Most of them are good, which is unsurprising since they are written by accomplished writers.</p>
  79. <p>I’m not in that category, so I’m not the person you should look to for writing advice, but I know a thing or two about what happens <em>after</em> you’ve written that book. Now, if you are planning to get a publisher for it, their job is to hire people who know what they’re doing to do this for you.</p>
  80. <p>But what if you’re self-publishing? What if you’re self-publishing and selling directly from your own website? What if you are writing on a topic like software development or business-oriented analysis that trade publishing does not care about?</p>
  81. <p>What happens when you have to do it yourself?</p>
  82. <p>That’s something I can help you with, having both worked in publishing for several years and having put together <a href="https://www.vonbedon.is/">several</a> <a href="http://thisisnotabook.baldurbjarnason.com/">book-like</a> <a href="https://softwarecrisis.baldurbjarnason.com/">objects</a> in collaboration with others.</p>
  83. <p>What follows are some thoughts on how I made my book, <a href="https://softwarecrisis.baldurbjarnason.com/">Out of the Software Crisis</a>, collected mostly for my own records, but hopefully useful to the rest of you.</p>
  84. <h2 id="dont-copy-what-the-trade-publishing-industry-says-it-does">Don’t copy what the trade publishing industry says it does</h2>
  85. <p>Don’t trust what people in publishing say about the publishing process.</p>
  86. <p>They aren’t lying, per se, but a lot of what they say is based on how publishing works in its less dysfunctional pockets, which are getting rarer and rarer. Publishing isn’t what it used to be.</p>
  87. <p>‘Quality’, for lack of a better word, has deteriorated for large parts of the trade publishing industry. Print and typesetting quality has declined for many titles that have been switched to Print-On-Demand. Publishers keep cutting back on their investment in editing. They are exceptionally bad at marketing and actually <em>selling</em> their wares.</p>
  88. <p>Many commentators who are fond of talking about how many services you are missing out on if you self-publish are just plain unaware of how little most modern trade publishing cares about your average first-time author, or how much the industry’s overall quality control has declined over the past couple of decades.</p>
  89. <p>Publishing, as a whole, also doesn’t understand economics.</p>
  90. <p>This is a near-universal constant in English-language trade publishing. I’ve long since lost count of how many times an editor or manager at a publisher bragged to me (literally <em>bragged</em>) about not understanding mathematics or having never read an ebook. And you can tell from the outcomes. Publishers regularly overspend on titles that never had any hope of recouping the investment and underspend on titles that clearly could have done much better with minimal investment. They’re shit with money and survive because the few blockbusters they pick by accident are <em>exceptionally</em> profitable. That renders quite a bit of their advice unusable to anybody who’s averse to losing money.</p>
  91. <p>There are publishers out there who are good at what they do. And there are teams within bad publishers who are also good at what they do. If you ever get a chance to work with one of them, grab it, but be aware that they are the exception, not the rule. They will also constantly be struggling against upper-level mismanagement and fighting to protect you from the background radiation of plutonium-level executive assholery—of which publishing has in abundance. Sometimes they succeed. Sometimes they don’t.</p>
  92. <p>What people pushing publishing services say publishers do generally isn’t what trade publishers actually do. Not anymore.</p>
  93. <h2 id="keep-your-budget-proportional-to-your-expected-audience-and-return">Keep your budget proportional to your expected audience and return</h2>
  94. <p>If your ebook is an extended white paper analysing the specific business return of a narrow piece of technology, you shouldn’t go off and spend $2000 on structural and line editing. And you definitely should not go and commission a cover design for $500.</p>
  95. <p>You need to be aware of what your target audience considers to be ‘quality’. Trade publishers never (or rarely) do this assessment, but it can shave thousands off your budget if you do it thoughtfully.</p>
  96. <p>For example, software developers might forgive awkward grammar and weird sentence structure but will get ticked off by a spelling error or technical mistake.</p>
  97. <p>Business readers have a high tolerance for <em>exceedingly</em> bad writing—prose so awful that it boggles the mind—as long as the text has the correct tone and the numbers and analysis add up.</p>
  98. <p>These are generalisations. You should know your audience well enough to put together a ‘persona’ of sorts—ideally, one backed by a bit of research—that can help guide you through the book production process.</p>
  99. <p>Since <a href="https://softwarecrisis.baldurbjarnason.com/"><em>Out of the Software Crisis</em></a> is targeted at software developers, I decided not to invest in a freelance editor but instead focus on getting as many expert advance readers as I could.</p>
  100. <p>In other words, I decided to leverage the <em>wisdom of crowds</em>.</p>
  101. <h2 id="_the-wisdom-of-crowds_-actually-works"><em>The Wisdom of Crowds</em> actually works</h2>
  102. <p>For a short period of time during Web 2.0, <em>crowdsourcing</em> or <a href="https://en.wikipedia.org/wiki/The_Wisdom_of_Crowds"><em>The Wisdom of Crowds</em></a> was supposed to be the next big thing. Poorly implemented and misunderstood, the tech industry did its usual thing of poisoning the well on a fundamentally sound idea for at least a couple of decades. (See also: the use of game design ideas in UX, Merkle trees, textures inspired by real-world objects in UI design, peer-to-peer networking, and, well, ebooks.)</p>
  103. <p>This fad resulted in overhyped mistakes like Iceland’s aborted and unsuccessful “crowdsourced” constitution.</p>
  104. <p>What the tech industry did, in its usual form, is completely disregard facts, science, and existing research while shipping something based on a complete misreading of the core idea.</p>
  105. <p>In the case of <em>The Wisdom of Crowds</em>, the book has a simple thesis backed by quite a bit of research.</p>
  106. <p>If you have a group of people with:</p>
  107. <ol>
  108. <li>A diversity of opinion. (But they don’t have to be qualified or be experts.)</li>
  109. <li>Who can give you that opinion or feedback independently from each other. (That is, they don’t see <em>anything</em> from each other and <strong><em>absolutely</em></strong> should not communicate with each other.)</li>
  110. <li>They have diverse specialities.</li>
  111. <li>You can collect their feedback and opinions into a collective decision.</li>
  112. <li>You trust the group overall.</li>
  113. </ol>
  114. <p>Then the quality of the collective decision has a decent chance of rivalling that of an expert.</p>
  115. <p>There are plenty of situations where this dynamic breaks down, but if you’re a self-publisher it has a corollary that is particularly useful:</p>
  116. <p>A dozen readers who:</p>
  117. <ol>
  118. <li>You trust.</li>
  119. <li>Are willing to invest the time and energy to give detailed feedback on your book.</li>
  120. <li>Have diverse experiences and specialities.</li>
  121. <li>And won’t talk to each other about the book.</li>
  122. </ol>
  123. <p>Will collectively give you surprisingly good editorial feedback.</p>
  124. <p>Even a group of beta readers as small as five or six will give you insight into what works and doesn’t. Even disregarding the “crowd” aspect, the old free software adage <a href="https://en.wikipedia.org/wiki/Linus%27s_law">“given enough eyeballs, all bugs are shallow”</a> probably applies <em>more</em> to prose than to software, because you don’t need to know anything about coding to spot a spelling error or indecipherable sentence.</p>
  125. <p>Get as many advance readers as you can.</p>
  126. <h2 id="self-editing-can-get-you-part-of-the-rest-of-the-way">Self-editing can get you part of the rest of the way</h2>
  127. <p>It isn’t perfect and isn’t as good as a professional editor, but it can go a long way. Books like <a href="https://www.goodreads.com/book/show/580473.Line_by_Line">Line by Line</a> and <a href="https://www.amazon.com/Artful-Edit-Practice-Editing-Yourself/dp/0393332179">The Artful Edit</a> will help you make the most of your resources by helping you edit yourself.</p>
  128. <p>Sleeping on it—that is, letting your mind lose some of its familiarity with the text through the passage of time—also helps. Letting a manuscript sit for a few days before rereading it will help you see it as if it had been written by somebody else.</p>
  129. <p>Tools like <a href="https://grammarly.com/">Grammarly</a> and <a href="https://prowritingaid.com/">ProWritingAid</a> help too. They aren’t perfect. Grammarly will occasionally give advice that is flat-out incorrect, so accepting all of its suggestions is likely to <em>introduce</em> new errors in your text. This is not ideal but is a common flaw in software that uses AI and machine learning to the extent that Grammarly does. I haven’t tested ProWritingAid myself, so I don’t know if it suffers from this issue as well.</p>
  130. <p>If you don’t know Indesign, don’t use Indesign. If you don’t know CSS, don’t use a CSS-based tool to generate the CSS. If you don’t know LateX, don’t use LateX. If you don’t know Markdown, don’t use Pandoc.</p>
  131. <p>If you don’t know or have a tool or app that generates readable PDFs or EPUBs, you should probably buy or rent one. I hear <a href="https://vellum.pub/">Vellum</a> works well for Mac users, but it’s too expensive for one-time use. Some swear by <a href="https://www.atticus.io/">Atticus</a>, which costs less. They both would have been ‘good enough’ for my purposes, but since I’m comfortable with Markdown, HTML, and CSS, using <a href="https://pandoc.org/">Pandoc</a> made the most sense.</p>
  132. <p>If you’re comfortable with Markdown then Pandoc is <em>amazing</em>. It integrates out of the box with both <a href="https://weasyprint.org/">Weasyprint</a> and <a href="https://pagedjs.org/">paged.js</a>. Either of them is a decent option for generating PDFs. Paged.js uses headless Chrome, which gives it access to a broader spectrum of CSS features and makes it a little bit flakier. For example, I can’t get headless Chrome to hyphenate text on the Windows Subsystem for Linux.</p>
  133. <p>I’ve put together a <a href="https://gist.github.com/baldurbjarnason/31bcd04cc898f42754ea6873aa3a9374">gist with the CSS and script I used to build the book</a>. It probably won’t work for you out of the box, but it should serve as a starting point.</p>
  134. <h2 id="book-covers-are-both-simple-and-tricky">Book covers are both simple and tricky</h2>
  135. <p><em>Books covers are simple:</em></p>
  136. <p>The only purpose of a book’s cover is to sell the book. The less important the cover is to the book purchase decision for your audience, the more generic you can go. The cover I made for <a href="https://softwarecrisis.baldurbjarnason.com/">Out of the Software Crisis</a> is neither great nor bad. It does the job. I doubt that one made with an online tool would have been worse. But I’m also sceptical that a professionally designed one would have sold more copies.</p>
  137. <p>People often forget that modern covers absolutely need to work at thumbnail sizes. That’s how most people will experience it. Subtlety will be lost in a grid of stamp-sized covers on an iPad or your phone.</p>
  138. <p><em>Book covers are tricky:</em></p>
  139. <p>The cover sets the tone for the book, frames it, and defines its boundaries. It needs to tell the reader where the book belongs in the broad genre picture of publishing. A bad book cover will set your readers up to be more critical of it than otherwise.</p>
  140. <p>It is the book’s representative. How much work to invest in a cover is always going to be a judgement call on your part.</p>
  141. <h2 id="spend-a-disproportionate-amount-of-time-on-the-sales-page">Spend a disproportionate amount of time on the sales page</h2>
  142. <p><a href="https://softwarecrisis.baldurbjarnason.com/">The sales page for my book</a> was read, analysed, edited, and torn apart by many more people before publishing than any passage of a similar length in the book itself.</p>
  143. <p>The 30x500 Slack community was invaluable here, but I also reached out to too many friends and relatives to count. That page is the most important in the book, despite not being in the book. Reading a sales page is less of an investment of time than an entire book, so getting people to read through and criticise it was much easier than for the book proper.</p>
  144. <p>If you know people who have experience with writing sales copy, get their feedback.</p>
  145. <p>You want a sales page that will make it crystal clear to the reader what the book is, what value it provides, and whether it will be useful to them. That sells.</p>
  146. <h2 id="do-set-up-a-mailing-list-and-landing-page-for-the-book-launch">Do set up a mailing list and landing page for the book launch</h2>
  147. <p>ConvertKit’s tools worked extremely well. You might find something cheaper, but it probably won’t be any better.</p>
  148. <h2 id="use-a-sales-platform-that-takes-care-of-sales-tax-and-vat-for-you">Use a sales platform that takes care of sales tax and VAT for you</h2>
  149. <p>I tried three different platforms. They all looked good.</p>
  150. <ul>
  151. <li><a href="https://payhip.com/">Payhip</a>. Nice UI. Nice checkout. A lot of features. The downside is that you need either a Stripe account (not available in Iceland) or PayPal (quite shitty in Iceland). An excellent option if you’re US-based.</li>
  152. <li><a href="https://fastspring.com/">Fastspring</a>. Been around forever. Works quite well, but the checkout pages look dated, which is something you can fix.</li>
  153. <li><a href="https://www.lemonsqueezy.com/">Lemon Squeezy</a>. The new kid on the block. Has a really nice design. Some mailing list features are integrated. This is the service I ended up with, mainly because I like its look and feel.</li>
  154. </ul>
  155. <p>I tried to get up and running on Paddle but couldn’t for the life of me get a domain approved.</p>
  156. <h2 id="avoid-selling-on-amazon-if-you-can">Avoid selling on Amazon if you can</h2>
  157. <p>If you’re bringing the audience to the table, selling on Amazon is often a waste of time and money. If you’re selling direct, a service like Lemon Squeezy will charge you 5% + 50¢. Amazon will charge you <strong><em>65%</em></strong>, unless you massively underprice yourself and keep the book price under $10, in which case it’ll still charge you 30%.</p>
  158. <p>There are circumstances where being on Amazon will bring you an audience that makes that discrepancy worthwhile. But, if the audience is discovering the book through your efforts first, not selling via Amazon can triple your revenue.</p>
  159. <p>I did end up selling the book in Amazon’s Kindle store, but only after already establishing direct sales as the primary way for buying the book. It’s only sold a handful of copies so far. I’m not convinced selling there was the right decision.</p>
  160. <h2 id="leverage-the-expectations-of-your-audience-wherever-you-can">Leverage the expectations of your audience wherever you can.</h2>
  161. <p>For example, software developers are more comfortable with the notion of updates and ‘bug’ fixes than many other professions. They are largely appreciative of the “get it out early, fix in updates” approach to both software and books.</p>
  162. <p>They might <em>prefer</em> that everything is perfect out of the box, but updates and corrections are not a dealbreaker.</p>
  163. <h2 id="try-not-to-freak-out">Try not to freak out</h2>
  164. <p>This is a stressful process. There’s a lot that can go wrong. But it’s also quite rewarding.</p>
  165. </article>
  166. <hr>
  167. <footer>
  168. <p>
  169. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  170. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  171. </svg> Accueil</a> •
  172. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  173. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  174. </svg> Suivre</a> •
  175. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  176. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  177. </svg> Pro</a> •
  178. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  179. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  180. </svg> Email</a> •
  181. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  182. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  183. </svg> Légal</abbr>
  184. </p>
  185. <template id="theme-selector">
  186. <form>
  187. <fieldset>
  188. <legend><svg class="icon icon-brightness-contrast">
  189. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  190. </svg> Thème</legend>
  191. <label>
  192. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  193. </label>
  194. <label>
  195. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  196. </label>
  197. <label>
  198. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  199. </label>
  200. </fieldset>
  201. </form>
  202. </template>
  203. </footer>
  204. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  205. <script>
  206. function loadThemeForm(templateName) {
  207. const themeSelectorTemplate = document.querySelector(templateName)
  208. const form = themeSelectorTemplate.content.firstElementChild
  209. themeSelectorTemplate.replaceWith(form)
  210. form.addEventListener('change', (e) => {
  211. const chosenColorScheme = e.target.value
  212. localStorage.setItem('theme', chosenColorScheme)
  213. toggleTheme(chosenColorScheme)
  214. })
  215. const selectedTheme = localStorage.getItem('theme')
  216. if (selectedTheme && selectedTheme !== 'undefined') {
  217. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  218. }
  219. }
  220. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  221. window.addEventListener('load', () => {
  222. let hasDarkRules = false
  223. for (const styleSheet of Array.from(document.styleSheets)) {
  224. let mediaRules = []
  225. for (const cssRule of styleSheet.cssRules) {
  226. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  227. continue
  228. }
  229. // WARNING: Safari does not have/supports `conditionText`.
  230. if (cssRule.conditionText) {
  231. if (cssRule.conditionText !== prefersColorSchemeDark) {
  232. continue
  233. }
  234. } else {
  235. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  236. continue
  237. }
  238. }
  239. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  240. }
  241. // WARNING: do not try to insert a Rule to a styleSheet you are
  242. // currently iterating on, otherwise the browser will be stuck
  243. // in a infinite loop…
  244. for (const mediaRule of mediaRules) {
  245. styleSheet.insertRule(mediaRule.cssText)
  246. hasDarkRules = true
  247. }
  248. }
  249. if (hasDarkRules) {
  250. loadThemeForm('#theme-selector')
  251. }
  252. })
  253. </script>
  254. </body>
  255. </html>