davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913
							<!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>Le Web est mort — 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/">

  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://larlet.fr/david/blog/2015/web-mort/">
  <!-- SEO/Semantic metadata -->
  <meta name="description" content="Le Web que nous fantasmions est mort. Longue vie au(x) Web que nous allons co-créer !" />
  <meta name="twitter:description" property="og:description" itemprop="description" content="Le Web que nous fantasmions est mort. Longue vie au(x) Web que nous allons co-créer !" />
  <meta name="twitter:title" property="og:title" itemprop="name" content="Le Web est mort" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:creator" content="@davidbgk" />
  <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2015/web-mort/" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2015/web-mort.jpg" />


<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 class="single">
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Le Web est mort
  <time>Publié le 25 mai 2015</time>
</h1>
<article class="single">
  <blockquote>
<p>Il n’aura pas fallu plus de 10 ans pour tuer le Web. App-ifié, surveillé, centralisé, marchandisé, déneutralisé et plein d’autres mots en -é qui font flipper. Le sommet de la pyramide actuelle fait tout pour que sa base ne se transforme pas en graphe autonome à l’image du Web et tous les moyens sont bons pour y parvenir : capitalisme, terrorisme, pédo-nazisme, développeurs cyniques et vénaux (j’ai cherché longtemps un mot en -isme mais j’ai pas trouvé). Bref, c’est pas la joie.</p>
<p>Propositions pour reconstruire le Web ces 10 prochaines années. Ensemble.</p>
</blockquote>
<p><em>C’est le sujet de 15 minutes que j’ai proposé pour les 10 ans de <a href="http://www.paris-web.fr/">ParisWeb</a> et qui n’a (mal)heureusement pas été retenu. Comme j’avais commencé à y réfléchir, je vous le livre un peu brut (il manque 4 mois de recul).</em></p>
<p>PJLRenseignement, DRM, neutralité, profilage, Snowden, GAFA, terrorisme, guerre économique, écosystèmes fermés, stores, centralisation, bulles filtrantes, la liste pourrait être très longue des atteintes portées au Web ces 10 dernières années. Un Web que l’on rêvait universel, ouvert, a-centré. Ne nous apitoyons pas sur ce que nous avons déjà perdu, créons de nouvelles règles au quotidien.</p>
<h2>Affichez la source</h2>
<blockquote>
<p>Re-use the source, Luke.</p>
</blockquote>
<p>Vous avez tous appris en affichant la source des ressources que vous aimiez. Ce n’est plus vraiment possible, sur l’autel de la performance nous avons sacrifié la lisibilité et la compréhension du code source de nos pages. C’est extrêmement dommageable pour les nouveaux arrivants qui (au mieux !) doivent trouver le dépôt, installer les 15 dépendances système, installer la moitié du net avec NodeJS et finalement builder votre site pour comprendre un détail de CSS…</p>
<p>Au pire ajoutez l’URL vers une source lisible de vos fichiers CSS/JS, au mieux arrêtez de minifier des fichiers qui sont de toute façon <code>gzip</code>és (oui, je sais, j’ai du boulot ici aussi). Les navigateurs ont aussi à faire pour <a href="/david/stream/2015/05/26/">afficher la sources des composants web</a> de manière lisible et exploratoire.</p>
<h2>Mettez votre veto</h2>
<blockquote>
<p>Vous êtes de luthiers au service de David Guetta.</p>
</blockquote>
<p>Mais vous avez le pouvoir de changer ça. Au quotidien. Vous pouvez prendre part aux décisions stratégiques de votre entreprise, vous pouvez <a href="/david/stream/2015/02/28/">refuser de coder</a> des choses. Vous pouvez proposer des alternatives en phase avec votre vision du Web de demain. Ne vous réveillez pas dans 10 ans en réalisant que vous avez contribué à la mort du Web.</p>
<h2>Transmettez vos valeurs</h2>
<blockquote>
<p>Monsieur, c’est quoi le hashtag dans la CSS déjà ?</p>
</blockquote>
<p>Les plus jeunes ont besoin d’être guidés. Vraiment. <a href="/david/pro/enseignement/">Donner des cours à l’IUT</a> m’a ouvert les yeux sur le niveau des pratiques et des valeurs transmises dès la découverte du Web. C’est pas joli. Chaque personne venant à ParisWeb peut donner de son temps pour améliorer cette situation. Et l’année prochaine certains de vos étudiants seront peut-être dans la salle. À moins que vous ne préfériez rester dans votre tour d’ivoire élitiste ?</p>
<h2>Expliquez votre métier</h2>
<blockquote>
<p>Tu peux m’aider à connecter mon imprimante en wifi ?</p>
</blockquote>
<p>Non, mais par contre je peux t’expliquer ce qu’est le Web et ce que je crée au quotidien. Commencez par votre famille, vos proches, on ne (re)construira pas un Web tout seuls. Il y a un énorme travail d’éducation à avoir pour que la société se rende compte qu’Internet n’est pas Facebook et qu’il y a d’autres enjeux que le terrorisme.</p>
<h2>Ayez une longueur d’avance</h2>
<blockquote>
<p>Pourquoi ta signature est une suite incompréhensible de caractères ?</p>
</blockquote>
<p>C’est la <a href="/david/blog/2015/chiffrer-emails/">stratégie classique</a> à avoir qui est la source d’une <a href="/david/stream/2015/05/13/">dépense inutile d’énergie</a> et qui s’apparente à de la surenchère futile. Sauf qu’elle donne un semblant d’intimité et de militantisme qui sont une arme dans le contexte actuel.</p>
<p>Vous êtes ceux et celles qui ont les compétences techniques pour tester et évangéliser de nouvelles pratiques. Faites-le !</p>
<h2>Utilisez à bon escient</h2>
<blockquote>
<p>Twitter me fait penser à un hurlement de loups.</p>
</blockquote>
<p>Ça décharge les pulsions de la meute sans rien apporter de très mélodieux. Or les réseaux sociaux pourraient être un outil formidable de communication et d’optimisme. Interrogez-vous sur votre propre usage.</p>
<p>Est-ce que les outils et techniques dont vous faites la promotion encouragent <a href="/david/blog/2013/outils-conviviaux/">la convivialité</a> ?</p>
<h2>Soyez nomade</h2>
<blockquote>
<p>Youpi, encore un framework JS !</p>
</blockquote>
<p>La course à la technologie va s’accélérer, vos données devront être plus que jamais nomades. Assurez vous qu’elles le soient et qu’elles le restent à travers les licences, les URL, la pérennité du stockage, etc.</p>
<p>Il en va de même avec les connaissances que vous acquérez, est-ce qu’elles sont propres au framework, à la technologie ? Est-ce qu’elles sont transposables ? Toujours au service du Web ?</p>
<h2>Ouvrez votre entreprise</h2>
<blockquote>
<p>C’est partout pareil de toute façon.</p>
</blockquote>
<p>Non. Sortez de votre petit confort et allez voir ce qui se pratique ailleurs. Certaines entreprises n’ont pas les même rapports au quotidien. Certaines entreprises n’ont pas les même choix de projets. Certaines entreprises n’ont pas les même objectifs. Certaines entreprises œuvrent <em>pour</em> le Web.</p>
<p>Partagez vos pratiques et vos choix en interne, pas uniquement la mise en application de la dernière techno à la mode. Notre domaine a besoin de davantage de retours d’expériences.</p>
<h2>Innovez localement</h2>
<blockquote>
<p>Tout est surveillé, on est foutus…</p>
</blockquote>
<p>Et si le Web que nous connaissons n’était qu’un prototype, un brouillon. Demain on va vers du <em>vrai</em> pair-à-pair avec les réseau de type <em>mesh</em>, peut-être l’occasion de poser de nouvelles bases en terme de confidentialité des échanges et de décentralisation. Un nouveau terrain de jeu qui ne demande qu’à être exploré :-).</p>
<p><strong>Le Web que nous fantasmions est mort. Longue vie au(x) Web que nous allons co-créer !</strong></p>
</article>

  <section>
    <h3>Discussion suite à l’article :</h3>

      <article id="comment-1" class="comment">
        <p>Billet intéressant, même si je ne partage pas ce constat. Le Web est mort ? Non, il n’y a que ceux qui le décident pour qui c’est vrai. Et c’est trop facile.</p>
