A place to cache linked articles (think custom and personal wayback machine)
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

index.html 14KB

před 2 roky
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  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>Write plain text files (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://sive.rs/plaintext">
  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>Write plain text files</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://sive.rs/plaintext" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>
  71. I write almost everything important in my life: thoughts, plans, notes, diaries, correspondence, code, articles, and entire books.
  72. </p>
  73. <p>
  74. They are my extended memory — my noted self — my organized thoughts.
  75. I refer to them often.
  76. I search them, update them, and learn from them.
  77. I convert them into HTML to make websites, or LaTeX to make books.
  78. </p>
  79. <p>
  80. My written words are my most precious asset.
  81. They are also a history of my life.
  82. <strong>
  83. That’s why I only use plain text files.
  84. </strong>
  85. They are the most reliable, flexible, and long-lasting option.
  86. Here’s why.
  87. </p>
  88. <h2>
  89. PORTABLE
  90. </h2>
  91. <p>
  92. I’ve brought my text files with me since 1990, from Mac to Windows to Linux to BSD, from PCs to laptops to tablets to Android to iOS to a tiny device the size of my thumb, and back again.
  93. </p>
  94. <p>
  95. <strong>
  96. Every device, including ones long gone, and ones not invented yet, can read and edit plain text.
  97. </strong>
  98. Whether future virtual reality, or a chip you can implant in your earlobe, plain text will be there.
  99. Will Microsoft Word?
  100. Evernote?
  101. Notion?
  102. Maybe.
  103. Maybe not.
  104. </p>
  105. <p>
  106. But plain text?
  107. Always.
  108. Everywhere.
  109. </p>
  110. <h2>
  111. UN-COMMERCIAL
  112. </h2>
  113. <p>
  114. Every few years a new company says you should use their special format.
  115. You have to pay them a monthly fee to use it — or keep all of your documents in their care.
  116. They offer some convenience or features, but at the cost of flexibility, portability, and independence.
  117. </p>
  118. <p>
  119. When you store your writing in one company’s unique format, then you need that program to access it.
  120. Then the economy takes a turn, they go out of business, and your work is trapped in an unusable format.
  121. </p>
  122. <p>
  123. <strong>
  124. You will outlive these companies.
  125. </strong>
  126. Your writing should outlive you.
  127. Depending on companies is not an option.
  128. </p>
  129. <p>
  130. Plain text is un-commercial.
  131. It removes you from the world of subscriptions and hype.
  132. There will always be plenty of free, non-commercial software in the public domain for reading and editing text files.
  133. </p>
  134. <h2>
  135. OFFLINE
  136. </h2>
  137. <p>
  138. There are places and times when you can’t get online.
  139. Don’t depend on any tool that needs an internet connection.
  140. </p>
  141. <p>
  142. <strong>
  143. There are great benefits to being intentionally offline and unreachable, to focus.
  144. </strong>
  145. It’s a super productivity boost.
  146. You need to be able to write, and have access to all your writing, during these times.
  147. </p>
  148. <h2>
  149. NO DEPENDENCIES
  150. </h2>
  151. <p>
  152. If you rely on Word, Evernote or Notion, for example, then you can’t work unless you have Word, Evernote, or Notion.
  153. <strong>
  154. You are helpless without them.
  155. </strong>
  156. You are dependent.
  157. </p>
  158. <p>
  159. People tell me about more tools I could use in addition to my text files.
  160. But I don’t need or want anything else.
  161. <strong>
  162. Plain text files and a basic text editor are enough.
  163. This is everything you need for great thinking and writing.
  164. </strong>
  165. (A paper notebook and pencil are enough, too.)
  166. </p>
  167. <p>
  168. If you only use plain text, you can work on any device, forever.
  169. The less you depend on, the better.
  170. Peace and focus come when you stop looking for more.
  171. </p>
  172. <h2>
  173. EASIEST TO CONVERT
  174. </h2>
  175. <p>
  176. Plain text can be converted into anything else.
  177. </p>
  178. <p>
  179. HTML, Markdown, JSON, LaTeX, and many other standard formats, are just plain text.
  180. I’ve written four books and four hundred blog posts in plain text.
  181. </p>
  182. <p>
  183. You can make your own personal formats in your plain text files.
  184. Maybe in each diary entry, the first two lines are like:
  185. </p>
  186. <pre>
  187. date: 2022-02-28
  188. tags: where-to-live, kids, dog, anxious
  189. </pre>
  190. <p>
  191. Then it’s easy to use any little scripting language like Ruby, Python, or JavaScript to grab the date and tags, and use them for categorizing, sorting, renaming, archiving, or exporting.
  192. </p>
  193. <p>
  194. Or if you don’t want to do it yourself, then it’s easy to find someone who can.
  195. Anyone who’s been programming for more than a week should be able to do it easily.
  196. </p>
  197. <h2>
  198. NEED HIERARCHY?
  199. </h2>
  200. <p>
  201. Use directories — also known as folders.
  202. These are also good for keeping your text together with other files like images and audio.
  203. </p>
  204. <pre>
  205. Documents/
  206. Documents/Diary/
  207. Documents/Diary/2022/
  208. Documents/Diary/2022/2022-02-28.txt
  209. Documents/Thoughts/
  210. Documents/Thoughts/WhereToLive/
  211. Documents/Thoughts/WhereToLive/2019-06-30.txt
  212. Documents/Thoughts/WhereToLive/2020-01-18.txt
  213. Documents/Ideas/
  214. Documents/Ideas/MusicalChairs.txt
  215. Documents/Ideas/NewHouse/
  216. Documents/Ideas/NewHouse/Design/
  217. Documents/Ideas/NewHouse/Design/entryway.jpg
  218. Documents/Ideas/NewHouse/Design/roof.jpg
  219. Documents/Ideas/NewHouse/Architect/
  220. Documents/Ideas/NewHouse/Architect/JM_Lim.txt
  221. Documents/Ideas/NewHouse/Architect/TPS_Inc.txt
  222. </pre>
  223. <h2>
  224. NEED VISUALS OR GRAPHICS?
  225. </h2>
  226. <p>
  227. Need visual mind-mapping with circles and lines?
  228. Maybe you do.
  229. <strong>
  230. But maybe you don’t.
  231. </strong>
  232. Maybe it’s just another distraction, focusing on the tools instead of your thinking.
  233. </p>
  234. <p>
  235. I love that plain text files have no formatting to tinker with.
  236. A tab key, SHIFT KEY, and vertical line breaks can go a long way, keeping you writing instead of formatting.
  237. </p>
  238. <p>
  239. If you really need graphics, do your drawing using something else.
  240. Digital drawing into SVG files.
  241. Paper drawing, scanned into JPGs.
  242. </p>
  243. <p>
  244. Formats that aren’t owned by any company.
  245. Formats that will outlast you.
  246. </p>
  247. <p>
  248. Keep your graphics files alongside your text files.
  249. But keep your text as plain text.
  250. </p>
  251. <h2>
  252. CONCLUSION
  253. </h2>
  254. <p>
  255. Reliable, flexible, portable, independent, and long-lasting.
  256. Plain text files will be readable by future generations, hundreds of years from now.
  257. </p>
  258. <p>
  259. I especially enjoy the tranquility of their offline, non-commercial nature.
  260. They’re quiet.
  261. They’re focused.
  262. (As I aim to be.)
  263. </p>
  264. <p><img src="https://sive.rs/images/plaintext.png" alt="screen shot of the text of this post"></p>
  265. </article>
  266. <hr>
  267. <footer>
  268. <p>
  269. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  270. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  271. </svg> Accueil</a> •
  272. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  273. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  274. </svg> Suivre</a> •
  275. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  276. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  277. </svg> Pro</a> •
  278. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  279. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  280. </svg> Email</a> •
  281. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  282. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  283. </svg> Légal</abbr>
  284. </p>
  285. <template id="theme-selector">
  286. <form>
  287. <fieldset>
  288. <legend><svg class="icon icon-brightness-contrast">
  289. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  290. </svg> Thème</legend>
  291. <label>
  292. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  293. </label>
  294. <label>
  295. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  296. </label>
  297. <label>
  298. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  299. </label>
  300. </fieldset>
  301. </form>
  302. </template>
  303. </footer>
  304. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  305. <script>
  306. function loadThemeForm(templateName) {
  307. const themeSelectorTemplate = document.querySelector(templateName)
  308. const form = themeSelectorTemplate.content.firstElementChild
  309. themeSelectorTemplate.replaceWith(form)
  310. form.addEventListener('change', (e) => {
  311. const chosenColorScheme = e.target.value
  312. localStorage.setItem('theme', chosenColorScheme)
  313. toggleTheme(chosenColorScheme)
  314. })
  315. const selectedTheme = localStorage.getItem('theme')
  316. if (selectedTheme && selectedTheme !== 'undefined') {
  317. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  318. }
  319. }
  320. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  321. window.addEventListener('load', () => {
  322. let hasDarkRules = false
  323. for (const styleSheet of Array.from(document.styleSheets)) {
  324. let mediaRules = []
  325. for (const cssRule of styleSheet.cssRules) {
  326. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  327. continue
  328. }
  329. // WARNING: Safari does not have/supports `conditionText`.
  330. if (cssRule.conditionText) {
  331. if (cssRule.conditionText !== prefersColorSchemeDark) {
  332. continue
  333. }
  334. } else {
  335. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  336. continue
  337. }
  338. }
  339. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  340. }
  341. // WARNING: do not try to insert a Rule to a styleSheet you are
  342. // currently iterating on, otherwise the browser will be stuck
  343. // in a infinite loop…
  344. for (const mediaRule of mediaRules) {
  345. styleSheet.insertRule(mediaRule.cssText)
  346. hasDarkRules = true
  347. }
  348. }
  349. if (hasDarkRules) {
  350. loadThemeForm('#theme-selector')
  351. }
  352. })
  353. </script>
  354. </body>
  355. </html>