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>HTTP is obsolete. It's time for the distributed, permanent web (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://blog.neocities.org/its-time-for-the-permanent-web.html">

<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>
  HTTP is obsolete. It's time for the distributed, permanent web (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://blog.neocities.org/its-time-for-the-permanent-web.html">Source originale du contenu</a></h3>
    <p>
  <img src="https://blog.neocities.org/neocitiesandipfs.jpg"/>
</p>

<p>
  Early this year, the <a href="https://archive.org/">Internet Archive</a> put out <a href="http://blog.archive.org/2015/02/11/locking-the-web-open-a-call-for-a-distributed-web/">a call for a distributed web</a>. We heard them loud and clear.
</p>

<p>
  Today I'm making an announcement that begins our long journey to the future of the web. A web that is faster, more secure, more robust, and more permanent.
</p>

<p>
  <a href="https://neocities.org">Neocities</a> has collaborated with <a href="http://ipn.io/">Protocol Labs</a> to become the first major site to implement <a href="http://ipfs.io">IPFS</a> in production. Starting today, all Neocities web sites are available for viewing, archiving, and hosting by any IPFS node in the world. When another IPFS node chooses to host a site from Neocities, that version of the site will continue to be available, even if Neocities shuts down or stops hosting it. The more IPFS nodes seed Neocities sites, the more available (and redundant) Neocities sites become. And the less centrally dependent the sites are on us to continue existing.
</p>

<p>
  What is IPFS? From their README:
</p>

<blockquote>
  <strong><a href="http://ipfs.io">IPFS</a> is a distributed file system that seeks to connect all computing devices with the same system of files.</strong> In some ways, this is similar to the original aims of the Web, but IPFS is actually more similar to a single bittorrent swarm exchanging git objects.

  IPFS could become a new major subsystem of the internet. If built right, it could complement or replace HTTP. It could complement or replace even more. It sounds crazy. It is crazy.
</blockquote>

<p>
  IPFS is still in the alpha stages of development, so we're calling this an experiment for now. It hasn't replaced our existing site storage (yet). Like with any complex new technology, there's a lot of improvements to make. But IPFS isn't vaporware, it works right now. You can <a href="http://ipfs.io/docs/install/">try it out on your own computer</a>, and already can use it to <a href="https://neocities.org/permanent-web">help us serve and persist Neocities sites</a>.
</p>

<p>
  The message I want to send couldn't possibly be more audacious: I strongly believe <a href="http://ipfs.io">IPFS</a> <i>is</i> the replacement to HTTP (and many other things), and now's the time to start trying it out. Replacing HTTP sounds crazy. It is crazy! But <strong>HTTP is broken</strong>, and the craziest thing we could possibly do is continue to use it forever. We need to apply state-of-the-art computer science to the distribution problem, and design a better protocol for the web.
</p>

<h3>Part 1: What's wrong with HTTP?</h3>

<p>
  The Hypertext Transfer Protocol (HTTP) has unified the entire world into a single global information protocol, standardizing how we distribute and present information to eachother.
</p>

<p>
  It is inconceivable for me to even think about what life would be like without it. HTTP dropped the cost of publishing content to almost nothing, an innovation that took a sledgehammer to the top-down economic, political, and cultural control over distribution of information (music, ideas, video, news, games, everything). As a result of liquifying information and making it the publication of it more egalitarian and accessible, HTTP has made almost everything about our culture better.
</p>

<p>
  I love HTTP, and I always will. It truly stands among the greatest and most important inventions of all time.
</p>

<p>
  But while HTTP has achieved many things, it's usefulness as a foundation for the distribution and persistence of the sum of human knowledge isn't just showing some cracks, it's crumbling to pieces right in front of us. The way HTTP distributes content is <strong>fundamentally flawed</strong>, and no amount of performance tuneups or forcing <a href="https://threatpost.com/apple-leaves-cnnic-root-in-ios-osx-certificate-trust-lists/112086">broken</a> CA SSL or whatever are going to fix that. <a href="https://http2.github.io/">HTTP/2</a> is a welcome improvement, but it's a conservative update to a technology that's beginning to show its age. To have a better future for the web, we need more than a spiced up version of HTTP, we need a new foundation. And per the governance model of cyberspace, that means we need a new protocol. <a href="http://ipfs.io">IPFS</a>, I'm strongly hoping, becomes that new protocol.
