A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 29KB

4 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>La veille techno pour les vieux croûtons (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://www.miximum.fr/veille-techno-vieux-croutons-paris-web-2015.html">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. La veille techno pour les vieux croûtons (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://www.miximum.fr/veille-techno-vieux-croutons-paris-web-2015.html">Source originale du contenu</a></h3>
  445. <p>Voici la transcription de la conférence « La veille techno pour les vieux
  446. 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
  447. 2015</a>.</p>
  448. <figure class="full align-center">
  449. <img alt="Saint Jérôme écrivant, tableau de Caravage" class="full shadow"
  450. src="http://i.miximum.fr/i/2015/10/TUM4VFT4OB.jpg" />
  451. <figcaption>
  452. <i>Développeur Cobol corrigeant un bug css sur le site de la Banque Postale</i> — Caravage
  453. </figcaption>
  454. </figure>
  455. <h2>Intro</h2>
  456. <p>Une nuit, en 2014, j'ai fait un cauchemar. J'ai rêvé que j'étais dans une pièce
  457. sans fenêtre, vouté sur mon clavier, couvert d'une couche de poussière
  458. fossilisée, et je corrigeais des bugs sur des applications en COBOL pour le
  459. compte de l'industrie financière. Je me suis réveillé en sursaut et c'est là
  460. que j'ai pris conscience que je m'étais transformé, en quelques mois,
  461. insidieusement, en vieux croûton du Web.</p>
  462. <h2>Les vieux croûtons</h2>
  463. <figure class="full align-center">
  464. <img alt="Tableau représentant Diogène par Trutovskiy Konstantin Na Senovale" class="full border shadow"
  465. src="http://i.miximum.fr/i/2015/10/QZ8GBGAO5U.jpg" />
  466. <figcaption>
  467. <i>Directeur technique refusant à l'équipe la migration de cvs à git</i> — Trutovskiy Konstantin Na senovale
  468. </figcaption>
  469. </figure>
  470. <p>Alors qu'est-ce que j'entends par « vieux croûton » ? Une vieille croûtonne ou
  471. un vieux croûton est une personne qui a laissé ses compétences devenir
  472. obsolètes. Par exemple, c'est la personne qui refuse d'entendre qu'utiliser les
  473. tableaux pour faire sa mise en page, ce n'est peut-être pas le top, ou que les
  474. pages d'intro en flash, ce n'est peut-être pas une super idée. On en connait
  475. tous.</p>
  476. <p>Dans « vieux croûton », il y a vieux. C'est pour ça que je suis obligé de
  477. préciser que ce n'est absolument pas une question d'âge. Refusons de sombrer
  478. dans le jeunisme primaire. On peut être un jeune vieux croûton. À l'inverse, on
  479. peut avoir n'importe quel âge et ne pas être un vieux croûton. Être un vieux
  480. croûton, ce n'est pas une question d'âge, c'est une question d'attitude
  481. mentale.</p>
  482. <p>Le vieux croûton, c'est celui qui ne veut pas changer, qui s'accroche à ses
  483. vieilles habitudes, à ses vieux outils, à ses vieilles méthodes de travail. Qui
  484. pense qu'il a appris une fois, maintenant <em>il sait</em>.</p>
  485. <p>Il existe deux catégories de vieux croûtons. D'abord, il y a le vieux croûton
  486. qui n'assume pas, comme moi. C'est celui qui est conscient de sa condition, qui
  487. a un peu honte, et qui est triste, parce qu'il se sent comme une sous-merde en
  488. sortant des conférences de Christophe Porteneuve.</p>
  489. <p>L'autre catégorie, c'est ceux qui assument <em>à mort</em> : en général, ils finissent
  490. directeurs techniques, et ils font chier toute l'équipe en les forçant à
  491. utiliser cvs.</p>
  492. <h2>La veille techno</h2>
  493. <p>Le proverbe dit qu'une scie qui ne s'affûte s'émousse. Si on traduit ça au Web,
  494. un des antidotes à la vieucroûtonnitude c'est la veille techno.</p>
  495. <p>Tester les nouvelles librairies ; jouer avec le dernier framework à la mode ;
  496. se maintenir à jour sur l'actualité des standards ; bidouiller avec les
  497. dernières apis, etc. Toujours se remettre en question, toujours maintenir ses
  498. compétences à niveau. Le développeur, s'il s'affûte sans cesse sciera sans
  499. soucis.</p>
  500. <h2>Le burnout</h2>
  501. <figure class="full align-center">
  502. <img alt="Jael et Sisera, tableau par Artemisia" class="full border shadow"
  503. src="http://i.miximum.fr/i/2015/10/294VLVUZF4.jpg" />
  504. <figcaption>
  505. <i>Documentation de Node.js. Allégorie.</i> — Artemisia
  506. </figcaption>
  507. </figure>
  508. <p>Jusqu'à maintenant, je pratiquais la veille techno sans trop y penser, c'était
  509. plutôt naturel. Dès qu'un nouveau truc sortait, c'était « oh, un nouveau
  510. framework javascript », et je passais un week-end à le tester en bidouillant un
  511. petit projet perso. Et puis en 2014, je me suis rendu compte que mon attitude
  512. avait changé.</p>
  513. <p>Au lieu de voir la veille techno comme un truc fun, c'était devenu un gros
  514. rouleau compresseur qui avançait derrière moi. Vous savez, un peu comme quand
  515. vous voyez votre évier se remplir petit à petit, et que vous avez de moins en
  516. moins envie de vous y mettre.</p>
  517. <p>Et j'en suis arrivé au point ou j'ai saturé, j'ai tout envoyé valser. J'ai pris
  518. tout ce qu'il y avait dans l'évier, je l'ai mis à la poubelle, et j'ai acheté
  519. de la vaisselle en plastique. Métaphoriquement, j'entends, hein ?! En gros,
  520. j'ai arrêté complètement la veille, j'étais devenu allergique à tout ce qui
  521. ressemblait de près ou de loin à un article technique.</p>
  522. <p>Et ça m'a tellement dégoûté que je n'avais même plus envie de travailler,
  523. j'étais à deux doigts d'appeler mes clients pour leur dire d'arrêter de me
  524. faire scier.</p>
  525. <h2>Petite séance d'introspection</h2>
  526. <figure class="full align-center">
  527. <img alt="La Sieste, tableau de Van Gogh" class="full border shadow"
  528. src="http://i.miximum.fr/i/2015/10/BKWI2KGVQW.jpg" />
  529. <figcaption>
  530. <i>Équipe de développement pendant un DDoS sur Github</i> — Van Gogh
  531. </figcaption>
  532. </figure>
  533. <p>J'ai fini par me demander comment j'en étais arrivé là. Et j'en suis arrivé à
  534. la conclusion que la veille techno c'était 1) extrêmement chronophage, et 2)
  535. répétitif et chiant à mourir.</p>
  536. <p>Pourquoi c'est chronophage ? Parce que dans le Web, tout change <em>très vite</em> ;
  537. et <em>tout</em> change très vite. Si on veut se tenir à la pointe sur les nouveaux
  538. outils, les méthodes, les langages, les frameworks, les apis, les standards,
  539. les pratiques, etc. ça prend un temps considérable. D'ailleurs, une personne
  540. qui travaille dans le Web, c'est un peu comme un bûcheron : si elle veut rester
  541. utile, de temps en temps, il faut qu'elle change de branche.</p>
  542. <p>Pourquoi c'est répétitif ? Je me souviens qu'à une époque, j'ai eu l'impression
  543. d'être Bill Murray dans le Jour de la Marmotte, et de vivre la même journée en
  544. boucle, encore et encore. Le matin, c'était l'annonce de la sortie du nouveau
  545. framework en js. L'après-midi, c'était l'annonce de la sortie du nouveau task
  546. manager en js. Se palucher la doc du 15e framework de l'année, qui fait la même
  547. chose que tous les autres, pour les moins monomaniaques d'entre nous, c'est un
  548. tout petit peu chiant, en fait.</p>
  549. <h2>Ma recherche de solution</h2>
  550. <figure class="full align-center">
  551. <img alt="Autoportrait, tableau de Courbet" class="full border shadow"
  552. src="http://i.miximum.fr/i/2015/10/ULIJDBW5PQ.jpg" />
  553. <figcaption>
  554. <i>Intégrateur tentant de comprendre l'API Appcache — Courbet</i>
  555. </figcaption>
  556. </figure>
  557. <p>Finalement, après quelques mois à me complaire dans mon attitude de vieux
  558. croûton, je me suis dit qu'il n'était pas possible que je continue comme ça, et
  559. qu'il fallait faire quelque chose. Après avoir un peu réfléchi à la question,
  560. j'ai décidé de faire trois choses.</p>
  561. <ul>
  562. <li>Zéroièmement : arrêter de culpabiliser de n'être pas 100% à la pointe.</li>
  563. <li>Premièrement : avoir une veille techno plus efficace.</li>
  564. <li>Deuxièmement : avoir une veille techno plus enrichissante.</li>
  565. </ul>
  566. <h2>Se débarrasser de la culpabilité</h2>
  567. <figure class="full align-center">
  568. <img alt="La naissance de Venus, tableau de Botticelli" class="full border shadow"
  569. src="http://i.miximum.fr/i/2015/10/HHNXBDZ68N.jpg" />
  570. <figcaption>
  571. <i>Discours d'ouverture par la présidente de Cap d'Agde Web</i> — Botticelli
  572. </figcaption>
  573. </figure>
  574. <p>Quelle est ma valeur ajoutée, qu'attendent de moi mes clients, qu'est-ce que je
  575. dois faire pour bien faire mon boulot ? Avoir une bonne vision de l'écosystème
  576. numérique, et proposer des solutions pertinentes en fonction du contexte. Je
  577. n'ai pas besoin de tout savoir pour être un bon professionnel.</p>
  578. <p>J'avais tendance à culpabiliser de ne pas utiliser les dernières technos, les
  579. dernières apis, etc. J'ai appris à lâcher prise là dessus. Des fois, je monte
  580. des projets, je n'utilise que des technos chiantes qui ont plus de cinq ans. Ne
  581. le dites pas à mes clients. Les projets sont super stables !</p>
  582. <p>Je ne dit pas qu'il ne faut plus utiliser de trucs modernes. Mais je me suis
  583. débarrassé du poids de la culpabilité ; maintenant, quand je décide de
  584. consacrer mon week-end à faire une rando, j'en profite mieux.</p>
  585. <h2>Rechercher l'efficacité pour y consacrer moins de temps</h2>
  586. <figure class="full align-center">
  587. <img alt="La leçon d'anatomie du Dr Tulp, tableau de Rembrandt" class="full border shadow"
  588. src="http://i.miximum.fr/i/2015/10/6ZVPZVH9O4.jpg" />
  589. <figcaption>
  590. <i>Autopsie d'une victime d'overdose de Javascript</i> — Rembrandt
  591. </figcaption>
  592. </figure>
  593. <p>Malgré tout, la veille techno reste essentielle. Comment faire pour y consacrer
  594. moins de temps ?</p>
  595. <p>Je pense que la manière la plus efficace de se maintenir à jour, ce n'est pas
  596. de tester une techno directement, par exemple sur un projet perso, c'est
  597. d'aller chercher des retours d'expériences.</p>
  598. <p>Parce que d'abord, un petit projet perso n'est pas représentatif des conditions
  599. d'un vrai projet. Et surtout, ce qui nous intéresse, ce ne sont pas les détails
  600. d'implémentation du truc. Ce qu'on veut savoir c'est :</p>
  601. <ul>
  602. <li>quels sont les cas d'utilisation pertinents de cette techno ?</li>
  603. <li>quels sont les avantages et les inconvénients par rapport à une techno X ?</li>
  604. <li>qu'est-ce que je vais y gagner ?</li>
  605. <li>quels problèmes je vais rencontrer ?</li>
  606. <li>est-ce que la techno est maintenue correctement ?</li>
  607. <li>etc.</li>
  608. </ul>
  609. <p>En allant parler cinq minutes à des gens qui ont mis en œuvre la techno sur des
  610. vrais projets, on sait déjà si c'est une techno qui mérite qu'on s'y attarde ou
  611. pas.</p>
  612. <p>Ce que j'essaye de faire aussi, c'est cibler ma veille. Il y a beaucoup
  613. d'effets de mode, des technos qui débarquent, brillent pendant un an, et
  614. disparaissent. Investir du temps dans ce genre de truc, ça me fait chier. Ce
  615. qui m'intéresse, ce sont les technos utiles et matures.</p>
  616. <p>Une techno mature, c'est une techno qui a vécu. C'est à dire qu'elle est
  617. stable, qu'il y a de la doc, et que les cas d'utilisation sont bien compris et
  618. bien référencés. Parce qu'il y a des technos qui apparaissent, qui ont une
  619. utilité, mais qui sont utilisées à tort et à travers uniquement parce qu'elles
  620. sont à la mode. NoSQL, vous vous rappelez ? En s'attachant à bien comprendre
  621. les cas d'utilisation d'une techno, on évite ce genre d'écueil.</p>
  622. <p>En ciblant sa veille, on gagne du temps.</p>
  623. <h2>Retrouver le fun</h2>
  624. <figure class="full align-center">
  625. <img alt="La persistance de la mémoire, tableau de Dali" class="full border shadow"
  626. src="http://i.miximum.fr/i/2015/10/1RYE7TXF4Q.jpg" />
  627. <figcaption>
  628. <i>Anatomie d'un projet Ruby On Rails</i> — Dali
  629. </figcaption>
  630. </figure>
  631. <p>À mon avis le plus important. J'essaye de faire en sorte de garder une veille
  632. techno enrichissante.</p>
  633. <p>Quand je m'attarde sur une techno, ça va être soit 1) parce que je sais que je
  634. vais pouvoir la mettre en œuvre immédiatement ou 2) parce qu'elle va me
  635. permettre d'aborder de nouveau concepts ou de nouvelles idées, et donc de
  636. m'ouvrir l'esprit.</p>
  637. <p>Passer une soirée à étudier un n-ième framework js, ça n'a pour moi strictement
  638. aucun intérêt. Par contre, étudier un truc totalement différent de ce que je
  639. fais d'habitude, là c'est intéressant.</p>
  640. <p>Vous connaissez la blague, un chercheur, c'est quelqu'un qui étudie de plus en
  641. plus en détail un domaine de plus en plus réduit ; par conséquent, un
  642. spécialiste est quelqu'un qui connait tout sur rien.</p>
  643. <p>Pourtant on sait que c'est comme ça que nait l'innovation : en combinant des
  644. idées qui à la base n'ont pas de lien direct entre elles. Donc plus on s'ouvre
  645. à des idées et concepts divers et variés, plus on va s'enrichir et plus on va
  646. s'ouvrir des portes pour trouver des solutions innovantes aux problèmes du
  647. quotidien.</p>
  648. <p>Il y a des tas de domaines qui ne me sont pas directement utiles au quotidien :
  649. Android, Bitcoin, la cryptographie, l'électronique, le <em>machine learning</em>…</p>
  650. <p>Une veille techno intéressante, c'est une veille techno qui reste fun.</p>
  651. <h2>Conclusion</h2>
  652. <figure class="full align-center">
  653. <img alt="La danse, tableau de Matisse" class="full border shadow"
  654. src="http://i.miximum.fr/i/2015/10/E47KZHZ26M.jpg" />
  655. <figcaption>
  656. <i>Équipe projet au retour de Paris Web</i> — Matisse
  657. </figcaption>
  658. </figure>
  659. <p>Je n'ai plus de temps et ça tombe bien car j'arrive à la fin.</p>
  660. <p>Finalement, un vieux croûton, ce n'est pas quelqu'un qui est trop âgé, c'est
  661. quelqu'un qui ne veut plus apprendre.</p>
  662. <p>J'ai longtemps cru que la veille techno était la solution pour ne pas devenir
  663. un vieux croûton. Finalement je me suis aperçu que, de manière très ironique,
  664. c'est ma veille techno, parce que je l'ai mal pratiqué, qui m'a amené à me
  665. transformer en vieux croûton.</p>
  666. <p>Il y a des solutions, pour se maintenir à jour tout en gardant une vie à côté.
  667. Mais surtout, il faut être conscient que, années après années, garder le
  668. plaisir qu'on a à pratiquer notre métier demande un effort conscient.</p>
  669. </article>
  670. </section>
  671. <nav id="jumpto">
  672. <p>
  673. <a href="/david/blog/">Accueil du blog</a> |
  674. <a href="http://www.miximum.fr/veille-techno-vieux-croutons-paris-web-2015.html">Source originale</a> |
  675. <a href="/david/stream/2019/">Accueil du flux</a>
  676. </p>
  677. </nav>
  678. <footer>
  679. <div>
  680. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  681. <p>
  682. Bonjour/Hi!
  683. 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>
  684. 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>).
  685. </p>
  686. <p>
  687. 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>.
  688. </p>
  689. <p>
  690. Voici quelques articles choisis :
  691. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  692. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  693. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  694. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  695. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  696. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  697. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  698. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  699. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  700. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  701. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  702. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  703. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  704. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  705. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  706. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  707. </p>
  708. <p>
  709. 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>.
  710. </p>
  711. <p>
  712. Je ne traque pas ta navigation mais mon
  713. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  714. conserve des logs d’accès.
  715. </p>
  716. </div>
  717. </footer>
  718. <script type="text/javascript">
  719. ;(_ => {
  720. const jumper = document.getElementById('jumper')
  721. jumper.addEventListener('click', e => {
  722. e.preventDefault()
  723. const anchor = e.target.getAttribute('href')
  724. const targetEl = document.getElementById(anchor.substring(1))
  725. targetEl.scrollIntoView({behavior: 'smooth'})
  726. })
  727. })()
  728. </script>