davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661
							<!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>Iterating the web away: losing the next generation (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://www.baldurbjarnason.com/notes/iterating-the-web-away/">

<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>
  Iterating the web away: losing the next generation (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://www.baldurbjarnason.com/notes/iterating-the-web-away/">Source originale du contenu</a></h3>
    <p>I made my first website more than twenty years ago. It was horrible.</p>

<!--break-->

<ul>
  <li>Black text on a dark grey background.</li>
  <li>A complex table layout.</li>
  <li>Animated gifs everywhere. (Some things never change.)</li>
</ul>

<p>Making it was a lot of fun, though.</p>

<p>When, a few years ago, I dug the website up, my biggest issue wasn’t with its technical flaws but with my horrible design sense.</p>

<p>Black on grey? Really?</p>

<p>I had no taste. I like to think I’ve improved.</p>

<p>As to the technical side, a lot of the flaws were just inherent in the web of the time. The web kind of sucked.</p>

<p>But even though it did suck it pulled me in and turned me into a developer. I got into web development because it was interesting, fun, and challenging.</p>

<p>Web development today is still challenging. But the rest?</p>

<p>If I were a seventeen year old geek today, I’m not so sure that I’d get into web development.</p>

<p>I’m convinced I wouldn’t.</p>

<p>The web back then combined three important characteristics that made it very attractive to young geeks like me who wanted to <em>make something</em>:</p>

<ol>
  <li>It was cheaper than the competition.</li>
  <li>It reached more people than the competition.</li>
  <li>It was easier than the competition.</li>
</ol>

<h2 id="cheaper">Cheaper</h2>

<p>In the mid to late nineties, if you wanted to make interactive media—i.e. anything interesting on a computer—you didn’t have that many options.</p>

<p>Tools like Director were well beyond your average teenager’s budget and most schools didn’t have it installed on their computers.</p>

<p>Flash wasn’t a factor until the late nineties at the earliest and even then you still needed an expensive application too expensive for your average household.</p>

<p>Pirating these apps was a pain in the ass and didn’t really become an option until you were in college. Pirating over a slow modem was always a hassle.</p>

<p>If you had a Mac, you could probably get your hands on Hypercard.</p>

<p>Proper programming environments and software development tools were too expensive and too hard to get.</p>

<p>So, for most of us, Hypercard was it.</p>

<p>Until the web arrived. Editing text files was and is free. Even the WYSIWIG HTML editors of the time were more widely available than Macromedia’s fare, flawed as those editors were.</p>

<p>Today we have an embarrassment of riches. Every mobile phone platform offers a free development environment, even if some of them still require payment for distribution.</p>

<p>Apple as of <a href="https://developer.apple.com/xcode/">Xcode 7</a> will no longer require a paid developer account for you to make an app to just put on your own phone.</p>

<p>Being the free platform is no longer a competitive advantage when it comes to getting aspiring teenage developers interested.</p>

<h2 id="distribution">Distribution</h2>

<p>The Hypercard stacks I made before I got my first modem never went anywhere beyond the stack of floppies in my bedroom. Reaching people who might have been interested was hard, connecting with them and building a community of interest from Iceland was impossible.</p>

<p>But the web made it easy. Communities is what the web <em>is</em>. Everything else is a complication.</p>

<p>Overnight you went from being a lone geek with weirdo interests to being a part of something bigger. You were now connected with a large group of people who weren’t just interested in the same things but were interested in what <em>you</em> thought about them.</p>

<p>Mind-blowing.</p>

<p>Again, this has changed. The web has fractured as it has grown. The best way to connect with people is still through communities but these communities no longer exist as a network of websites like they did in the early days. Some of them exist as clusters within one social media silo or another. Others cluster around a single website.</p>

<p>Distributing the stuff you make has become both much more complex and much simpler than just putting your website online and submitting it to a bunch of directories and search engines.</p>

<p>It’s simpler in that you can connect with people just by joining a social media website and having a bunch of conversations. It’s more complex in that there are a host of venues and formats you can deliver and make things in, all of which are flooded with crap from all over the world. Blog posts, websites, ebooks, iBooks Author ebooks, Android and iOS apps, and more—even if you limit yourself to just interactive media, you still have a wealth of options. If you’re just thinking about creating and making digital stories in general, it’s an embarrassment of riches.</p>

<p>Nobody will notice you in the flood, but the difficulty of getting attention just going to be a fact of life from now on, regardless of the platform you choose.</p>

<h2 id="easier">Easier</h2>

<p>Macromedia Director was a mess. I didn’t get a chance to work in Director until I was in my twenties but it remains to this day one of the most frustrating platforms I’ve ever worked with. It’s one of three platforms I know that were so inconsistent that you could do the exact same thing in the exact same way in an exactly identical context twice and it’d work in one but not the other.</p>

<p>The only other platforms I’ve worked with that matched that frustration are the modern web and modern ebook development.</p>

<p>(Web development being thankfully saner than ebook development.)</p>

<p>But back in the nineties, the web was the simpler, less capable, but much easier option for making things. Especially if you were on a budget. You could, if you wanted, find an open source programming environment to work with but those were much harder, much more complicated, and, actually, not that much more capable.</p>

<p>Hypercard, of course, was a lot easier. But it was also older, almost a relic even then—<a href="http://tvtropes.org/pmwiki/pmwiki.php/Main/ElegantWeaponForAMoreCivilizedAge">“a more elegant weapon for a more civilised age”</a>. It didn’t even support colour out of the box. It also limited you to the Mac.</p>

<p>Later on, Flash did give the web a run for its money in terms of the ease of making things, but that wasn’t a reality until the early 2000s. And even then it always lost on price.</p>

<p>The web had the best balance of fun, distribution, price, and ease of making. For a young geek in the nineties it was <em>irresistible</em>.</p>

<p>You can still limit yourself to a subset of the web that is relatively easy to work with, but unlike JavaScript, it isn’t so much a ‘good part’ as a plurality of ‘not ugly’ parts each with its own set of compromises. You can avoid frameworks like Angular, Ember, or React, but then you’re pretty sunk if you want to do something complex with the DOM. You can opt out of a lot of CSS complexities with things like BEM, but that also means opting out of most of the cascade’s useful features. And JavaScript has a host of idiosyncrasies that you simply can’t opt out of.</p>

<p>You can’t make a decision on how to simplify your approach to web development—how to make it saner—without understanding the compromises, which by definition means that you already have to be a web development expert. Beginners are screwed.</p>

<h2 id="iterating-the-web-away">Iterating the web away</h2>

<p>Even though the web platform is vastly more capable today than it was twenty years ago, it still doesn’t match native apps in capabilities. <a href="https://www.red-sweater.com/blog/1110/cant-catch-me">It never will.</a> Which would be fine and dandy if it weren’t for how complicated web development has become. It’s not just a question of the escalating number of APIs, properties, and elements you need to keep track of, the web’s lack of a cohesive conceptual model means that the very foundation of the web platform is too complicated for a web developer to internalise.</p>

<p>CSS makes no goddamn sense—it’s a horrible blended purée of incompatible layout models, naïve language construction, and irrationally tight coupling between seemingly unrelated parts (using the word ‘modules’ for a language as monolithic in its structure as CSS is a bit of a joke).</p>

<p>Javascript has good bits but when you’re learning it <em>you can’t avoid the horrible bits</em>—it’s always going to be a mess to learn.</p>

<p>HTML is reaching the complexity of a fully-fledged programming language but without any of the features you use to manage complexity. There is no shared conceptual framework between the various facets of web development.</p>

<p><a href="https://en.wikipedia.org/wiki/Representational_state_transfer">REST</a> and <a href="https://en.wikipedia.org/wiki/HATEOAS">HATEOAS</a> come close but neither are built into the foundation of CSS or JavaScript in any meaningful way, nor is it easy to see how they could. It’s the foundation of HTTP, sure. And you can define a subset of HTML that is pretty much HATEOAS to a T. Which is why <a href="https://www.tbray.org/ongoing/When/201x/2015/06/05/End-of-HTML">they will outlast the rest of the web stack</a>. (See also Facebook’s Instant Articles, which uses HTML and HTTP, or Apple News.)</p>

<p>Looking at the alternatives for a smart teenage geek, iOS app development, for example, you’d think that they’d be more complicated than web dev. But we’ve reached a point where it’s about to be the other way around.</p>

<p>Cocoa development is complicated, sure, but its conceptual model is much more cohesive. The layout and rendering model makes more sense. Swift and Objective C are both complicated but are also both built on a fairly strong conceptual foundation (stronger than Javascript’s at least). Xcode playgrounds help a lot.</p>

<p>The overall concepts behind native app development are easier to grasp and internalise, and the experience of developing for them is much more consistent, making it easier to learn their more complex features.</p>

<h2 id="losing-the-next-generation">Losing the next generation</h2>

<p>I’m worried that the next generation of smart-ass teenage developers is going to overwhelmingly choose native app development over web development. They’ll see it as the easier, more fun option. Web development will (or even has) become the boring thing you learn because your work needs you to.</p>

<p>Chasing CSS rendering oddities—“goddamn it, why is this breaking, this used to work!”—is just about the most stupid way to spend an afternoon (regular bug hunting doesn’t even compare) and yet, as a web developer, it’s a major part of my job.</p>

<p>In our zeal to chase after native app development we’ve lost sight of making web development logical, fun, and interesting. By chasing features we’ve sacrificed the developer experience.</p>

<p>As I follow new CSS features, web component spec work, new JavaScript APIs and syntax features, it seems more an more clear that the future looks like Angular:</p>

<p>Boring, complex, enterprise-y, and about as sexy as a mouldy gym sock.</p>

<p>We don’t just need to pause web feature development, <a href="http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html">as Peter-Paul Koch suggested</a>, we need to rethink web development and the web platform from the ground up.</p>

<p>Adding new features, even if they <em>do</em> address the platform’s flaws, doesn’t erase the bad parts. Beginners are just as screwed as they were before.</p>

<p>The web platform needs to be more cohesive. It needs to be more consistent. It needs to be more fun. It’s <em>none</em> of these things. It doesn’t have to be that much easier, though that would be preferable—complexity can be fun if it has a consistent foundation and if the learning process is built on a strong feedback loop—but it needs to make more conceptual sense. A <em>lot</em> more sense.</p>

<p>If we don’t, in ten years time, not only will all of the geeky teenagers of the world be making native apps and eschewing web dev, there’s a strong possibility that I’ll have joined them.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://www.baldurbjarnason.com/notes/iterating-the-web-away/">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>