davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Computer Files Are Going Extinct (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://onezero.medium.com/the-death-of-the-computer-file-doc-43cb028c0506">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Computer Files Are Going Extinct (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://onezero.medium.com/the-death-of-the-computer-file-doc-43cb028c0506">Source originale du contenu</a></h3>
    <div class="ac ae af ag ah dy aj ak"><div><p id="2221" class="dz ea eb at ec b ed ee ef eg eh ei ej">
<h1 class="ec b ed ek eb">Computer Files Are Going Extinct</h1></p></div><p id="3a47" class="el ea ax at as cu em en eo ep eq er es"><h2 class="as cu et eu ax">Technology services are changing our internet habits</h2></p><figure class="fx fy fz ga gb gc dk dl paragraph-image"><figcaption class="ax fc gt gu gv dm dk dl gw gx as cu">Illustration courtesy of the author.</figcaption></figure><p id="25e9" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl hm"><span class="r hn hw hq gf hx"><img alt="I" class="hy hz ia ib ic id do t u gj ak" src="https://miro.medium.com/max/158/1*KYNZF66HmLAEn72myJ88JA.png"/><span class="r hn ho hp hq hr hs ht hu hv gf gh">I</span></span> love files. I love renaming them, moving them, sorting them, changing how they’re displayed in a folder, backing them up, uploading them to the internet, restoring them, copying them, and hey, even defragging them. As a metaphor for a way of storing a piece of information, I think they’re great. I like the file as a unit of work. If I need to write an article, it goes in a file. If I need to produce an image, it’s in a file.</p>
<h1 id="2f2e" class="ie if eb at as ig ih ii ij ik il im in io ip iq ir">An ode to files.doc</h1><p id="1ee4" class="gy gz eb at ha b hb is hd it hf iu hh iv hj iw hl">Files are skeuomorphic. That’s a fancy word that just means they’re a digital concept that mirrors a physical item. A Word document, for example, is like a piece of paper, sitting on your desk(top). A JPEG is like a painting, and so on. They each have a little icon that looks like the physical thing they represent. A pile of paper, a picture frame, a manila folder. It’s kind of charming really.</p><p id="7c3b" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">One thing I like about files is there’s a consistent way of interacting with them, no matter what’s inside. Those things I mentioned above — copying, sorting, defragging — I can do those to any file. It could be an image, part of a game, or a list of my favorite utensils. Defragmenter doesn’t care. It doesn’t judge the contents.</p><p id="a89d" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">I’ve had a love of files since I first started creating them in Windows 95. But I’ve noticed we are starting to move away from the file as a fundamental unit of work.</p><figure class="fx fy fz ga gb gc dk dl paragraph-image"><figcaption class="ax fc gt gu gv dm dk dl gw gx as cu">Windows 95. Interesting fact: <a href="https://www.extremetech.com/computing/294907-why-moving-the-mouse-in-windows-95-made-the-os-faster" class="cy by iz ja jb jc" target="_blank" rel="noopener nofollow">Wiggling the mouse</a> made it run faster. That’s unrelated to the rest of this article; I just think it’s interesting. Photo courtesy of the author.</figcaption></figure>
<h1 id="f732" class="ie if eb at as ig ih ii ij ik il im in io ip iq ir">The rise of the services.mp3</h1><p id="05ba" class="gy gz eb at ha b hb is hd it hf iu hh iv hj iw hl">As a teenager, I indulged in the digital equivalent of collecting and managing<em class="jd"> </em>vinyl: I collected MP3 files. So many 128 kbps MP3 files. If you were lucky enough to own a CD rewriter, you could burn them onto a CD and pass them around between friends. CDs could hold 700 MB. That’s the equivalent of nearly 500 floppy disks!</p><p id="0235" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">I’d go through my collection and painstakingly add IDv1 and IDv2 music tags. As time went on, people started to develop tools that would fetch the track listings automatically from the cloud, so you could check and validate the quality of your MP3s. Sometimes I’d even listen to the damn things, though I suspect the time spent organizing and validating them vastly outweighed the time spent listening.</p><figure class="fx fy fz ga gb gc dk dl paragraph-image"><figcaption class="ax fc gt gu gv dm dk dl gw gx as cu">An app called The Godfather. So many fields and options. Isn’t it great? Photo courtesy of the author.</figcaption></figure><p id="369c" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">Then, about 10 years ago, everyone started to use <a class="cy by iz ja jb jc" target="_blank" rel="noopener" href="/how-spotifys-algorithm-knows-exactly-what-you-want-to-listen-to-4b6991462c5c">this green Swedish company</a>. With its app or from the website, you could just stream whatever you wanted, whenever you wanted. Well, I thought, that’s all very well. But what’s the quality like? Is it better than my 128 kbps MP3s?</p><p id="124c" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">Yes, it turned out. Yes, it was.</p><p id="c1b7" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">Along the way, 128 kbps, which we had been told was “indistinguishable” from the massive WAV files that come on CDs, had become rubbish. Now MP3s came at 320 kbps. On message boards people performed spectral analysis on the files, producing bright green- and blue-colored charts to “prove” the files sounded good.</p><p id="0a54" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">It was about this time that gold-plated SCART Monster cables were a thing.</p><figure class="fx fy fz ga gb gc dk dl paragraph-image"><figcaption class="ax fc gt gu gv dm dk dl gw gx as cu">And now, after looking at these images, the audio will sound better. Photo courtesy of the author.</figcaption></figure><p id="3eec" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">The quality of files on streaming services was good enough, available on more devices, and gave you access to all recorded music, not just the MP3s you happened to have on your computer. You didn’t need a carefully crafted collection of files on your hard drive anymore. You just needed a username and password to Spotify.</p><p id="ceb9" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">Well, I thought, that’s nice, but I’ve also got these massive video files I’ve ripped from DVDs. The internet is way<em class="jd"> </em>too slow for me to stream video like that.</p>
<h1 id="d8e7" class="ie if eb at as ig ih ii ij ik il im in io ip iq ir">Burying the files.png</h1><p id="17b6" class="gy gz eb at ha b hb is hd it hf iu hh iv hj iw hl">I used to have a Sony Ericsson phone with the catchy name of k610i. It was red and I loved it. I could connect it to my computer and copy files to it. It didn’t have a headphone port, so I had to use an adapter or the special headphones that came with it. In many ways, it was ahead of its time.</p><figure class="fx fy fz ga gb gc dk dl paragraph-image"><figcaption class="ax fc gt gu gv dm dk dl gw gx as cu">It’s strange how pictures of old technology can trigger such memories for some people and look laughably quaint to others. Photo courtesy of the author.</figcaption></figure><p id="a939" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">Later, when I had more money and the technology had moved on, I got an iPhone. Obviously, they are lovely. Everyone knows that. The brushed aluminum — black, so black, blacker than darkness itself — and medical-grade glass are near-perfect items brought down from the gods themselves.</p><p id="e1b3" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">But Apple doesn’t make it that easy to get to your files. Images are dumped into a big stream, sorted by date. Audio is somewhere in iTunes. Notes are… in a list? Apps are scattered around the desktop. Some of my files are in iCloud. You can email photos to liberate them from the iPhone, and through a convoluted method via iTunes, you can access some files within certain apps. But those files are transitory — cached, and may be deleted without warning. These aren’t like the carefully crafted files and folders on my computer.</p><blockquote class="jj"><div id="7b1f" class="jk jl jm at ec b et jn jo jp jq jr hl"><p class="ec b js jt ax">I just want my file browser back.</p></div></blockquote><p id="bad9" class="gy gz eb at ha b hb ju hd jv hf jw hh jx hj jy hl">On the Mac, iTunes sorts out your music files for you. They’re handled by the system. The interface displays the music to you and you can sort the files there. But if you look under the hood, at the files themselves, you see a rabbit warren of mess, weird names, and strange folders. “Don’t bother yourself with these,” the computer says, “I’ll handle this for you.” But I do bother myself with them.</p><p id="a783" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">I like being able to look at and access my files. But now the systems I use try to stop me from doing so. “No,” they say, “access them through these bespoke, proprietary interfaces.” I just want my file browser back, but now I’m not allowed it. It’s a relic of an earlier era.</p><p id="d96a" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">Yet I can’t help missing those files and folders and the control I had with them.</p><figure class="fx fy fz ga gb gc dk dl paragraph-image"><figcaption class="ax fc gt gu gv dm dk dl gw gx as cu">Windows 10. You can still play with files, even though I sometimes feel like it looks down on me when I do. Photo courtesy of the author.</figcaption></figure>
<h1 id="b7e2" class="ie if eb at as ig ih ii ij ik il im in io ip iq ir">Caching and dependencies.tmp</h1><p id="58ce" class="gy gz eb at ha b hb is hd it hf iu hh iv hj iw hl">I started building websites in the days when 1-pixel-by-1-pixel transparent GIFs were a thing and the proper way to make a two-column layout was to use a table. As time went on, best practices changed and I happily repeated the mantra that tables should only be used for tabular data and not for layout as I gradually struggled to convert my trivial layouts into CSS. At least it’s not a table, I said proudly as I looked upon my three-column layout that didn’t work properly in Firefox.</p><figure class="fx fy fz ga gb gc dk dl paragraph-image"><figcaption class="ax fc gt gu gv dm dk dl gw gx as cu">Just another file that I’ll be deleting and downloading hundreds of times. Photo: Markus Spiske/Unsplash</figcaption></figure><p id="c794" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">Now when I build websites, I run NPM install and download 65,000 dependencies that get dropped into a node_modules folder. So many files. I don’t care about them, though. I just delete the folder and run NPM install again when I need to. They’re nothing to me.</p><blockquote class="jj"><div id="4544" class="jk jl jm at ec b et jn jo jp jq jr hl"><p class="ec b js jt ax">Years ago websites were made of files; now they are made of dependencies.</p></div></blockquote><p id="11ab" class="gy gz eb at ha b hb ju hd jv hf jw hh jx hj jy hl">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.</p><p id="5b68" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">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 years ago websites were made of files; now they are made of dependencies.</p>
<h1 id="35d4" class="ie if eb at as ig ih ii ij ik il im in io ip iq ir">Everything’s a link.lnk</h1><p id="9017" class="gy gz eb at ha b hb is hd it hf iu hh iv hj iw hl">No files were harmed in the making of this article. I went to <em class="jd">Medium</em> and started typing. In the background my words were sent to a database.</p><p id="c25a" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">The unit of creation has moved from the file to the database entry.</p><p id="6550" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">In some ways, that doesn’t make a huge difference. The data is the same, just stored in a database rather than an HTML document. The URL could even be the same, just behind the scenes it fetches the content from a different type of data store. But the implications are much bigger. The content is dependent on a whole heap of infrastructure, rather than being able to stand on its own.</p><p id="ab74" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">This almost seems to reduce the value of any individual creative act. Rather than warranting their own file, they’re all just another line in a database table somewhere in the sky. My article, rather than being in its own file, standing on its own, is just a tiny cog in a machine.</p>
<h1 id="74e8" class="ie if eb at as ig ih ii ij ik il im in io ip iq ir">Copy.bat</h1><p id="0978" class="gy gz eb at ha b hb is hd it hf iu hh iv hj iw hl">Online services have started violating what I thought was a fundamental tenet of digital file manipulation. When I copy a file from one place to another, the file I get at the end is identical to the one I started with. These are digital representations of data that can be copied exactly, bit for bit.</p><figure class="fx fy fz ga gb gc dk dl paragraph-image"><figcaption class="ax fc gt gu gv dm dk dl gw gx as cu">A blank sheet of paper. 58 MB PNG, 15 MB JPEG, 4 MB WebM, 2 MB JPEG… Photo courtesy of the author.</figcaption></figure><p id="266d" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">Yet when I upload photos into Google Cloud then download them again, the file I end up with is different from the one I started with. It’s been transcoded, re-encoded, compressed, optimized. Messed with. The spectral analysts would be furious. It’s like a photocopy, where the pages get lighter and messier over time. I half expect one of Google’s A.I. fingers to appear in the corner of one of my photos.</p><p id="75bc" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">When I AirDrop a video, there’s a long initial process where the iPhone is doing something. What is my little supercomputer up to? I’m suspicious. “You’re transcoding, aren’t you?” I accuse it. It’s only later, when I eventually get the file somewhere I can use it, that I find it’s been pushed and pulled so many times it’s a husk of its former glory.</p><blockquote class="jj"><div id="13ec" class="jk jl jm at ec b et jn jo jp jq jr hl"><p class="ec b js jt ax">Why should the content that is the newest be the most important?</p></div></blockquote>
<h1 id="6c2d" class="ie if eb at as ig ih ii ij ik il im in io ip iq ir">No more definitive files.webm</h1><p id="5cf4" class="gy gz eb at ha b hb is hd it hf iu hh iv hj iw hl">Like most of us, I have a mess of online services, all increasingly mixed up between my work and personal life. Dropbox, Google Drive, Box, OneDrive, Slack, Google Docs, and so on. There are others. So many others. WeTransfer, there’s another one. Trello. Gmail. People at work send me a link to a Google Sheet, I open it, and now it’s saved in my personal Google Drive next to a photo of a cute chicken I shared with my mom and a document listing the different computer mice I was considering buying in 2011.</p><p id="c916" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">The default view in Google Docs is all files sorted by the order you most recently opened them. I can’t sort or organize them. They’re just there, ordered in a way that prioritizes the new over the important.</p><p id="c9a1" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">I don’t like this shift from timeless content to what is newest. Now, when I visit websites, they promote to me the latest thing. Why should the content that is the newest be the most important? It seems so unlikely that something that was just created would happen to be better than everything created throughout all time. What are the odds that every time I arrive at the site, the pinnacle of human achievement has just been breached? But we don’t seem to have a way of sorting by quality. Only by recency.</p><figure class="fx fy fz ga gb gc dk dl paragraph-image"><figcaption class="ax fc gt gu gv dm dk dl gw gx as cu">Library books — strangely, not sorted by most recently published. Photo: 🇸🇮 Janko Ferlič — @specialdaddy/Unsplash</figcaption></figure><p id="d627" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">All of these services, at least for me, are a mess. A dumping ground of odds and ends. Maybe this is how everyone else manages their files. Whenever I use anyone else’s computer, I’m always amazed by the mess of files they have all over the place. Unsorted, disorganized. How do they find anything?</p><p id="109e" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">These services have taken away the sense of a definitive<em class="jd"> </em>file. That file in Dropbox: Is it the latest version? Or is that just a copy of one that really lives on my computer? Or did someone email a newer version? Or put it into Slack? And in a weird way that devalues the content in the files. I don’t trust them anymore. If I look at a file in Dropbox, I think to myself, “Oh, there’s probably a newer version.”</p><p id="c519" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">Perhaps this is the archivist in me, but this process of creating files and flinging them into an unsorted pot and then searching or hoping that the newest one is the one we want gives me the collywobbles. It seems like a rejection of our past work, to just sling all the files into a heap, immediately devaluing them as soon as something newer comes along.</p><p id="3c4a" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">At work, I see colleagues creating files, emailing them, and not even bothering to save the attachments to their hard drive. Their inbox is their new file management system. “Have you got that spreadsheet?” they ask. Someone hunts through their inbox and forwards the person back the email they sent. Is this really how we manage data in the 21st century? It seems a strange backwards step.</p><figure class="fx fy fz ga gb gc dk dl paragraph-image"><figcaption class="ax fc gt gu gv dm dk dl gw gx as cu">Where the file things are. Photo: <a href="https://unsplash.com/@0asa?utm_source=medium&amp;utm_medium=referral" class="cy by iz ja jb jc" target="_blank" rel="noopener nofollow">Vincent Botta</a>/Unsplash</figcaption></figure><p id="c191" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">I miss files. I still create many of my own, but increasingly, that seems an anachronism, like using a quill rather than a pen. I miss the universality of files. The fact they can work anywhere, be moved around easily.</p><p id="a456" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">The file has been replaced with the platform, the service, the ecosystem. This is not to say that I’m proposing we lead an uprising against services. You can’t halt progress by clogging the internet pipes. I say this to mourn the loss of the innocence we had before capitalism inevitably invaded the internet. When we create now, our creations are part of an enormous system. Our contributions a tiny speck in an elastic database cluster. Rather than buying and collecting music, videos, or other cultural artifacts, we are exposed to the power hose: all culture, raging over us, for $12.99 a month (or $15.99 for HD) as long as we keep up our payments like good economic entities. When we stop paying, we’re left with nothing. No files. The service is revoked.</p><p id="e013" class="gy gz eb at ha b hb hc hd he hf hg hh hi hj hk hl">Obviously files are still around. It’s just we’re increasingly abstracted away from them. I keep my own assemblage of files. My own little world. In that way I’m an anachronism that’s somehow bubbled up from the bottom of that most recently edited list.</p></div>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://onezero.medium.com/the-death-of-the-computer-file-doc-43cb028c0506">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>