<p>Sur plusieurs de tes points :</p>
<p>Je tourne plutôt vers une tendance inverse : réduire la dépendance aux outils (ce qui ne veut pas dire que je n’en utilise pas).
J’ai testé les pré-processeurs CSS, dans certains cas, certes c’est très utile mais dans de nombreux autres, une méthodologie bien carrée suffit amplement. Du site bio en somme.</p>
<p>La source est minifiée ? On s’en fout, on peut utiliser le DOM sous Firebug pour comprendre. (oui bon, pour CSS c’était facile :) )</p>
<p>Après, je pense qu’on peut aussi se regarder le nombril, et se rendre compte que les articles qui expliquent simplement… baissent en nombre. Et il y a peu de recul sur cette course à l’armement à l’automatisation et à la complexification.</p>
<p>Effectivement, j’ai l’impression que c’est de plus en plus élitiste, et que les débutants vont ramer de plus en plus (j’espère vraiment me tromper). Ce qui est marrant, c’est que ces débutants seront nos collègues, et d’ici quelques années, on va se marrer à leur expliquer des trucs basiques qu’ils n’auront jamais appris, parce que « c’est inclus dans mon Boostrap-react-autoprefixer ». Là, j’estime qu’on a une responsabilité.</p>
<p>Mais bon, c’est pas comme si les blogs, les sites communautaires, etc. n’existaient pas. Ah si, tiens ils existent. Et si on les alimentait tout simplement ? Déjà ça décentralise l’info, et en plus, ça remet en place les réseaux sociaux pour ce qu’ils sont : des caisses de résonance. </p>
        <p><cite>Nicolas Hoffmann, le <a href="#comment-1">2015-05-26 à 21:54:21</a></cite></p>
      </article>

      <article id="comment-2" class="comment">
        <p>Hello Nicolas,</p>
