davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808
							<!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>La veille techno pour les vieux croûtons (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="http://www.miximum.fr/veille-techno-vieux-croutons-paris-web-2015.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>
  La veille techno pour les vieux croûtons (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://www.miximum.fr/veille-techno-vieux-croutons-paris-web-2015.html">Source originale du contenu</a></h3>
    <p>Voici la transcription de la conférence « La veille techno pour les vieux
croûtons » que <a href="http://www.miximum.fr/compte-rendu-paris-web-2015.html">j'ai eu le grand plaisir de donner à Paris Web
2015</a>.</p>

<figure class="full align-center">
    <img alt="Saint Jérôme écrivant, tableau de Caravage" class="full shadow"
        src="http://i.miximum.fr/i/2015/10/TUM4VFT4OB.jpg" />
    <figcaption>
        <i>Développeur Cobol corrigeant un bug css sur le site de la Banque Postale</i> — Caravage
    </figcaption>
</figure>

<h2>Intro</h2>

<p>Une nuit, en 2014, j'ai fait un cauchemar. J'ai rêvé que j'étais dans une pièce
sans fenêtre, vouté sur mon clavier, couvert d'une couche de poussière
fossilisée, et je corrigeais des bugs sur des applications en COBOL pour le
compte de l'industrie financière. Je me suis réveillé en sursaut et c'est là
que j'ai pris conscience que je m'étais transformé, en quelques mois,
insidieusement, en vieux croûton du Web.</p>

<h2>Les vieux croûtons</h2>

<figure class="full align-center">
    <img alt="Tableau représentant Diogène par Trutovskiy Konstantin Na Senovale" class="full border shadow"
        src="http://i.miximum.fr/i/2015/10/QZ8GBGAO5U.jpg" />
    <figcaption>
<i>Directeur technique refusant à l'équipe la migration de cvs à git</i> — Trutovskiy Konstantin Na senovale
    </figcaption>
</figure>

<p>Alors qu'est-ce que j'entends par « vieux croûton » ? Une vieille croûtonne ou
un vieux croûton est une personne qui a laissé ses compétences devenir
obsolètes. Par exemple, c'est la personne qui refuse d'entendre qu'utiliser les
tableaux pour faire sa mise en page, ce n'est peut-être pas le top, ou que les
pages d'intro en flash, ce n'est peut-être pas une super idée. On en connait
tous.</p>

<p>Dans « vieux croûton », il y a vieux. C'est pour ça que je suis obligé de
préciser que ce n'est absolument pas une question d'âge. Refusons de sombrer
dans le jeunisme primaire. On peut être un jeune vieux croûton. À l'inverse, on
peut avoir n'importe quel âge et ne pas être un vieux croûton. Être un vieux
croûton, ce n'est pas une question d'âge, c'est une question d'attitude
mentale.</p>

<p>Le vieux croûton, c'est celui qui ne veut pas changer, qui s'accroche à ses
vieilles habitudes, à ses vieux outils, à ses vieilles méthodes de travail. Qui
pense qu'il a appris une fois, maintenant <em>il sait</em>.</p>

<p>Il existe deux catégories de vieux croûtons. D'abord, il y a le vieux croûton
qui n'assume pas, comme moi. C'est celui qui est conscient de sa condition, qui
a un peu honte, et qui est triste, parce qu'il se sent comme une sous-merde en
sortant des conférences de Christophe Porteneuve.</p>

<p>L'autre catégorie, c'est ceux qui assument <em>à mort</em> : en général, ils finissent
directeurs techniques, et ils font chier toute l'équipe en les forçant à
utiliser cvs.</p>

<h2>La veille techno</h2>

<p>Le proverbe dit qu'une scie qui ne s'affûte s'émousse. Si on traduit ça au Web,
un des antidotes à la vieucroûtonnitude c'est la veille techno.</p>

<p>Tester les nouvelles librairies ; jouer avec le dernier framework à la mode ;
se maintenir à jour sur l'actualité des standards ; bidouiller avec les
dernières apis, etc. Toujours se remettre en question, toujours maintenir ses
compétences à niveau. Le développeur, s'il s'affûte sans cesse sciera sans
soucis.</p>

<h2>Le burnout</h2>

<figure class="full align-center">
    <img alt="Jael et Sisera, tableau par Artemisia" class="full border shadow"
        src="http://i.miximum.fr/i/2015/10/294VLVUZF4.jpg" />
    <figcaption>
<i>Documentation de Node.js. Allégorie.</i> — Artemisia
    </figcaption>
</figure>

<p>Jusqu'à maintenant, je pratiquais la veille techno sans trop y penser, c'était
plutôt naturel. Dès qu'un nouveau truc sortait, c'était « oh, un nouveau
framework javascript », et je passais un week-end à le tester en bidouillant un
petit projet perso. Et puis en 2014, je me suis rendu compte que mon attitude
avait changé.</p>

<p>Au lieu de voir la veille techno comme un truc fun, c'était devenu un gros
rouleau compresseur qui avançait derrière moi. Vous savez, un peu comme quand
vous voyez votre évier se remplir petit à petit, et que vous avez de moins en
moins envie de vous y mettre.</p>

<p>Et j'en suis arrivé au point ou j'ai saturé, j'ai tout envoyé valser. J'ai pris
tout ce qu'il y avait dans l'évier, je l'ai mis à la poubelle, et j'ai acheté
de la vaisselle en plastique. Métaphoriquement, j'entends, hein ?! En gros,
j'ai arrêté complètement la veille, j'étais devenu allergique à tout ce qui
ressemblait de près ou de loin à un article technique.</p>

<p>Et ça m'a tellement dégoûté que je n'avais même plus envie de travailler,
j'étais à deux doigts d'appeler mes clients pour leur dire d'arrêter de me
faire scier.</p>

<h2>Petite séance d'introspection</h2>

<figure class="full align-center">
    <img alt="La Sieste, tableau de Van Gogh" class="full border shadow"
        src="http://i.miximum.fr/i/2015/10/BKWI2KGVQW.jpg" />
    <figcaption>
<i>Équipe de développement pendant un DDoS sur Github</i> — Van Gogh
    </figcaption>
</figure>

<p>J'ai fini par me demander comment j'en étais arrivé là. Et j'en suis arrivé à
la conclusion que la veille techno c'était 1) extrêmement chronophage, et 2)
répétitif et chiant à mourir.</p>

<p>Pourquoi c'est chronophage ? Parce que dans le Web, tout change <em>très vite</em> ;
et <em>tout</em> change très vite. Si on veut se tenir à la pointe sur les nouveaux
outils, les méthodes, les langages, les frameworks, les apis, les standards,
les pratiques, etc. ça prend un temps considérable. D'ailleurs, une personne
qui travaille dans le Web, c'est un peu comme un bûcheron : si elle veut rester
utile, de temps en temps, il faut qu'elle change de branche.</p>

<p>Pourquoi c'est répétitif ? Je me souviens qu'à une époque, j'ai eu l'impression
d'être Bill Murray dans le Jour de la Marmotte, et de vivre la même journée en
boucle, encore et encore. Le matin, c'était l'annonce de la sortie du nouveau
framework en js. L'après-midi, c'était l'annonce de la sortie du nouveau task
manager en js. Se palucher la doc du 15e framework de l'année, qui fait la même
chose que tous les autres, pour les moins monomaniaques d'entre nous, c'est un
tout petit peu chiant, en fait.</p>

<h2>Ma recherche de solution</h2>

<figure class="full align-center">
    <img alt="Autoportrait, tableau de Courbet" class="full border shadow"
        src="http://i.miximum.fr/i/2015/10/ULIJDBW5PQ.jpg" />
    <figcaption>
<i>Intégrateur tentant de comprendre l'API Appcache — Courbet</i>
    </figcaption>
</figure>

<p>Finalement, après quelques mois à me complaire dans mon attitude de vieux
croûton, je me suis dit qu'il n'était pas possible que je continue comme ça, et
qu'il fallait faire quelque chose. Après avoir un peu réfléchi à la question,
j'ai décidé de faire trois choses.</p>

<ul>
<li>Zéroièmement : arrêter de culpabiliser de n'être pas 100% à la pointe.</li>
<li>Premièrement : avoir une veille techno plus efficace.</li>
<li>Deuxièmement : avoir une veille techno plus enrichissante.</li>
</ul>

<h2>Se débarrasser de la culpabilité</h2>

<figure class="full align-center">
    <img alt="La naissance de Venus, tableau de Botticelli" class="full border shadow"
        src="http://i.miximum.fr/i/2015/10/HHNXBDZ68N.jpg" />
    <figcaption>
<i>Discours d'ouverture par la présidente de Cap d'Agde Web</i> — Botticelli
    </figcaption>
</figure>

<p>Quelle est ma valeur ajoutée, qu'attendent de moi mes clients, qu'est-ce que je
dois faire pour bien faire mon boulot ? Avoir une bonne vision de l'écosystème
numérique, et proposer des solutions pertinentes en fonction du contexte. Je
n'ai pas besoin de tout savoir pour être un bon professionnel.</p>

<p>J'avais tendance à culpabiliser de ne pas utiliser les dernières technos, les
dernières apis, etc. J'ai appris à lâcher prise là dessus. Des fois, je monte
des projets, je n'utilise que des technos chiantes qui ont plus de cinq ans. Ne
le dites pas à mes clients. Les projets sont super stables !</p>

<p>Je ne dit pas qu'il ne faut plus utiliser de trucs modernes. Mais je me suis
débarrassé du poids de la culpabilité ; maintenant, quand je décide de
consacrer mon week-end à faire une rando, j'en profite mieux.</p>

<h2>Rechercher l'efficacité pour y consacrer moins de temps</h2>

<figure class="full align-center">
    <img alt="La leçon d'anatomie du Dr Tulp, tableau de Rembrandt" class="full border shadow"
        src="http://i.miximum.fr/i/2015/10/6ZVPZVH9O4.jpg" />
    <figcaption>
<i>Autopsie d'une victime d'overdose de Javascript</i> — Rembrandt
    </figcaption>
</figure>

<p>Malgré tout, la veille techno reste essentielle. Comment faire pour y consacrer
moins de temps ?</p>

<p>Je pense que la manière la plus efficace de se maintenir à jour, ce n'est pas
de tester une techno directement, par exemple sur un projet perso, c'est
d'aller chercher des retours d'expériences.</p>

<p>Parce que d'abord, un petit projet perso n'est pas représentatif des conditions
d'un vrai projet. Et surtout, ce qui nous intéresse, ce ne sont pas les détails
d'implémentation du truc. Ce qu'on veut savoir c'est :</p>

<ul>
<li>quels sont les cas d'utilisation pertinents de cette techno ?</li>
<li>quels sont les avantages et les inconvénients par rapport à une techno X ?</li>
<li>qu'est-ce que je vais y gagner ?</li>
<li>quels problèmes je vais rencontrer ?</li>
<li>est-ce que la techno est maintenue correctement ?</li>
<li>etc.</li>
</ul>

<p>En allant parler cinq minutes à des gens qui ont mis en œuvre la techno sur des
vrais projets, on sait déjà si c'est une techno qui mérite qu'on s'y attarde ou
pas.</p>

<p>Ce que j'essaye de faire aussi, c'est cibler ma veille. Il y a beaucoup
d'effets de mode, des technos qui débarquent, brillent pendant un an, et
disparaissent. Investir du temps dans ce genre de truc, ça me fait chier. Ce
qui m'intéresse, ce sont les technos utiles et matures.</p>

<p>Une techno mature, c'est une techno qui a vécu. C'est à dire qu'elle est
stable, qu'il y a de la doc, et que les cas d'utilisation sont bien compris et
bien référencés. Parce qu'il y a des technos qui apparaissent, qui ont une
utilité, mais qui sont utilisées à tort et à travers uniquement parce qu'elles
sont à la mode. NoSQL, vous vous rappelez ? En s'attachant à bien comprendre
les cas d'utilisation d'une techno, on évite ce genre d'écueil.</p>

<p>En ciblant sa veille, on gagne du temps.</p>

<h2>Retrouver le fun</h2>

<figure class="full align-center">
    <img alt="La persistance de la mémoire, tableau de Dali" class="full border shadow"
        src="http://i.miximum.fr/i/2015/10/1RYE7TXF4Q.jpg" />
    <figcaption>
<i>Anatomie d'un projet Ruby On Rails</i> — Dali
    </figcaption>
</figure>

<p>À mon avis le plus important. J'essaye de faire en sorte de garder une veille
techno enrichissante.</p>

<p>Quand je m'attarde sur une techno, ça va être soit 1) parce que je sais que je
vais pouvoir la mettre en œuvre immédiatement ou 2) parce qu'elle va me
permettre d'aborder de nouveau concepts ou de nouvelles idées, et donc de
m'ouvrir l'esprit.</p>

<p>Passer une soirée à étudier un n-ième framework js, ça n'a pour moi strictement
aucun intérêt. Par contre, étudier un truc totalement différent de ce que je
fais d'habitude, là c'est intéressant.</p>

<p>Vous connaissez la blague, un chercheur, c'est quelqu'un qui étudie de plus en
plus en détail un domaine de plus en plus réduit ; par conséquent, un
spécialiste est quelqu'un qui connait tout sur rien.</p>

<p>Pourtant on sait que c'est comme ça que nait l'innovation : en combinant des
idées qui à la base n'ont pas de lien direct entre elles. Donc plus on s'ouvre
à des idées et concepts divers et variés, plus on va s'enrichir et plus on va
s'ouvrir des portes pour trouver des solutions innovantes aux problèmes du
quotidien.</p>

<p>Il y a des tas de domaines qui ne me sont pas directement utiles au quotidien :
Android, Bitcoin, la cryptographie, l'électronique, le <em>machine learning</em>…</p>

<p>Une veille techno intéressante, c'est une veille techno qui reste fun.</p>

<h2>Conclusion</h2>

<figure class="full align-center">
    <img alt="La danse, tableau de Matisse" class="full border shadow"
        src="http://i.miximum.fr/i/2015/10/E47KZHZ26M.jpg" />
    <figcaption>
<i>Équipe projet au retour de Paris Web</i> — Matisse
    </figcaption>
</figure>

<p>Je n'ai plus de temps et ça tombe bien car j'arrive à la fin.</p>

<p>Finalement, un vieux croûton, ce n'est pas quelqu'un qui est trop âgé, c'est
quelqu'un qui ne veut plus apprendre.</p>

<p>J'ai longtemps cru que la veille techno était la solution pour ne pas devenir
un vieux croûton. Finalement je me suis aperçu que, de manière très ironique,
c'est ma veille techno, parce que je l'ai mal pratiqué, qui m'a amené à me
transformer en vieux croûton.</p>

<p>Il y a des solutions, pour se maintenir à jour tout en gardant une vie à côté.
Mais surtout, il faut être conscient que, années après années, garder le
plaisir qu'on a à pratiquer notre métier demande un effort conscient.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://www.miximum.fr/veille-techno-vieux-croutons-paris-web-2015.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>