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

3 년 전
3 년 전
3 년 전
3 년 전
3 년 전
3 년 전
3 년 전
3 년 전
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966
  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>Copying is the way design works (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://matthewstrom.com/writing/copying/">
  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>Copying is the way design works</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://matthewstrom.com/writing/copying/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <div class="l--grid copying">
  71. <div class="l--grid-narrow l--mar-top-s post">
  72. <div class="c--gray"><p>
  73. This is a very short book about copying. Its contents, unless
  74. otherwise noted, are licensed under
  75. </p><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">CC-BY SA 4.0</a><p>
  76. (more on that in a bit). You can download, copy, remix, excerpt,
  77. change, and repost it however you see fit.
  78. </p></div>
  79. <p class="copying--chapter">I</p>
  80. <p>
  81. <strong class="t--transform-uppercase">Charles Eames</strong> said
  82. it best: “We don’t do ‘art’ — we solve problems.”
  83. </p>
  84. <p>
  85. To buy furniture in 1950, you had to choose between affordable and
  86. enduring, between rugged and fashionable. Charles and Ray designed a
  87. chair that was all the above and sold it for $20.95.
  88. They called it the LCW.
  89. </p>
  90. <p>
  91. The LCW embodies the Eames’ obsession with simplicity in material
  92. and method. “We want to make the best for the most for the least,”
  93. they said.
  94. The design was revolutionary: in 1999, <em>Time</em> magazine called
  95. the LCW “the best design of the century.”
  96. Today, you can buy a brand new LCW from Herman Miller (the
  97. officially licensed manufacturer of Eames products) for $1,195.
  98. </p>
  99. <p>
  100. Or, you can buy a chair called the “Fathom” from a company called
  101. Modway for $145.
  102. </p>
  103. <p>Functionally and aesthetically, the chairs are identical.</p>
  104. </div>
  105. <div class="l--grid-wide">
  106. <figure class="l--flex">
  107. <div class="l--flex-half">
  108. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/0b07ec2420d962333516565bbf3c484cc8b2ca4f/e52a1/images/copying-1.jpg" alt="Eames Molded Plywood Lounge Chair">
  109. <figcaption>
  110. Eames Molded Plywood Lounge Chair<br>© Herman Miller
  111. </figcaption>
  112. </div>
  113. <div class="l--flex-half">
  114. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/e244c88f486534fd5ef1b92be27de149fb5d95a4/6a616/images/copying-2.jpg" alt="Modway Fathom">
  115. <figcaption>Modway Fathom<br>© Modway</figcaption>
  116. </div>
  117. </figure>
  118. </div>
  119. <div class="l--grid-narrow post">
  120. <p>
  121. There’s an LCW from 1946 in MOMA’s collection. It’s one of the very
  122. first ever made. Most people would call it the original LCW.
  123. </p>
  124. <p>
  125. Charles and Ray Eames sold the manufacturing rights for their
  126. furniture to Herman Miller in 1947. Collectors call the LCWs made in
  127. the ’40s and ’50s “originals.” But in some sense, these — and the
  128. more recently manufactured Herman Miller versions — are copies of
  129. that LCW in the MOMA collection.
  130. </p>
  131. <p>
  132. And then there’s the Modway Fathom. It’s clearly a copy, an
  133. unlicensed one at that. But at $145 (the equivalent of $12.78 in
  134. 1947) it’s more affordable than the LCW was when it was first
  135. manufactured and sold. In spirit, it’s more of an original than any
  136. LCW: the best, for the most, for the least.
  137. </p>
  138. <hr class="copying--divider">
  139. <p>
  140. I’m sharing this story because it demonstrates a surprising fact:
  141. what makes something “original” (the first, the best, the most
  142. famous, the most true) or a “copy” (an identical copy, an
  143. unauthorized replica, an interpretation or a remix) isn’t always
  144. obvious — or important.
  145. </p>
  146. <p>
  147. I’m a designer. As a designer, I feel the need to be original. If
  148. you’re a designer, or even if you’re just interested in design, you
  149. probably feel the need to be original, too. We tend to worship
  150. inventors and originators, designers who were trailblazing and
  151. innovative. And we copy them.
  152. </p>
  153. <p>
  154. This oxymoron of a craft can drive a person crazy. There’s lots of
  155. space between originality and industry, authorship and
  156. acknowledgement, riffing and ripping. I wrote this very short book
  157. to explore that space.
  158. </p>
  159. <p>
  160. Some people have been frustrated by copying, refused to accept it,
  161. and struggled with every ounce of their strength against it. Other
  162. people have used copying to their advantage, whether to improve
  163. themselves, build a community, or subvert authority.
  164. </p>
  165. <p>I’ve only been able to have a career in design because I copied.</p>
  166. <p>
  167. I hope that by the time you’ve finished reading, you’ll see how
  168. important copying is. Right or wrong, virtue or vice, copying is the
  169. way design works.
  170. </p>
  171. <p class="copying--chapter">II</p>
  172. <p>
  173. <strong class="t--transform-uppercase">Steve Jobs copied.</strong>
  174. “Great artists steal,” he said, quoting Pablo Picasso (or was it
  175. Stravinsky? T. S. Eliot?). Jobs and Apple copied many designs in their early days, most
  176. notably from a Xerox research laboratory in Palo Alto. The story
  177. goes like this:
  178. </p>
  179. <p>
  180. In the early 20th century, Xerox was a pioneer of office technology.
  181. By the middle of the century, computers were getting smaller and
  182. more affordable, and Xerox knew they’d have to work hard to keep
  183. their market dominance. In 1970, The Xerox Palo Alto Research Center
  184. — Xerox PARC — was founded to explore the future of the “paperless
  185. office.”
  186. </p>
  187. <p>
  188. Within two years, Xerox PARC had designed a groundbreaking computer
  189. called the Alto. One of its innovations was a graphical user
  190. interface: programs and files were displayed in virtual windows
  191. which users navigated using a mouse. It was an eerily accurate
  192. picture of what personal computers would look like 30 years later.
  193. </p>
  194. <p>
  195. Jef Raskin, leader of the Macintosh project at Apple, had seen
  196. Xerox’s work. He wanted Steve Jobs to see it for himself, and set up
  197. a meeting.
  198. </p>
  199. <p>
  200. “I thought it was the best thing I’d ever seen in my life,” Jobs
  201. said of the Alto’s user interface. “Within ten minutes it was
  202. obvious to me that all computers would work like this some day.”
  203. </p>
  204. <p>
  205. When the Macintosh was released in 1984, it featured a graphical
  206. user interface. Programs and files were displayed in virtual windows
  207. which users navigated using a mouse.
  208. </p>
  209. <p>It was just like the Alto.</p>
  210. </div>
  211. <div class="l--grid-push-right">
  212. <figure class="l--flex">
  213. <div class="l--flex-half">
  214. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/08f14f2c6bb50c5a76d1d2f55afdf8225ea016da/d6ad1/images/copying-3.jpg" alt="Xerox Alto Operating System">
  215. <figcaption>
  216. Xerox Star Operating System<br>© Xerox
  217. </figcaption>
  218. </div>
  219. <div class="l--flex-half">
  220. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/4a9ba3ffa923511892c05b85e016dad99982b3b7/fe2ca/images/copying-4.jpg" alt="Apple Macintosh Operating System">
  221. <figcaption>
  222. Apple Macintosh Operating System<br>© Apple
  223. </figcaption>
  224. </div>
  225. </figure>
  226. </div>
  227. <div class="l--grid-narrow post">
  228. <p>Steve Jobs didn’t like to be copied.</p>
  229. <p>
  230. In 1985, a year after the Macintosh was launched, Apple sued a
  231. company called Digital Research Interactive for copying the
  232. Macintosh’s user interface. Digital Research settled out of court,
  233. and changed the appearance of its icons, windows, and mouse
  234. pointers.
  235. </p>
  236. <p>
  237. In 1990, Apple sued both Microsoft and Hewlett-Packard. The case was
  238. a repeat: Microsoft’s Windows and HP’s NewWave featured designs that
  239. Apple claimed were copies of the Macintosh’s operating system. But
  240. early licensing agreements between Apple and Microsoft made it
  241. unclear if any infringement took place; the case was thrown out.
  242. </p>
  243. <p>
  244. In the middle of Apple’s case against Microsoft, Xerox sued Apple,
  245. hoping to establish its rights as the inventor of the desktop
  246. interface. The court threw out this case, too, and questioned why
  247. Xerox took so long to raise the issue.
  248. Bill Gates later reflected on these cases: “we both had this rich
  249. neighbor named Xerox ... I broke into his house to steal the TV set
  250. and found out that [Jobs] had already stolen it.”
  251. </p>
  252. <p>
  253. The rampant copying fueling the explosive growth of consumer
  254. computers meant that by 1990, the desktop user interface was
  255. ubiquitous; it was impossible to determine who originated any part
  256. of it, or who copied who. The quest to stake their claim nearly
  257. consumed Apple. But when they emerged, they had learned a thing or
  258. two. Today, Apple holds more than 2,300 design patents.
  259. </p>
  260. </div>
  261. <div class="l--grid-wide">
  262. <figure>
  263. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/c6e3a601fe1273b3e15343f0d9bf3e0505307772/032f8/images/copying-5.jpg" alt="Apple's design patent for a device with rounded corners">
  264. <figcaption class="t--align-center">
  265. Apple's design patent for a device with rounded corners
  266. </figcaption>
  267. </figure>
  268. </div>
  269. <div class="l--grid-narrow post">
  270. <p>
  271. This story ends in 2011, with Apple suing Samsung for copying the
  272. design of its software and hardware products. One of the most
  273. remarkable claims: Samsung broke the law when it sold “a rectangular
  274. product with four evenly rounded corners.”
  275. </p>
  276. <p>
  277. The court rejected Apple’s claim to own rounded rectangles. But it
  278. upheld the other claims, fining Samsung a blistering $539 million
  279. for patent violations.
  280. </p>
  281. <p>
  282. Designers copy. We steal like great artists. But when we see a copy
  283. of our work, we’re livid. Jobs, on Google’s Android: “I will spend
  284. my last dying breath if I need to, and I will spend every penny of
  285. Apple’s $40 billion in the bank, to right this wrong. I’m going to
  286. destroy Android, because it’s a stolen product.”
  287. </p>
  288. <p>
  289. Steve Jobs was unmatched in his visionary dedication to innovation.
  290. But he never came to terms with the inevitability of copying.
  291. </p>
  292. <p class="copying--chapter">III</p>
  293. <p>
  294. <strong class="t--transform-uppercase">John Carmack had </strong>a
  295. different relationship with copying. For him, copying was a way to
  296. learn, a challenge to overcome, and a source of new ideas.
  297. </p>
  298. <p>
  299. Carmack was — still is — a brilliant coder. He’s best known for
  300. programming the ultraviolent and action-packed first-person shooters
  301. <em>Doom</em> and <em>Quake</em>. Those games pushed the limits of
  302. consumer computers and defined a genre. But his first real
  303. breakthrough game was simpler, cuter, more whimsical. It was called
  304. <em>Commander Keen</em>.
  305. </p>
  306. <p>
  307. Growing up in the early ’90s, I loved <em>Commander Keen</em>. It’s
  308. a goofy adventure game; you guide an eight-year-old boy wearing a
  309. football helmet and red Converses through alien planets, collecting
  310. candy bars and zapping monsters with a ray gun.
  311. </p>
  312. <p>
  313. <em>Keen</em> began life as a copy of another of my favorite games:
  314. <em>Super Mario Bros. 3</em>.
  315. </p>
  316. <p>
  317. Before <em>Keen</em>, Carmack was working for a subscription
  318. software company called Softdisk. Carmack and the other programmers
  319. at Softdisk churned out these games at a prodigious rate: today,
  320. blockbuster games can take more than five years to create;
  321. Softdisk produced a brand-new full-length game every single month.
  322. </p>
  323. <p>
  324. In September 1990, Carmack decided that for his next game, he’d try
  325. to tackle a new and daunting challenge: scrolling. At the time, only
  326. consoles like the Nintendo had enough computing power to smoothly
  327. scroll scenery, characters, and enemies. The PCs were stuck to
  328. simple one-screen-at-a-time games. But if Carmack was going to sell
  329. millions of games like Nintendo had with <em>Super Mario Bros.</em>,
  330. he needed to figure out how to recreate the effect.
  331. </p>
  332. <p>
  333. So, on September 19, 1990, Carmack and another developer named Tom
  334. Hall decided to reverse-engineer the first level of
  335. <em> Super Mario Bros. 3</em>. Working through the night, Carmack
  336. coaxed his PC into scrolling and animating the world of
  337. <em>Super Mario</em>; Hall jumped back and forth between a TV screen
  338. and his computer, playing the Nintendo version, pausing to copy the
  339. images pixel-for-pixel.
  340. </p>
  341. </div>
  342. <div class="l--grid-push-right">
  343. <figure class="l--flex">
  344. <div class="l--flex-half">
  345. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/c96ef863000c95ef229c6623f607f443a0188b7e/5e461/images/copying-6.jpg" alt="Super Mario Bros. 3">
  346. <figcaption>Super Mario Bros. 3<br>© Nintendo</figcaption>
  347. </div>
  348. <div class="l--flex-half">
  349. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/863a8ab20376613b64817d0347bb5aa2d62dfcf6/53f49/images/copying-7.jpg" alt="John Carmack's unlicensed PC port of Super Mario Bros. 3">
  350. <figcaption>
  351. John Carmack's unlicensed PC port of Super Mario Bros. 3<br>
  352. </figcaption>
  353. </div>
  354. </figure>
  355. </div>
  356. <div class="l--grid-narrow post">
  357. <p>
  358. The next day, their coworkers were floored. Nobody had ever seen a
  359. PC game work like this. John Romero, Carmack’s closest colleague and
  360. future collaborator on <em>Doom</em> and <em>Quake</em>, called it
  361. “the fucking coolest thing on the planet.”
  362. He insisted that they keep copying until they had finished an exact
  363. replica of the full game. They were going to send it to Nintendo.
  364. </p>
  365. <hr class="copying--divider">
  366. <p>
  367. Unfortunately for Carmack and his team, Nintendo wasn’t interested
  368. in a PC version of <em>Super Mario</em> (their console version was
  369. doing just fine, thank you very much).
  370. </p>
  371. <p>
  372. Disappointed, but not defeated, they resolved to build a better
  373. version of Mario. Starting with Carmack’s code for scrolling and
  374. animating the screen, the coders — calling themselves Ideas from the
  375. Deep, keeping the game a secret from their day jobs at Softdisk —
  376. put their <em>Super Mario</em> copy through a complete
  377. metamorphosis. In place of Mario, it starred eight-year-old Billy
  378. Blaze. Instead of turtles and mushrooms, the enemies were aliens
  379. called Yorps. Instead of eating a mushroom to jump higher, Billy
  380. Blaze hopped on a pogo stick.
  381. </p>
  382. <figure>
  383. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/3915b2dcbfbf91aa3eeb376a535ae09db487d215/e87d5/images/copying-8.jpg" alt="Commander Keen in Invasion of the Vorticons">
  384. <figcaption>
  385. <em>Commander Keen in Invasion of the Vorticons</em><br>©3D
  386. Realms
  387. </figcaption>
  388. </figure>
  389. <p>
  390. The debut <em>Commander Keen</em> game,
  391. <em>Commander Keen in Invasion of the Vorticons</em>, was a huge
  392. success. More than 50,000 copies were sold, making <em>Keen</em> one
  393. of the best-selling PC games of its time.
  394. </p>
  395. <p>
  396. Unlike Steve Jobs, John Carmack never changed his mind about
  397. copying. When his boss at Softdisk suggested that they patent
  398. Carmack’s PC scrolling technique, Carmack reeled. “If you ever ask
  399. me to patent anything,” he said, “I’ll quit.”
  400. </p>
  401. <hr class="copying--divider">
  402. <p>
  403. In a 2005 forum post, John Carmack explained his thoughts on
  404. patents. While patents are framed as protecting inventors, he wrote,
  405. that’s seldom how they’re used. Smart programmers working on hard
  406. problems tend to come up with the same solutions. If any one of
  407. those programmers patents their solution, the rest are screwed.
  408. </p>
  409. <p>
  410. He concluded: “I’ll have no part of it. Its [sic] basically mugging
  411. someone.”
  412. </p>
  413. <p>
  414. In his games after <em>Keen</em>, Carmack would go beyond simply
  415. refusing to patent his inventions. He would release the source code
  416. to the biggest games of the ’90s, <em>Wolfenstein 3D</em>,
  417. <em>Doom</em>, and <em>Quake</em>. Everyone is free to download,
  418. modify, or copy them.
  419. </p>
  420. <p class="copying--chapter">IV</p>
  421. <p>
  422. <strong class="t--transform-uppercase">It’s one thing to copy.</strong>
  423. It’s another to encourage others to copy from you. Richard Stallman
  424. went even further — he made copying a right.
  425. </p>
  426. <p>
  427. In 1983, Richard Stallman wanted to build a new operating system. At
  428. the time, Unix was the most popular and influential operating
  429. system, but it was expensive to license. Commercial licenses cost
  430. $20,000 — that’s $52,028 in 2020 money.
  431. And Unix was closed-source.
  432. </p>
  433. <p>
  434. So on September 27, 1983, he wrote this message on the Unix Wizards
  435. message board:
  436. </p>
  437. <blockquote class="t--family-mono">
  438. Free Unix!<br><br>
  439. Starting this Thanksgiving I am going to write a complete
  440. Unix-compatible software system called GNU (for Gnu's Not Unix), and
  441. give it away free to everyone who can use it. Contributions of time,
  442. money, programs and equipment are greatly needed.
  443. </blockquote>
  444. <p>
  445. That Stallman would write software and give it to others to use, for
  446. free, was a radical notion. To drive the point home, Stallman wrote
  447. a manifesto, defining the idea of
  448. <strong>free software</strong> (“Free software is software that
  449. users have the freedom to distribute and change.”) The manifesto kicked off the free software movement.
  450. </p>
  451. <p>
  452. The enduring innovation of Stallman’s movement was how he and his
  453. co-conspirators used software licenses. They flipped traditional
  454. licensing on its head: instead of prohibiting the copying or
  455. distribution of the software, a free software license guarantees the
  456. right of people to use, modify, distribute, and learn from its code.
  457. </p>
  458. </div>
  459. <p class="l--grid-push-left">
  460. <figure class="copying--quote">
  461. Instead of prohibiting the copying or distribution of the software,
  462. a free software license guarantees the right of people to use,
  463. modify, distribute, and learn from its code.
  464. </figure>
  465. </p>
  466. <div class="l--grid-narrow post">
  467. <p>
  468. New kinds of software licenses weren’t the only product of the free
  469. software movement. Ideological offshoots quickly spun out into new
  470. groups, like the <strong>open-source software</strong> movement.
  471. While Stallman’s free software faction was centered around a small
  472. group of hard-line progressive coders, the open-source movement was
  473. broad and inclusive, abandoning some of Stallman’s more political
  474. language to spread farther and find new audiences.
  475. </p>
  476. <p>
  477. Permissive licensing and distributed source control form the engine
  478. of modern software development. They create a feedback loop, or a
  479. symbiotic pair, or a living organism, or maybe even a virus: the
  480. tools that software developers use are themselves products of the
  481. open-source philosophy. Free and open-source code replicates itself,
  482. mutates, and spreads instantly across the world.
  483. </p>
  484. <hr class="copying--divider">
  485. <p>
  486. The free and open-source software movements (sometimes combined into
  487. a single acronym, FOSS) were echoed by another revolution in how
  488. creative works are licensed. In 2001, Lawrence Lessig, Hal Abelson,
  489. and Eric Eldred started Creative Commons, a non-profit and
  490. international network dedicated to enabling the sharing and reuse of
  491. “creativity and knowledge through the provision of free legal
  492. tools.”
  493. </p>
  494. <p>
  495. Nearly 20 years later, nearly half of a million images on Flickr
  496. have Creative Commons (or CC) licenses. Wikipedia uses CC licenses
  497. on all its photos and art. MIT provides more than 2,400 courses
  498. online for free under Creative Commons licenses. Countless millions
  499. of creative works have benefited from the open-source approach to
  500. licenses and permissions.
  501. </p>
  502. </div>
  503. <div class="l--grid-narrow">
  504. <figure>
  505. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/a19baf08ad09c7e052d4064ed8cbead32c5a1a70/89826/images/copying-9.jpg" alt="An image of a feedback loop from Flickr's Creative Commons archive">
  506. <figcaption>
  507. An image of a feedback loop from Flickr's Creative Commons
  508. archive
  509. </figcaption>
  510. </figure>
  511. </div>
  512. <div class="l--grid-narrow post">
  513. <p>
  514. A decade ago, the open-source movement came to design. Michael Cho
  515. created
  516. <a href="https://unsplash.com/" target="_blank" rel="noopener">Unsplash</a>
  517. in 2013 to share a few photographs he thought might be useful to
  518. designers at startups; as of September 2020, Unsplash hosts
  519. 2,147,579 photos, and all-time photo downloads are well over 2
  520. billion.
  521. Pablo Stanley recently released
  522. <a href="https://www.humaaans.com/" target="_blank" rel="noopener">Humaaans</a>, a collection of Creative Commons-licensed designs that can be
  523. re-assembled into editorial graphics.
  524. <a href="https://feathericons.com/" target="_blank" rel="noopener">Feather icons</a>,
  525. <a href="https://heroicons.dev/" target="_blank" rel="noopener">Heroicons</a>, and
  526. <a href="https://icons.getbootstrap.com/" target="_blank" rel="noopener">Bootstrap Icons</a>
  527. are all open-source and free-to-use collections of UI icons, used by
  528. designers to build websites and applications.
  529. </p>
  530. <p>
  531. Meanwhile, the explosion of open-source design resources has been
  532. bolstered by a new class of tools for sharing and collaborating on
  533. design.
  534. <a href="https://www.abstract.com/" target="_blank" rel="noopener">Abstract</a>
  535. is a version-control system for design that promises “collaboration
  536. without the chaos.” With Abstract, many designers can contribute to
  537. a single file, without worrying about overwriting each other's
  538. changes or always needing to download the latest versions. Figma,
  539. too, has just launched
  540. <a href="https://www.figma.com/community" target="_blank" rel="noopener">its community feature</a>
  541. , allowing designers to publish files and download each other’s
  542. projects. It’s not hard to imagine how this will evolve into a
  543. designer’s version of
  544. <a href="https://github.com" target="_blank" rel="noopener">GitHub</a>
  545. in the near future. Other design tools have followed suit: both
  546. Sketch and Framer have launched community content hubs, laying the
  547. groundwork for distributed source control.
  548. </p>
  549. <p>
  550. Copying is fundamental to design, just as it is to software. The
  551. rise of permissive licenses and version control tools makes it seem
  552. like copying is a new idea, an innovative approach in an industry
  553. that thrives on novelty. But the truth is, copying has informed art
  554. and industry for thousands of years.
  555. </p>
  556. <p class="copying--chapter">V</p>
  557. <p>
  558. In China, there are many concepts of a copy, each with distinct
  559. subtext. Fangzhipin (仿製品) are copies that are obviously different
  560. from the original — like small souvenir models of a statue. Fuzhipin
  561. (複製品) are exact, life-size reproductions of the original.
  562. Fuzhipin are just as valuable as originals, and have no negative
  563. stigma.
  564. </p>
  565. <p>
  566. In 1974, local farmers in the Xi’an region of China unearthed
  567. life-sized sculptures of soldiers made of terra cotta clay. When
  568. Chinese archeologists came to investigate the site, they uncovered
  569. figure after figure, including horses and chariots, all exquisitely
  570. detailed. All told, there were more than 8,000 terra cotta soldiers.
  571. They were dated to 210 BCE.
  572. </p>
  573. <figure>
  574. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/67da4e33e9db15e360d0cd212926b8aa5e09d757/b06c3/images/copying-10.jpg" alt="Terracotta warriors, Xi'an city">
  575. <figcaption>Terracotta warriors, Xi'an city</figcaption>
  576. </figure>
  577. <p>
  578. The terracotta warriors instantly became cultural treasures. A
  579. museum was built on the site of the excavation, but many of the
  580. statues were also exhibited in traveling shows. Hundreds of
  581. thousands of museumgoers all over the world lined up in galleries to
  582. see the soldiers.
  583. </p>
  584. <p>
  585. Then, in 2007, a revelation rocked the Museum für Völkerkunde in
  586. Hamburg, Germany: some of the terracotta warriors it had on display
  587. were not the originals that had been discovered in the field in
  588. Xi’an. They were copies.
  589. </p>
  590. <p>
  591. The Museum für Völkerkunde’s director became a pariah: “We have come
  592. to the conclusion that there is no other option than to close the
  593. exhibition completely, in order to maintain the museum’s good
  594. reputation.” The museum issued refunds to visitors. The event kicked
  595. off a rash of geopolitical finger-pointing: German officials cried
  596. foul, saying they were duped; Chinese officials washed their hands,
  597. since they never claimed the statues were originals to begin with.
  598. </p>
  599. <p>
  600. The statues in the Hamburg museum were fuzhipin, exact copies. They
  601. were equivalent to the originals. After all, the originals were
  602. themselves products of mass manufacturing, made with modules and
  603. components cast from molds. Almost as soon as the terracotta
  604. warriors were discovered, Chinese artisans began producing replicas,
  605. continuing the work that had started more than 2,000 years
  606. before.
  607. </p>
  608. <hr class="copying--divider">
  609. <p>
  610. It’s easy to attribute this approach to copying as a cultural
  611. curiosity, an aberration particular to China. But copying was just
  612. as vital to Western artists.
  613. </p>
  614. <p>
  615. Japanese art was one of the main sources of inspiration for Vincent
  616. van Gogh, himself one of the most influential European painters of
  617. the 19th century, if not of all time. Van Gogh was fascinated by the
  618. woodblock prints of artists like Hiroshige: stylized and vivid, they
  619. captured dramatic moments within compelling stories.
  620. </p>
  621. <p>
  622. Van Gogh’s interest went beyond inspiration. To study the techniques
  623. mastered by Japanese artists, he copied prints by Keisei Eisen and
  624. Utagawa Hiroshige. He tried to replicate their bold lines, their
  625. energetic compositions, and their strong colors. For his copy of
  626. Eisen’s A courtesan, van Gogh started by tracing the outline of the
  627. courtesan’s figure directly from the May 1886 edition of Paris
  628. Illustré. For Flowering Plum Tree and The Bridge in the Rain, both
  629. copies of Hiroshige prints, he added borders of Japanese calligraphy
  630. he had seen on other prints.
  631. </p>
  632. </div>
  633. <div class="l--grid-push-right">
  634. <figure class="l--flex">
  635. <div class="l--flex-half">
  636. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/6a6a1d3bacb2409aee732c112317ab78697b83ff/ba1c6/images/copying-11.jpg" alt="Sudden Shower over Shin-Ōhashi bridge and Atake (1857) by Hiroshige">
  637. <figcaption>
  638. <em>Sudden Shower over Shin-Ōhashi bridge and Atake</em>
  639. (1857) by Hiroshige
  640. </figcaption>
  641. </div>
  642. <div class="l--flex-half">
  643. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/abe088ff554219cdb7d1562a5a54a91c586e2bba/be71d/images/copying-12.jpg" alt="The Bridge in the Rain (after Hiroshige) (1887) by Vincent Van Gogh">
  644. <figcaption>
  645. <em>The Bridge in the Rain (after Hiroshige)</em> (1887) by
  646. Vincent Van Gogh
  647. </figcaption>
  648. </div>
  649. </figure>
  650. </div>
  651. <div class="l--grid-narrow post">
  652. <p>
  653. His practice with Japanese styles provided a crucial breakthrough.
  654. Van Gogh began to flatten landscapes. He outlined his subjects in
  655. bold black strokes. He painted with eye-watering colors. His
  656. interpretations of reality lit the art world on fire, influencing
  657. artists and designers to this day.
  658. </p>
  659. <p>
  660. By copying directly from Japanese artists, van Gogh’s works became
  661. what we know today.
  662. </p>
  663. <p>
  664. He was clear about this influence. In a letter to his brother Theo,
  665. he wrote: “All my work is based to some extent on Japanese art.”
  666. </p>
  667. <hr class="copying--divider">
  668. <p>
  669. There’s another word in Chinese for a copy: shanzhai (山寨). It’s
  670. translated to English as “fake,” but as with most Chinese words, the
  671. translation is lacking. Shanzhai literally means “mountain
  672. stronghold;” the word is a neologism, a recent invention, inspired
  673. by a famous novel in which the protagonists hide in a mountain
  674. stronghold to fight against a corrupt regime. Shanzhai products are
  675. playful, drawing attention to the fact that they aren’t original,
  676. putting their makers’ creativity on display.
  677. </p>
  678. <p>
  679. Take the popular shanzhai novel
  680. <em>Harry Potter and the Porcelain Doll</em>; in it, Harry goes to
  681. China to stop Voldemort and Voldemort’s Chinese counterpart. It
  682. doesn’t pretend to be an original. It plays on its fake-ness: Harry
  683. speaks Chinese fluently, but he has trouble eating with chopsticks.
  684. </p>
  685. <p>
  686. It’s easy to think of shanzhai as a Chinese quirk, but there are
  687. parallels in Western culture. One in particular, is a staple of the
  688. design community: the unsolicited redesign.
  689. </p>
  690. <p>
  691. An unsolicited redesign demonstrates a designer’s ideas for how a
  692. well-known website or app could be improved. They range from
  693. single-screen aesthetic tweaks (like
  694. <a href="https://dribbble.com/shots/13154163-Instafresh" target="_blank" rel="noopener">this take on Instagram</a>) to in-depth case studies in UX, IA, and content design (like
  695. <a href="https://blog.prototypr.io/gmail-an-unsolicited-redesign-1-2b244886eef8" target="_blank" rel="noopener">this redesign of Gmail’s mobile app</a>).
  696. </p>
  697. <p>
  698. Unsolicited redesigns copy the visual elements of the original as a
  699. starting point, then transform those elements to produce something
  700. new. Like van Gogh tracing Eisen, designers can pick up new
  701. techniques and approaches just by copying. But when a designer riffs
  702. on the original, they can create something new and inspiring.
  703. </p>
  704. <p>
  705. The design community has a complicated relationship with unsolicited
  706. redesigns. On the one hand, they’re the mainstay of talented young
  707. designers looking to demonstrate their ability to think critically
  708. about design and apply their skills. Companies have used the
  709. unsolicited redesign to position themselves as leaders: in 2003,
  710. 37signals (creator of the popular project management tool Basecamp)
  711. created redesigns of PayPal, Google, and FedEx to critical acclaim:
  712. their redesign of an online car dashboard “could do for cars what
  713. TiVo did for television,” Jason Kottke proclaimed.
  714. </p>
  715. <p>
  716. In rare cases, unsolicited redesigns turn into solicited ones. In
  717. 2018, Adam Fisher-Cox published a redesign of the digital signage of
  718. the AirTrain system at John F. Kennedy International Airport. The
  719. agency overseeing AirTrain saw the redesign and hired Fisher-Cox to
  720. implement it.
  721. </p>
  722. </div>
  723. <div class="l--grid-wide">
  724. <figure>
  725. <div class="l--flex">
  726. <div class="l--flex-half">
  727. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/6d01670fb1837936a4144c089965129891fe8d72/24ae4/images/copying-13.jpg" alt="The old signage for JFK's AirTrain">
  728. <figcaption>The old signage for JFK's AirTrain</figcaption>
  729. </div>
  730. <div class="l--flex-half">
  731. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/aea3c4615e8e7da46ad389562cfc0c3151a70e74/9f2fd/images/copying-14.jpg" alt="The beginning of Adam's redesign, copying directly from the existing signage">
  732. <figcaption>
  733. The beginning of the redesign, copying directly from the
  734. existing signage
  735. </figcaption>
  736. </div>
  737. </div>
  738. <div class="l--flex">
  739. <div>
  740. <img loading="lazy" src="https://d33wubrfki0l68.cloudfront.net/4b78ae72718afd062c56551468d4cc3ab3e61f3a/8d4e6/images/copying-15.jpg" alt="The final redesign comissioned by the agency in charge of AirTrain">
  741. <figcaption>
  742. The final redesign comissioned by the agency in charge
  743. of AirTrain. All images courtesy
  744. <a href="https://adamfishercox.com/portfolio/airtrain-arrival-signs/">Adam Fisher-Cox.</a>
  745. </figcaption>
  746. </div>
  747. </div>
  748. </figure>
  749. </div>
  750. <div class="l--grid-narrow post">
  751. <p>
  752. On the other hand, unsolicited redesigns are often looked down on.
  753. In a 2013 essay titled “Keep Your Unsolicited Redesign to
  754. Yourself,”
  755. Eric Karjaluoto argued that without acknowledging the constraints
  756. and incentives that guided an original design, the redesign is
  757. “utter fluff.” Those working on unsolicited redesigns “should know
  758. better than to waste their time.” There are countless other
  759. invectives against unsolicited redesign across the internet of
  760. design blogs.
  761. </p>
  762. <p>
  763. In 2011,
  764. <a href="https://web.archive.org/web/20111208041110/https://andyrutledge.com/news-redux.php" target="_blank" rel="noopener">Andy Rutledge’s unsolicited redesign of <em>The New York Times</em></a>
  765. drew the attention of design pundits in countless blog posts and
  766. tweets.
  767. But if they disagreed with Rutledge’s conclusions, many defended his
  768. approach. “Sometimes we need to go crazy and mock up stuff that
  769. can’t absolutely work in its pure form,” wrote Stijn Debrouwere,
  770. because “a full-on rethink might be what we need to move
  771. forward.”
  772. Even Khoi Vinh, previous design director for the Times, supported
  773. the practice: “Unsolicited redesigns are terrific and fun and
  774. useful, and I hope designers never stop doing them.”
  775. </p>
  776. <p>
  777. The shanzhai approach of copying — to learn, to invent, to comment,
  778. to make a statement — is just at home in the West as it is in China.
  779. </p>
  780. <p class="copying--chapter">VI</p>
  781. <p>
  782. Copying can be instructive, challenging, devious, or revolutionary.
  783. To me, copying is fun.
  784. </p>
  785. <p>
  786. When I was young, I liked to trace. My mom would buy me tracing
  787. paper, and I’d copy comic book characters line for line. Pulling the
  788. paper back from the original was a rush. I drew this! With my hand!
  789. Sure, it was a copy, but once I signed my name in the corner, it was
  790. my copy.
  791. </p>
  792. <p>
  793. These days, there’s automatic copy protection on just about
  794. everything. You can’t easily pirate Netflix streams, copy Kindle
  795. books, or torrent Adobe Creative Cloud. But designs are different.
  796. To copy a design, all you need is tracing paper.
  797. </p>
  798. <p>
  799. In fact, you don’t even have to draw. Pull out your phone, take a
  800. picture, and save it to your Pinterest board. You can use a color
  801. picker to extract the exact shade from the design, use a physical or
  802. digital measuring tool to get the pixel-perfect dimensions, and use
  803. <a href="https://www.myfonts.com/WhatTheFont/" target="_blank" rel="noopener">WhatTheFont</a>
  804. to learn the typefaces in the design.
  805. </p>
  806. <p>
  807. If you’re looking at a website, you can just click “view source” and
  808. see all the design decisions laid out in granular detail. That’s
  809. exactly how I went from tracing comic books to being a designer: I
  810. copied designs from websites I liked and pasted them onto my Xanga
  811. blog.
  812. </p>
  813. <p>I copied because I could.</p>
  814. <p>
  815. In my first design job, I copied relentlessly. I had created a music
  816. magazine with friends and tried to recreate the layouts I saw in my
  817. favorite mags. Wired was a constant source of inspiration: I
  818. obsessed over their typography. When I figured out that they were
  819. using Joshua Darden’s Freight Micro, I switched our magazine to use
  820. it, too.
  821. </p>
  822. <p>
  823. Copying helped me develop as a designer without needing to go to
  824. design school. For lots of people too young for college-level design
  825. programs, or without the means to attend these schools or bootcamps,
  826. copying serves the same function.
  827. </p>
  828. <p>
  829. And then, when folks like me wind up in a career in design, we find
  830. that copying is still useful. I eyedropper colors from Apple’s
  831. marketing websites. I start my color palettes from Google’s Material
  832. Design examples. I screenshot and recreate components from
  833. Facebook’s new redesign.
  834. </p>
  835. <p>
  836. I don’t fancy myself to be the van Gogh of design, to be anywhere on
  837. the level of Stallman or Carmack in my approach to copying,
  838. possessing even one-one-hundredth of Steve Jobs’ ability to steal
  839. artfully, or to be in any way comparable to Charles or Ray Eames.
  840. But I can certainly copy all of their work. I can copy their
  841. mindset, their process, and their designs.
  842. </p>
  843. <p>
  844. I can make cheap, small-scale facsimiles, fangzhipin, to demonstrate
  845. some quality of the original. I can make exact replicas,
  846. pixel-perfect fuzhipin, to learn how the originals and their
  847. creators work. Or I can create shanzhai, unsolicited redesigns,
  848. commenting and riffing on the work of others. All these copies have
  849. an important role to play in the process of design.
  850. </p>
  851. <p>
  852. Whether you believe that it’s worthwhile or worthless to copy,
  853. whether you think that copies are a valuable part of the design
  854. community or a scourge, you are using software, hardware, websites
  855. and apps that all owe their existence to copying.
  856. </p>
  857. <p>As long as there is design, there will be copying.</p>
  858. <hr>
  859. </div>
  860. </div>
  861. </article>
  862. <hr>
  863. <footer>
  864. <p>
  865. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  866. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  867. </svg> Accueil</a> •
  868. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  869. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  870. </svg> Suivre</a> •
  871. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  872. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  873. </svg> Pro</a> •
  874. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  875. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  876. </svg> Email</a> •
  877. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  878. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  879. </svg> Légal</abbr>
  880. </p>
  881. <template id="theme-selector">
  882. <form>
  883. <fieldset>
  884. <legend><svg class="icon icon-brightness-contrast">
  885. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  886. </svg> Thème</legend>
  887. <label>
  888. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  889. </label>
  890. <label>
  891. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  892. </label>
  893. <label>
  894. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  895. </label>
  896. </fieldset>
  897. </form>
  898. </template>
  899. </footer>
  900. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  901. <script>
  902. function loadThemeForm(templateName) {
  903. const themeSelectorTemplate = document.querySelector(templateName)
  904. const form = themeSelectorTemplate.content.firstElementChild
  905. themeSelectorTemplate.replaceWith(form)
  906. form.addEventListener('change', (e) => {
  907. const chosenColorScheme = e.target.value
  908. localStorage.setItem('theme', chosenColorScheme)
  909. toggleTheme(chosenColorScheme)
  910. })
  911. const selectedTheme = localStorage.getItem('theme')
  912. if (selectedTheme && selectedTheme !== 'undefined') {
  913. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  914. }
  915. }
  916. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  917. window.addEventListener('load', () => {
  918. let hasDarkRules = false
  919. for (const styleSheet of Array.from(document.styleSheets)) {
  920. let mediaRules = []
  921. for (const cssRule of styleSheet.cssRules) {
  922. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  923. continue
  924. }
  925. // WARNING: Safari does not have/supports `conditionText`.
  926. if (cssRule.conditionText) {
  927. if (cssRule.conditionText !== prefersColorSchemeDark) {
  928. continue
  929. }
  930. } else {
  931. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  932. continue
  933. }
  934. }
  935. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  936. }
  937. // WARNING: do not try to insert a Rule to a styleSheet you are
  938. // currently iterating on, otherwise the browser will be stuck
  939. // in a infinite loop…
  940. for (const mediaRule of mediaRules) {
  941. styleSheet.insertRule(mediaRule.cssText)
  942. hasDarkRules = true
  943. }
  944. }
  945. if (hasDarkRules) {
  946. loadThemeForm('#theme-selector')
  947. }
  948. })
  949. </script>
  950. </body>
  951. </html>