<blockquote>
<p>Je tourne plutôt vers une tendance inverse : réduire la dépendance aux outils (ce qui ne veut pas dire que je n’en utilise pas).</p>
</blockquote>
<p>Je ne vois pas où tu as lu que j’encourage une plus grande dépendance aux outils…</p>
<blockquote>
<p>La source est minifiée ? On s’en fout, on peut utiliser le DOM sous Firebug pour comprendre. (oui bon, pour CSS c’était facile :) )</p>
</blockquote>
<p>Bon déjà pour utiliser encore Firebug il faut être riche en ram ;)
Ensuite c’est encore plutôt archaïque comparé à ce que j’aimerais avoir pour explorer une page et ses interactions. Il est de plus en plus difficile de comprendre le moindre site sans comprendre les sources JS.</p>
<blockquote>
<p>Après, je pense qu’on peut aussi se regarder le nombril, et se rendre compte que les articles qui expliquent simplement… baissent en nombre. Et il y a peu de recul sur cette course à l’armement à l’automatisation et à la complexification.</p>
</blockquote>
<p>La simplicité ne passe pas forcément par la réduction des outils. Un inspecteur bien foutu ou un framework qui permet de regrouper les différents éléments d’un composant web pourraient être autant d’aides à une meilleure compréhension d’une page web. Le navigateur offre un avantage exceptionnel en terme de contextualisation du code, exploitons-le !</p>
        <p><cite>David Larlet, le <a href="#comment-2">2015-06-04 à 14:49:18</a></cite></p>
      </article>

      <article id="comment-3" class="comment">
        <blockquote>
<p>Bon déjà pour utiliser encore Firebug il faut être riche en ram ;)
Ensuite c’est encore plutôt archaïque comparé à ce que j’aimerais avoir pour explorer une page et ses interactions. Il est de plus en plus difficile de comprendre le moindre site sans comprendre les sources JS.</p>
</blockquote>
<p>Étape 1. Désinstallez Firebug<br />
Étape 2. Utilisez les Developer Tools de Firefox<br />
Étape 3. <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&amp;component=Developer%20Tools">Ouvrir des bugs pour ce qui manque</a>.</p>
<p>La RAM s’en portera beaucoup mieux.</p>
        <p><cite>Karl Dubost, le <a href="#comment-3">2015-06-04 à 14:49:55</a></cite></p>
      </article>

      <article id="comment-4" class="comment">
        <blockquote>
