davidbgk
/
larlet-fr-david-cache
Observar 1
Favorito 0
Fork 0
Código Versões 0 Atividade
A place to cache linked articles (think custom and personal wayback machine)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
249 Commits
1 Branch
Tag: 17f244ae89
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de 17f244ae89
${ noResults }
larlet-fr-david-cache/cache/f41d0be1b419e16d37b415958da.../index.html

index.html 27KB
Original Anotar Histórico

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593 
  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>Javascript Fatigue (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="https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4">

  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.   Javascript Fatigue (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="https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4">Source originale du contenu</a></h3>

  463.     <p name="d098" id="d098" class="graf--p graf--first">For starters, consider that <a href="https://medium.com/u/3b799f227b58" data-href="https://medium.com/u/3b799f227b58" data-anchor-type="2" data-user-id="3b799f227b58" data-action="show-user-card" data-action-type="hover" class="markup--user markup--p-user">Pete Hunt</a> asked why React is overwhelming for beginners:</p>

  464. 

  465. <p name="65dc" id="65dc" class="graf--p graf-after--figure">If you use React, you probably share the same experiences with <a href="https://medium.com/u/46fa99d9bca4" data-href="https://medium.com/u/46fa99d9bca4" data-anchor-type="2" data-user-id="46fa99d9bca4" data-action="show-user-card" data-action-type="hover" class="markup--user markup--p-user">Vjeux</a>:</p>

  466. 

  467. <figure name="6014" id="6014" class="graf--figure graf--iframe graf-after--p"><p class="iframeContainer"/></figure>

  468. 

  469. <blockquote name="9f35" id="9f35" class="graf--pullquote pullquote graf-after--figure">There is a major problem in the React community that cripples beginners and hinders experts alike.</blockquote>

  470. 

  471. <h4 name="9c77" id="9c77" class="graf--h4 graf-after--pullquote">Too Many Tools.</h4>

  472. 

  473. <p name="5670" id="5670" class="graf--p graf-after--h4">At work this past quarter, we <strong class="markup--strong markup--p-strong">painstakingly</strong> started three new projects at work. I say “painstakingly” because <em class="markup--em markup--p-em">every</em> project required decisions to be made around tooling depending on the scope &amp; needs.</p>

  474. 

  475. <p name="31c8" id="31c8" class="graf--p graf-after--p">Ultimately, the problem is that <strong class="markup--strong markup--p-strong">by choosing React (and inherently JSX), you’ve unwittingly opted into a confusing nest of build tools, boilerplate, linters, &amp; time-sinks to deal with before you ever get to <em class="markup--em markup--p-em">create</em> anything.</strong></p>

  476. 

  477. <h4 name="014f" id="014f" class="graf--h4 graf-after--p">Boilerplates &amp; Generators Are Not The Answer.</h4>

  478. 

  479. <p name="d1c5" id="d1c5" class="graf--p graf-after--figure"><a href="http://yeoman.io/" data-href="http://yeoman.io/" class="markup--anchor markup--p-anchor" rel="nofollow">Yeoman</a> &amp; <a href="https://github.com/amwmedia/plop" data-href="https://github.com/amwmedia/plop" class="markup--anchor markup--p-anchor" rel="nofollow">Plop</a> can alleviate the amount of copy &amp; pasting you do between projects.</p>

  480. 

  481. <p name="6d10" id="6d10" class="graf--p graf-after--p">However, generated is <em class="markup--em markup--p-em">never </em>a one-to-one match, nor can it be.</p>

  482. 

  483. <p name="c1c1" id="c1c1" class="graf--p graf-after--p">At scale with enough projects, it is exceedingly difficult to back-port features &amp; improvements from one application to the rest, since <strong class="markup--strong markup--p-strong">the common code is not abstracted into an independently updatable dependency.</strong></p>

  484. 

  485. <blockquote name="5982" id="5982" class="graf--pullquote pullquote graf-after--p">When a generator is good solution for repetitious code, a better solution is to abstract it into a simpler API.</blockquote>

  486. 

  487. <p name="606d" id="606d" class="graf--p graf-after--pullquote">Otherwise, the generator becomes a confusing, logic-riddled application itself due to permutations of possible use-cases, forever in a race to stay relevant with the applications it created.</p>

  488. 

  489. <p name="45e5" id="45e5" class="graf--p graf-after--p">I’ve experienced this first-hand with several generators, including my own <a href="https://github.com/evolution/wordpress" data-href="https://github.com/evolution/wordpress" class="markup--anchor markup--p-anchor" rel="nofollow">evolution/wordpress</a>.</p>

  490. 

  491. <h4 name="90df" id="90df" class="graf--h4 graf-after--p">Too Many APIs. Too Much Configuration.</h4>

  492. 

  493. <p name="bae2" id="bae2" class="graf--p graf-after--figure">An example of this can be seen in <a href="https://medium.com/u/d7225e72eea" data-href="https://medium.com/u/d7225e72eea" data-anchor-type="2" data-user-id="d7225e72eea" data-action="show-user-card" data-action-type="hover" class="markup--user markup--p-user">Mark Dalgleish</a>’s excellent <a href="https://github.com/markdalgleish/react-fetcher#example-usage-with-react-router-and-redux" data-href="https://github.com/markdalgleish/react-fetcher#example-usage-with-react-router-and-redux" class="markup--anchor markup--p-anchor" rel="nofollow">react-fetcher</a>, libraries such as <a href="https://github.com/rackt/redux" data-href="https://github.com/rackt/redux" class="markup--anchor markup--p-anchor" rel="nofollow">Redux</a>, <a href="https://github.com/rackt/react-router" data-href="https://github.com/rackt/react-router" class="markup--anchor markup--p-anchor" rel="nofollow">React Router</a>, <a href="http://webpack.github.io/" data-href="http://webpack.github.io/" class="markup--anchor markup--p-anchor" rel="nofollow">Webpack</a>, and the React ecosystem have, largely, opted for discrete modularization at the cost of terse APIs by <strong class="markup--strong markup--p-strong">offloading their architectural underpinnings to the user and, as a result, worsen the developer experience in aggregate.</strong></p>

  494. 

  495. <p name="5adc" id="5adc" class="graf--p graf-after--p">Alone, the APIs are small, but even less than a handful yield a nearly incomprehensible mess of code to each new set of eyes.</p>

  496. 

  497. <p name="d96f" id="d96f" class="graf--p graf-after--p">Even if contained in a “boilerplate” project, scaffolded by a generator, or tucked away in a <em class="markup--em markup--p-em">finalCreateStorev3SeriousThisTime.js</em> file, we’ve created a rat’s nest of wiring that would make WordPress plugins blush.</p>

  498. 

  499. <h4 name="4b8b" id="4b8b" class="graf--h4 graf-after--p">More Abstractions. Less Code.</h4>

  500. 

  501. <p name="2d9a" id="2d9a" class="graf--p graf-after--h4">Of course, these APIs are a requirement for having smaller, decoupled, testable, and therefore, <em class="markup--em markup--p-em">high-quality</em> libraries.</p>

  502. 

  503. <p name="2058" id="2058" class="graf--p graf-after--p">However, we <strong class="markup--strong markup--p-strong">need an abstract middle-ground between wiring dependencies and generating boilerplates<em class="markup--em markup--p-em">.</em></strong></p>

  504. 

  505. <blockquote name="62fd" id="62fd" class="graf--pullquote pullquote graf-after--p">Abstractions are necessary to reduce the cognitive load of how things work so you can focus on creating.</blockquote>

  506. 

  507. <h4 name="bf89" id="bf89" class="graf--h4 graf-after--pullquote">Fight Against Lines of Code.</h4>

  508. 

  509. <p name="a5c4" id="a5c4" class="graf--p graf-after--h4">Any significantly-scoped project will already have a substantial amount of code behind it.</p>

  510. 

  511. <blockquote name="10fc" id="10fc" class="graf--pullquote pullquote graf-after--p">Application developers should not have to become experts in the underpinnings of the library just to use it.</blockquote>

  512. 

  513. <p name="781a" id="781a" class="graf--p graf-after--pullquote">Therefore, instrumenting tooling should aim to be <em class="markup--em markup--p-em">as minimal as possible</em>.</p>

  514. 

  515. <p name="2ae1" id="2ae1" class="graf--p graf-after--p">Consider this <strong class="markup--strong markup--p-strong">hastily-compiled list of alternatives</strong>:</p>

  516. 

  517. <ul class="postList"><li name="bcbc" id="bcbc" class="graf--li graf-after--p">Provide an opinionated, <em class="markup--em markup--li-em">author-endorsed</em> wrapper API or library for the theoretical 90% of use-cases.<br/><em class="markup--em markup--li-em">(Cutting the boilerplate for React + Router + Redux alone would be a </em><strong class="markup--strong markup--li-strong"><em class="markup--em markup--li-em">huge</em></strong><em class="markup--em markup--li-em"> improvement for many.)</em></li><li name="cec8" id="cec8" class="graf--li graf-after--li">Publish use-case <em class="markup--em markup--li-em">presets</em> akin to Babel’s (e.g. <a href="https://www.npmjs.com/package/babel-preset-es2015" data-href="https://www.npmjs.com/package/babel-preset-es2015" class="markup--anchor markup--li-anchor" rel="nofollow"><em class="markup--em markup--li-em">es2015</em></a>,<em class="markup--em markup--li-em"> </em><a href="https://www.npmjs.com/package/babel-preset-react" data-href="https://www.npmjs.com/package/babel-preset-react" class="markup--anchor markup--li-anchor" rel="nofollow"><em class="markup--em markup--li-em">react</em></a>, etc.) presets.</li><li name="33b7" id="33b7" class="graf--li graf-after--li">Leverage folder &amp; file-naming conventions for automatically discovering application-specific routes, actions, tests, and more.<br/><em class="markup--em markup--li-em">(This is already common-place for testing (e.g. </em><a href="http://mochajs.org/" data-href="http://mochajs.org/" class="markup--anchor markup--li-anchor" rel="nofollow"><em class="markup--em markup--li-em">Mocha</em></a><em class="markup--em markup--li-em">) &amp; serving public assets, but somehow every project magically requires a unicorn-configuration.)</em></li><li name="d7d1" id="d7d1" class="graf--li graf-after--li">Community-driven Rapid Application Development (RAD) tooling to significantly delay the need for explicit configuration until scope is solidified.</li></ul>

  518. 

  519. <p name="7198" id="7198" class="graf--p graf-after--li">Until a large part of the ecosystem adopts terse APIs, conventions, and strives for significantly reducing implementation details for end-users, abstract tooling may be our only outlet.</p>

  520. 

  521. <h4 name="f07e" id="f07e" class="graf--h4 graf-after--p">RAD Tooling</h4>

  522. 

  523. <p name="8b76" id="8b76" class="graf--p graf-after--h4">Following the Twitter threads above, many rightfully concede that there is no one-size-fits-all solution.</p>

  524. 

  525. <blockquote name="cd93" id="cd93" class="graf--pullquote pullquote graf-after--p">However, if we start with the intent to just build a prototype, the underlying abstractions don’t matter.</blockquote>

  526. 

  527. <p name="ea3b" id="ea3b" class="graf--p graf-after--pullquote">Related, <a href="https://medium.com/u/46fa99d9bca4" data-href="https://medium.com/u/46fa99d9bca4" data-anchor-type="2" data-user-id="46fa99d9bca4" data-action="show-user-card" data-action-type="hover" class="markup--user markup--p-user">Vjeux</a> <a href="http://blog.vjeux.com/2015/javascript/challenge-best-javascript-setup-for-quick-prototyping.html" data-href="http://blog.vjeux.com/2015/javascript/challenge-best-javascript-setup-for-quick-prototyping.html" class="markup--anchor markup--p-anchor" rel="nofollow">challenged the community to devise tooling for quick prototyping</a>, even at the cost of customization.</p>

  528. 

  529. <p name="c8b0" id="c8b0" class="graf--p graf-after--p">In the meantime, I’m aware of a few options you can use <strong class="markup--strong markup--p-strong">today</strong> to jumpstart your next project:</p>

  530.   </article>

  531. </section>

  532. 

  533. 

  534. <nav id="jumpto">

  535.   <p>

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

  537.     <a href="https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4">Source originale</a> |

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

  539.   </p>

  540. </nav>

  541. 

  542. <footer>

  543.   <div>

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

  545.     <p>

  546.       Bonjour/Hi!

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

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

  549.     </p>

  550.     <p>

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

  552.     </p>

  553.     

  554.     <p>

  555.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  572.     </p>

  573.     <p>

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

  575.     </p>

  576.     <p>

  577.       Je ne traque pas ta navigation mais mon

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

  579.       conserve des logs d’accès.

  580.     </p>

  581.   </div>

  582. </footer>

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

  584.   ;(_ => {

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

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

  587.       e.preventDefault()

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

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

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

  591.     })

  592.   })()

  593. </script>