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

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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604 
  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>Réinventer la programmation ? (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://internetactu.blog.lemonde.fr/2017/11/25/reinventer-la-programmation/">

  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.   Réinventer la programmation ? (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://internetactu.blog.lemonde.fr/2017/11/25/reinventer-la-programmation/">Source originale du contenu</a></h3>

  463.     <p>La manière même dont on code arrive-t-elle à bout de souffle ? C’est la thèse que défend <a href="https://www.theatlantic.com/technology/archive/2017/09/saving-the-world-from-code/540393/">un long et passionnant article de <em>The Atlantic</em></a> signé par le journaliste et programmeur <a href="http://jsomers.net/">James Somers</a> (<a href="https://twitter.com/jsomers">@jsomers</a>). </p>

  464. 

  465. <h2>Des limites critiques des systèmes logiciels</h2>

  466. 

  467. <p>L’article de James Somers débute par le récit de la panne du 911, le numéro d’urgence, qui a touché l’État de Washington, la région de Seattle, un soir d’avril 2014. Pendant plusieurs heures, impossible de joindre les urgences : tous les appels sonnaient occupés. La raison ? Le système logiciel avait atteint son plafond d’appel, un chiffre maximal que les programmeurs avaient laissé à plusieurs millions, sans penser qu’il serait un jour atteint. D’autres centres de répartition des appels ont été touchés en Californie, Floride, Caroline et Minnesota. Des millions d’Américains signalaient ne pas pouvoir joindre les urgences. Il a fallu attendre le matin pour comprendre et réparer la panne : il suffisait juste de changer un nombre dans un logiciel. </p>

  468. 

  469. <p><a href="http://internetactu.blog.lemonde.fr/files/2017/11/softwareapocalypse-1024x532.png"><img src="http://internetactu.blog.lemonde.fr/files/2017/11/softwareapocalypse-1024x532-1024x532.png" alt="" class="aligncenter size-large wp-image-2347" srcset="http://internetactu.blog.lemonde.fr/files/2017/11/softwareapocalypse-1024x532.png 1024w, http://internetactu.blog.lemonde.fr/files/2017/11/softwareapocalypse-1024x532-300x156.png 300w, http://internetactu.blog.lemonde.fr/files/2017/11/softwareapocalypse-1024x532-768x399.png 768w, http://internetactu.blog.lemonde.fr/files/2017/11/softwareapocalypse-1024x532-900x468.png 900w" sizes="(max-width: 550px) 100vw, 550px"/></a></p>

  470. 

  471. <p>La panne n’a duré qu’une nuit, mais pour Somers, elle montre bien que les systèmes ont changé de nature. Alors qu’avant les appels d’urgence étaient gérés localement, les logiciels ont permis de créer des systèmes à impact global, extrêmement complexes et dont le caractère critique repose sur des millions de lignes de code. Somers rappelle que les défaillances, si elles restent souvent limitées en durée, ont un impact de plus en plus massif et ce d’autant que les logiciels gèrent des infrastructures de plus en plus vastes, complexes et critiques. </p>

  472. 

  473. <p><em>« Lorsque nous utilisions des systèmes électromécaniques, nous pouvions les tester de manière exhaustive »</em>, regrette <a href="http://sunnyday.mit.edu/">Nancy Leveson</a>, spécialiste d’astronautique, d’aéronautique et de sécurité logicielle au MIT. Les systèmes logiciels sont différents parce qu’ils peuvent être changés à moindre coût, qu’ils sont sans cesse mis à jour et bien plus complexes. Pour Leveson, <em>« le problème est que nous essayons de construire des systèmes qui dépassent notre capacité à les gérer intellectuellement »</em>. </p>

  474. 

  475. <p>Le cadre standard de réflexion sur les défaillances techniques, rappelle Somers, date pourtant des systèmes électromécaniques : on rendait les systèmes fiables en construisant des pièces fiables et en planifiant leurs pannes ou remplacements. Le problème est que le logiciel, lui, ne casse pas comme un rivet défectueux. Quand il échoue, c’est que le logiciel a fait exactement ce qu’on lui a dit de faire : c’est le programmeur qui a été défaillant. <em>« Les échecs logiciels sont des échecs de compréhension et d’imagination »</em>. Mais la complexité de ce qu’on lui demande est invisible à l’oeil nu. Ainsi, aujourd’hui, il n’y a plus de lien mécanique entre la pédale de l’accélérateur et le moteur : vous activez une commande logicielle qui décide de l’air à apporter au moteur. Lorsqu’un programme est en charge de l’accélérateur et des freins, il peut vous ralentir si vous êtes trop près d’une autre voiture ou réguler votre consommation. </p>

  476. 

  477. <p>Le problème, rappelle Somers, c’est que même ceux qui écrivent des algorithmes ne savent pas toujours vraiment comment ils fonctionnent du fait de leur complexité et de leur intrication. Le logiciel nous a permis de fabriquer les machines les plus complexes qui aient jamais existé, sans que nous l’ayons toujours remarqué, car les voitures d’aujourd’hui ressemblent exactement aux voitures d’hier. Le fait que nous ne voyons pas la complexité ne signifie pas qu’elle a disparu, au contraire : elle est plus présente que jamais. </p>

  478. 

  479. <p>Si les logiciels sont devenus les pivots du monde que nous construisons, notre confiance dans leur complexité est parfois surestimée. Ce qui rendait la programmation difficile était qu’elle obligeait de penser comme un ordinateur. Mais c’est devenu impossible. Personne ne peut anticiper tout ce qui est contenu dans les 100 millions de lignes de code qui font fonctionner une voiture. </p>

  480. 

  481. <p>Somers rappelle les incidents qui ont affecté certaines Toyota, avec des accélérateurs et des freins bloqués. Si Toyota a blâmé les conducteurs, la National Highway Traffic Safety Administration qui a mené une longue enquête sur le code des voitures n’a pas trouvé la preuve que le logiciel était la cause, mais a souligné qu’ils ne pouvaient pas prouver que ce n’était pas le cas. Un expert indépendant qui a passé encore plus de temps sur le sujet a montré que l’empilage et le tissage du code des voitures, accumulé et modifié année après année, avaient rendu le code impossible à suivre et empêchait de tester exhaustivement ses défauts. L’équipe de l’expert a démontré qu’il y avait en fait plus de 10 millions de façons pour l’ordinateur de bord d’entraîner une accélération involontaire, que la simple transformation d’un bit dans la mémoire de l’ordinateur pouvait mettre la voiture hors de contrôle et que le code de sécurité mis en place par Toyota n’était pas suffisant pour empêcher ces erreurs. Le logiciel qui regarde le logiciel peut lui aussi être victime d’erreurs. Au final, Toyota a rappelé plus de 9 millions de voitures et payé près de 3 milliards de dollars en amendes liées à quelques cas d’accélérations involontaires. </p>

  482. 

  483. <p>Pour Somers, ces exemples montrent qu’il est nécessaire d’obtenir de meilleurs résultats, car plus les logiciels deviennent sophistiqués et connectés, en prenant le contrôle de fonctions toujours plus critiques, plus ces problèmes pourraient s’aggraver. </p>

  484. 

  485. <h2>Programmer autrement ?</h2>

  486. 

  487. <p><em>« Le problème est que même les très bons programmeurs peinent à comprendre les systèmes avec lesquels ils travaillent »</em>, explique le développeur <a href="http://www.chris-granger.com/">Chris Granger</a> (<a href="https://twitter.com/ibdknox">@ibdknox</a>) qui a observé comment les développeurs travaillaient à la mise au point de <a href="https://www.visualstudio.com/">Visual Studio</a>, un système de Microsoft utilisé par nombre de programmeurs professionnels. Visual Studio, c’est plus de 55 millions de lignes de codes, et 98% d’entre elles ne sont pas pertinentes, estime Granger. Le problème est que c’est un assemblage de plein de travaux différents et pour le comprendre, le parcourir, pour un informaticien, il faut être capable de jouer les fonctions qu’on rencontre dans sa tête. C’est comme jouer aux échecs avec un bandeau sur les yeux : l’essentiel de l’énergie est dépensé à avoir une représentation des pièces et de leurs mouvements… tant et si bien qu’il ne reste plus d’énergie mentale pour penser au jeu lui-même. </p>

  488. 

  489. <p><a href="http://internetactu.blog.lemonde.fr/files/2017/11/yahoopipes.jpg"><img src="http://internetactu.blog.lemonde.fr/files/2017/11/yahoopipes.jpg" alt="" class="aligncenter size-full wp-image-2348" srcset="http://internetactu.blog.lemonde.fr/files/2017/11/yahoopipes.jpg 500w, http://internetactu.blog.lemonde.fr/files/2017/11/yahoopipes-300x245.jpg 300w" sizes="(max-width: 500px) 100vw, 500px"/></a><br/>

  490. <em>Image : Comme <a href="https://ifttt.com/">IFTTT</a>, Yahoo Pipes, l’outil développé par Yahoo et fermé en 2015, pourrait certainement figurer dans cette liste d’outils qui rendent le code plus accessible, puisqu’il permettait, assez simplement, de combiner des données et des actions, de créer des chaînes d’instructions depuis différents services web, sans avoir à les programmer. Un clone du service, <a href="https://www.pipes.digital/">Pipes.digital</a> a récemment relancé le service. <a href="https://korben.info/yahoo-pipes-retour-clone-ne-lache-rien.html">Via Korben</a>. </em>. </p>

  491. 

  492. <p><a href="https://johnresig.com/">John Resig</a> (<a href="https://twitter.com/jeresig">@jeresig</a>), programmeur de logiciels JavaScript et responsable du <a href="https://www.khanacademy.org/computing/computer-programming">programme de formation en informatique</a> de la <a href="https://www.khanacademy.org/">Khan Academy</a>, a remarqué qu’il était difficile d’apprendre à programmer. Quand vous faites un programme, vous entrez des mots. Si vous souhaitez les changer, vous devez changer le texte. Les étudiants qui réussissaient le mieux étaient ceux capables de parcourir le texte dans leur tête, en tentant de suivre les résultats de chaque calcul générés par le texte. Le problème de cette façon de faire est qu’elle devient éminemment complexe avec la multiplication de la quantité de code. Or, si la puissance des ordinateurs n’a cessé de progresser, la programmation, elle – <a href="http://www.internetactu.net/a-lire-ailleurs/129900264468/">hormis l’évolution des langages</a> – n’a pas changé. </p>

  493. 

  494. <p>Bref, nos façons de produire des logiciels sont fondamentalement cassées. Comment les réparer ?</p>

  495. 

  496. <h2>Vers une programmation Wysiwyg</h2>

  497. 

  498. <p><a href="http://worrydream.com/">Victor Bret</a> (<a href="https://twitter.com/worrydream">@worrydream</a>) dirige un laboratoire dédié à l’avenir de l’informatique. Mais il semble moins intéressé par la technologie que par la façon dont pensent les programmeurs. En 2012, il a prononcé une conférence qui l’a fait connaître, intitulée « Inventer sur le principe » (<a href="https://vimeo.com/36579366">vidéo</a>). Il y expliquait que, pour limiter les bugs, les programmeurs avaient besoin d’un lien immédiat avec ce qu’ils créent. A l’époque des premiers traitements de textes, il fallait coder ce que vous vouliez qui apparaisse sans que vous puissiez le voir à l’écran. Il fallait imaginer comment le code allait être interprété par l’ordinateur, donc « jouer l’ordinateur dans votre tête » ou imprimer le texte pour voir ce qu’il rendait. Tout à changé avec les traitements de textes Wysiwyg (<a href="https://fr.wikipedia.org/wiki/What_you_see_is_what_you_get">« ce que vous voyez est ce que vous obtenez »</a>) : il suffisait alors de mettre un passage en italique pour que les lettres s’inclinent. Juste en regardant votre document, vous étiez d’un coup capable de voir ce qu’il n’allait pas dans la mise en forme de votre texte. Pour Victor Bret, il était temps que la programmation ressemble à cela ! Qu’elle devienne Wysiwig !</p>

  499. 

  500. <p><em>Vidéo : <a href="https://vimeo.com/36579366">la conférence de Victor Bret</a>, « inventer sur le principe ».</em></p>

  501. 

  502. <p>Or, certains éditeurs permettent justement d’apporter des fonctions compliquées d’une manière simple, comme c’est le cas de <a href="http://www.adobe.com/fr/products/photoshop.html">Photoshop</a>, le célèbre éditeur d’image d’Adobe, ou de <a href="https://www.squarespace.com">Squarespace</a>, un système de création et de gestion de sites web très intuitifs. Mais le plus souvent, pour faire des choses intéressantes, il faut écrire du code. Victor Bret a publié quelques démos pour illustrer la manière dont cela pourrait changer. L’une d’entre elles était un jeu, un peu comme <a href="https://scratch.mit.edu/">Scratch</a>, modifiant le code en modifiant les éléments visuels du jeu ou les caractéristiques du personnage. Une sorte de traitement en temps réel, permettant au développeur lui-même de jouer avec les paramètres, de les adapter, ne consistant non plus à coder, mais à manipuler directement le comportement du jeu. Bien des développeurs présents à cette conférence ont senti devant cette démonstration combien tous leurs outils allaient devenir obsolètes. </p>

  503. 

  504. <p>Quand Resig a vu les démonstrations de Bret, il a adapté les cours de programmation de la Khan Academy, avec des exercices en regard des programmes. Pour lui, <em>« dans un environnement vraiment réactif, vous pouvez changer complètement la façon dont un étudiant apprend »</em>. Chris Granger de Visual Studio, après avoir vu les conférences de Bret a construit un nouvel environnement de programmation, qui permettait de donner un retour instantané sur le comportement programmé (voir <a href="http://www.internetactu.net/2015/02/04/ce-nest-pas-le-code-qui-importe-cest-le-modele/">Ce n’est pas le code qui importe, c’est le modèle ! »</a>). C’était le projet <a href="http://lighttable.com/">Light Table</a> (<a href="https://www.youtube.com/watch?v=52SVAMM3V78">vidéo</a>), qui a amassé 200 000 $ sur KickStarter en 2012. Ces fonctions Wysiwyg se sont retrouvées dans nombre d’outils de programmation, comme <a href="https://www.apple.com/swift/playgrounds/">Playground</a> tiré de Swift le langage pour créer des applications Mac et iPhone. </p>

  505. 

  506. <p>Mais pour Victor Bret, c’était là mal comprendre son propos. Son but n’était pas d’améliorer les outils de programmation. Le code demeurait l’un des pires outils qui soient pour comprendre ce qu’on faisait et lui ajouter un comportement dynamique n’était pas suffisant. Le but de sa conférence « Inventer sur le principe » était de montrer qu’on pouvait atténuer le problème en rendant immédiat le lien entre le comportement d’un système et son code. Mais ce n’était qu’une étape. Dans des conférences ultérieures, il est allé plus loin. Avec « Arrêtez de dessiner des poissons morts » (<a href="https://vimeo.com/64895205">vidéo</a>) pour les animateurs les invitant à créer des animations intégrant des comportements et « Dessiner des visualisations dynamiques » (<a href="https://vimeo.com/66085662">vidéo</a> et <a href="http://worrydream.com/#!/DrawingDynamicVisualizationsTalkAddendum">explication</a>) pour rendre dynamique la visualisation de données scientifiques, il a prolongé le lien entre une interface Wysiwyg et le code. <em>« Je ne suis pas sûr que la programmation doivent continuer à exister »</em>, estime Bret. Pour lui, le développeur de logiciel doit créer des outils qui suppriment le besoin de développeurs. </p>

  507. 

  508. <h2>Sortir de l’artisanat de la production logicielle ?</h2>

  509. 

  510. <p>Pour le Français <a href="https://www.linkedin.com/in/eric-bantegnie-b17427/">Eric Bantegnie</a> d’<a href="http://www.esterel-technologies.com/">Esterel Technologies</a> (<a href="https://fr.wikipedia.org/wiki/Esterel_Technologies">Wikipédia</a>) rachetée par <a href="http://www.ansys.com/">Ansys</a>, les seuls produits non industriels qu’on trouve encore dans les produits industriels, c’est le code. Le code est encore trop souvent de l’artisanat par rapport aux autres processus techniques, et quand on parle de logiciels avec 30 millions de lignes de code comme un avion ou 100 millions comme une voiture, ça devient difficile de rester dans l’artisanat. La société d’Eric Bantegnie est l’une des pionnières dans le développement d’applications industrielles logicielles ne nécessitant pas d’écrire de code. Au lieu de cela, les utilisateurs sont amenés à créer des sortes d’organigrammes qui décrivent les règles que les programmes doivent suivre – des modèles – et l’ordinateur génère du code basé sur ces règles. C’est ce qu’on appelle <a href="https://fr.wikipedia.org/wiki/M%C3%A9thode_formelle_(informatique)">les méthodes formelles</a>. L’idée par exemple est que lorsque vous fabriquez le système de commande d’un ascenseur, la porte s’ouvre ou se ferme quand on appuie sur les boutons adéquats. L’idée est de construire des règles depuis des diagrammes permettant de montrer que la seule façon de faire bouger l’ascenseur est de fermer la porte ou que la seule façon d’ouvrir la porte est de s’arrêter à un étage. Ces méthodes sont surtout utilisées dans le développement de logiciels critiques, car elles permettent de traquer les bugs voire même de les faire totalement disparaître.</p>

  511. 

  512. <p><a href="http://internetactu.blog.lemonde.fr/files/2017/11/hyperpuissancedelinformatique.jpg"><img src="http://internetactu.blog.lemonde.fr/files/2017/11/hyperpuissancedelinformatique.jpg" alt="" class="alignright size-full wp-image-2349" srcset="http://internetactu.blog.lemonde.fr/files/2017/11/hyperpuissancedelinformatique.jpg 278w, http://internetactu.blog.lemonde.fr/files/2017/11/hyperpuissancedelinformatique-194x300.jpg 194w" sizes="(max-width: 278px) 100vw, 278px"/></a>Ces logiciels ne ressemblent pas encore tout à fait à Photoshop, où l’image que vous manipulez à l’écran est le produit final. Dans la conception basée sur le modèle, l’image à l’écran ressemble plutôt à un plan. Mais ici, plus besoin de traduire les règles en code. L’énergie est dépensée à architecturer les règles entres elles, pas à coder les règles elles-mêmes. L’enjeu est plus de résoudre le problème que de le coder. Bien sûr, cela nécessite que le travail soit fait en amont, qu’on dispose d’un programme qui transforme des modèles en code et que le code génère ce qu’il est censé faire. </p>

  513. 

  514. <p>En France, <a href="https://www.linkedin.com/in/emmanuel-ledinot-b74524b/">Emmanuel Ledinot</a>, directeur des études scientifiques de <a href="https://www.dassault-aviation.com/fr/">Dassault Aviation</a> faisait le même constat dès la fin des années 80 : l’industrie nucléaire et aérospatiale française craignaient qu’à mesure que la complexité augmente, il devienne plus difficile de se prémunir des bugs. L’écriture manuelle d’un code de plus en plus complexe n’était plus viable. Il était nécessaire de changer de méthode. </p>

  515. 

  516. <p>Avec l’informaticien Gérard Berry (<a href="https://fr.wikipedia.org/wiki/G%C3%A9rard_Berry">Wikipédia</a>, qui publie <a href="http://amzn.to/2AngLMT"><em>L’Hyperpuissance de l’informatique</em></a>) il a conçu Esterel, un programme pour gérer la complexité des procédures. L’idée de cette approche par le modèle était de créer un modèle du comportement du système centré sur la façon dont chaque événement individuel devait être traité, priorisé, afin de comprendre comment ils dépendent les uns des autres. Une sorte de plan détaillé des programmes utilisés pour effectuer la programmation proprement dite. </p>

  517. 

  518. <p>Ledinot et Berry ont travaillé pendant 10 ans pour faire qu’Esterel puisse être utilisé en production. Aujourd’hui, leurs produits sont utilisés pour générer du code dans nombre de systèmes critiques comme l’aérospatiale, la défense, l’industrie lourde, les dispositifs médicaux ou les centrales nucléaires. En fait, comme le montre l’exemple de l’aéronautique, nous savons déjà comment rendre des logiciels complexes fiables, via des normes réglementaires rigoureuses, des procédures de conception et de documentation très rigoureuses elles aussi. <em>« Alors pourquoi ne le faisons-nous pas partout ? »</em>, interroge James Somers. L’avantage de l’approche basée sur le modèle réside en grande partie dans le fait de pouvoir ajouter des exigences à la volée tout en s’assurant que les exigences existantes sont respectées. A chaque changement, l’ordinateur peut vérifier que le programme fonctionne toujours, sans craindre d’introduire de nouveaux bugs. Comme le dit l’Administration fédérale de l’aviation américaine, le code est <em>« correct par construction »</em>, exempt de bugs par sa conception même. </p>

  519. 

  520. <h2>Les programmeurs doivent s’améliorer</h2>

  521. 

  522. <p>Il n’empêche que bien des logiciels restent fabriqués à l’ancienne. Les ingénieurs écrivent leurs exigences en prose et les programmeurs les codent. Il faut dire que les programmeurs aiment écrire du code. Les outils qui écrivent du code et vérifient son exactitude semblent encore ésotériques à beaucoup, pour ne pas dire trop beaux pour être vrais. Tant et si bien, souligne Somers, qu’il faudrait surtout étudier pourquoi les développeurs sont encore si réfractaires à ces nouvelles méthodes. </p>

  523. 

  524. <p>En 2011, <a href="https://www.linkedin.com/in/chris-newcombe-b33a081/">Chris Newcombe</a> est déjà chez Amazon depuis 7 ans. Ingénieur principal, il a travaillé sur certains des systèmes parmi les plus critiques de l’entreprise, comme le catalogue des produits, l’infrastructure de gestion des Kindle ou encore <a href="https://aws.amazon.com/fr/">Amazon Web Services</a>, l’infrastructure de traitement et de stockage à la demande… La complexité des systèmes rend les événements censés être extrêmement rare peut-être plus probable qu’on ne le pense. Pour lui, les algorithmes des systèmes critiques sont souvent parfaits, mais les bugs se révèlent plus difficiles à trouver quand les algorithmes deviennent plus complexes. Et la démultiplication des tests ne suffit pas toujours à les repérer. D’où son excitation quand il a entendu parler de TLA+, un mélange de code et de mathématique pour écrire des algorithmes « parfaits ». </p>

  525. 

  526. <p><a href="https://lamport.azurewebsites.net/tla/tla.html">TLA+</a>, qui signifie « Logique temporelle des actions », est similaire en esprit à la conception basée sur le modèle : c’est un langage pour écrire les exigences – TLA+ les appelle « spécifications » – des programmes d’ordinateur. C’est lui aussi un système de méthode formelle. Ces spécifications peuvent ensuite être entièrement vérifiées par un ordinateur. C’est-à-dire, avant d’écrire un code, vous écrivez un bref aperçu de la logique de votre programme, avec les contraintes dont vous avez besoin pour y répondre (par exemple, si vous programmez un guichet automatique, une contrainte pourrait être que vous ne pouvez jamais retirer le même argent deux fois d’un compte chèque). TLA+ vérifie alors de manière exhaustive que votre logique réponde bien à ces contraintes. Sinon, il vous montrera exactement comment ils pourraient être détournés.</p>

  527. 

  528. <p>Ce langage a été inventé par <a href="http://www.lamport.org">Leslie Lamport</a>, pionnier des systèmes distribués et dont les travaux ont jeté les bases de nombres de systèmes qui sont utilisés par le web. Pour lui, si le logiciel est plein d’erreurs, c’est parce que les programmeurs se précipitent sur l’écriture du code, sur la granularité qui fait fonctionner les programmes. Mais en faisant cela, ils prêtent trop d’attention aux pièces individuelles oubliant trop souvent comment celles-ci s’harmonisent les unes avec les autres. D’où l’idée de TLA+, qui met l’accent sur la structure du système, sa logique, plutôt que sur le code. Newcombe et ses collègues ont utilisé TLA+ pour trouver les bugs de <a href="https://aws.amazon.com/fr/s3/">S3</a> d’Amazon, qui est considéré comme le meilleur service de stockage en ligne. Et TLA+ a été utilisé également pour la Xbox, pour le code de la sonde Rosetta, pour vérifier les puces d’Intel… Reste que TLA+ est peu utilisé, car c’est un langage très mathématique, que les programmeurs maîtrisent peu. Or, souligne Lamport, alors que les enjeux du code n’ont cessé d’augmenter, force est de reconnaître que les développeurs, eux, ne se sont pas améliorés, pas suffisamment en tout cas pour gérer des problèmes de plus en plus complexes… </p>

  529. 

  530. <p>Pour Newcombe, les programmeurs ne sont pas conscients du fait que les mathématiques puissent les aider à gérer la complexité. Or, pour parvenir à les aider à dépasser leurs limites, il ne suffit pas de leur demander de changer, mais il est nécessaire de changer la manière dont on parle de ces évolutions. Newcombe a créé un cours pour les ingénieurs d’Amazon sur le design du débogage pour arriver à les intéresser à la vérification du code qu’induit TLA+, car ils savent ce que signifie le débogage. Depuis, Newcombe a quitté Amazon pour Oracle, mais continue à faire de la pédagogie. <em>« L’utilisation de ces outils est désormais une question de responsabilité. Nous devons nous améliorer »</em>. Aujourd’hui encore, trop de développeurs regardent sur <a href="https://stackoverflow.com/">Stack Overflow</a>, l’une des grandes plateformes de partage pour développeurs, les méthodes des autres, copient des bouts de code et de fonctions, les collent ensembles et les ajustent par itération. Ça fonctionne jusqu’à ce qu’on tombe sur un vrai problème !, souligne Newcombe. </p>

  531. 

  532. <h2>Vers une informatique critique ?</h2>

  533. 

  534. <p>Durant l’été 2015, les spécialistes en sécurité des systèmes Charlie Miller (<a href="https://twitter.com/0xcharlie">@0xcharlie</a>) et <a href="http://chris.illmatics.com/about.html">Chris Valasek</a> ont montré que les constructeurs automobiles ne prenaient les failles logicielles au sérieux en prenant le contrôle d’une Jeep Cherokee, <a href="https://www.wired.com/2015/07/hackers-remotely-kill-jeep-highway/">comme l’expliquait <em>Wired</em></a>. Ils ont profité de la connexion du système de divertissement de la voiture pour prendre le contrôle de la direction, de l’accélération, des freins… Ils ont montré qu’il était possible de créer un virus de véhicule capable d’utiliser l’ordinateur de bord d’une voiture pour en pirater d’autres. Pour Valasek, les constructeurs automobiles assemblent leurs produits depuis des pièces logicielles fournies par des centaines de fournisseurs différents. Si certains codes ont rendu la voiture plus sûre (comme le régulateur de vitesse, le freinage ou l’assistance…), ils ont créé un niveau de complexité inédit qui engendre des problèmes inédits.</p>

  535. 

  536. <p>Contrairement à l’aéronautique, le monde de l’automobile n’a pas encore pris conscience de l’importance du logiciel. Et le ne le prend pas encore suffisamment au sérieux, estime Gérard Berry. Contrairement au monde de l’aviation, il n’y a pas d’organisme de réglementation de la sécurité logicielle des voitures. La raison est peut-être économique, estime Ledinot. Les constructeurs automobiles ne peuvent pas se permettre d’augmenter le prix d’un composant de quelques centimes puisqu’il est multiplié par plusieurs millions, ce qui explique que les ordinateurs soient réduits au minimum. Le développement logiciel basé sur des modèles est trop coûteux pour eux. Mais la voiture autonome va pousser l’industrie à avoir une approche bien plus critique. Le code des véhicules autonome va avoir la responsabilité de millions de vies demain : il doit fonctionner !</p>

  537. 

  538. <p>Ce que suggère James Somers dans la conclusion de son article, c’est qu’il est temps de prendre en considération le caractère critique du code et pas seulement pour des systèmes qualifiés de critiques. En janvier 2017, suite aux problèmes électoraux américains, le spécialiste de sécurité informatique, Bruce Schneier (<a href="https://twitter.com/schneierblog">@schneierblog</a>), <a href="https://www.schneier.com/blog/archives/2017/01/should_election.html">proposait de faire passer les machines à voter américaines au statut d’infrastructures critiques</a>, <a href="https://fr.wikipedia.org/wiki/Infrastructure_critique">un statut</a> qui réglemente déjà nombre d’infrastructures spécifiques. À mesure que le code innerve notre société tout entière, ne faut-il pas commencer à penser à élargir le caractère critique du code à de nouveaux objets ? </p>

  539. 

  540. <p>Hubert Guillaud</p>

  541.   </article>

  542. </section>

  543. 

  544. 

  545. <nav id="jumpto">

  546.   <p>

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

  548.     <a href="http://internetactu.blog.lemonde.fr/2017/11/25/reinventer-la-programmation/">Source originale</a> |

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

  550.   </p>

  551. </nav>

  552. 

  553. <footer>

  554.   <div>

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

  556.     <p>

  557.       Bonjour/Hi!

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

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

  560.     </p>

  561.     <p>

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

  563.     </p>

  564.     

  565.     <p>

  566.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  583.     </p>

  584.     <p>

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

  586.     </p>

  587.     <p>

  588.       Je ne traque pas ta navigation mais mon

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

  590.       conserve des logs d’accès.

  591.     </p>

  592.   </div>

  593. </footer>

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

  595.   ;(_ => {

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

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

  598.       e.preventDefault()

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

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

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

  602.     })

  603.   })()

  604. </script>