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

hace 4 años
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573
  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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Everything is Amazing, But Nothing is Ours (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="https://alexdanco.com/2019/10/26/everything-is-amazing-but-nothing-is-ours/">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Everything is Amazing, But Nothing is Ours (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="https://alexdanco.com/2019/10/26/everything-is-amazing-but-nothing-is-ours/">Source originale du contenu</a></h3>
  445. <p>Back in 2015, I wrote a blog post called <a href="https://alexdanco.com/2015/08/24/dropbox-the-first-dead-decacorn/">Dropbox: the First Dead Decacorn</a>. At the time, it was the most widely shared take I’d ever written. I learned several things from writing this piece, and none of them had to do with Dropbox: I learned, for instance, that a great way to get people to click on your blog post is to make them mad. I also learned about a company called Social Capital, after my soon-to-be-colleague Ray reached out to me about what I’d written. I’m certainly thankful I wrote it.  </p>
  446. <p>Today, Dropbox is not dead. I’m glad! I certainly never <em>wanted</em> the business to do poorly. I used it all the time back then, continue to have friends who work there, and generally would rather not cheer for companies to fail; that’s not a great look. But I think it’s fair to say that the take didn’t turn out to be egregiously wrong. (Dropbox had last raised at a $10 billion valuation the year before, and currently trade at an 8 billion dollar market cap. So over the last five years that’s a -4% annual return, compared to the S&amp;P at around 10%. Not dead, but hardly what I think most people pictured the next 5 years to be like.) </p>
  447. <p>Relatedly, I do believe that the main idea in the blog post turned out to be correct. Dropbox was the ultimate file product. But it also hit right at Peak Files. Files aren’t the focus going forward. At the time, I wrote: </p>
  448. <p><em>“Files are discrete objects that exist in a physical place; the internet is pretty much the opposite of that. … Dropbox might be the pinnacle of file management, but Slack is the beginning of what comes next. I don’t think files are going to completely disappear; not anytime soon, anyway. They’ll certainly still exist as data structures, deep inside our servers and our phones, for a very long time – and yet most people will be indifferent to their existence.” </em></p>
  449. <figure class="wp-block-image size-large"><img data-attachment-id="1035" data-permalink="https://alexdanco.com/dropbox/" data-orig-file="https://alexdanco.files.wordpress.com/2019/10/dropbox.jpg" data-orig-size="856,442" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;2.4&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;Nexus 5&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1440440340&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;3.97&quot;,&quot;iso&quot;:&quot;529&quot;,&quot;shutter_speed&quot;:&quot;0.04407099952757&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="dropbox" data-image-description="" data-medium-file="https://alexdanco.files.wordpress.com/2019/10/dropbox.jpg?w=300" data-large-file="https://alexdanco.files.wordpress.com/2019/10/dropbox.jpg?w=700" src="https://alexdanco.files.wordpress.com/2019/10/dropbox.jpg?w=856" alt="" class="wp-image-1035" srcset="https://alexdanco.files.wordpress.com/2019/10/dropbox.jpg 856w, https://alexdanco.files.wordpress.com/2019/10/dropbox.jpg?w=150 150w, https://alexdanco.files.wordpress.com/2019/10/dropbox.jpg?w=300 300w, https://alexdanco.files.wordpress.com/2019/10/dropbox.jpg?w=768 768w" sizes="(max-width: 856px) 100vw, 856px"/></figure>
  450. <p>I got to thinking about all this the other week after hearing news that <a href="https://www.vice.com/en_us/article/8xwe9p/yahoo-groups-is-winding-down-and-all-content-will-be-permanently-removed">Yahoo Groups was shutting down</a>, and wiping out two decades of content – sending online communities and archivists into a scramble to preserve their spaces and history before it all disappears. It’s a huge bummer, for sure; and also a reminder of a hidden price we pay for modern technology. Everything is amazing, but nothing is ours.  </p>
  451. <p>Up until the mid 2000s or so, it felt like the collective goal of software and the internet was to create digital versions of all the stuff that worked well in real life – documents became Word, slides became Powerpoint, and mail became email. It’s also why files are called files, and why we got rid of them by dragging them into the trash can. Software was pretty <a href="https://www.interaction-design.org/literature/topics/skeuomorphism">skeuomorphic</a> in design and in function. The file as an atomic unit for productivity made sense. It’s a solid, distinct object you could understand, and that was yours. You had to take care of it, name it properly, and save it in the right place, just like a paper file.  </p>
  452. <p>But for the last ten years, we’ve been undoing all of that. The constraints of mobile, plus a new generation of users that’ve never really known life without the internet, meant the benefits of skeuomorphism were no longer worth the cost. Ditching it as a philosophy, both in design and in function, freed us to go out and reinvent everything as a <em>service.</em> Abstract everything away into databases, links and logic, and provide it as a consumer service with all the topology and complexity hidden out of sight.  </p>
  453. <p>We love services. Services free us to be pure consumers, seeking <a href="https://medium.com/social-capital/understanding-abundance-part-1-its-caused-by-consumers-db7abb984e2e">exactly what we want</a> for as little friction and overhead as possible. So long as everything works, trading ownership for access is an attractive deal: everything under the hood just gets magic-ed away, and provided for us as a service. No files, no updates, no maintenance; <a href="https://alexdanco.com/2015/02/02/the-rise-of-the-access-economy/%0A">just access</a>. </p>
  454. <p>This isn’t just a software thing, by the way. New technology generally reorganizes our consumption away from ownership and towards access. 100 years ago, music came from a piano, then it came from the record store, and now it comes from Spotify. 100 years ago, food came from a farm, then it came for a grocery store, and now it comes from DoorDash. There’s no denying that this is forward progress for the consumer. You would not want to go backwards. But there’s a cost. The more you can access, the less it’s yours.  </p>
  455. <p>I joke sometimes that my generation’s version of “Sorry I’m late, the car broke down” is “Sorry I’m late, the car got lost.” It makes me laugh because cars are obviously better than they used to be: they don’t break down like they used to, they’re safer, and best of all, you don’t even have to drive it anymore. You just push the Uber button and somebody comes and picks you up. But it’s also not funny, because we’ve all experienced the particularly modern frustration of seeing the Uber drive in the opposite direction, spin around 4 times, then cancel. Access <em>feels</em> like the real thing, until it’s taken away from you.  </p>
  456. <p>Look, all technology breaks sometimes. I’m not saying that new is bad because it’s buggy; I promise you, the old stuff broke too. You probably do not want to go back. But there’s a difference between “the car broke down” and “the car got lost”. One is a fragility of <em>things</em>: if you drive a car, you need to take responsibility for keeping it in good shape. It’s a scarcity problem. But the latter feels more like an abundance problem: it’s fragility of <em>something,</em> I just couldn’t put my finger on what. </p>
  457. <p>Right as I was thinking about all of this, I came across this fabulous post by Simon Pitt from a couple weeks ago that had the answer. </p>
  458. <p><a href="https://onezero.medium.com/the-death-of-the-computer-file-doc-43cb028c0506">Computer files are going extinct | Simon Pitt</a></p>
  459. <p>The whole post is good, but one thing he wrote hit me as a perfect gem of an idea, not just about files and software systems but about technology in general:  </p>
  460. <p><em>“The other day, I came across a website I’d written over two decades ago. I double-clicked the file, and it opened and ran perfectly. Then I tried to run a website I’d written 18 months ago and found I couldn’t run it without firing up a web server, and when I ran NPM install, one or two of those 65,000 files had issues that meant node failed to install them and the website didn’t run. When I did get it working, it needed a database. And then it relied on some third-party APIs and there was an issue with CORS because I hadn’t whitelisted localhost.</em></p>
  461. <p><em>My website made of files carried on, chugging along. This isn’t me saying that things were better in the old days. I’m just saying that<strong>years ago websites were made of files; now they are made of dependencies</strong>.”</em></p>
  462. <p>The last line really hit a chord with me: that’s exactly it. Worlds of scarcity are made out of things. Worlds of abundance are made out of dependencies. That’s the software playbook: find a system made of costly, redundant objects; and rearrange it into a fast, frictionless system made of logical dependencies. The delta in performance is irresistible, and dependencies are a compelling building block: they seem like just a piece of logic, with no cost and no friction. But they absolutely have a cost: the cost is complexity, outsourced agency, and brittleness. The cost of ownership is up front and visible; the cost of access is back-dated and hidden. </p>
  463. <p>Files feel like a good bellwether for what’s happening. We’re in this funny in-between time right now where our phones are fully in the future: apps are services kind of by definition, and it’s <em>really</em> hard to access the file system. But our computers are still kind of in the past: to me, at least, the two most important navigational anchors on my computer are the desktop and the downloads folder.  </p>
  464. <p>One of the funny outcomes of this half-mobile half-desktop world is where our de facto file system remerged. In absence of a coherent, logical file system across these two worlds, we trampled down a <a href="https://en.wikipedia.org/wiki/Desire_path">desire path</a> and made our own: our email inboxes. I (and many of you, I’m sure) use my email inbox the way we’re all supposed to use Dropbox: it’s a ubiquitous, universally understood way to move stuff around, store and retrieve it. Gmail is the new Finder.  </p>
  465. <p>Email as a file system is inefficient, terribly designed, and full of friction. Repeatedly emailing yourself copy-and pasted information and attachments called presentation_final, presentation_final2 and presentation_final_final is nobody’s idea of a good time. But you know why it works? Dependency minimization. It’s air gapped from the rest of your work: no software update or edge case is going to screw things up so badly that it goes into your inbox and deletes your emails. You can always get to your email, and that attachment will always be there. It’s a universally adopted format. Most importantly, your inbox is <em>yours</em>.  </p>
  466. <p>I think there’s a really strong, counter-trend bet to be made here over the next few tech generations. If the world is going to get reorganized into services and dependencies, so be it; but find what’s air gapped, and find what’s ours. People are smart enough to tell what’s solid and what isn’t. Product teams who go out of their way to give us real, tangible objects we feel that we can own will find a great deal of success.  </p>
  467. <p>One example of a software company doing the right thing today is Figma. They’ve built an incredible user experience for multiplayer design software – a domain that’s been fully SaaSed – by taking <em>out</em> the excessive, “everything must be live access” type of dependencies <a href="https://www.figma.com/blog/how-figmas-multiplayer-technology-works/">in favour of simpler, stabler architecture</a> that works fabulously and feels solid, like something you can trust. Meanwhile, the Bitcoin ecosystem is having a real effect on how people think about ownership versus access, as people learn about how to store and manage their private keys, and by extension, come to realize everything that access isn’t.  </p>
  468. <p>I’m fully confident that we’ll continue to invent great software that reimagines how the world can work. But I’d love to see more teams embrace the idea that less friction isn’t always best. If the current trend of technology is sweeping us in a direction of “everything is amazing, but nothing is ours”, <em>Technology that’s Actually Yours</em> could be the next great counter-trend.  </p>
  469. </article>
  470. </section>
  471. <nav id="jumpto">
  472. <p>
  473. <a href="/david/blog/">Accueil du blog</a> |
  474. <a href="https://alexdanco.com/2019/10/26/everything-is-amazing-but-nothing-is-ours/">Source originale</a> |
  475. <a href="/david/stream/2019/">Accueil du flux</a>
  476. </p>
  477. </nav>
  478. <footer>
  479. <div>
  480. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  481. <p>
  482. Bonjour/Hi!
  483. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  484. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  485. </p>
  486. <p>
  487. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  488. </p>
  489. <p>
  490. Voici quelques articles choisis :
  491. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  492. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  493. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  494. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  495. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  496. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  497. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  498. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  499. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  500. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  501. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  502. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  503. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  504. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  505. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  506. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  507. </p>
  508. <p>
  509. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  510. </p>
  511. <p>
  512. Je ne traque pas ta navigation mais mon
  513. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  514. conserve des logs d’accès.
  515. </p>
  516. </div>
  517. </footer>
  518. <script type="text/javascript">
  519. ;(_ => {
  520. const jumper = document.getElementById('jumper')
  521. jumper.addEventListener('click', e => {
  522. e.preventDefault()
  523. const anchor = e.target.getAttribute('href')
  524. const targetEl = document.getElementById(anchor.substring(1))
  525. targetEl.scrollIntoView({behavior: 'smooth'})
  526. })
  527. })()
  528. </script>