davidbgk
/
larlet-fr-david
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
336 Commits
1 Branch
Tree: 5edc21ef71
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '5edc21ef71'
${ noResults }
larlet-fr-david/david/blog/2014/manifeste-developpeur/index.html

index.html 30KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827 
  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>Manifeste de développeur — 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.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2014/manifeste-developpeur/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="Utilité, expérimentation, convivialité, partage, inconfort, économie et savoir-être." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Utilité, expérimentation, convivialité, partage, inconfort, économie et savoir-être." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Manifeste de développeur" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2014/manifeste-developpeur/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39. 

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2014/manifeste-developpeur.jpg" />

  41. 

  42. 

  43. <style>

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

  45. html, body, div, span,

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

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

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

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

  51. fieldset, form, label, legend,

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

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

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

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

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

  65. article, aside, details, figcaption, figure,

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

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

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

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

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

  82. @font-face {

  83.   font-family: 'EquityTextB';

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

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

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

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

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

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

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

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

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

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

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

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

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

  118. body {

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

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

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

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

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

  126.   text-rendering: optimizeLegibility;

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

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

  129. }

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

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

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

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

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

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

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

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

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

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

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

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

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

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

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

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

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

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

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

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

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

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

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

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

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

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

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

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

  292.   font-size: 1rem;

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

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

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

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

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

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

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

  306. }

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

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

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

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

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

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

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

  314.     margin-left: 0;

  315.   }

  316.   h1 {

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

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

  319.   }

  320.   h2 {

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

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

  323.   }

  324.   h3 {

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

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

  327.   }

  328. }

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

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

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

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

  333.      but if our baseline value was not expressed

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

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

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

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

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

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

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

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

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

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

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

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

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

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

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

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

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

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

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

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

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

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

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

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

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

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

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

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

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

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

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

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

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

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

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

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

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

  467.   Manifeste de développeur

  468.   <time>Publié le 16 février 2014</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Like any experienced engineer, I understand the desire to build the best, most flexible and robust system for every project. I do. But I also understand the common business constraints of every project: time and money. Most projects have a definite deadline and/or a specific budget that must be met and, often times, building something grand is just not feasible within either them. This is where the developer must make a conscious decision to limit creativity to meet the goals. There is no excuse for spending a week to setup a "proper" caching layer for database queries on a 20-row table, that is only used from the administrative panel by three publishers. Understand the use cases. As cool as it may be to build a flexible and expendable XHR framework to support variable simultaneous requests; you don’t need to invest in it if the only feature that will be using it is an update to a visitors counter on one page. Understand the scope. I cannot stress it enough: a good engineer is not the one who knows how to build the most advanced system, but the one who knows when <em>not to</em> build that system.</p>

  473. <p><cite><em><a href="http://omniti.com/seeds/your-code-may-be-elegant">Your Code May Be Elegant</a></em></cite></p>

  474. </blockquote>

  475. <p>Il s’agit d’un manifeste engagé qui fait état de mes réflexions actuelles sur le métier de développeur, il est amené à évoluer dans le temps :</p>

  476. <blockquote>

  477. <p><strong>De l’utilité plus que de la qualité,</strong><br />

  478. <strong>De l’expérimentation plus que du troll,</strong><br />

  479. <strong>De la convivialité plus que de l’exhaustivité,</strong><br />

  480. <strong>Du partage plus que de la mise en ligne,</strong><br />

  481. <strong>De l’inconfort plus que de la sécurité,</strong><br />

  482. <strong>De l’économie plus que de la performance,</strong><br />

  483. <strong>Du savoir-être plus que du savoir-faire.</strong></p>

  484. </blockquote>

  485. <h2>Utilité</h2>

  486. <p>J’ai eu l’occasion de développer des produits de qualité. J’ai aussi eu l’occasion de développer des produits utiles. Étrange d’opposer les deux et pourtant j’ai rarement pu avoir les deux à la fois. Et rétrospectivement, ce sont clairement les produits utiles qui ont <a href="/david/blog/2014/sens-utilite/">donné du sens</a> à mon savoir-faire. Un code de (sur-)qualité n’aura pas forcément <a href="/david/blog/2013/utilite-code/">une durée de vie</a> plus longue mais il y a de grande chances qu’il mette beaucoup plus de temps à sortir, <a href="/david/blog/2014/experience-conseils/">ce qui met en péril le projet</a> — aussi utile soit-il.</p>

  487. <h2>Expérimentation</h2>

  488. <p>Les développeurs passent (perdent ?) beaucoup trop de temps à discuter de technologies sans même les avoir essayées. Prenez <a href="http://facebook.github.io/react/">React</a> par exemple, il serait facile de troller sur le fait qu’introduire du HTML directement dans du JS est une hérésie et pourtant après quelques heures de pratiques ça devient beaucoup plus pertinent. Et je prends du fun à coder avec ; sans me préoccuper des <em>design patterns</em> et autres <em>best practices</em>, il faut savoir <a href="/david/blog/2014/proteger-lacher-prise-rever/">lâcher prise</a> et avancer à son rythme.</p>

  489. <h2>Convivialité</h2>

  490. <p>J’ai déjà eu l’occasion d’exposer ce que j’entendais par <a href="/david/blog/2013/open-source-conviviale/">Open-Source conviviale</a> et mon désir de <a href="/david/blog/2013/informatique-plaisante/">rendre l’informatique plaisante</a>. Je suis fatigué des <em>frameworks</em> que l’on sort systématiquement pour publier une page statique, de ces bibliothèques qui cachent un manque de compréhension du langage et de toute la complexité dans laquelle s’enferme le développement Web <a href="/david/blog/2012/api-proletarisation/">sur l’autel de son industrialisation</a>. Il faut savoir revenir à la base : du contenu, des liens et des interactions.</p>

  491. <h2>Partage</h2>

  492. <p>Le partage va plus loin que <a href="/david/blog/2013/open-source-solidarite/">de la solidarité entre développeurs</a>, il y a <a href="/david/blog/2013/apprentissage-eponge/">une notion d’apprentissage</a> et de retour d’expérience. Libérer son code est une chose, expliquer ses choix d’implémentation, ses échecs et les leçons apprises est autrement plus intéressant. <a href="/david/blog/2013/monopole-decentralise/">Github</a> et Stack Overflow sont les <em>fast-foods</em> du code, je veux prendre le temps de raconter ma recette et l’enrichir avec d’autres.</p>

  493. <h2>Inconfort</h2>

  494. <p>Plus un milieu est changeant, plus il en va de sa survie d’explorer et de s’adapter rapidement ; c’est difficile à accepter mais le confort d’aujourd’hui est la mise au rebut de demain dans un domaine comme le Web. Il ne s’agit pas forcément d’aller dans le sens du courant mais d’avoir la curiosité de découvrir de nouveaux domaines et le goût <a href="/david/blog/2013/python-javascript/">d’explorer de nouveaux concepts</a>. Sortir de sa zone de confort est ce qui rend ce métier si stimulant.</p>

  495. <h2>Économie</h2>

  496. <p>La création d’usines à gaz génère forcément <a href="/david/blog/2014/gaspillage-numerique/">un gaspillage numérique</a> non négligeable. On construit des 4x4 numériques dont on essaye d’optimiser la consommation alors que l’on aurait besoin de simples vélos ! De <a href="/david/blog/2014/dogmatiques-defauts/">bons défauts</a> sont l’une des conditions pour obtenir un produit minimaliste qui soit pertinent mais ne suffisent pas, il faut avoir <a href="/david/blog/2013/opendata-culture/">une évolution culturelle</a> et une démarche de <a href="/david/blog/2013/opendata-citoyennete/">co-création</a>.</p>

  497. <h2>Savoir-être</h2>

  498. <p>Enfin, je n’ai pas envie de travailler avec un gourou, un ninja ou une rockstar. J’ai <a href="/david/blog/2013/scopyleft-valeurs/">envie de collaborer</a> avec quelqu’un à l’écoute, qui sait faire preuve de diplomatie dans sa critique, qui arrive à me faire douter sans forcément passer par la confrontation. La sur-compétence technique est contre-productive à toute forme d’échanges car elle crée un déséquilibre malsain.</p>

  499. <p>Est-ce que ce manifeste fait pour autant l’apologie du <em>code-poubelle</em> codé à la RACHE™ ? Je ne pense pas. <strong>Il s’agit avant tout de revenir à un développement responsable qui donne du sens à notre métier et aux relations que l’on peut avoir avec nos pairs.</strong></p>

  500. </article>

  501. 

  502.   <section>

  503.     <h3>Discussion suite à l’article :</h3>

  504. 

  505.       <article id="comment-1" class="comment">

  506.         <p>Pragmatisme, quand tu nous tiens.</p>

  507. <p>Combien de devs se BRANLENT la tête pour savoir quel langage est le + beau, le + propre, en oubliant que ce débat n’intéresse qu’eux, et le plus important c’est à la base de produire. Si vraiment un site nécessite la machinerie lourde, ça se fera après.</p>

  508. <p>Ou comment utiliser un marteau piqueur pour casser un sucre.</p>

  509.         <p><cite>Nicolas Hoffmann, le <a href="#comment-1">2014-02-17 à 17:04</a></cite></p>

  510.       </article>

  511. 

  512.   </section>

  513. 

  514. 

  515.   <figure class="image" property="schema:image">

  516.     <img src="/static/david/blog/2014/manifeste-developpeur.jpg" alt="" />

  517.   </figure>

  518. 

  519. 

  520. 

  521. <nav id="jumpto">

  522.   <p>

  523.     <a rel=prev href="/david/blog/2014/avenir-liberation/">← Avenir de Libération</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2014/sport-plaisir/">Sport et plaisir →</a>

  524.   </p>

  525. </nav>

  526. 

  527. <footer>

  528.   <div>

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

  530.     <p>

  531.       Bonjour/Hi!

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

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

  534.     </p>

  535.     <p>

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

  537.     </p>

  538. 

  539.       <p>

  540.         Les dernières publications hebdomadaires sont :

  541.       </p>

  542.       <ul class="with_columns">

  543. 

  544.           <li>

  545.             <a href="/david/stream/2019/12/31/">Merci</a>

  546.           </li>

  547. 

  548.           <li>

  549.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  550.           </li>

  551. 

  552.           <li>

  553.             <a href="/david/stream/2019/12/24/">Outils</a>

  554.           </li>

  555. 

  556.           <li>

  557.             <a href="/david/stream/2019/12/17/">Origines</a>

  558.           </li>

  559. 

  560.           <li>

  561.             <a href="/david/stream/2019/12/10/">Publier</a>

  562.           </li>

  563. 

  564.           <li>

  565.             <a href="/david/stream/2019/12/03/">En forêt</a>

  566.           </li>

  567. 

  568.           <li>

  569.             <a href="/david/stream/2019/11/26/">Ecocentric</a>

  570.           </li>

  571. 

  572.           <li>

  573.             <a href="/david/stream/2019/11/19/">Se livrer</a>

  574.           </li>

  575. 

  576.           <li>

  577.             <a href="/david/stream/2019/11/12/">Dépendances</a>

  578.           </li>

  579. 

  580.           <li>

  581.             <a href="/david/stream/2019/11/05/">Positif</a>

  582.           </li>

  583. 

  584.           <li>

  585.             <a href="/david/stream/2019/10/29/">Dettes</a>

  586.           </li>

  587. 

  588.           <li>

  589.             <a href="/david/stream/2019/10/22/">Privilèges</a>

  590.           </li>

  591. 

  592.           <li>

  593.             <a href="/david/stream/2019/10/15/">Discrétion</a>

  594.           </li>

  595. 

  596.           <li>

  597.             <a href="/david/stream/2019/10/08/">Désespérance</a>

  598.           </li>

  599. 

  600.           <li>

  601.             <a href="/david/stream/2019/10/01/">Présent</a>

  602.           </li>

  603. 

  604.           <li>

  605.             <a href="/david/stream/2019/09/24/">Manifester</a>

  606.           </li>

  607. 

  608.           <li>

  609.             <a href="/david/stream/2019/09/17/">Arpenter</a>

  610.           </li>

  611. 

  612.           <li>

  613.             <a href="/david/stream/2019/09/10/">Nostalgie</a>

  614.           </li>

  615. 

  616.           <li>

  617.             <a href="/david/stream/2019/09/03/">Déconstruire</a>

  618.           </li>

  619. 

  620.           <li>

  621.             <a href="/david/stream/2019/08/27/">Documenter</a>

  622.           </li>

  623. 

  624.           <li>

  625.             <a href="/david/stream/2019/08/20/">Frustration</a>

  626.           </li>

  627. 

  628.           <li>

  629.             <a href="/david/stream/2019/08/13/">Holisme</a>

  630.           </li>

  631. 

  632.           <li>

  633.             <a href="/david/stream/2019/08/06/">1%</a>

  634.           </li>

  635. 

  636.           <li>

  637.             <a href="/david/stream/2019/07/30/">Exemplarité</a>

  638.           </li>

  639. 

  640.           <li>

  641.             <a href="/david/stream/2019/07/23/">Timelines</a>

  642.           </li>

  643. 

  644.           <li>

  645.             <a href="/david/stream/2019/07/16/">Écoute</a>

  646.           </li>

  647. 

  648.           <li>

  649.             <a href="/david/stream/2019/07/02/">Anxiété</a>

  650.           </li>

  651. 

  652.           <li>

  653.             <a href="/david/stream/2019/06/21/">À lier</a>

  654.           </li>

  655. 

  656.           <li>

  657.             <a href="/david/stream/2019/06/14/">Pauvreté</a>

  658.           </li>

  659. 

  660.           <li>

  661.             <a href="/david/stream/2019/06/07/">Amateur</a>

  662.           </li>

  663. 

  664.           <li>

  665.             <a href="/david/stream/2019/05/31/">Pollution</a>

  666.           </li>

  667. 

  668.           <li>

  669.             <a href="/david/stream/2019/05/24/">Apaisement</a>

  670.           </li>

  671. 

  672.           <li>

  673.             <a href="/david/stream/2019/05/10/">Folie</a>

  674.           </li>

  675. 

  676.           <li>

  677.             <a href="/david/stream/2019/05/03/">Sympathie</a>

  678.           </li>

  679. 

  680.           <li>

  681.             <a href="/david/stream/2019/04/12/">Péremption</a>

  682.           </li>

  683. 

  684.           <li>

  685.             <a href="/david/stream/2019/04/05/">Définitions</a>

  686.           </li>

  687. 

  688.           <li>

  689.             <a href="/david/stream/2019/03/29/">Acceptation</a>

  690.           </li>

  691. 

  692.           <li>

  693.             <a href="/david/stream/2019/03/22/">Dissonance</a>

  694.           </li>

  695. 

  696.           <li>

  697.             <a href="/david/stream/2019/03/15/">Reconnaissance</a>

  698.           </li>

  699. 

  700.           <li>

  701.             <a href="/david/stream/2019/03/08/">Lecture</a>

  702.           </li>

  703. 

  704.           <li>

  705.             <a href="/david/stream/2019/03/01/">Journaux</a>

  706.           </li>

  707. 

  708.           <li>

  709.             <a href="/david/stream/2019/02/22/">Écriture</a>

  710.           </li>

  711. 

  712.           <li>

  713.             <a href="/david/stream/2019/02/15/">Kyriarchie</a>

  714.           </li>

  715. 

  716.           <li>

  717.             <a href="/david/stream/2019/02/08/">Mots-serrures</a>

  718.           </li>

  719. 

  720.           <li>

  721.             <a href="/david/stream/2019/02/01/">Sans voie</a>

  722.           </li>

  723. 

  724.           <li>

  725.             <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>

  726.           </li>

  727. 

  728.           <li>

  729.             <a href="/david/stream/2019/01/18/">Agilité</a>

  730.           </li>

  731. 

  732.           <li>

  733.             <a href="/david/stream/2019/01/11/">Métaphores</a>

  734.           </li>

  735. 

  736.           <li>

  737.             <a href="/david/stream/2019/01/04/">Balbutiements</a>

  738.           </li>

  739. 

  740.       </ul>

  741. 

  742.     <p>

  743.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  760.     </p>

  761.     <p>

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

  763.     </p>

  764.     <p>

  765.       Je ne traque pas ta navigation mais mon

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

  767.       conserve des logs d’accès.

  768.     </p>

  769.   </div>

  770. </footer>

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

  772.   ;(_ => {

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

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

  775.       e.preventDefault()

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

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

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

  779.     })

  780.   })()

  781. </script>

  782. 

  783.   <script>

  784.   /* Service workers */

  785.   if (navigator.serviceWorker) {

  786.     window.addEventListener('load', function () {

  787.       var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'

  788.       function sendLinks (selector) {

  789.         var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {

  790.           return link.getAttribute('href')

  791.         })

  792.         links.push(location.pathname)  // Put the current page in cache too.

  793.         navigator.serviceWorker.controller.postMessage({ links: links })

  794.       }

  795.       navigator.serviceWorker.getRegistration()

  796.         .then(function (registration) {

  797.           if (!registration || !navigator.serviceWorker.controller) {

  798.             return navigator.serviceWorker.register('/serviceworker.js')

  799.               .then(navigator.serviceWorker.ready)

  800.               .then(function () {

  801.                 console.log('[ServiceWorker] Ready to go!')

  802.               })

  803.               .catch(console.error.bind(console))

  804.           } else {

  805.             console.log('[ServiceWorker] Send links via registration')

  806.             sendLinks(selector)

  807.           }

  808.         })

  809.       navigator.serviceWorker.addEventListener('controllerchange', function () {

  810.         console.log('[ServiceWorker] Send links via controller change')

  811.         sendLinks(selector)

  812.       })

  813.       navigator.serviceWorker.addEventListener('message', function (event) {

  814.         var link = document.querySelector('a[href="' + event.data.link + '"]')

  815.         if (event.data.status && link) {

  816.           link.style.backgroundColor = '#2d7474'

  817.           link.style.color = '#f0f0ea'

  818. 

  819.             link.setAttribute('title', 'En cache pour consultation sans connexion')

  820. 

  821.         }

  822.       })

  823.     })

  824.   } else {

  825.     console.warn('[ServiceWorker] No cache for old browsers.')

  826.   }

  827. </script>