<p>Je ne vois pas où tu as lu que j’encourage une plus grande dépendance aux outils…</p>
</blockquote>
<p>Nulle part, tu indiques que "les nouveaux arrivants qui (au mieux !) doivent trouver le dépôt, installer les 15 dépendances système, installer la moitié du net avec NodeJS et finalement builder votre site pour comprendre un détail de CSS".</p>
<p>C’est à ça que je répondais que je préfère réduire la dépendance, typiquement pour éviter ça. :)
Au temps pour moi si je n’étais pas clair.</p>
<blockquote>
<p>Bon déjà pour utiliser encore Firebug il faut être riche en ram ;)
Ensuite c’est encore plutôt archaïque comparé à ce que j’aimerais avoir pour explorer une page et ses interactions. Il est de plus en plus difficile de comprendre le moindre site sans comprendre les sources JS.</p>
</blockquote>
<p>Bon point pour Firebug, que j’ai laissé tomber au boulot depuis quelques semaines, trop consommateur de mémoire.</p>
<blockquote>
<p>La simplicité ne passe pas forcément par la réduction des outils. Un inspecteur bien foutu ou un framework qui permet de regrouper les différents éléments d’un composant web pourraient être autant d’aides à une meilleure compréhension d’une page web. Le navigateur offre un avantage exceptionnel en terme de contextualisation du code, exploitons-le !</p>
</blockquote>
<p>Même si tu n’as pas tort, je trouve que souvent il y a trop d’outils dont les possibilités se chevauchent, alors qu’une bonne méthodo fait autant de bien... sinon plus.</p>
<blockquote>
<p>La RAM s’en portera beaucoup mieux.</p>
</blockquote>
<p>Comme dit plus haut, +1. Faut que je regarde d’ailleurs, j’en aurais p-e qq uns à faire remonter.</p>
        <p><cite>Nicolas Hoffmann, le <a href="#comment-4">2015-06-04 à 15:06:35</a></cite></p>
      </article>

  </section>


  <figure class="image" property="schema:image">
    <img src="/static/david/blog/2015/web-mort.jpg" alt="" />
  </figure>


