davidbgk
/
larlet-fr-david-cache
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
258 Révisions
1 Branche
Aborescence: cb8bf1f7f6
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'cb8bf1f7f6'
${ noResults }
larlet-fr-david-cache/cache/92bdb2bb826299c4eb5a002dcdd.../index.html

index.html 40KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835 
  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>Facebook and the media: united, they attack the web (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://www.baldurbjarnason.com/notes/media-websites-vs-facebook/">

  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.   Facebook and the media: united, they attack the web (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://www.baldurbjarnason.com/notes/media-websites-vs-facebook/">Source originale du contenu</a></h3>

  463.     <p>A few media websites have made a deal with Facebook to present their articles within Facebook’s iOS app instead of on their own websites. Apparently, it’s all the web’s fault.</p>

  464. 

  465. <p>Although, it should be mentioned that Instant Articles are published only on Facebook’s iOS app and degrade gracefully into links to the media site’s original website elsewhere, so it isn’t nearly the wholesale assimilation of everything everywhere that people present it to be.</p>

  466. 

  467. <p>Commentators online report this news alternately as armageddon or the second coming.</p>

  468. 

  469. <hr />

  470. 

  471. <h3 id="fear-and-loathing">Fear and loathing</h3>

  472. 

  473. <p>The first and most common reaction from the punditry is fear.</p>

  474. 

  475. <blockquote>

  476.   <p>That’s not a privilege that Facebook, Google or anyone else should have. But with content creators surging en mass to wherever the viewers are, and the viewers looking for the best (and fastest-loading) content, it may be that it’s already too late to stop the process.</p>

  477. 

  478.   <p><em><a href="http://readwrite.com/2015/05/13/walled-gardens-of-the-web?utm_content=buffera726c&amp;utm_medium=social&amp;utm_source=twitter.com&amp;utm_campaign=buffer">The Walled Gardens Of The Web Are Growing</a> by David Nield (663 words).</em></p>

  479. </blockquote>

  480. 

  481. <p>Egads. How worrying.</p>

  482. 

  483. <hr />

  484. 

  485. <h3 id="the-core-problem-advertising">The core problem: advertising</h3>

  486. 

  487. <blockquote>

  488.   <p>Facebook is progressing on all these fronts: the company’s ad units are best-in-class, the targeting is frighteningly specific, and with its overhaul of Atlas the company is working to draw a line from Facebook ads to offline purchases. The vast majority of publishers, though, are in the opposite boat.</p>

  489. 

  490.   <p><em><a href="https://stratechery.com/2015/verizon-aol-facebook-instant-articles-and-the-future-of-digital-advertising/">Verizon-AOL, Facebook Instant Articles, and the Future of Digital Advertising</a> by Ben Thompson (2005 words).</em></p>

  491. </blockquote>

  492. 

  493. <p>In short, Facebook is just better at mobile advertising and it’s getting better at it faster.</p>

  494. 

  495. <blockquote>

  496.   <p>First, mobile display ads stink. Unlike a PC browser, which has a lot of space to display ads alongside content, content on mobile necessarily takes up the whole screen (and if it doesn’t, the user experience degrades significantly, making quality a casualty once again). This results in mobile ad rates that are a fraction of desktop ad rates (and remember, desktop ad rates are already a fraction of print ad rates)</p>

  497. 

  498.   <p>Second, on mobile, clicks are expensive from a user experience perspective. Not only do PCs typically have faster broadband connections to download assets and more powerful processors to render pages, they also have multiple windows and tabs. On a phone, on the other hand, clicking on a link means you can do nothing but wait for it to open, and open quite slowly at that. The cost of clicking a link, already quite high because of the deluge of crap content and particularly-annoying-on-mobile ads, is even higher because of the fundamental nature of the device.</p>

  499. 

  500.   <p><em><a href="https://stratechery.com/2015/facebook-reckoning/">The Facebook Reckoning</a> by Ben Thompson (2109 words).</em></p>

  501. </blockquote>

  502. 

  503. <p>Ben isn’t the only one to say so.</p>

  504. 

  505. <blockquote>

  506.   <p>For years publishers have struggled to successfully generate revenues from mobile ads, and there’s no reason to believe they’ll be any better at it if they sell their own ads for Instant Articles. It’s possible Facebook could generate a whole lot more revenue by selling the ads – and 70% of that larger number may wind up the better outcome for publishers.</p>

  507. 

  508.   <p><em><a href="http://blogs.wsj.com/cmo/2015/05/14/with-facebooks-instant-articles-publishers-may-find-70-cents-is-better-than-a-dollar/">With Facebook’s Instant Articles, Publishers May Find 70 Cents Is Better Than a Dollar</a> by Jack Marshall (916 words).</em></p>

  509. </blockquote>

  510. 

  511. <p>Make no mistake <em>this</em> is the real problem that media websites are facing. The advertising product that is the foundation of their business model is failing on mobile phones.</p>

  512. 

  513. <p>But they aren’t blaming it on their ad targeting. They are blaming their strategic failure on the web.</p>

  514. 

  515. <hr />

  516. 

  517. <h3 id="they-say-the-web-is-dying">They say the web is dying</h3>

  518. 

  519. <p>It’s clear from the start that the web isn’t being held in a high regard by either party here.</p>

  520. 

  521. <p>As Nick Barreto found out:</p>

  522. 

  523. <blockquote>

  524.   <p>Having a look at <a href="http://instantarticles.fb.com/">http://instantarticles.fb.com/</a>, and half the resources are PDFs.</p>

  525. 

  526.   <p>What is this, 1998? (<a href="https://twitter.com/nickbarreto/status/598809488066482176">@nickbarreto</a>)</p>

  527. </blockquote>

  528. 

  529. <p>Apparently, the web is broken and slow despite the fact that the apps are using the same infrastructure and standards as the web. Guess how those Instant Articles are formatted? <code>HTML</code>. Guess how those articles get to the app? <code>HTTP</code>.</p>

  530. 

  531. <p>Those two techie terms should sound familiar to you.</p>

  532. 

  533. <blockquote>

  534.   <p>Facebook is quite right when it says that most news sites load too slowly and look terrible, rendering the ads on those pages largely useless. Facebook, however, understands mobile like no one else: everything loads faster, looks nicer and is more appealing to advertisers, in part because Facebook can do the kind of targeting that newspapers aren’t equipped to do.</p>

  535. 

  536.   <p><em><a href="http://fortune.com/2015/05/13/facebook-new-york-times-instant/">Is Facebook a partner or a competitor for media companies? Yes.</a> by Mathew Ingram (1143 words).</em></p>

  537. </blockquote>

  538. 

  539. <p>No. Facebook is more appealing to advertisers because of its targeting. If looking nice was the key here, <em>Snow Fall</em> would have delivered truckloads of money on the New York Times’ doorstep.</p>

  540. 

  541. <hr />

  542. 

  543. <p>Even the web’s old guard is worried. The web can’t compete. The web can’t compete. The web can’t compete. End times.</p>

  544. 

  545. <blockquote>

  546.   <p>I’m intrigued by the emphasis on speed. Not only is native mobile code winning for app development, but with things like Instant Articles, native is making the browser-based web look like a relic even just for publishing articles. If I’m right about that, it might pose a problem even for my overwhelmingly-text work at Daring Fireball. Daring Fireball pages load fast, but the pages I link to often don’t. I worry that the inherent slowness of the web and ill-considered trend toward over-produced web design is going to start hurting traffic to DF.</p>

  547. 

  548.   <p><em><a href="http://daringfireball.net/2015/05/facebook_instant_articles">Facebook Introduces Instant Articles</a> by John Gruber (524 words).</em></p>

  549. </blockquote>

  550. 

  551. <p>Actually, hang on. Gruber makes an excellent point mixed in with the web-blaming. I’m highlighting it here but I’m going to come back to it later (emphasis mine):</p>

  552. 

  553. <blockquote>

  554.   <p>I worry that the inherent slowness of the web and <em>ill-considered trend toward over-produced web design</em> is going to start hurting traffic to DF.</p>

  555. </blockquote>

  556. 

  557. <p>If you work for a large media company, pay attention to the italicised text. It’s where you’re failing.</p>

  558. 

  559. <p>It gets worse:</p>

  560. 

  561. <blockquote>

  562.   <p>Not only is the web not fast enough for apps, it’s not fast enough for text either.</p>

  563. 

  564.   <p>And you know what, they’re right.</p>

  565. 

  566.   <p>Such a stance will be considered blasphemy in some circles. But it doesn’t change the very real and very obvious truth: on mobile, the web browser just isn’t cutting it.</p>

  567. 

  568.   <p>Yes, native apps have spoiled us. But such spoilage is natural. In the end, all that matters is user experience. Native apps provide a better user experience on mobile than a web browser. That was true five years ago, that’s true today. And I suspect it will still be true five years from now.</p>

  569. 

  570.   <p><em><a href="https://500ish.com/facebook-instant-karma-4a4bd4f3eca?gi=5cf41ca63561">Facebook Instant Karma</a> by M.G. Siegler (678 words).</em></p>

  571. </blockquote>

  572. 

  573. <p>There’s just one problem with this. It’s completely untrue. Here’s an absolute fact that all of these reporters, columnists, and media pundits need to get into their heads:</p>

  574. 

  575. <p>The web doesn’t suck. Your websites suck.</p>

  576. 

  577. <p><em>All of your websites suck.</em></p>

  578. 

  579. <p>You destroy basic usability by hijacking the scrollbar. You take native functionality (scrolling, selection, links, loading) that is fast and efficient and you rewrite it with ‘cutting edge’ javascript toolkits and frameworks so that it is slow and buggy and broken. You balloon your websites with megabytes of cruft. You ignore best practices. You take something that works and is complementary to your business and turn it into a liability.</p>

  580. 

  581. <p>The lousy performance of your websites becomes a defensive moat around Facebook.</p>

  582. 

  583. <p>Of course, Facebook might still win even if you all had awesome websites, but you can’t even begin to compete with it until you fix the foundation of your business.</p>

  584. 

  585. <hr />

  586. 

  587. <h3 id="how-things-should-be">How things should be</h3>

  588. 

  589. <p>If your web developers are telling you that a website delivering hypertext and images can’t be just as fast as a native app (albeit behaving in different ways) then you should fire them.</p>

  590. 

  591. <p>Peter-Paul Koch, <a href="http://www.quirksmode.org/mobile/">web browser tester extraordinaire</a>, picks up on the phrase that I highlighted in the John Gruber quote and runs with it.</p>

  592. 

  593. <blockquote>

  594.   <p>The web definitely has a speed problem due to over-design and the junkyard of tools people feel they have to include on every single web page. However, I don’t agree that the web has an inherent slowness. The articles for the new Facebook feature will be sent over exactly the same connection as web pages. However, the web versions of the articles have an extra layer of cruft attached to them, and that’s what makes the web slow to load. The speed problem is not inherent to the web; it’s a consequence of what passes for modern web development. Remove the cruft and we can compete again.</p>

  595. 

  596.   <p><em><a href="http://www.quirksmode.org/blog/archives/2015/05/tools_dont_solv.html">Tools don’t solve the web’s problems, they ARE the problem</a> by Peter-Paul Koch (841 words).</em></p>

  597. </blockquote>

  598. 

  599. <p>The web is capable of impressive performance and offers a dramatically vaster reach and accessibility than anything an app can offer.</p>

  600. 

  601. <blockquote>

  602.   <p>This is one reason why mobile web has to be part of every company’s strategy. When someone encounters a link via an email newsletter or shared via a social network, they should be able to view that link no matter where they are and no matter what device they are using.</p>

  603. 

  604.   <p><em><a href="http://blog.cloudfour.com/links-do-not-open-apps/">Links Don’t Open Apps</a> by Jason Grigsby (368 words).</em></p>

  605. </blockquote>

  606. 

  607. <p>All it requires is discipline.</p>

  608. 

  609. <blockquote>

  610.   <p>“Make everything on your page fight for its life, fight for its right to be there.” — <a href="https://twitter.com/brad_frost">@Brad_Frost</a> #aeabos (<a href="https://twitter.com/topdownjimmy/status/598498025892347905">@topdownjimmy</a>)</p>

  611. </blockquote>

  612. 

  613. <p>This is a long-standing debate. Except it’s only long-standing among web developers. Columnists, managers, pundits, and journalists seem to have no interest in understanding the technical foundation of their livelihoods. Instead they are content with assuming that Facebook can somehow magically render <code>HTML</code> over <code>HTTP</code> faster than anybody else and there is nothing anybody can do to make their crap scroll-jacking websites faster. They buy into the myth that the web is incapable of delivering on its core capabilities: delivering hypertext and images quickly to a diverse and connected readership.</p>

  614. 

  615. <p>We continue to have this problem because your web developers are treating the web like an app platform when your very business <em>hinges</em> on it being a quick, lightweight media platform with a worldwide reach.</p>

  616. 

  617. <blockquote>

  618.   <p>Stop me if you’ve heard this one before. You’re reading an article on Smashing Magazine or A List Apart or some other publication. The article is about a specific feature of CSS, or maybe JavaScript, or perhaps it’s exploring some of the newer additions to HTML. The article is good. It explains how to use this particular feature in your work. Then you read the comments. The first comment is inevitably from someone bemoaning the fact that they can’t use this feature because it isn’t supported in every browser. Specifically, it isn’t supported in some older version of Internet Explorer that they have to support. Therefore the entire article is rendered null and void.</p>

  619. 

  620.   <p>That attitude infuriates and depresses me. It seems to me that it demonstrates a fundamental mismatch between how that person views the job of web development and the way the web actually works.</p>

  621. 

  622.   <p><em><a href="https://adactio.com/journal/6692">Continuum</a> by Jeremy Keith (1128 words).</em></p>

  623. </blockquote>

  624. 

  625. <p>Of course, Facebook is better at mobile advertising which, again, is the root problem facing media websites. Focus on that and stop blaming the web.</p>

  626. 

  627. <p>And web developers? Stop buying into the ‘native is better’ myth. (It’s just different.) Progressive enhancement has never been an optional extra and it’s high time you make sure that your managers and your CEOs know that.</p>

  628. 

  629. <p>It’s not a question whether everybody has javascript but a question of <a href="http://kryogenix.org/code/browser/everyonehasjs.html">javascript’s fundamental unreliability</a>.</p>

  630. 

  631. <p>Of course, it isn’t easy. That’s why you aren’t doing it.</p>

  632. 

  633. <blockquote>

  634.   <p>Here’s the harsh truth: building websites with progressive enhancement is not convenient.</p>

  635. 

  636.   <p>Building a client-side web thang that requires JavaScript to work is convenient, especially if you’re using a framework like Angular or Ember. In fact, that’s the main selling point of those frameworks: developer convenience.</p>

  637. 

  638.   <p>The trade-off is that to get that level of developer convenience, you have to sacrifice the universal reach that the web provides, and limit your audience to the browsers that can run a pre-determined level of JavaScript. Many developers are quite willing to make that trade-off.</p>

  639. 

  640.   <p>Developer convenience is a very powerful and important force. I wish that progressive enhancement could provide the same level of developer convenience offered by Angular and Ember, but right now, it doesn’t. Instead, its benefits are focused on the end user, often at the expense of the developer.</p>

  641. 

  642.   <p>Personally, I’m willing to take that hit. I’ve always maintained that, given the choice between making something my problem, and making something the user’s problem, I’ll choose to make it my problem every time. But I absolutely understand the mindset of developers who choose otherwise.</p>

  643. 

  644.   <p><em><a href="https://adactio.com/journal/7706">Be progressive</a> by Jeremy Keith (1981 words).</em></p>

  645. </blockquote>

  646. 

  647. <p>Your problem is that if you put your developers ahead of your customers, you’ll end up with just the developers. Facebook will have all of your customers because the sites your developers made suck.</p>

  648. 

  649. <p><a href="http://www.filamentgroup.com/lab/weight-wait.html">They can do much better. And we can do much better.</a></p>

  650. 

  651. <p>We <em>should</em> do better.</p>

  652. 

  653. <blockquote>

  654.   <p>There’s this thought in my head that, like a broken record, keeps repeating to me and everyone around: “Stop breaking the web.” And if I think about it more, I realize it’s related to this fundamental idea that I have, which makes me want to push the web forward and make it a better place. Because isn’t that what we, the designers and developers of this medium, should strive for and be proud of?</p>

  655. 

  656.   <p><em><a href="http://viljamis.com/blog/2015/the-many-faces-of-the-web/">The Many Faces of The Web</a> by Viljami Salminen (811 words).</em></p>

  657. </blockquote>

  658. 

  659. <p>Stop <em>blaming</em> the web. Stop <em>breaking</em> the web.</p>

  660. 

  661. <hr />

  662. 

  663. <h3 id="some-more-responses-to-the-news-updated-15-may-1330-bst">Some more responses to the news (Updated 15 May, 13:30 BST)</h3>

  664. 

  665. <p>Nate makes the same observation I did at the start of this post.</p>

  666. 

  667. <blockquote>

  668.   <p>So this is the program which has been pontificated over, railed against, and dissected in (speculatory) detail over the last year?</p>

  669. 

  670.   <p>Color me underwhelmed.</p>

  671. 

  672.   <p><em><a href="http://the-digital-reader.com/2015/05/14/facebook-launches-instant-articles-im-still-waiting-for-the-other-shoe-to-drop/?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed%3A+TheDigitalReader+%28Ink%2C+Bits%2C+%26+Pixels%29">Facebook Launches Instant Articles, &amp; I’m Still Waiting for the Other Shoe to Drop</a> by Nate Hoffelder (477 words).</em></p>

  673. </blockquote>

  674. 

  675. <p>Om Malik demonstrates why people read GigaOm in the first place by bringing actual data to the table. He doesn’t seem to be aware of the web’s capabilities in terms of progressive enhancement or perceived performance, though. That’s okay. Most people these days don’t.</p>

  676. 

  677. <blockquote>

  678.   <p>Whatever you might think about Facebook Instant Articles, they have refocused our attention on the importance of architecting apps and experiences with network performance and speed — something Google made us aware of 11 years.</p>

  679. 

  680.   <p><em><a href="http://om.co/2015/05/14/on-the-mobile-web-slow-speeds-kill/">On mobile, slow speeds kill</a> by Om Malik (850 words).</em></p>

  681. </blockquote>

  682. 

  683. <p>Pete Davies asks the question the punditry should have asked. WTF are these media websites doing that takes so long?</p>

  684. 

  685. <blockquote>

  686.   <p>WTF is taking 8 seconds?</p>

  687. 

  688.   <p>At the core of Facebook’s case is that the average article takes eight seconds to load. We’ve known forever that users don’t like slow loading pages. So why have publishers ignored this? Why did it take Facebook to take action? Is it all the Adware? Poorly optimized images? “Responsive” templates still loading full desktop code? “Personalization”?</p>

  689. 

  690.   <p><em><a href="https://medium.com/@pete/notes-on-facebook-instant-articles-9daf2a7b8a94">Notes on Facebook Instant Articles</a> by Pete Davies (726 words).</em></p>

  691. </blockquote>

  692. 

  693. <p>And last but not least, Tim Kadlec writes the post I wish I had written about how this is a cultural problem, not a technical problem with the web itself.</p>

  694. 

  695. <p>If you are going to read just <em>one</em> of the posts I link to here, make it this one.</p>

  696. 

  697. <blockquote>

  698.   <p>But this quote is really the best indicator of why the web is so slow at the moment. It’s not because of any sort of technical limitations. No, if a website is slow it’s because performance was not prioritized. It’s because when push came to shove, time and resources were spent on other features of a site and not on making sure that site loads quickly.</p>

  699. 

  700.   <p>This goes back to what many have been stating as of late: performance is a cultural problem.</p>

  701. 

  702.   <p><em><a href="http://timkadlec.com/2015/05/choosing-performance/">Choosing Performance</a> by Tim Kadlec (933 words).</em></p>

  703. </blockquote>

  704. 

  705. <h3 id="what-if-everybody-else-did-this-as-well-second-update-16-may-1400-bst">What if everybody else did this as well? (Second update, 16 May, 14:00 BST)</h3>

  706. 

  707. <p>Danny Sullivan starts wondering what would happen if Google decided to do the same thing, host everything themselves. (Good question.)</p>

  708. 

  709. <blockquote>

  710.   <p>Today, Facebook announced Instant Articles, a way for publishers to post stories directly on Facebook. We’ve known this would be coming, and there’s been some debate over whether it’s good or bad. But I haven’t seen that extended to what would happen if Google follows Facebook’s lead. It could, potentially causing the web to be swallowed up by two gatekeeping giants.</p>

  711. 

  712.   <p><em><a href="http://marketingland.com/facebook-instant-articles-slippery-slope-for-google-128596">Facebook Instant Articles: A Slippery Slope For Google To Do The Same, Hurting The Web?</a> by Danny Sullivan (935 words).</em></p>

  713. </blockquote>

  714. 

  715. <hr />

  716. 

  717. <p>Jason Brennan counters the rhetoric that since apps use HTTP they are ‘webby’ by pointing out that it isn’t HTTP that makes the web ‘webby’. The mechanisms of the web are the links and connections from page to page, site to site, and you can easily use HTTP in an app without allowing any links or connections at all. In fact, most of them either don’t or do it very badly.</p>

  718. 

  719. <p>(His post is short. Well worth reading.)</p>

  720. 

  721. <blockquote>

  722.   <p>What makes the web the web is the open connections between documents or “apps,” the fact that anybody can participate on a mostly-agreed-upon playing field.</p>

  723. 

  724.   <p><em><a href="http://nearthespeedoflight.com/article/2015_05_14_the_web_and_http">Speed of Light</a> by Jason Brennan (220 words).</em></p>

  725. </blockquote>

  726. 

  727. <hr />

  728. 

  729. <h3 id="the-quartz-contrast-update-on-the-20th-of-may">The Quartz contrast (update on the 20th of May)</h3>

  730. 

  731. <p>The contrast between Quartz and the more traditional new media seems relevant.</p>

  732. 

  733. <blockquote>

  734.   <p>When Quartz launched, we were careful not to call it a website. The ambition extended well beyond that; our domain on the web was merely its first iteration. This raised a few eyebrows from people who rightly pointed to our, uhh, website, and it required some contortions of language. Quartz is…a business news outlet…organization…venture…brand…</p>

  735. 

  736.   <p>Well, that’s all true, but if I had to pick one description, it would be this: Quartz is an API.</p>

  737. 

  738.   <p><em><a href="http://www.niemanlab.org/2015/05/quartz-is-an-api-the-path-ahead-for-the-business-site-thats-reshaping-digital-news/">“Quartz is an API”: The path ahead for the business site that’s reshaping digital news</a> by Zachary M. Seward (1601 words).</em></p>

  739. </blockquote>

  740. 

  741. <p>And…</p>

  742. 

  743. <blockquote>

  744.   <p>The last part of Seward’s statement above is the most important: instead of seeing all of the various formats or platforms that it uses as just a way of driving more clicks to a website, Quartz sees them as worthwhile in and of themselves. While the site’s content may not be monetized directly on that platform, it helps build the company’s brand and its knowledge about other platforms and social tools, which in turn allow it to monetize its content better on the Quartz site, which it does through native advertising.</p>

  745. 

  746.   <p><em><a href="http://fortune.com/2015/05/15/media-quartz-api/">More media companies need to think of themselves the way Quartz does</a> by Mathew Ingram (900 words).</em></p>

  747. </blockquote>

  748. 

  749. <p>But the best analysis of the strategy surrounding Facebook Instant Articles comes from Thomas Baekdal.</p>

  750. 

  751. <blockquote>

  752.   <p>Turning this into a Facebook Instant Article doesn’t really change that. Just because an article loads faster and looks prettier once people have already clicked on it, doesn’t mean more people will see it.</p>

  753. 

  754.   <p>People still have to decide that they want to click on it. Your lack of reach isn’t caused by what happens after people click on a post. It’s caused by the decision that happened before people clicked.</p>

  755. 

  756.   <p><em><a href="https://www.baekdal.com/analysis/the-thing-about-facebook-instant-articles/">Strategic analysis The Thing About Facebook Instant Articles</a> by Thomas Baekdal (3804 words).</em></p>

  757. </blockquote>

  758. 

  759. <p>In the end, none of the technological issues matter. You can’t design away a fundamental conflict between user experience and business model:</p>

  760. 

  761. <blockquote>

  762.   <p>My least favorite online game these days: finding the “X” that closes the nearly ubiquitous website popup for newsletter signup or video ad. (<a href="https://twitter.com/jkottke/status/600325321217470465">@jkottke</a>)</p>

  763. </blockquote>

  764. 

  765. <p>Perhaps that needs to change.</p>

  766. 

  767. <blockquote>

  768.   <p>I do think publishers can still compete for very small niche audiences, where creating a high-trust network of participating recommenders and public content creators is hard, or at least harder. They can do this because the number of real experts in these fields is small, and they can hire enough of them to become the hub of informed discussion.</p>

  769. 

  770.   <p><em><a href="https://medium.com/@e/easier-said-than-done-when-every-url-is-one-click-away-the-content-package-is-dead-421210007a38">Easier said than done. When every URL is one click away, the content package is dead.</a> by Evan Hansen (431 words).</em></p>

  771. </blockquote>

  772.   </article>

  773. </section>

  774. 

  775. 

  776. <nav id="jumpto">

  777.   <p>

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

  779.     <a href="https://www.baldurbjarnason.com/notes/media-websites-vs-facebook/">Source originale</a> |

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

  781.   </p>

  782. </nav>

  783. 

  784. <footer>

  785.   <div>

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

  787.     <p>

  788.       Bonjour/Hi!

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

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

  791.     </p>

  792.     <p>

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

  794.     </p>

  795.     

  796.     <p>

  797.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  814.     </p>

  815.     <p>

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

  817.     </p>

  818.     <p>

  819.       Je ne traque pas ta navigation mais mon

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

  821.       conserve des logs d’accès.

  822.     </p>

  823.   </div>

  824. </footer>

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

  826.   ;(_ => {

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

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

  829.       e.preventDefault()

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

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

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

  833.     })

  834.   })()

  835. </script>