</p>

<h3>HTTP is brittle</h3>

<p>
  <a href="http://en.wikipedia.org/wiki/CERN_httpd#/media/File:First_Web_Server.jpg"><img src="https://blog.neocities.org/images/first-web-server.jpg"/></a>
</p>

<p>
  This is a picture of the first HTTP web server in the world. It was Tim Berners-Lee's NeXT computer at CERN.
</p>

<p>
  Pasted on the machine is an ominous sticker: <strong>"This machine is a server, do not power it down!!"</strong>.
</p>

<p>
  The reason it couldn't be powered down is that web sites on other servers were starting to link to it. Once they linked to it, they then depended on that machine continuing to exist. If the machine was powered down, the links stopped working. If the machine failed or was no longer accessible at the same location, a far worse thing happened: the chain between sites becomes permanently broken, and the ability to access that content is lost forever. That sticker perfectly highlights the biggest problem with HTTP: it erodes.
</p>

<p>
  Tim's NeXT cube is now a museum piece. The first of millions of future dead web servers.
</p>

<p>
  You've seen the result:
</p>

<p>
  <img src="https://blog.neocities.org/images/permanentweb404.png"/>
</p>

<p>
  Even if you've never read the HTTP spec, you probably know what 404 means. It's the error code used by HTTP to indicate that the site is no longer on the server at that location. Usually you're not even that lucky. More often, there isn't even a server there anymore to tell you that the content you're looking for is gone, and it has no way to help you find it. And unless the <a href="https://archive.org">Internet Archive</a> backed it up, you'll never find it again. It becomes lost, forever.
</p>

<p>
  The older a web page is, the more likely it is you'll see 404 pages. They're the cold-hearted digital tombstones of a dying web, betraying nothing about what knowledge, beauty, or irreverent stupidity may have once resided there.
</p>

<p>
  <img src="https://blog.neocities.org/images/moshtoyanni.jpg"/>
</p>

<p>
  One of my favorite sites from the 90s web was <a href="http://www.angelfire.com/ct/moshtoyanni/">Mosh to Yanni</a>, and viewing the site today gives a very strong example of how inadequate HTTP is for maintaining links between sites. All the static content stored with the site still loads, and my modern browser still renders the page (HTML, unlike HTTP, has excellent lasting power). But any links offsite or to dynamically served content are dead. For every weird example like this, there are countless examples of incredibly useful content that have also long since vanished. Whether eroding content is <a href="http://www.cultdeadcow.com/oldskool/mrt/Tversus.html">questionable crap</a> or <a href="http://web.archive.org/web/20030203172328/eyetap.org/wearcam/icwc98/keynote.html">timelessly useful</a>, it's still our history, and we're losing it fast.
</p>

<p>
  The reason this happens is simple: <strong>centrally managed web servers inevitably shut down</strong>. The domain changes ownership, or the company that ran it goes out of business. Or the computer crashes, without having a backup to restore the content with. Having everyone run their own personal HTTP server doesn't solve this. If anything, it probably makes it worse.
</p>

<hr/>

<h3>HTTP encourages hypercentralization</h3>

<p>The result of this erosion of data has been further dependence on larger, more organized centralized services. Their short-term availability tends to be (mostly) good due to redundant backups. But this still doesn't address long-term availability, and creates a whole new set of problems.</p>

<p>
 We've come a long way since John Perry Barlow's <a href="http://ipfs.io/ipfs/QmVDWmkM87NfR85WE1LvfwfJLRcMEtfNnCBiCJQRePP7Ly">A Declaration of the Independence of Cyberspace</a>. As our electronic country becomes more influential and facilitates the world with more information, governments and corporations alike have started to pry into HTTP's flaws, using them to spy on us, monetize us, and block our access to any content that represents a threat to them, legitimate or otherwise.
</p>

<p>
 <img src="https://blog.neocities.org/images/centralized-decentralized-distributed.jpg"/>
</p>

<p>
The web we were intended to have was <strong>decentralized</strong>, but the web we have today is very quickly becoming <strong>centralized</strong>, as <a href="http://www.bbc.com/news/world-us-canada-34082393">billions of users become dependent on a small handful of services</a>.
</p>

