A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 26KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687
  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>Comment ne pas se laisser dévorer par la veille techno ? (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-efficace.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. Comment ne pas se laisser dévorer par la veille techno ? (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-efficace.html">Source originale du contenu</a></h3>
  445. <div class="figure align-center">
  446. <a class="reference external image-reference" href="http://www.tripodocus.fr/pictures/toits-parisiens/"><img alt="Photographie des toits de la ville de Paris" class="full border shadow" src="http://www.tripodocus.fr/thumbs/i/2015/toits-parisiens_medium.jpg"/></a>
  447. </div>
  448. <p>L'obsolescence des compétences est l'un des dangers qui guettent le vaillant
  449. travailleur du Web. Notre domaine d'activité évolue tellement vite, tant au
  450. niveau des outils, des méthodes, des pratiques, des technologies… que rester à
  451. la page est un défi permanent.</p>
  452. <p>Si, fraîchement émoulu de son école, notre jeune Webie·ne se lancera à corps
  453. perdu dans l'apprentissage du x-ième framework Javascript avec un enthousiasme
  454. toujours renouvelé, le senior finira peut-être par ressentir ennui et lassitude
  455. face à la répétitivité de la chose.</p>
  456. <p>Comment prendre de la distance avec sa veille techno sans pour autant se
  457. laisser distancer par le Web ?</p>
  458. <div class="section" id="denver-le-dernier-dinosaure-du-web">
  459. <h2>Denver, le dernier dinosaure du Web</h2>
  460. <p>N'avons nous pas tous déjà rencontré l'un ou l'une de ces <a class="reference external" href="http://www.miximum.fr/quel-developpeur-etes-vous.html">vieux schnocks</a> tellement engoncé
  461. dans ses vieilles habitudes, ses vieux outils, ses vieilles méthodes, qu'il est
  462. devenu incapable d'apporter la moindre contribution utile à un projet moderne ?</p>
  463. <p>Ces dinosaures du Web se sont reposés sur leurs lauriers tellement longtemps
  464. qu'on dirait que le monde a continué de tourner sans eux, qu'ils sont restés
  465. coincés à une autre époque. Pour un peu, on les verrais porter un haut de
  466. forme, priser du tabac et entendrais proférer des expressions comme Diante ! et
  467. Morbleu !</p>
  468. <p>Je précise à l'égard de mes éventuels pairs plus âgés qu'il ne s'agit
  469. absolument pas d'une question d'années. J'ai connu des ingénieurs obsolètes à
  470. 25 ans.</p>
  471. <p>S'ils peuvent encore se rendre utile en se chargeant de la maintenance de
  472. projets antédiluviens (coucou le Cobol !), leur intervention sera désastreuse
  473. sur les projets récents dans lesquels ils importent leurs sales habitudes et
  474. leurs pratiques obsolètes.</p>
  475. <p>C'est encore pire quand ces néandertaliens du code pervertissent les vierges
  476. esprits des stagiaires et nouvelles recrues en répandant leurs compétences
  477. véreuses comme la parole du messie, et s'arrogent des rôles de décideurs en
  478. invoquant des préceptes fumeux tel que le « respect dû aux aînés ».</p>
  479. <p>Bref ! S'il a de la chance, le dinosaure se fait des couilles en or en
  480. travaillant sur des projets poussiéreux pour l'industrie financière, mais il
  481. finit la plupart du temps dans un placard, là ou il sera le moins nuisible.</p>
  482. </div>
  483. <div class="section" id="fast-and-furious-veille-techno">
  484. <h2>Fast and furious veille techno</h2>
  485. <div class="figure align-center">
  486. <a class="reference external image-reference" href="http://i.miximum.fr/images/YJ46DBBTLS/"><img alt="Un pigeon méditatif" class="full border shadow" src="http://i.miximum.fr/i/2015/02/YJ46DBBTLS_l.png"/></a>
  487. </div>
  488. <p>Si elle est essentielle, la veille techno est exigeante. Parce que oui, tester
  489. un nouvel outil, un nouveau framework, une nouvelle librairie, une nouvelle
  490. méthode, ça prend du temps (du moins, <a class="reference external" href="http://www.commitstrip.com/fr/2013/03/20/jfais-pas-rien-jfais-de-la-veille/">quand on le fait sérieusement</a>).
  491. Et le temps, plus ça va, moins on en a.</p>
  492. <p>Sans oublier le côté répétitif de la chose. Apprendre à utiliser son premier
  493. framework Js, c'est fun. Se plonger dans la doc du quinzième, c'est franchement
  494. barbant.</p>
  495. <p>À titre personnel, 2014 a été une année charnière. J'ai découvert, un peu
  496. étonné, que l'idée de passer un week-end entier à manger des chips et jouer
  497. avec une nouvelle librairie Python ne provoquait plus en moi cet enthousiasme,
  498. cette drôle d'excitation (oserais-je dire presque charnelle ?) dont j'avais
  499. l'habitude. Cette lassitude s'est doublée par une volonté de <a class="reference external" href="http://www.tripodocus.fr">consacrer plus de
  500. temps à d'autres passions</a>.</p>
  501. <p>Une nuit, j'ai fait un cauchemar. Je suis vu moi même, 20 ans plus tard, en
  502. cardigan et pantalon en velours côtelé, recouvert par une épaisse couche de
  503. poussière, corrigeant des bugs vieux de plusieurs décennies dans des langages
  504. depuis longtemps disparus.</p>
  505. <p>Réveillé en sursaut et en sueur, je me suis alors rendu compte qu'il fallait
  506. que je change ma manière d'aborder la veille technologique. Voici quelques unes
  507. des stratégies que j'essaye de mettre en place.</p>
  508. </div>
  509. <div class="section" id="donner-plus-de-valeur-a-son-temps">
  510. <h2>Donner plus de valeur à son temps</h2>
  511. <p>J'avais l'habitude de me lancer dans <a class="reference external" href="http://www.commitstrip.com/fr/2014/11/25/west-side-project-story/">d'innombrables side projects</a>, parfois
  512. sans autre motivation que l'excitation de l'idée, et toujours avec l'inavouable
  513. espoir de devenir riche et célèbre. Que d'heures perdues sur des projets jamais
  514. terminés !</p>
  515. <p>Aujourd'hui, le temps libre est devenue une ressource (très) rare (et j'exprime
  516. mon profond respect à mes collègues qui en plus ont des gosses). Par
  517. conséquent, j'essaye de le dépenser à meilleur escient.</p>
  518. <p>Ça signifie que je ne démarre plus un <em>side project</em> sur un coup de tête. Quand
  519. je me lance dans un développement personnel, j'ai laissé mûrir l'idée, défini
  520. des objectifs, et je sais à l'avance la valeur que je vais en retirer (cf. plus
  521. bas).</p>
  522. </div>
  523. <div class="section" id="privilegier-la-qualite-a-la-quantite">
  524. <h2>Privilégier la qualité à la quantité</h2>
  525. <p>Quand une personne sans doute bien intentionnée décide de publier un n-ième
  526. clone de Grunt ou Backbone.js, j'avoue que je dois pallier à de pressantes
  527. pulsions meurtrières en me gavant de beurre de cacahuètes.</p>
  528. <p>J'ai arrêté d'essayer de me tenir à la page sur la dernière techno à la mode ou
  529. le dernier framework top tendance.</p>
  530. <p>Aujourd'hui, si je prends le temps de tester / apprendre un nouvel outil /
  531. langage / techno / truc, c'est pour l'une de ces deux raisons :</p>
  532. <ul class="simple">
  533. <li>C'est quelque chose de totalement différent par rapport à ce que je
  534. maîtrise, porteur de concepts qui me sont étrangers, et qui va m'ouvrir
  535. l'esprit (<a class="reference external" href="http://www.miximum.fr/tag/android.html">Android</a>, <a class="reference external" href="http://www.miximum.fr/tag/bitcoin.html">Bitcoin</a>, programmation fonctionnelle, etc.) ;</li>
  536. <li>C'est une techno fiable et mature <strong>répondant à un besoin réel</strong> et que je
  537. vais pouvoir intégrer directement dans ma trousse à outil.</li>
  538. </ul>
  539. <p>Si je n'apprends rien, je perds mon temps. J'agis en conséquence.</p>
  540. </div>
  541. <div class="section" id="laisser-murir-les-technos">
  542. <h2>Laisser mûrir les technos</h2>
  543. <p>Combien de temps perdu à tester des technos soi-disant révolutionnaires et qui
  544. ont fini aux oubliettes de l'e-histoire.</p>
  545. <p>La vérité est qu'une techno récente, quelque soit son aspect novateur, peut
  546. rarement être intégrée dans un projet amené à passer en production.</p>
  547. <p>Il y a toujours une phase de défrichage, de maturation, pendant laquelle les
  548. <em>early adopters</em> paieront les pots cassés.</p>
  549. <p>Aujourd'hui, j'attends qu'une techno soit mâture avant de m'y intéresser. Par
  550. mâture, j'entends qu'elle réponde aux critères suivants :</p>
  551. <ul class="simple">
  552. <li>la techno est techniquement robuste (pas de bugs en pagaille) ;</li>
  553. <li>la documentation et les différents tutoriels éparpillés sur le Web
  554. permettent une prise en main rapide ;</li>
  555. <li>il existe suffisamment de retours d'expérience pour que je puisse me faire
  556. une idée claire des cas d'utilisation pertinents.</li>
  557. </ul>
  558. </div>
  559. <div class="section" id="attacher-de-l-importance-aux-retours-d-utilisation">
  560. <h2>Attacher de l'importance aux retours d'utilisation</h2>
  561. <div class="figure align-center">
  562. <a class="reference external image-reference" href="http://www.tripodocus.fr/pictures/des-amis-au-cap-dagde/"><img alt="Silhouette sur un ciel bleu" class="full border shadow" src="http://www.tripodocus.fr/thumbs/i/2015/des-amis-au-cap-dagde_medium.jpg"/></a>
  563. </div>
  564. <p>J'ai tendance à attribuer de plus en plus d'importance aux retours
  565. d'utilisation plutôt qu'à l'aspect technique et fonctionnel de la techno.</p>
  566. <p>Plutôt que de lire des tutoriels techniques, je préfère m'intéresser aux
  567. expériences des <em>early adopters</em>. Dans quels cas cette techno est-elle
  568. appropriée ou non ? Quels sont ses avantages et ses inconvénients ? Quelles
  569. sont ses forces et ses faiblesses ? Quels gains <strong>réels</strong> espérer, et à quelles
  570. galères s'attendre ?</p>
  571. <p>L'exemple emblématique, c'est Docker. Docker, un outil qui permet de faire des
  572. machines virtuelles de manière simple et rapide à l'échelle d'un processus. Sur
  573. le papier, c'est génial. En démo, c'est étourdissant. En pratique, je n'ai
  574. trouvé aucun retour d'utilisation décrivant comment Docker, mis en place sur un
  575. projet en production, a enlevé de la complexité au lieu d'en rajouter.</p>
  576. </div>
  577. <div class="section" id="aller-a-des-conferences-echanger">
  578. <h2>Aller à des conférences, échanger</h2>
  579. <p>Le meilleur moyen de discuter avec d'autres travailleur·se·s du Web, c'est
  580. encore de trouver un nid.</p>
  581. <p>En l'occurrence, les conférences sont un excellent moyen de cuisiner des
  582. dévs, des admin sys, des intés, des agilistes… sur les derniers trucs qui
  583. valent le coup qu'on s'y penche.</p>
  584. <p>C'est quoi cette techno ? Est-ce que ça marche bien ? Quels sont les avantages
  585. par rapport à X ? Autant de questions qui trouveront plus facilement réponse
  586. autour d'un croissant ou d'une bière que derrière un clavier.</p>
  587. </div>
  588. <div class="section" id="conclusion">
  589. <h2>Conclusion</h2>
  590. <p>La veille techno est un processus essentiel, mais plus le temps passe, et plus
  591. le besoin de s'y consacrer avec une certaine efficacité se fait sentir. Faute
  592. de quoi, ennui et lassitude finiront par s'emparer de l'ingénieur·e.</p>
  593. <p>Sur ces quelques réflexions, je vous laisse, je vais découper du saucisson.</p>
  594. </div>
  595. </article>
  596. </section>
  597. <nav id="jumpto">
  598. <p>
  599. <a href="/david/blog/">Accueil du blog</a> |
  600. <a href="http://www.miximum.fr/veille-techno-efficace.html">Source originale</a> |
  601. <a href="/david/stream/2019/">Accueil du flux</a>
  602. </p>
  603. </nav>
  604. <footer>
  605. <div>
  606. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  607. <p>
  608. Bonjour/Hi!
  609. 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>
  610. 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>).
  611. </p>
  612. <p>
  613. 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>.
  614. </p>
  615. <p>
  616. Voici quelques articles choisis :
  617. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  618. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  619. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  620. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  621. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  622. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  623. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  624. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  625. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  626. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  627. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  628. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  629. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  630. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  631. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  632. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  633. </p>
  634. <p>
  635. 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>.
  636. </p>
  637. <p>
  638. Je ne traque pas ta navigation mais mon
  639. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  640. conserve des logs d’accès.
  641. </p>
  642. </div>
  643. </footer>
  644. <script type="text/javascript">
  645. ;(_ => {
  646. const jumper = document.getElementById('jumper')
  647. jumper.addEventListener('click', e => {
  648. e.preventDefault()
  649. const anchor = e.target.getAttribute('href')
  650. const targetEl = document.getElementById(anchor.substring(1))
  651. targetEl.scrollIntoView({behavior: 'smooth'})
  652. })
  653. })()
  654. </script>