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.
401 Commits
1 Branch
Tag: 14ca1955a4
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de 14ca1955a4
${ noResults }
larlet-fr-david-cache/cache/d8d0642aa2f4bbfc34ae0a15eea.../index.html

index.html 27KB
Original Anotar Histórico

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>Le temps avant la première bouchée de confiture (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://www.la-grange.net/2018/03/11/jamstack">

  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.   Le temps avant la première bouchée de confiture (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://www.la-grange.net/2018/03/11/jamstack">Source originale du contenu</a></h3>

  463.     <p>Mon <a href="http://www.la-grange.net/2018/02/27/statique-vide">billet</a> (vite fait et pas très sérieux) sur « Une page blanche performante » a été pris un peu trop au sérieux. Donc revenons dessus un peu plus en détail. En se concentrant sur la définition des mots, il sera plus facile de cirsconcrire ma position sur le sujet.<br/>

  464. <a href="http://www.la-grange.net/2018/02/27/statique-vide">http://www.la-grange.net/2018/02/27/statique-vide</a></p>

  465. 

  466. <h2 id="time-to-first-byte-ttfb">Time To First Byte (TTFB)</h2>

  467. 

  468. <p><a href="https://www.dareboost.com/en/glossary#ttfb">Time To First Byte</a> (TTFB) (pointé par le <a href="https://borisschapira.com//2018/02/site-statique-performance-web/">billet de Boris Schapira</a>) donne la définition. </p>

  469. 

  470. <blockquote>

  471. <p>Time elapsed between the sending of the request requiring the web page and the reception of the first data by the user. The TTFB is particularly impacted by the latency.</p>

  472. </blockquote>

  473. 

  474. <p>D’ailleurs ironie de notre situation, la page glossaire en question n’affiche pas les définitions sans JavaScript et CSS. <a href="https://en.wikipedia.org/wiki/Time_to_first_byte">Le temps avant la première bouchée</a> (byte → bite → bouchée) est également définie sur Wikipedia.</p>

  475. 

  476. <h2 id="requete-et-reponse-http">Requête et réponse HTTP</h2>

  477. 

  478. <p>Pour les néophytes, lorsque vous cliquez un lien, le navigateur Web crée une requête HTTP  à un temps <var>t0</var> vers un URL sous la forme <code>GET /miammiam</code>. Le message passe dans l’ordinateur, le réseau comprenant de nombreux routeurs, hubs, etc afin d’atteindre une autre machine physique située quelque part dans le monde. L’instruction <code>GET /miammiam</code> est reçue par la machine distante. Elle le transmet au serveur Web, qui analyse la requête et donne toutes les commandes nécessaires pour composer une réponse (un autre message). Ce message de réponse refait le voyage inverse jusqu’à votre ordinateur qui finalement le transmet au navigateur Web. Le premier « byte » (ou multiplet en français) arrive à un temps <var>t1</var> dans le navigateur Web. Ainsi <code>TTFB = t1 - t0</code>.</p>

  479. 

  480. <p>En fait, si nous analysons bien ce que nous venons d’écrire, nous pouvons dégager trois phases.</p>

  481. 

  482. <ul>

  483.     <li>Phase 1 : Du click jusqu'au serveur (temps réseau)</li>

  484.     <li>Phase 2 : De l'analyse à la composition du message (temps serveur)</li>

  485.     <li>Phase 3 : Le voyage de retour (temps réseau)</li>

  486. </ul>

  487. 

  488. <h2 id="site-statique">Site statique</h2>

  489. 

  490. <p>Les phases 1 et 3 sont plus ou moins incontrôlables. Elles dépendent des infrastructures réseaux et de la configuration des serveurs de non de domaines. De quelques millisecondes à parfois quelques centaines de millisecondes. Nous entrons donc dans la <strong>phase 2 : la composition de la réponse</strong> et tout le débat sur les sites Web statiques ou dynamiques. <strong>Un site statique est un site où l’on minimise le temps de composition de la réponse</strong>.</p>

  491. 

  492. <p>Nous appellons <strong>message</strong> tout ce qui est relatif au code HTTP et HTML envoyé par le serveur Web. Et nous appelons <strong>information</strong> tout ce qui est la notion de contenu présente dans le message. La réponse d’un serveur Web à une requête HTTP s’accompagne de la résolution de l’URL pour envoyer le message. Dans cette phase 2, le serveur peut simplement associer <code>GET /miammiam</code> à un fichier sur le disque de l’ordinateur ou bien à l’extraction du message déjà prêt en mémoire ou bien à la fabrication du message par nombre de scripts et requêtes à des bases de données. Quand les personnes mentionnent le mot statique, ils entendent souvent la pré-génération des pages qui seront directement livrées depuis le disque de l’ordinateur plutôt que générées à la volée. En évitant le temps des requêtes à la base de données, le temps de CPU des scripts, on permet au serveur Web de <strong>renvoyer le message plus rapidement</strong>.</p>

  493. 

  494. <p>Cela s’accompagne d’une contrainte essentielle, <strong>toute information dynamique et vivante devient dépendante d’un message statique</strong>. Si vous désirez par exemple avoir la température de la ville de Rouen, si le message contenant l’information a été générée le jour précédent l’information n’est pas à jour bien que le serveur soit très performant dans sa réponse.</p>

  495. 

  496. <h2 id="apres-la-reponse-le-rendu-de-la-page">Après la réponse, le rendu de la page</h2>

  497. 

  498. <p>Ensuite il faudra pour le navigateur Web traiter le message, l’interpréter afin de l’afficher à l’utilisateur. Le navigateur téléchargera d’autres ressources images, CSS et JavaScript, la plupart du temps. Et puis il devra calculer l’affichage de la page, plus ou moins complexe en fonction du CSS et du JavaScript. C’est une fois cette affichage réalisée que les personnes peuvent interagir avec l’information contenue dans la réponse. Ainsi « le temps avant la première bouchée » n’est qu’une partie du processus et ne définit pas vraiment l’interaction.</p>

  499. 

  500. <h2 id="le-cache-et-la-fraicheur">Le cache et la fraîcheur</h2>

  501. 

  502. <p>Les <strong>systèmes de cache</strong> accompagnent ces processus : cache au niveau applicatif, au niveau DB, au niveau du réseau et au niveau du navigateur lui-même. Ces caches évitent de répéter une opération déjà réalisée précédemment et où l’information n’aurait pas changé. Nous remplaçons dans ce cas le temps de fabrication de la page par le temps de vérification de fraîcheur du cache.</p>

  503. 

  504. <p>Un site statique (dont les pages ont été générées à l’avance) est en quelque sorte un système de cache qui s’appuie sur le système de fichiers. Dans une période donnée, nous pourrions calculer :</p>

  505. 

  506. <pre><code>Nb(générations) / Nb(requêtes) = Ratio(dynamique/statique)

  507. </code></pre>

  508. 

  509. <p>Plus le ratio tends vers la valeur 0 et plus le site est statique. À noter que la plupart des générateurs de sites statiques sont aussi des négations d’un véritable site statique en régénérant toutes les pages à chaque mise à jour (pour la majorité des systèmes) sans aucun changement du contenu de la page.</p>

  510. 

  511. <h2 id="tas-de-confiture-jamstack">Tas de confiture (JAMStack)</h2>

  512. 

  513. <p>Boris présente dans son billet la <a href="https://jamstack.org/">JAMStack</a>, qui a un site Web dédié, où on peut lire :</p>

  514. 

  515. <blockquote>

  516. <p>The JAMstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.</p>

  517. </blockquote>

  518. 

  519. <p>le « <strong>better developer experience</strong> » est pour moi un petit grincement de dents. Les <a href="https://jamstack.org/best-practices/">bonnes pratiques</a> pour réaliser un site JAMStack sont plus intéressantes que les verbiages du début. Voyons comment <a href="http://www.la-grange.net/">La Grange</a>, ce site même, se place dans leurs contraintes.</p>

  520. 

  521. <ul>

  522. <li>✅ « <strong>Entire Project on a CDN</strong>. » La Grange ne dépend pas de code serveur et peut-être hébergé partout. (à part bien sûr la négotiation de contenu qui dépend de HTTP.)</li>

  523. <li>✅ « <strong>Everything Lives in Git</strong>. » La Grange pourrait être entièrement sous git, mais sincèrement, je n’en ai pas l’utilité puisque je suis tout seul et installer un serveur git pour moi tout seul semble disproportionné.</li>

  524. <li>💣 « <strong>Modern Build Tools</strong>. (And that currently means Babel, PostCSS, Webpack, and friends.) » J’ai ri. Comme si le fait d’utiliser les technologies modernes aient un sens quelconque dans le déploiement d’un site. La Grange est en ce moment généré en utilisant un script python et déployé en utilisant… <code>rsync + ssh</code></li>

  525. <li>✅ <strong>Automated Builds</strong>. Je ne suis pas sûr ce que cela signifie mais comme dit au point d’avant. Le build est automatiquement lancé à la main par un script en python. Moderne ! Une ligne de code : <code>ymir billet-blog.html</code></li>

  526. <li>✅ <strong>Atomic Deploys</strong>. Là aussi, j’ai ri. <code>rsync + ssh</code> fait exactement ce qui est décrit comme un déploiement atomique. Les fichiers uniquement modifiés sont chargés sur le serveur. Ah oui… une seule ligne de bash. </li>

  527. <li>✅ <strong>Instant Cache Invalidation</strong>. Pas nécessaire dans mon cas, mais fourni par défaut dans un site Web bien configuré. </li>

  528. </ul>

  529. 

  530. <p>Tout cela me fait penser que bien souvent les développeurs ajoutent des couches complexes pour une meilleure « expérience de développeurs » mais en perdant de vue la simplicité initiale. Plus l’abstraction est grande et plus la complexité des outils viennent au final résoudre des problèmes inexistants au départ.</p>

  531. 

  532. <p>Bien sûr, La Grange est un site très simple mais le sont également les <a href="https://jamstack.org/examples/">sites donnés en example</a> dans le site JAMStack.</p>

  533. 

  534. <h2 id="avant-deploiement-apres-deploiement">Avant déploiement - Après déploiement</h2>

  535. 

  536. <p>L’ambiguité du billet de Boris tient en partie dans la non-séparation de l’après et l’avant déploiement. Et le site JAMStack semble en quelque sorte passer à côté également. Les bonnes pratiques sont pour la plupart trop proches d’une forme de mode plutôt que de principes généraux Web. Elles ne tiennent pas vraiment compte de l’utilisateur. D’ailleurs l’utilisateur n’est pas mentionné dans le site à l’exception d’une seule fois dans la page des bonnes pratiques : « The more of your app you can push to the edge, the better the user experience. » D’ailleurs poussé l’application à sa limite ne permet en rien de donner une meilleure ergonomie du site.</p>

  537. 

  538. <p>Insérer par exemple un script vers Disqus afin de créer un système de commentaires qui doit injecter un nœud dans le DOM et donc affecter le rendu, télécharger ses propres images et CSS et avec une dépendance à une latence propre qui dépend de ses propres requêtes n’améliore pas le rendu complet de la page en un temps record.</p>

  539. 

  540. <p>Il y a probablement une bonne volonté derrière les acteurs de ce site/méthode. Si je compris bien l’analogie de la confiture. On mets les fruits et tous les ingrédients nécessaire dans sa gamelle, on cuisine, on met dans un pot et on range le pot sur l’étagère (le avant-déploiement) jusqu’à sa consommation potentielle (le après déploiement). Tous ces appels à des APIs sont utiles, s’ils sont réalisés en amont du déploiement, générant tout le code nécessaire aux pages statiques, figées pour un instant <var>t</var>. La JAMStack est une mise en cache en fichier de tous les éléments d’un site Web.</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://www.la-grange.net/2018/03/11/jamstack">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>