A place to cache linked articles (think custom and personal wayback machine)
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

index.html 26KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  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>I blew $720 on 100 notebooks from Alibaba and started a Paper Website business (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://daily.tinyprojects.dev/paper_website">
  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>I blew $720 on 100 notebooks from Alibaba and started a Paper Website business</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://daily.tinyprojects.dev/paper_website" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p class="paragraph"> <i>December 14th 2021</i> </p>
  71. <p class="paragraph"> TLDR; I started a business that lets you <a href="https://paperwebsite.com/" target="_blank">build websites using pen &amp; paper</a>. In the process I went viral on Twitter, made $1,000 in two days, and blew $720 on 100 paper notebooks from Alibaba. </p>
  72. <h3>📖 Can you build a website from a piece of paper?</h3>
  73. <p class="paragraph"> One day, a riddle popped into my brain: </p>
  74. <p class="paragraph"> <i>"Can you build a website from a piece of paper?"</i> </p>
  75. <p class="paragraph"> I'm a man who <a href="https://tinyprojects.dev/projects/mailoji" target="_blank">once bought 300 emoji domain names from Kazakhstan,</a> but, even to me, the idea of building a website from a piece of paper seemed a <i>bit</i> strange. </p>
  76. <p class="paragraph"> Around this time though, I'd been planning to start a brand new daily blog. </p>
  77. <p class="paragraph"> I began picturing myself in a dressing gown, with a cup of tea and a biro, somehow writing this online blog from a page in a notebook. </p>
  78. <p class="paragraph"> This idea seemed <i>very</i> funny. </p>
  79. <p class="paragraph"> Can you build a website from a piece of paper? I decided to at least try it. </p>
  80. <h3>🧙‍♂️ Paper website experiment #1</h3>
  81. <p class="paragraph"> Feeling confident, I got out some paper and wrote down a chorus from <i>The Fresh Prince of Bel Air</i> (don't ask). </p>
  82. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142559083.png?alt=media&amp;token=6e3c2fd2-21d1-449e-9cda-65ea04c17a95" alt=""><figcaption class="fig-cap"></figcaption></figure>
  83. <p class="paragraph"> If I could transform these handwritten words into pixel words, then it wouldn't be too hard to convert that into the HTML code for a website. </p>
  84. <p class="paragraph"> I took a photo of the page with my phone, and eagerly fed the image into some software that could recognise handwriting. </p>
  85. <p class="paragraph"> A few moments later, I had the results. </p>
  86. <h3>😱 These results may shock you</h3>
  87. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142567580.png?alt=media&amp;token=15fd8e80-676d-47c3-91eb-b31c0e28b414" alt=""><figcaption class="fig-cap"></figcaption></figure>
  88. <p class="paragraph"> There were a lot of mistakes. </p>
  89. <p class="paragraph"> Despite being left-handed and smudging every birthday card I've ever written in, my handwriting is quite neat, so a paper website was not looking promising. </p>
  90. <p class="paragraph"> The software kind of understood my words, so I wondered if I could just fix the spelling mistakes somehow. </p>
  91. <p class="paragraph"> All I needed was a really good spellchecker. </p>
  92. <h3>🤖 A really good spellchecker</h3>
  93. <p class="paragraph"> GPT-3 has been hailed a breakthrough in Artificial Intelligence. </p>
  94. <p class="paragraph"> Billions of parameters work together like a human brain. It can generate whole books, brand new ideas, and chat like a human. </p>
  95. <p class="paragraph"> I needed it for one thing, and one thing only: to be a glorified spellchecker. </p>
  96. <p class="paragraph"> My idea was to feed this world-class AI sentences with spelling mistakes, and examples of how they should be corrected. </p>
  97. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142615331.png?alt=media&amp;token=38f149ec-1e68-4727-bc29-4857b5734c40" alt=""><figcaption class="fig-cap"></figcaption></figure>
  98. <p class="paragraph"> With some luck, it should then learn how to fix mistakes on all future sentences for my paper website. </p>
  99. <h3>🧪 Paper website experiment #2</h3>
  100. <p class="paragraph"> I strapped GPT-3 onto my handwriting recognition code, and retried the experiment. </p>
  101. <p class="paragraph"> <b><i>&gt; Snap picture. Upload. Cross fingers.</i></b> </p>
  102. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142623074.png?alt=media&amp;token=b12523d8-7482-4d31-90f2-3016dd911c71" alt=""><figcaption class="fig-cap"></figcaption></figure>
  103. <p class="paragraph"> Somehow, it worked! </p>
  104. <p class="paragraph"> It didn't take too much extra effort to build a small prototype that let me upload a photo of my page, turn it into code, and host it on a tiny website. </p>
  105. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639475066242.png?alt=media&amp;token=e9d71744-69f0-4cc0-8190-a3786f052be1" alt=""><figcaption class="fig-cap"></figcaption></figure>
  106. <p class="paragraph"> I also built a basic editor that let me add links, images and headings to make the website more interesting. </p>
  107. <p class="paragraph"> Can you build a website from a piece of paper? It seemed like it. </p>
  108. <p class="paragraph"> Was it practical to use paper for a <i>real</i> website though? No idea. </p>
  109. <h3>🌄 The first ever paper website</h3>
  110. <p class="paragraph"> A few days later, I set off for a week's holiday in the Peak District. Being me, I thought this would be the perfect time to build a test paper website about the trip. </p>
  111. <p class="paragraph"> On the first morning, I got up early and began writing my website on paper. </p>
  112. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639474586662.png?alt=media&amp;token=8b7ce2ef-dd17-424f-8adb-9de6d56ecbe9" alt=""><figcaption class="fig-cap"></figcaption></figure>
  113. <p class="paragraph"> My girlfriend watched me, puzzled. After convincing her that I hadn't gone crazy, I proudly took a photo of my page, and sent her the URL of my newly created paper blog post. </p>
  114. <p class="paragraph"> Although this was the lamest mic drop of all time, I think she was impressed. </p>
  115. <h3>📝 One week of paper blogging</h3>
  116. <p class="paragraph"> Every morning I kept adding to my new paper website until I had written a <a href="https://weekinthepeaks.com/" target="_blank">whole tiny travel blog</a> about the trip. </p>
  117. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142676075.png?alt=media&amp;token=f290fc46-74b2-4eaa-847d-e9598dbcad91" alt=""><figcaption class="fig-cap"></figcaption></figure>
  118. <p class="paragraph"> Despite no one reading it, I found myself genuinely looking forward to writing a new post each morning. </p>
  119. <p class="paragraph"> I wrote more without the distractions of the internet, and it was refreshing not being in front of a screen. It was also just really fun. </p>
  120. <p class="paragraph"> This made me wonder: </p>
  121. <p class="paragraph"> If I enjoyed this way of building websites, perhaps others would too? </p>
  122. <h3>💻 Starting a paper website business</h3>
  123. <p class="paragraph"> Fueled by the excitement of my paper travel blog, I decided to start a service that would let anyone build their own paper website. </p>
  124. <p class="paragraph"> Over a few weeks I fleshed out my prototype. I built an app for easily taking paper pictures, and created a payment system using Stripe for subscriptions. </p>
  125. <p class="paragraph"> The last step was choosing a name. Fortunately, <a href="https://paperwebsite.com/" target="_blank">paperwebsite.com</a> was available for £10, so I creatively called my service: <a href="https://paperwebsite.com/" target="_blank">Paper Website.</a> </p>
  126. <p class="paragraph"> Now I just needed some customers. </p>
  127. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142687737.png?alt=media&amp;token=993b8ba7-5b97-4f17-8eff-5e935a941bc3" alt=""><figcaption class="fig-cap"></figcaption></figure>
  128. <h3>🏷️ Marketing tips from the top</h3>
  129. <p class="paragraph"> To entice some potential customers, I decided to conjure up <i>the ultimate deal.</i> </p>
  130. <p class="paragraph"> For $99, you'd get a year long paper website, and a free Moleskine notebook to build your website in. </p>
  131. <p class="paragraph"> It was everything you needed to start your own paper website (although arguably, a pen might also be useful). </p>
  132. <p class="paragraph"> I started dropping links everywhere to spread the good word. </p>
  133. <h3>📈 Mysterious traffic</h3>
  134. <p class="paragraph"> One afternoon, I was sat in a cafe ready to chow down on some serious work. </p>
  135. <p class="paragraph"> I briefly opened Google Analytics, and noticed that for some reason there were 30 people on paperwebsite.com. </p>
  136. <p class="paragraph"> This was a lot more than the usual 0 website visitors. <i>Things</i> were happening. </p>
  137. <p class="paragraph"> After some investigation, I found that Paper Website had randomly been featured as a tiny footnote in a <a href="https://thehustle.co/%E2%9B%B3-golf-is-blowing-up/" target="_blank">massive newsletter.</a> </p>
  138. <p class="paragraph"> Just as I cracked the case, something amazing happened. </p>
  139. <h3>🎉 First customer</h3>
  140. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142697110.png?alt=media&amp;token=c858ea05-fa01-4326-b285-4147c7775bf4" alt=""><figcaption class="fig-cap"></figcaption></figure>
  141. <p class="paragraph"> I watched as Paper Website went from £0 in sales, to £7 as it got its first monthly subscription customer. </p>
  142. <p class="paragraph"> I let out a tiny fistpump in the middle of the cafe that I desperately hope no one saw. </p>
  143. <p class="paragraph"> It wasn't over yet though. Soon after, somebody was lured in by <i>the ultimate deal.</i> </p>
  144. <p class="paragraph"> I had two customers! Now my girlfriend was impressed: </p>
  145. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639168620794.png?alt=media&amp;token=cd5c9b0f-a841-4692-b62c-99c3895aec8c" alt=""><figcaption class="fig-cap"></figcaption></figure>
  146. <p class="paragraph"> I was the Dunder Mifflin of the internet. </p>
  147. <h3>🚚 Notebook woes</h3>
  148. <p class="paragraph"> My new users began building their paper websites, whilst I realised I now had to ship somebody a Moleskine notebook as part of <i>the ultimate deal.</i> </p>
  149. <p class="paragraph"> I loaded up the Moleskine website and saw this was going to cost a staggering $30. </p>
  150. <p class="paragraph"> Paper Website would go bankrupt at these prices, so somehow I needed to reduce costs. </p>
  151. <p class="paragraph"> Then I wondered: could I just create my own notebooks? </p>
  152. <h3>💳 Buying 100 custom notebooks</h3>
  153. <p class="paragraph"> I opened my browser and went to Alibaba.com. Ten minutes later I was talking to the <i>Jiaxing Banana Import &amp; Export Co.</i> - apparent experts in creating notebooks. </p>
  154. <p class="paragraph"> Their minimum order was 100 notebooks at $3.25 each. I could even have a custom logo on the front. </p>
  155. <p class="paragraph"> This was a point of no return. By purchasing these notebooks I was commiting to an idea that had only been validated by 2 sales. Shipping was also $395. </p>
  156. <p class="paragraph"> But hey, it would be really cool to have my own notebooks. </p>
  157. <p class="paragraph"> I clicked buy. They'd arrive in 4 weeks. </p>
  158. <h3>📦 Notebook Delivery</h3>
  159. <p class="paragraph"> One month later, two large brown cardboard boxes arrived on my doorstep. </p>
  160. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142711973.png?alt=media&amp;token=219c9ea3-aad8-4d4d-94c5-53a6d531ad4b" alt=""><figcaption class="fig-cap"></figcaption></figure>
  161. <p class="paragraph"> I eagerly cracked them open to see what on earth I'd purchased. </p>
  162. <p class="paragraph"> Fortunately, the <i>Jiaxing Banana Import &amp; Export Co.</i> hadn't let me down. </p>
  163. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142715882.png?alt=media&amp;token=dccb1a3c-f3a1-423c-84ac-3b22e25198f6" alt=""><figcaption class="fig-cap"></figcaption></figure>
  164. <p class="paragraph"> 100 white notebooks, each with my logo on the front. They were the perfect operating system for my paper-based internet. </p>
  165. <p class="paragraph"> My brief, unofficial partnership with Moleskine ended, and I proudly added the new notebooks to my website. </p>
  166. <h3>📆 Preparing for launch</h3>
  167. <p class="paragraph"> Now I had 100 notebooks sat in my kitchen, I needed to actually sell them, otherwise a lot of my family would be getting notebooks for Christmas. </p>
  168. <p class="paragraph"> I decided the best plan would be to generate some hype and do a big launch. </p>
  169. <p class="paragraph"> Over the next week I fine tuned my website, and created a video to try and explain to the public what on earth this paper website thing was. </p>
  170. <p class="embed"></p>
  171. <p class="paragraph"> On November 10th 2021, I typed up a launch tweet. </p>
  172. <p class="paragraph"> Then, I tweeted it. </p>
  173. <h3>💸 Going viral on twitter</h3>
  174. <p class="paragraph"> It couldn't have gone better. The tweet <a href="https://twitter.com/tinyprojectsdev/status/1458414762203795460" target="_blank">blew up.</a> </p>
  175. <p class="paragraph"> It quickly spread from my little following to other people on twitter, getting 230k impressions, over 1500 likes, and 300 retweets. </p>
  176. <p class="paragraph"> More importantly though, I was selling some paper websites! </p>
  177. <p class="paragraph"> Over 2 days I sold 11 subscriptions netting ~$1000/yr in revenue, a lot of them were <i>the ultimate deal</i>. </p>
  178. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142721019.png?alt=media&amp;token=3b4f6e60-e8ca-4d72-94f3-a785bdb292ed" alt=""><figcaption class="fig-cap"></figcaption></figure>
  179. <h3>🎊 Launch success</h3>
  180. <p class="paragraph"> After finishing <a href="https://www.producthunt.com/posts/paper-website">4th on Product Hunt</a> a few days later, Paper Website was sitting at a modest ~$3,600/yr in subscriptions. </p>
  181. <p class="paragraph"> Loads of people had also now started to build their own paper websites. </p>
  182. <p class="paragraph"> There were websites about <a href="https://doughnuts.design/" target="_blank">game design</a>, <a href="https://angry-catfish-36.web.app/" target="_blank">puzzles</a>, and even <a href="https://thirasoap.com//" target="_blank">making soap</a> - all created from pen &amp; paper. It was so awesome to see. </p>
  183. <p class="paragraph"> Can you build a website from a piece of paper? People were doing it right now! </p>
  184. <h3>📬 Becoming a mailman</h3>
  185. <p class="paragraph"> When the chaos died down, I bought some padded envelopes, and started packaging my notebooks into them. </p>
  186. <p class="paragraph"> Then, I opened my door, walked down the road, and posted the first ever paper website notebook to someone in London. </p>
  187. <p class="paragraph"> This was a surreal experience, when I first imagined a paper website, I never expected things to go this far. </p>
  188. <p class="paragraph"> But, here I was. This is where my story ends, standing in the middle of a random street in England, dropping a notebook into a Royal Mail postbox. </p>
  189. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142726875.png?alt=media&amp;token=484ecf78-de0f-417f-9dbc-b40c8405f63f" alt=""><figcaption class="fig-cap"></figcaption></figure>
  190. <h3>📘 The end</h3>
  191. <p class="paragraph"> The other day my dad (who's a farmer) tried out Paper Website, and created a <a href="https://red-chicken-48.web.app/" target="_blank">page</a> about building a gate out of horseshoes. </p>
  192. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639472924737.png?alt=media&amp;token=3126def4-25ef-4674-b30e-9733c93bcd75" alt=""><figcaption class="fig-cap"></figcaption></figure>
  193. <p class="paragraph"> Although I still have a big box of notebooks in my kitchen, what I'm really excited about is seeing more websites like his. </p>
  194. <p class="paragraph"> There's a lot of weird, wonderful and interesting ideas out there (like horseshoe gates) that never make it to the internet. Perhaps if starting a website was as simple as picking up a pen, we might see more of them. </p>
  195. <p class="paragraph"> Unknowingly stumbling across someone's paper website also sounds like a lot of fun, and I think the internet should be more fun. </p>
  196. <p class="paragraph"> By the way, I did end up starting my new daily blog. </p>
  197. <p class="paragraph"> I'm currently sat in my dressing gown, with a cup of tea and a biro, writing my latest post for it right now on a piece of paper. </p>
  198. <p class="paragraph"> It's called: <i>I blew $720 on 100 notebooks from Alibaba and started a Paper Website business.</i> </p>
  199. <p class="paragraph"> You've been reading a paper website this whole time. </p>
  200. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639389131965.png?alt=media&amp;token=12be4dfa-72c5-4f7a-95c0-3b8db78bcf9e" alt=""><figcaption class="fig-cap"></figcaption></figure>
  201. <p class="paragraph"> I make <a href="https://tinyprojects.dev/">tiny projects</a> </p>
  202. </article>
  203. <hr>
  204. <footer>
  205. <p>
  206. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  207. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  208. </svg> Accueil</a> •
  209. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  210. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  211. </svg> Suivre</a> •
  212. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  213. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  214. </svg> Pro</a> •
  215. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  216. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  217. </svg> Email</a> •
  218. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  219. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  220. </svg> Légal</abbr>
  221. </p>
  222. <template id="theme-selector">
  223. <form>
  224. <fieldset>
  225. <legend><svg class="icon icon-brightness-contrast">
  226. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  227. </svg> Thème</legend>
  228. <label>
  229. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  230. </label>
  231. <label>
  232. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  233. </label>
  234. <label>
  235. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  236. </label>
  237. </fieldset>
  238. </form>
  239. </template>
  240. </footer>
  241. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  242. <script>
  243. function loadThemeForm(templateName) {
  244. const themeSelectorTemplate = document.querySelector(templateName)
  245. const form = themeSelectorTemplate.content.firstElementChild
  246. themeSelectorTemplate.replaceWith(form)
  247. form.addEventListener('change', (e) => {
  248. const chosenColorScheme = e.target.value
  249. localStorage.setItem('theme', chosenColorScheme)
  250. toggleTheme(chosenColorScheme)
  251. })
  252. const selectedTheme = localStorage.getItem('theme')
  253. if (selectedTheme && selectedTheme !== 'undefined') {
  254. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  255. }
  256. }
  257. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  258. window.addEventListener('load', () => {
  259. let hasDarkRules = false
  260. for (const styleSheet of Array.from(document.styleSheets)) {
  261. let mediaRules = []
  262. for (const cssRule of styleSheet.cssRules) {
  263. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  264. continue
  265. }
  266. // WARNING: Safari does not have/supports `conditionText`.
  267. if (cssRule.conditionText) {
  268. if (cssRule.conditionText !== prefersColorSchemeDark) {
  269. continue
  270. }
  271. } else {
  272. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  273. continue
  274. }
  275. }
  276. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  277. }
  278. // WARNING: do not try to insert a Rule to a styleSheet you are
  279. // currently iterating on, otherwise the browser will be stuck
  280. // in a infinite loop…
  281. for (const mediaRule of mediaRules) {
  282. styleSheet.insertRule(mediaRule.cssText)
  283. hasDarkRules = true
  284. }
  285. }
  286. if (hasDarkRules) {
  287. loadThemeForm('#theme-selector')
  288. }
  289. })
  290. </script>
  291. </body>
  292. </html>