<p>Regardless of whether you think this is a legitimate tradeoff, this was not how HTTP was intended to be used. Organizations like the NSA (and our future robot overlords) now only have to intercept our communications at a few sources to spy on us. It makes it easy for governments to censor content at their borders by blocking the ability for sites to access these highly centralized resources. It also puts our communications at risk of being interrupted by <a href="https://github.com/blog/1796-denial-of-service-attacks">DDoS attacks</a>.
</p>

<p>
Distributing the web would make it less malleable by a small handful of powerful organizations, and that improves both our freedom and our independence. It also reduces the risk of the "one giant shutdown" that takes a massive amount of data with it.
</p>

<h3>HTTP is inefficient</h3>

<p>As of this writing, Gangnam Style now has over 2,344,327,696 views. Go ahead, watch it again. I'll wait for you.</p>

<p>
 <iframe src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen="">VIDEO</iframe>
</p>

<p>
 Let's make some assumptions. The video clocks in at 117 Megabytes. That means (at most) 274,286,340,432 Megabytes, or 274.3 Petabytes of data for the video file alone has been sent since this was published. If we assume a total expense of 1 cent per gigabyte (this would include bandwidth and all of the server costs), $2,742,860 has been spent on distributing this one file so far.
</p>

<p>
 That's not too bad... if you're Google. But if you're a smaller site, the cost to serve this much data would be astronomical, especially when bandwidth rates for small players start around $0.12 per gigabyte and go as high a $0.20 in Asia. I've spent the better part of my work at Neocities battling expensive bandwidth to ensure we can keep running our infrastructure at low cost.
</p>

<p>
  HTTP lowered the price of publishing, but it still costs money, and these costs can really add up. Distributing this much data from central datacenters is potentially very expensive if not done at economies of scale.
</p>