<nav id="jumpto">
  <p>
    <a rel=prev href="/david/blog/2015/strategies-sso/">← Stratégies SSO</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2015/formation-js-avance/">Formation JS Avancé →</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>
        Les dernières publications hebdomadaires sont :
      </p>
      <ul class="with_columns">

          <li>
            <a href="/david/stream/2019/12/31/">Merci</a>
          </li>

          <li>
            <a href="/david/stream/2019/12/27/">Intemporels</a>
          </li>

          <li>
            <a href="/david/stream/2019/12/24/">Outils</a>
          </li>

          <li>
            <a href="/david/stream/2019/12/17/">Origines</a>
          </li>

          <li>
            <a href="/david/stream/2019/12/10/">Publier</a>
          </li>

          <li>
            <a href="/david/stream/2019/12/03/">En forêt</a>
          </li>

          <li>
            <a href="/david/stream/2019/11/26/">Ecocentric</a>
          </li>

          <li>
            <a href="/david/stream/2019/11/19/">Se livrer</a>
          </li>

          <li>
            <a href="/david/stream/2019/11/12/">Dépendances</a>
          </li>

          <li>
            <a href="/david/stream/2019/11/05/">Positif</a>
          </li>

          <li>
            <a href="/david/stream/2019/10/29/">Dettes</a>
          </li>

          <li>
            <a href="/david/stream/2019/10/22/">Privilèges</a>
          </li>

          <li>
            <a href="/david/stream/2019/10/15/">Discrétion</a>
          </li>

          <li>
            <a href="/david/stream/2019/10/08/">Désespérance</a>
          </li>

          <li>
            <a href="/david/stream/2019/10/01/">Présent</a>
          </li>

          <li>
            <a href="/david/stream/2019/09/24/">Manifester</a>
          </li>

          <li>
            <a href="/david/stream/2019/09/17/">Arpenter</a>
          </li>

          <li>
            <a href="/david/stream/2019/09/10/">Nostalgie</a>
          </li>

          <li>
            <a href="/david/stream/2019/09/03/">Déconstruire</a>
          </li>

          <li>
            <a href="/david/stream/2019/08/27/">Documenter</a>
          </li>

          <li>
            <a href="/david/stream/2019/08/20/">Frustration</a>
          </li>

          <li>
            <a href="/david/stream/2019/08/13/">Holisme</a>
          </li>

          <li>
            <a href="/david/stream/2019/08/06/">1%</a>
          </li>

          <li>
            <a href="/david/stream/2019/07/30/">Exemplarité</a>
          </li>

          <li>
            <a href="/david/stream/2019/07/23/">Timelines</a>
          </li>

          <li>
            <a href="/david/stream/2019/07/16/">Écoute</a>
          </li>

          <li>
            <a href="/david/stream/2019/07/02/">Anxiété</a>
          </li>

          <li>
            <a href="/david/stream/2019/06/21/">À lier</a>
          </li>

          <li>
            <a href="/david/stream/2019/06/14/">Pauvreté</a>
          </li>

          <li>
            <a href="/david/stream/2019/06/07/">Amateur</a>
          </li>

          <li>
            <a href="/david/stream/2019/05/31/">Pollution</a>
          </li>

          <li>
            <a href="/david/stream/2019/05/24/">Apaisement</a>
          </li>

          <li>
            <a href="/david/stream/2019/05/10/">Folie</a>
          </li>

          <li>
            <a href="/david/stream/2019/05/03/">Sympathie</a>
          </li>

          <li>
            <a href="/david/stream/2019/04/12/">Péremption</a>
          </li>

          <li>
            <a href="/david/stream/2019/04/05/">Définitions</a>
          </li>

          <li>
            <a href="/david/stream/2019/03/29/">Acceptation</a>
          </li>

          <li>
            <a href="/david/stream/2019/03/22/">Dissonance</a>
          </li>

          <li>
            <a href="/david/stream/2019/03/15/">Reconnaissance</a>
          </li>

          <li>
            <a href="/david/stream/2019/03/08/">Lecture</a>
          </li>

          <li>
            <a href="/david/stream/2019/03/01/">Journaux</a>
          </li>

          <li>
            <a href="/david/stream/2019/02/22/">Écriture</a>
          </li>

          <li>
            <a href="/david/stream/2019/02/15/">Kyriarchie</a>
          </li>

          <li>
            <a href="/david/stream/2019/02/08/">Mots-serrures</a>
          </li>

          <li>
            <a href="/david/stream/2019/02/01/">Sans voie</a>
          </li>

          <li>
            <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>
          </li>

          <li>
            <a href="/david/stream/2019/01/18/">Agilité</a>
          </li>

          <li>
            <a href="/david/stream/2019/01/11/">Métaphores</a>
          </li>

          <li>
            <a href="/david/stream/2019/01/04/">Balbutiements</a>
          </li>

      </ul>

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

  <script>
  /* Service workers */
  if (navigator.serviceWorker) {
    window.addEventListener('load', function () {
      var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'
      function sendLinks (selector) {
        var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {
          return link.getAttribute('href')
        })
        links.push(location.pathname)  // Put the current page in cache too.
        navigator.serviceWorker.controller.postMessage({ links: links })
      }
      navigator.serviceWorker.getRegistration()
        .then(function (registration) {
          if (!registration || !navigator.serviceWorker.controller) {
            return navigator.serviceWorker.register('/serviceworker.js')
              .then(navigator.serviceWorker.ready)
              .then(function () {
                console.log('[ServiceWorker] Ready to go!')
              })
              .catch(console.error.bind(console))
          } else {
            console.log('[ServiceWorker] Send links via registration')
            sendLinks(selector)
          }
        })
      navigator.serviceWorker.addEventListener('controllerchange', function () {
        console.log('[ServiceWorker] Send links via controller change')
        sendLinks(selector)
      })
      navigator.serviceWorker.addEventListener('message', function (event) {
        var link = document.querySelector('a[href="' + event.data.link + '"]')
        if (event.data.status && link) {
          link.style.backgroundColor = '#2d7474'
          link.style.color = '#f0f0ea'

            link.setAttribute('title', 'En cache pour consultation sans connexion')

        }
      })
    })
  } else {
    console.warn('[ServiceWorker] No cache for old browsers.')
  }
</script>