A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 21KB

  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>
  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>Computers as I used to love them (archive) — David Larlet</title>
  13. <!-- That good ol' feed, subscribe :). -->
  14. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  15. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  16. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  17. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  18. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  19. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  20. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  21. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  22. <meta name="msapplication-TileColor" content="#f0f0ea">
  23. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- Documented, feel free to shoot an email. -->
  26. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  27. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  28. <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>
  29. <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>
  30. <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>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <script type="text/javascript">
  35. function toggleTheme(themeName) {
  36. document.documentElement.classList.toggle(
  37. 'forced-dark',
  38. themeName === 'dark'
  39. )
  40. document.documentElement.classList.toggle(
  41. 'forced-light',
  42. themeName === 'light'
  43. )
  44. }
  45. const selectedTheme = localStorage.getItem('theme')
  46. if (selectedTheme !== 'undefined') {
  47. toggleTheme(selectedTheme)
  48. }
  49. </script>
  50. <meta name="robots" content="noindex, nofollow">
  51. <meta content="origin-when-cross-origin" name="referrer">
  52. <!-- Canonical URL for SEO purposes -->
  53. <link rel="canonical" href="https://tonsky.me/blog/syncthing/">
  54. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  55. <article>
  56. <h1>Computers as I used to love them</h1>
  57. <nav>
  58. <p class="center">
  59. <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  60. </p>
  61. </nav>
  62. <hr>
  63. <h2><a href="https://tonsky.me/blog/syncthing/">Source originale du contenu</a></h2>
  64. <p>I’ve been struggling with file sync solutions <a href="https://tonsky.livejournal.com/323469.html">for years</a>. In the beginning, Dropbox was great, but in the last few years, they started to bloat up. I moved to iCloud, but it was even worse. Finally, a few days ago, after iCloud <a href="https://twitter.com/nikitonsky/status/1269741673715810304">cryptically broke again</a>, I decided it’s time to try something different.</p>
  65. <p>I tried <a href="https://syncthing.net/">Syncthing</a>, a free and open-source alternative. And you know what? It’s been liberating. The sanity, the simplicity, the reliability, the features. It brings the joy of use and makes you believe <a href="https://tonsky.me/blog/good-times-weak-men/">the collapse of civilization</a> can be slowed down a bit.</p>
  66. <p><em>Syncthing is everything I used to love about computers.</em></p>
  67. <p>It’s amazing how great computer products can be when they don’t need to deal with corporate bullshit, don’t have to promote a brand or to sell its users. Frankly, I almost ceased to believe it’s still possible. But it is.</p>
  68. <h1 id="installation">Installation</h1>
  69. <p>You download a single binary executable. You run it. There’s no step three.</p>
  70. <figure>
  71. <img src="https://tonsky.me/blog/syncthing/cli.png" />
  72. </figure>
  73. <p>No, seriously. It’s so simple I thought I missed something. But no. After you run that binary, you have a fully operational node of Syncthing. It’s ready to sync with any other Syncthing node, no other setup necessary. There’s no installers, no package management (but there are packages if you want to), no registration, no email, no logins, no password creation, no 2FA, no consents, no user agreements. Just download and run. Heck, setting up autostart on Linux server was more complex than just running the app itself!</p>
  74. <p>Homebrew makes it even simpler:</p>
  75. <figure>
  76. <img src="https://tonsky.me/blog/syncthing/homebrew.png" />
  77. </figure>
  78. <p>Just to give you the perspective, these are all the steps that Dropbox puts you through when you install it on a new computer:</p>
  79. <figure>
  80. <img src="https://tonsky.me/blog/syncthing/dropbox_1.png" />
  81. </figure>
  82. <figure>
  83. <img src="https://tonsky.me/blog/syncthing/dropbox_2.png" />
  84. </figure>
  85. <figure>
  86. <img src="https://tonsky.me/blog/syncthing/dropbox_3.png" />
  87. </figure>
  88. <figure>
  89. <img src="https://tonsky.me/blog/syncthing/dropbox_4.png" />
  90. </figure>
  91. <figure>
  92. <img src="https://tonsky.me/blog/syncthing/dropbox_5.png" />
  93. </figure>
  94. <figure>
  95. <img src="https://tonsky.me/blog/syncthing/dropbox_6.png" />
  96. </figure>
  97. <figure>
  98. <img src="https://tonsky.me/blog/syncthing/dropbox_7.png" />
  99. </figure>
  100. <figure>
  101. <img src="https://tonsky.me/blog/syncthing/dropbox_8.png" />
  102. </figure>
  103. <figure>
  104. <img src="https://tonsky.me/blog/syncthing/dropbox_9.png" />
  105. </figure>
  106. <figure>
  107. <img src="https://tonsky.me/blog/syncthing/dropbox_10.png" />
  108. </figure>
  109. <figure>
  110. <img src="https://tonsky.me/blog/syncthing/dropbox_11.png" />
  111. </figure>
  112. <p>Aaaaand… that’s not all! You also get this annoying notificaiton to deal with:</p>
  113. <figure>
  114. <img src="https://tonsky.me/blog/syncthing/dropbox_12.png" />
  115. </figure>
  116. <p>Only at this point can you start using Dropbox. Luckily, I already had an account, otherwise, it would be 5 more steps. Ridiculous!</p>
  117. <p>(It goes without saying, that all of these are different windows. It does not happen in a single predictable area, mind you. You have to chase every one of them. And the “Set Up Dropbox” window is always-on-top, so it hides other required steps, which also adds to the fun.)</p>
  118. <h1 id="no-artificial-limits">No artificial limits</h1>
  119. <p>Because Synthing is free and doesn’t depend on server-side storage, they don’t need to put weird or unnatural restrictions on you. You can use as much space as you have on disk. You can sync as many folders as you want. You can sync any folder, no matter where it’s located. You can sync with anyone in the world. In fact, you can sync any folder with any number of people. At no point have you to wonder “but will it work with my plan”? If your hardware allows it, it will work. As simple as that.</p>
  120. <p>Folders are the most vivid example of how other cloud storages constantly fuck up the simplest things. Syncthing can sync any folder on your drive, located anywhere. You can sync existing folders. You can sync multiple different folders. <em>Folders are just folders</em>, nothing special about them. Here I’m syncing “system” folders: <code class="language-plaintext highlighter-rouge">~/Desktop</code> and <code class="language-plaintext highlighter-rouge">~/Library/Fonts</code>, and three custom ones. No sweat:</p>
  121. <figure>
  122. <img src="https://tonsky.me/blog/syncthing/folders.png" />
  123. </figure>
  124. <p>This simplicity lets you use it as a tool you can apply, sometimes creatively, to your task, not as a service you have to put up with. For example, by syncing <code class="language-plaintext highlighter-rouge">~/Library/Fonts</code>, if I install a font on one machine, it automatically installs everywhere.</p>
  125. <p>Contrast this with Dropbox, which requires you to put everything inside <code class="language-plaintext highlighter-rouge">~/Dropbox</code> folder. If you keep your projects under <code class="language-plaintext highlighter-rouge">~/work</code> and want to sync it, well, tough luck. You can’t sync multiple folders either. Well, technically Dropbox can sync anything, of course. Files are files. But branding dictates there MUST be a Dropbox folder somewhere, even if it’s inconvenient for the user.</p>
  126. <figure>
  127. <img src="https://tonsky.me/blog/syncthing/dropbox_folder.png" />
  128. Sweet, sweet branding...
  129. </figure>
  130. <p>But the worst offender is the iCloud. Same as Dropbox, it also requires you to put all your stuff into a folder. But that folder is called <code class="language-plaintext highlighter-rouge">~/Library/Mobile Documents/com~apple~CloudDocs</code>!!!</p>
  131. <p>If you are a programmer, it’s unusable. First, you can’t in your right mind type THAT every time you need to <code class="language-plaintext highlighter-rouge">cd</code>. Second, it contains spaces! Which breaks all sorts of things, believe me or not, even in 2020. I can’t keep Fira Code in iCloud because of python scripts, I can’t keep Jekyll blog like this one there because of Ruby, I can’t run bazel, etc. Useless.</p>
  132. <figure>
  133. <img src="https://tonsky.me/blog/syncthing/jekyll.png" />
  134. </figure>
  135. <p>And if you think symlinking it to <code class="language-plaintext highlighter-rouge">~/icloud</code> helps, believe me, it does not.</p>
  136. <figure>
  137. <img src="https://tonsky.me/blog/syncthing/absolute_path.png" />
  138. </figure>
  139. <h1 id="no-registration">No registration</h1>
  140. <p>How do you connect two devices, if there’s no registration, accounts, email, etc? Simple! Each device has a unique id, generated automatically when you first run the program. Share this id with another device, let them share their, and you are good to go.</p>
  141. <figure>
  142. <img src="https://tonsky.me/blog/syncthing/id.png" />
  143. </figure>
  144. <p>Best news? Those ids are not even secret. They are more like public keys, so you can exchange them freely. But the scheme only works if both devices know ids of each other.</p>
  145. <p>What I like about this scheme is how beautifully simple and down-to-absolute-essentials it is. This is pure mathematics. But it’s also very convenient to use. There’re no emails, no forms, no unresponsive web pages, no invites, no expiring tokens, no failing/outdated/overloaded APIs, no password management, nothing to hold onto or “manage”.</p>
  146. <h1 id="power-mode">Power mode</h1>
  147. <p>There’s power user mode! If you don’t care, there’s always a UI, and most of the things you can configure there. But if you’re a programmer and need more, you can:</p>
  148. <ul>
  149. <li>Install Synthing on a headless Linux server,</li>
  150. <li>Control it by editing XML config,</li>
  151. <li>Control it via REST API,</li>
  152. <li>Configure folder ignores via regular expressions.</li>
  153. </ul>
  154. <p>All APIs and configs are well-documented:</p>
  155. <figure>
  156. <img src="https://tonsky.me/blog/syncthing/api.png" />
  157. </figure>
  158. <p>For example, this is my <code class="language-plaintext highlighter-rouge">.stignore</code> for workspace folder:</p>
  159. <figure>
  160. <img src="https://tonsky.me/blog/syncthing/stignore.png" />
  161. </figure>
  162. <p>Configure it once and forget about generated classes, vendored dependencies and other caches syncing unnecessary forever.</p>
  163. <p>In contrast, iCloud has a feature to exclude <code class="language-plaintext highlighter-rouge">*.nosync</code> files from syncing, but you know what? I usually don’t have files called <code class="language-plaintext highlighter-rouge">*.nosync</code>, that’s the problem:</p>
  164. <figure>
  165. <img src="https://tonsky.me/blog/syncthing/icloud_exclude.png" />
  166. </figure>
  167. <p>And Dropbox? Well… I still have nightmares about this Dropbox UI:</p>
  168. <figure>
  169. <img src="https://tonsky.me/blog/syncthing/dropbox_folders.png" />
  170. </figure>
  171. <p>It’s kind of funny, how commercial apps have feature bloat but don’t have power mode. You can do more different things, but can’t configure them to your liking.</p>
  172. <h1 id="no-upsell">No upsell</h1>
  173. <p>Commercial solutions are interested in keeping users locked in and constantly upselling more features to them. As a result of that, you get notifications, features, popups. For example, on this screenshot, after I <em>just</em> installed Dropbox on a fresh machine:</p>
  174. <figure>
  175. <img src="https://tonsky.me/blog/syncthing/dropbox_12.png" />
  176. </figure>
  177. <p>Top to bottom:</p>
  178. <ul>
  179. <li>I already have an annoying red dot in the menubar,</li>
  180. <li>Link to another product (Paper), even though it has nothing to do with file synchronization,</li>
  181. <li>A firm suggestion I should enable notifications,</li>
  182. <li>A notification that says my Desktop app is ready for use?! I mean, I’m looking at it from the desktop app!</li>
  183. <li>Dropbox advertising some sort of trial,</li>
  184. <li>Dropbox selling me more space (even though it was 2 years ago and I have &gt;50% free),</li>
  185. <li>Large “Upgrade” button,</li>
  186. </ul>
  187. <p>In the mystic “For you” tab:</p>
  188. <figure>
  189. <img src="https://tonsky.me/blog/syncthing/dropbox_for_you.png" />
  190. </figure>
  191. <p>we see:</p>
  192. <ul>
  193. <li>Starred items? What is it, a high-school notepad? If I really wanted, I could tag files in the OS, but thank you.</li>
  194. <li>Calendar sync? Why on Earth would FILE SYNCHRONIZATION application wants to access my calendar?</li>
  195. </ul>
  196. <p>Wait, there’s more:</p>
  197. <figure>
  198. <img src="https://tonsky.me/blog/syncthing/dropbox_settings.png" />
  199. </figure>
  200. <p>More “features”:</p>
  201. <ul>
  202. <li>Desktop sync,</li>
  203. <li>Photos sync,</li>
  204. <li>Screenshots sync.</li>
  205. </ul>
  206. <p>These are at least file-like? I don’t understand why they have to be “special features”, though, if you already have an app whose primary task is to sync files. It already does that. Why are some files more special than others?</p>
  207. <p>The answer is simple: the only way Dropbox can survive is by building and selling more features. You’ll never have peace of mind with them.</p>
  208. <p>iCloud is much younger and doesn’t have feature bloat yet, but they are still interested in selling more Macs and iPhones. So they will always try to isolate you from the rest of the world. Expect weird restrictions and great inconveniences, like iCloud folder location or moving Desktop folder when you enable/disable sync for it.</p>
  209. <p>Syncthing survival, on the other hand, does not depend on making more features. They do one thing, but they do it well. Look, their menu<a id="f1" href="#fn1" class="footnote">1</a> looks exactly how Dropbox used to look when it still was good in 2012:</p>
  210. <figure>
  211. <img src="https://tonsky.me/blog/syncthing/menubar.png" />
  212. </figure>
  213. <h1 id="no-lock-in">No lock-in</h1>
  214. <p>Another ugly thing both iCloud and Dropbox routinely do is trying to scare you from walking away. Those appear every time you move more than one file outside of iCloud folder:</p>
  215. <figure>
  216. <img src="https://tonsky.me/blog/syncthing/icloud_scare_1.png" />
  217. </figure>
  218. <figure>
  219. <img src="https://tonsky.me/blog/syncthing/icloud_scare_2.png" />
  220. </figure>
  221. <p>And those are Dropbox versions:</p>
  222. <figure>
  223. <img src="https://tonsky.me/blog/syncthing/dropbox_scare_1.png" />
  224. </figure>
  225. <figure>
  226. <img src="https://tonsky.me/blog/syncthing/dropbox_scare_2.png" />
  227. </figure>
  228. <p>It might seem like they try to explain something, but they do not. They are scared you might be leaving and try to scare you back. The tactic is simple: question your every action, even trivial operations like moving or deleting files, display huge warning signs even for safe operations, long puzzling wording (“<a href="https://grumpy.website/post/0Ts_fkPQb">documents stored in iCloud will be removed from Mac</a>”) so that you never sure what will happen. That’s some shady shit.</p>
  229. <figure>
  230. <img src="https://tonsky.me/blog/syncthing/scared.png" />
  231. </figure>
  232. <p>Syncthing, on the other hand, simply doesn’t care. They don’t get any money from you, so they are not interested in creating a need or constantly reminding about themselves. If you are looking for peace of mind, you can’t have it with commercial offerings.</p>
  233. <h1 id="conclusion">Conclusion</h1>
  234. <p>Syncthing has reminded me how great computers can be if they are not made by corporations. It’s simple, predictable, sane, acts no-nonsense. You can configure it however you like and it always keeps you in control. It’s a pure function and it’s good at that. It’s free and open-source, but I’m much more happy to donate them €10/month than e.g. Dropbox. I would be a much happier person if at least half of the programs on my Mac/iPhone were like that.</p>
  235. </article>
  236. <hr>
  237. <footer>
  238. <p>
  239. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  240. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  241. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  242. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  243. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  244. </p>
  245. <template id="theme-selector">
  246. <form>
  247. <fieldset>
  248. <legend>Thème</legend>
  249. <label>
  250. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  251. </label>
  252. <label>
  253. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  254. </label>
  255. <label>
  256. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  257. </label>
  258. </fieldset>
  259. </form>
  260. </template>
  261. </footer>
  262. <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
  263. <script type="text/javascript">
  264. function loadThemeForm(templateName) {
  265. const themeSelectorTemplate = document.querySelector(templateName)
  266. const form = themeSelectorTemplate.content.firstElementChild
  267. themeSelectorTemplate.replaceWith(form)
  268. form.addEventListener('change', (e) => {
  269. const chosenColorScheme = e.target.value
  270. localStorage.setItem('theme', chosenColorScheme)
  271. toggleTheme(chosenColorScheme)
  272. })
  273. const selectedTheme = localStorage.getItem('theme')
  274. if (selectedTheme !== 'undefined') {
  275. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  276. toggleTheme(selectedTheme)
  277. }
  278. }
  279. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  280. window.addEventListener('load', () => {
  281. let hasDarkRules = false
  282. for (const styleSheet of Array.from(document.styleSheets)) {
  283. let mediaRules = []
  284. for (const cssRule of styleSheet.cssRules) {
  285. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  286. continue
  287. }
  288. // WARNING: Safari does not have/supports `conditionText`.
  289. if (cssRule.conditionText) {
  290. if (cssRule.conditionText !== prefersColorSchemeDark) {
  291. continue
  292. }
  293. } else {
  294. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  295. continue
  296. }
  297. }
  298. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  299. }
  300. // WARNING: do not try to insert a Rule to a styleSheet you are
  301. // currently iterating on, otherwise the browser will be stuck
  302. // in a infinite loop…
  303. for (const mediaRule of mediaRules) {
  304. styleSheet.insertRule(mediaRule.cssText)
  305. hasDarkRules = true
  306. }
  307. }
  308. if (hasDarkRules) {
  309. loadThemeForm('#theme-selector')
  310. }
  311. })
  312. </script>
  313. </body>
  314. </html>