<p>
 What if, instead of always serving this content from datacenters, we could turn every computer on an ISP's network into a streaming CDN? With a video as popular as Gangnam Style, it could even be completely downloaded from within an ISP's network, not requiring numerous hops over the internet backbone. This is one of the many things IPFS is capable of improving (we'll discuss this in a bit).
</p>

<h3>HTTP creates overdependence on the Internet backbone</h3>

<p>
 When content is hypercentralized, it makes us highly dependent on the internet backbones to the datacenters functioning. Aside from making it easy for governments to block and censor content, there are also reliability problems. Even with redundancies, major backbones sometimes get <a href="http://en.wikipedia.org/wiki/2008_submarine_cable_disruption">damaged</a>, or <a href="https://blog.cloudflare.com/why-google-went-offline-today-and-a-bit-about/">routing tables go haywire</a>, and <a href="https://www.youtube.com/watch?v=VlKisWR74mU">the consequences can be drastic</a>.
</p>

<p>I got a weird taste of that a few months ago, when Neocities slowed down after a car crashed into a fiber uplink we use in Canada (no suspects yet, but a few <a href="https://blog.neocities.org/images/rickycar.jpg">promising leads</a>). I've also heard stories where hunters have shot at the fiber cables connecting the eastern Oregon datacenters (the enormous ones that store a <em>lot</em> of data), requiring engineers to show up on snowmobiles with cross country skis to repair the fiber lines. Since I wrote this post, details have emerged on a <a href="http://www.thedailybeast.com/articles/2015/07/04/who-s-cutting-california-internet-cables-the-fbi-has-no-idea.html">sophisticated attack on fiber lines</a> happening in the Bay Area. The point is, the internet backbone isn't perfect, it's easy to attack it, and it's easy for service to get affected by a few important fiber lines getting cut.
</p>

<h3>Part 2: How IPFS solves these problems</h3>

<p>
 We've discussed HTTP's problems (and the problems of hypercentralization). Now let's talk about how IPFS, and how it can help improve the web.
</p>

<p>
 IPFS fundamentally changes the way we look for things, and this is it's key feature. With HTTP, you search for locations. With IPFS, you search for <em>content</em>.
</p>

<p>
  Let me show you an example. This is a file on a server I run: <a href="https://neocities.org/img/neocitieslogo.svg">https://neocities.org/img/neocitieslogo.svg</a>. Your browser first finds the location (IP address) of the server, then asks my server for the file using the path name. With that design, only the owner (me) can determine that this is the file you're looking for, and you are forced to trust that I don't change it on you by moving the file, or shutting the server down.
</p>

<p>
  Instead of looking for a centrally-controlled location and asking it what it thinks /img/neocitieslogo.svg is, what if we instead asked a distributed network of millions of computers not for the name of a file, but for <em>the content that is supposed to be in the file?</em>
</p>

<p>
  This is precisely what IPFS does.
</p>

<p>
  When neocitieslogo.svg is added to my IPFS node, it gets a new name: <a href="http://ipfs.io/ipfs/QmXGTaGWTT1uUtfSb2sBAvArMEVLK4rQEcQg5bv7wwdzwU">QmXGTaGWTT1uUtfSb2sBAvArMEVLK4rQEcQg5bv7wwdzwU</a>. That name is actually a <a href="http://en.wikipedia.org/wiki/Cryptographic_hash_function">cryptographic hash</a>, which has been computed from the contents of that file. That hash is guaranteed by cryptography to <i>always</i> only represent the contents of that file. If I change that file by even one bit, the hash will become something completely different.
</p>

<p>
  When I ask the IPFS distributed network for that hash, it efficiently (20 hops for a network of 10,000,000) finds the nodes that have the data using a <a href="https://en.wikipedia.org/wiki/Distributed_hash_table">Distributed Hash Table</a>, retrieves it, and verifies using the hash that it's the correct data. Early DHT designs had issues with <a href="https://en.wikipedia.org/wiki/Sybil_attack">Sybil attacks</a>, but we have <a href="http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.68.4986">new ways</a> to address them, and I'm very confident this is a solvable problem (unlike the problems with HTTP, which are just going to be broken forever).
</p>

<p>
  IPFS is general purpose, and has little in the way of storage limitations. It can serve files that are large or small. It automatically breaks up larger files into smaller chunks, allowing IPFS nodes to download (or stream) files from not just one server like with HTTP, but hundreds of them simultaneously. The IPFS network becomes a finely-grained, trustless, distributed, easily federated Content Delivery Network (CDN). This is useful for pretty much everything involving data: images, video streaming, distributed databases, entire operating systems, blockchains, backups of 8 inch floppy disks, and most important for us, <strong>static web sites</strong>.
</p>

<p>
  IPFS files can also be special IPFS directory objects, which allow you to use human readable filenames (which transparently link to other IPFS hashes). You can load the directory's index.html by default, the same way a standard HTTP server does. Using directory objects, IPFS allows you to make static web sites exactly the same way you make them today. It's a single command to add your web site to an IPFS node: <code>ipfs add -r yoursitedirectory</code>. After that, it's available from any IPFS node without requiring you to link to any hashes in the HTML (<a href="http://ipfs.io/ipfs/QmcKi2ae3uGb1kBg1yBpsuwoVqfmcByNdMiZ2pukxyLWD8/">example</a>, and <a href="http://ipfs.io/ipfs/QmZwebpGTFPRTaab9t5Y5JuwrbuzCzqWLwdeUGDR8N3hn8">example with index.html renamed</a>).
</p>

<h4>Federating data with IPFS</h4>

<p>
  IPFS doesn't require every node to store all of the content that has ever been published to IPFS. Instead, you choose what data you want to help persist. Think of it like bookmarks, except instead of bookmarking a link to a site that will eventually fail, you back up the entire site for yourself, and volunteer to help to serve the content to others that want to look at it.
</p>

<p>If a lot of nodes host a little bit, these little bits quickly add up to more space, bandwidth and availablity than any centralized HTTP service could ever possibly provide. The distributed web will quickly become the fastest, most available, and largest store of data on the planet earth. And nobody will have the power to "burn books" by turning it all off. This Library of Alexandria is <em>never</em> going to burn down.
</p>

<p>Copying, storing and helping serve web sites from other IPFS nodes is easy. It just takes a single command and the hash of the site: <code>ipfs pin add -r QmcKi2ae3uGb1kBg1yBpsuwoVqfmcByNdMiZ2pukxyLWD8</code>. IPFS takes care of the rest.</p>

<h4>IPNS</h4>

<p>
  IPFS hashes represent <a href="https://en.wikipedia.org/wiki/Persistent_data_structure">immutable data</a>, which means they cannot be changed without the hash being different. <strong>This is a good thing</strong> because it encourages data persistence, but we still need a way to find the latest IPFS hash representing your site. IPFS accomplishes this using a special feature called <strong>IPNS</strong>.
</p>

<p>
  IPNS allows you to use a private key to sign a reference to the IPFS hash representing the latest version of your site using a public key hash (pubkeyhash for short). If you've used Bitcoin before, you're familiar with this - a Bitcoin address is also a pubkeyhash. With our Neocities IPFS node, I signed the image of Penelope (our site mascot) and you can load it using our IPNS pubkeyhash for that node: <a href="http://ipfs.io/ipns/QmTodvhq9CUS9hH8rirt4YmihxJKZ5tYez8PtDmpWrVMKP">QmTodvhq9CUS9hH8rirt4YmihxJKZ5tYez8PtDmpWrVMKP</a>.
</p>

<p>
  IPNS isn't done yet, so if that link doesn't work, don't fret. Just know that I will be able to change what that pubkeyhash points to, but the pubkeyhash will always remain the same. When it's done, it will solve the site updating problem.

</p>

<p>
  Now we just need to make the location of these sites human-readable, and we've got all the pieces we need.
</p>

<h4>Human-readable mutable addressing</h4>

<p>
  IPFS/IPNS hashes are big, ugly strings that aren't easy to memorize. So IPFS allows you to use the existing Domain Name System (DNS) to provide human-readable links to IPFS/IPNS content. It does this by allowing you to insert the hash into a TXT record on your nameserver (if you have a command line handy, run this: <code>dig TXT ipfs.git.sexy</code>). You can see this in action by visiting <a href="http://ipfs.io/ipns/ipfs.git.sexy/">http://ipfs.io/ipns/ipfs.git.sexy/</a>.
</p>

<p>
  Going forward, IPFS has plans to also support <a href="http://namecoin.info/">Namecoin</a>, which could theoretically be used to create a completely decentralized, distributed web that has no requirements for a central authority in the entire chain. No ICANN, no central servers, no politics, no expensive certificate "authorities", and no choke points. It sounds crazy. It is crazy. And yet, it's completely possible with today's technology!
</p>

<h4>IPFS HTTP gateway: The bridge between the old web and the new</h4>

<p>
  The IPFS implementation ships with an HTTP gateway I've been using to show examples, allowing current web browsers to access IPFS until the browsers implement IPFS directly (too early? I don't care). With the IPFS HTTP gateway (and a little nginx shoe polish), we don't have to wait. We can soon start switching over to IPFS for storing, distributing, and serving web sites.
