davidbgk
/
larlet-fr-david-cache
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
123 提交
1 分支
目录树: 66734fb386
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '66734fb386'
${ noResults }
larlet-fr-david-cache/cache/9c0244d3a0cd8e36c041b0f548c.../index.html

index.html 25KB
原始文件 Blame 文件历史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608 
  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>Les outils sont-ils la solution à nos problèmes ? (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. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://blog.mageekbox.net/?post/2018/01/08/Les-outils-sont-ils-la-solution-a-nos-problemes">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Les outils sont-ils la solution à nos problèmes ? (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://blog.mageekbox.net/?post/2018/01/08/Les-outils-sont-ils-la-solution-a-nos-problemes">Source originale du contenu</a></h3>

  463.     <p><a href="https://medium.com/@ptitfred/haskell-and-fp-a83b5b22f67f">Frédéric Menou</a> a écrit un très bon article à propos de la <a href="https://fr.wikipedia.org/wiki/Programmation_fonctionnelle">programmation fonctionnel</a> et <a href="https://fr.wikipedia.org/wiki/Haskell">d’Haskell</a>, dans lequel il décrit notamment les raisons qui l’ont amené à apprendre ce paradigme et ce langage.</p>

  464. 

  465. <p>Je n’ai pas d’avis sur son choix d’Haskell pour son activité, car je ne connais pas ce langage et encore moins son métier.</p>

  466. 

  467. <p>Par contre, je connais relativement bien la problématique qui l’a mené vers cette solution, car j’ai rencontré exactement la même.</p>

  468. 

  469. <p>En effet, si je résume (certainement très grossièrement) sa démarche, Frédéric s’est tourné vers Haskell essentiellement parce qu’il cherche à écrire le moins de bogues possible lorsqu’il code, et il pense que le formalisme offert par le langage lui permet d’y parvenir, tout en améliorant la communication avec l’ensemble des parties prenantes dans un développement informatique.</p>

  470. 

  471. <p>Or, cela fait au moins maintenant presque 12 ans que je cherche à atteindre le même objectif.</p>

  472. 

  473. <p>De plus, j’ai commencé à développer de la même façon que Frédéric, en me consacrant sur les algorithmes et l’aspect technique, en renforçant ma maîtrise de PHP et des outils afférents grâce à une veille technologique quotidienne.</p>

  474. 

  475. <p>Notre parcours concernant les éditeurs de code a également été très similaire.</p>

  476. 

  477. <p>Pourtant, malgré une problématique similaire, nous sommes parvenus à des solutions très différentes.</p>

  478. 

  479. <p>Frédéric a remis en cause ses outils et en a sélectionné d’autres qui lui semblent plus adaptés pour atteindre son objectif.</p>

  480. 

  481. <p>De mon côté, au lieu de remettre en cause mes outils, j’ai choisi de me remettre en cause et de mieux comprendre les principes fondamentaux du paradigme que j’utilise, ce qui m’a amené à faire évoluer très fortement mes méthodes de développement.</p>

  482. 

  483. <p>À mon avis, celui qui peut dire lequel de nous deux a la meilleure stratégie pour atteindre son objectif n’est pas encore né, et je n’en ai donc pas la prétention, mais son billet m’a tout de même inspiré une réflexion que j’aimerai maintenant vous faire partager.</p>

  484. 

  485. <p>L’être humain a une tendance naturelle à incriminer ses outils lorsqu’il ne parvient pas à réaliser correctement quelque chose.</p>

  486. 

  487. <p>C’est un fait, et c’est bien normal, puisqu’il est bien plus simple et agréable pour nous de remettre en cause l’outillage que de se remettre en cause.</p>

  488. 

  489. <p>Donc, lorsqu’il est en situation d’échec, l’Homme adopte principalement deux stratégies.</p>

  490. 

  491. <p>La première consiste à changer d’outils, la seconde à les modifier dans l’espoir qu’une fois « améliorés », ils permettront de réussir.</p>

  492. 

  493. <p>Et parfois (et j’insiste sur ce « parfois »), je pense que cela a des effets très pervers, et je vais donner trois exemples, certes très caricaturaux, mais qui sont également à mes yeux très représentatifs.</p>

  494. 

  495. <p>Autrefois, dans des temps fort fort lointains, le développeur devait gérer lui-même la mémoire utilisée pour son programme, ce qui parfois, provoquait des erreurs de segmentations.</p>

  496. 

  497. <p>Une couche de complexité a donc été ajoutée aux langages informatiques afin de décharger les développeurs de cette tâche et ainsi éviter ces erreurs, et aujourd’hui, ils n'ont plus à se soucier de la mémoire vive, ou de quoi que ce soit d’autre relatifs au matériel sur lequel sera exécuté le code, d’ailleurs.</p>

  498. 

  499. <p>Mais qui, aujourd’hui, connait encore le fonctionnement de la mémoire vive d’un ordinateur ?</p>

  500. 

  501. <p>Pour ce que je peux en constater, il n’y a plus que les vieux barbus et les spécialistes de l’embarqué qui possèdent encore cette connaissance, alors qu’il s’agit de l’une des bases de la technologie sur laquelle repose le métier de développeur.</p>

  502. 

  503. <p>De plus, si autrefois, il pouvait y avoir des erreurs de segmentations, en contrepartie, la mémoire était généralement gérée aux petits oignons, car il s’agissait en plus d’une ressource comptée qu’il ne fallait pas gaspiller.</p>

  504. 

  505. <p>Mais aujourd’hui, il suffit qu’un onglet inactif dans un navigateur ne consomme pas plus de 80 Mo pour que nous soyons heureux…</p>

  506. 

  507. <p>Le quotidien du développeur a donc été « amélioré » grâce à une évolution de ses outils, mais en contrepartie, il a perdu de la connaissance et les programmes ont perdu en efficacité.</p>

  508. 

  509. <p>Quant à la stratégie du changement total d’outil pour palier à une défaillance, l’une des plus belles illustrations est justement la démarche décrite par Frédéric dans son billet (ce qui ne veut pas dire que je pense qu’il a fait une erreur, encore une fois, son billet n’a été qu’une source d’inspiration pour écrire celui-ci).</p>

  510. 

  511. <p>Nombre de développeurs passent en effet de la programmation orientée objet vers la programmation fonctionnelle, car ils pensent qu’elle est plus apte à répondre à leurs besoins, sans se poser de question par rapport à leur pratique et à leur compréhension de la programmation orientée objet.</p>

  512. 

  513. <p>Or, pour la plupart, ils pratiquent cette dernière sous une forme « diminuée » qui ne leur permet pas d’en tirer la quintessence.</p>

  514. 

  515. <p>Et le monde du logiciel n’est pas le seul à être concerné, celui du matériel l’est tout autant.</p>

  516. 

  517. <p>Les bases de l’architecture x86 ont été posées par Intel à la fin des années 1970, mais pour autant, elle est toujours massivement utilisée aujourd’hui.</p>

  518. 

  519. <p>Pourtant, je connais assez peu de personnes compétentes dans le domaine qui pense que cette architecture est la panacée.</p>

  520. 

  521. <p>Mais il faut dire qu’Intel a tout fait pour contrebalancer cela par une évolution à marche forcée des performances, en ajoutant de la complexité couche après couche afin de respecter la <a href="https://fr.wikipedia.org/wiki/Loi_de_Moore">loi de Moore</a>.</p>

  522. 

  523. <p>Et aujourd’hui, nous faisons face à <a href="https://meltdownattack.com">Meltdown et Spectre</a>, et l’avenir ne semble <a href="https://www.blackhat.com/docs/us-17/thursday/us-17-Domas-Breaking-The-x86-ISA.pdf">pas radieux</a>.</p>

  524. 

  525. <p>Et comme tous les fondeurs sont pris dans la course à la performance sous la pression du marché, les concurrents d’Intel ont fait de même en utilisant les mêmes concepts, ce qui fait qu’aujourd’hui, la <a href="https://twitter.com/ochsff/status/949840209553887232">quasi-totalité des CPU</a> actuellement en <a href="https://twitter.com/Blips_and_Chitz/status/949979576087797760">activité</a> est plus ou moins vulnérable à ces attaques d’un nouveau genre (même si elles ne semblent pas <a href="https://randomascii.wordpress.com/2018/01/07/finding-a-cpu-design-bug-in-the-xbox-360/">si nouvelles que cela</a>).</p>

  526. 

  527. <p>D’ailleurs, j’aime beaucoup ce commentaire de <a href="https://lkml.org/lkml/2018/1/3/797">Linus Torvald</a> à ce sujet :</p>

  528. 

  529. <blockquote>

  530. 

  531. <p>I think somebody inside of Intel needs to really take a long hard look at their CPU’s, and actually admit that they have issues instead of writing PR blurbs that say that everything works as designed.</p>

  532. </blockquote>

  533. 

  534. <p>Plutôt que de repartir à la table à dessin et se creuser la tête, Intel a en effet préféré spéculer le plus longtemps possible sur l’architecture x86 en la faisant évoluer aux forceps pour pallier ses défaillances grâce à une augmentation vertigineuse des performances, sans jamais en remettre en cause la philosophie et les fondamentaux.</p>

  535. 

  536. <p>Pour conclure, il peut être sain de changer d’outils ou de les rendre plus complexes afin de se simplifier la vie, mais il ne faut surtout pas oublier qu’il y a toujours un prix à payer, et par conséquent, il ne faut surtout pas penser qu’un tel changement vous permettra systématiquement d’atteindre votre objectif plus vite ou plus efficacement.</p>

  537. 

  538. <p>Le chemin que vous aurez à parcourir pourra en être simplifié, mais il pourra également vous emmener vers un précipice, une voie de garage, ou bien encore vous faire faire bien des détours tortueux et dangereux.</p>

  539. 

  540. <p>Pour preuve, malgré la simplicité apparente de son exemple pour illustrer le typage algébrique, malgré les fonctionnalités d’Haskell qui sont censées lui permettre d’esquiver les bugs, Frédéric a <a href="https://twitter.com/clementd/status/950270642418601984">introduit un bug</a> dans le code présent dans son billet…</p>

  541. 

  542. <p>Alors parfois, faire preuve d’humilité, d’honnêteté, en remettant en question ses pratiques afin de repartir sur des bases plus saines peut valoir le coût, plutôt que de déléguer à des outils la charge de nous rendre meilleurs, ce qui leur est impossible par nature.</p>

  543. 

  544. <p>La solution est rarement dans les outils, mais l’Homme est toujours à l’origine des problèmes.</p>

  545.   </article>

  546. </section>

  547. 

  548. 

  549. <nav id="jumpto">

  550.   <p>

  551.     <a href="/david/blog/">Accueil du blog</a> |

  552.     <a href="http://blog.mageekbox.net/?post/2018/01/08/Les-outils-sont-ils-la-solution-a-nos-problemes">Source originale</a> |

  553.     <a href="/david/stream/2019/">Accueil du flux</a>

  554.   </p>

  555. </nav>

  556. 

  557. <footer>

  558.   <div>

  559.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  560.     <p>

  561.       Bonjour/Hi!

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

  563.       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>).

  564.     </p>

  565.     <p>

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

  567.     </p>

  568.     

  569.     <p>

  570.       Voici quelques articles choisis :

  571.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  572.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  573.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  574.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  575.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  576.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  577.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  578.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  579.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  580.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  581.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  582.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  583.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  584.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  585.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  586.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  587.     </p>

  588.     <p>

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

  590.     </p>

  591.     <p>

  592.       Je ne traque pas ta navigation mais mon

  593.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  594.       conserve des logs d’accès.

  595.     </p>

  596.   </div>

  597. </footer>

  598. <script type="text/javascript">

  599.   ;(_ => {

  600.     const jumper = document.getElementById('jumper')

  601.     jumper.addEventListener('click', e => {

  602.       e.preventDefault()

  603.       const anchor = e.target.getAttribute('href')

  604.       const targetEl = document.getElementById(anchor.substring(1))

  605.       targetEl.scrollIntoView({behavior: 'smooth'})

  606.     })

  607.   })()

  608. </script>