</p>

<h3>How we're using IPFS now</h3>

<p>
  Our initial implementation of IPFS is experimental and modest, for now. Neocities will be publishing an IPFS hash once per day when sites are updated, accessible from every site profile. This hash will point to the latest version of the site, and be accessible via our IPFS HTTP gateway. Because the IPFS hash changes for each update, this also enables us to provide an archive history for all the sites, something we automagically just get from the way that IPFS works anyways.
</p>

<h3>How we'll use IPNS in the future</h3>

<p>
  Long-term, if things go well, we want to use IPFS for storing all of our sites, and issue IPNS keys for each site. This would enable users to publish content to their site independently of us. If we do it right, <strong>even if Neocities doesn't exist anymore, our users can still update their sites</strong>. We effectively take our user's central dependence on our servers and smash it to pieces, permanently ruining our plans for centralized world domination forever. It sounds awesome. It is awesome!
</p>

<p>It's still early, and there's much work to do before <a href="http://ipfs.io/">IPFS</a> can replace HTTP without needing to describe the idea as <a href="http://www.youtube.com/watch?v=tjgtLSHhTPg">crazy</a>. But there's no time like the present to plan for the future. It's time for us to get to work. Accept the <a href="https://archive.org/">Internet Archive</a>'s challenge: <strong>distribute the web</strong>.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://blog.neocities.org/its-time-for-the-permanent-web.html">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>