davidbgk
/
larlet-fr-david-cache
Слідкувати 1
В обрані 0
Форк 0
Код Релізи 0 Активність
A place to cache linked articles (think custom and personal wayback machine)
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
314 Коміти
1 Гілка
Дерево: e9ef5f47dd
Гілки Теги
${ item.name }
Створити гілку ${ searchTerm }
з 'e9ef5f47dd'
${ noResults }
larlet-fr-david-cache/cache/f475949609e5511575655225fc4.../index.html

index.html 41KB
Неформатований Blame Історія

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621 
  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>How Much of the Internet Is Fake? (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://nymag.com/intelligencer/2018/12/how-much-of-the-internet-is-fake.html">

  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.   How Much of the Internet Is Fake? (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://nymag.com/intelligencer/2018/12/how-much-of-the-internet-is-fake.html">Source originale du contenu</a></h3>

  463.     <div class="lede-image-wrapper inline horizontal">

  464.   <picture> <source media="(min-resolution: 192dpi) and (min-width: 1180px), (-webkit-min-device-pixel-ratio: 2) and (min-width: 1180px)" srcset="https://pixel.nymag.com/imgs/daily/intelligencer/2018/12/20/magazine/21-fake-internet.w700.h467.2x.jpg 2x"/> <source media="(min-width: 1180px) " srcset="https://pixel.nymag.com/imgs/daily/intelligencer/2018/12/20/magazine/21-fake-internet.w700.h467.jpg"/> <source media="(min-resolution: 192dpi) and (min-width: 768px), (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px)" srcset="https://pixel.nymag.com/imgs/daily/intelligencer/2018/12/20/magazine/21-fake-internet.w700.h467.2x.jpg 2x"/> <source media="(min-width: 768px)" srcset="https://pixel.nymag.com/imgs/daily/intelligencer/2018/12/20/magazine/21-fake-internet.w700.h467.jpg"/> <source media="(min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2)" srcset="https://pixel.nymag.com/imgs/daily/intelligencer/2018/12/20/magazine/21-fake-internet.w700.h700.2x.jpg"/> <img src="https://pixel.nymag.com/imgs/daily/intelligencer/2018/12/20/magazine/21-fake-internet.w700.h700.jpg" class="lede-image" data-src="https://pixel.nymag.com/imgs/daily/intelligencer/2018/12/20/magazine/21-fake-internet.w700.h700.jpg" data-content-img="" alt=""/> </picture>

  465.     <div class="lede-image-data">

  466.       <p class="attribution">

  467.         <span class="credit">Photo: Artwork by Ayatgali Tuleubek</span>

  468.       </p>

  469.     </div>

  470. </div>

  471. 

  472. <p><p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/cjpycyhsl001g3a5zzajnd2a5@published" data-word-count="236">In late November, the Justice Department unsealed indictments against eight people accused of fleecing advertisers of $36 million in two of the largest digital ad-fraud operations ever uncovered. Digital advertisers tend to want two things: people to look at their ads and “premium” websites — i.e., established and legitimate publications — on which to host them.<br/>The two schemes at issue in the case, dubbed Methbot and 3ve by the security researchers who found them, faked both. Hucksters infected 1.7 million computers with malware that remotely directed traffic to “spoofed” websites — “<a href="https://services.google.com/fh/files/blogs/3ve_google_whiteops_whitepaper_final_nov_2018.pdf">empty websites designed for bot traffic</a>” that served up a video ad purchased from one of the internet’s vast programmatic ad-exchanges, but that were designed, according to the indictments, “to fool advertisers into thinking that an impression of their ad was served on a premium publisher site,” like that of <em>Vogue</em> or <em>The Economist.</em> Views, meanwhile, were faked by malware-infected computers with marvelously sophisticated techniques to imitate humans: bots “<a href="https://cdn2.hubspot.net/hubfs/3400937/WO_Methbot_Operation_WP_01.pdf?__hstc=&amp;__hssc=&amp;hsCtaTracking=9c93c640-c638-4e10-8709-1f8e15d8c345%7C6338de37-adf9-48ea-b44a-a243fbd1685d">faked clicks, mouse movements, and social network login information to masquerade as engaged human consumers</a>.” Some were sent to browse the internet to gather tracking cookies from other websites, just as a human visitor would have done through regular behavior. Fake people with fake cookies and fake social-media accounts, fake-moving their fake cursors, fake-clicking on fake websites — the fraudsters had essentially created a simulacrum of the internet, where the only real things were the ads.</p></p>

  473. <p><p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/cjpyczd96001o3a5zx344zf24@published" data-word-count="97">How much of the internet is fake? Studies generally suggest that, year after year, less than 60 percent of web traffic is human; some years, according to some researchers, a healthy majority of it is bot. For a period of time in 2013, the <em>Times</em> <a href="https://www.nytimes.com/interactive/2018/01/27/technology/social-media-bots.html">reported</a> this year, a full half of YouTube traffic was “bots masquerading as people,” a portion so high that employees feared an inflection point after which YouTube’s systems for detecting fraudulent traffic would begin to regard bot traffic as real and human traffic as fake. They called this hypothetical event “the Inversion.”</p></p>

  474. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005b2hyedp46mn74@published" data-placeholder="settings" class="ad vp-0-480" data-name="/4088/Intelligencer_Mobile" data-sizes="300x250,300x252,320x100" data-label="inArticleMobile" data-site="Intelligencer" id="ad-cid-P7QwmzsE">

  475. </aside></p>

  476. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005d2hyese3o9yc7@published" data-placeholder="settings" class="ad vp-480-768" data-name="/4088/Intelligencer_Mobile" data-sizes="468x60,480x60,300x250" data-label="inArticleMobile" data-site="Intelligencer" id="ad-cid-LZWaTmTj">

  477. </aside></p>

  478. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005c2hyeyijd0swf@published" data-placeholder="settings" class="ad vp-768-1180" data-name="/4088/Intelligencer" data-sizes="300x250" data-label="inArticleTablet" data-site="Intelligencer" id="ad-cid-D5uR4geu">

  479. </aside></p>

  480. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005f2hyeh0s90hud@published" data-placeholder="settings" class="ad vp-1180-plus" data-name="/4088/Intelligencer" data-sizes="528x379" data-label="outStreamDesktop" data-site="Intelligencer" id="ad-cid-NGJfenNa">

  481. </aside></p>

  482. <p><p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/cjpyczd96001p3a5z6iyi7yeo@published" data-word-count="161">In the future, when I look back from the high-tech gamer jail in which <a href="http://nymag.com/intelligencer/2018/12/why-pewdiepies-anti-semitic-youtube-jokes-dont-hurt-him.html">President PewDiePie will have imprisoned me</a>, I will remember 2018 as the year the internet passed the Inversion, not in some strict numerical sense, since bots already outnumber humans online more years than not, but in the perceptual sense. The internet has always played host in its dark corners to schools of catfish and embassies of Nigerian princes, but that darkness now pervades its every aspect: Everything that once seemed definitively and unquestionably real now seems slightly fake; everything that once seemed slightly fake now has the power and presence of the real. The “fakeness” of the post-Inversion internet is less a calculable falsehood and more a particular quality of experience — the uncanny sense that what you encounter online is not “real” but is also undeniably not “fake,” and indeed may be both at once, or in succession, as you turn it over in your head.</p></p>

  483. <h2 class="clay-subheader" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-subheader/instances/cjpyd54pj004g3a5zc53cxo8q@published">

  484. 

  485. <pre><code>The metrics are fake.

  486. </code></pre>

  487. </h2>

  488. 

  489. <p><p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/cjpyczd99001r3a5zygnr148l@published" data-word-count="176">Take something as seemingly simple as how we measure web traffic. Metrics should be the most real thing on the internet: They are countable, trackable, and verifiable, and their existence undergirds the advertising business that drives our biggest social and search platforms. Yet <a href="http://nymag.com/intelligencer/2018/12/did-facebook-cause-the-yellow-vest-riots-in-france.html">not even Facebook</a>, the world’s greatest data–gathering organization, seems able to produce genuine figures. In October, <a href="https://www.wsj.com/articles/advertisers-allege-facebook-failed-to-disclose-key-metric-error-for-more-than-a-year-1539720524?mod=mhp">small advertisers filed suit against the social-media giant</a>, accusing it of covering up, for a year, its <a href="https://www.facebook.com/business/news/facebook-video-metrics-update">significant overstatements</a> of the time users spent watching videos on the platform (by 60 to 80 percent, Facebook says; by 150 to 900 percent, the plaintiffs say). <a href="https://marketingland.com/heres-itemized-list-facebooks-measurement-errors-date-200663">According to an exhaustive list at MarketingLand</a>, over the past two years Facebook has admitted to misreporting the reach of posts on Facebook Pages (in two different ways), the rate at which viewers complete ad videos, the average time spent reading its “Instant Articles,” the amount of referral traffic from Facebook to external websites, the number of views that videos received via Facebook’s mobile site, and the number of video views in Instant Articles.</p></p>

  490. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005e2hye0rxn0szy@published" data-placeholder="settings" class="ad vp-0-768" data-name="/4088/Intelligencer_Mobile" data-sizes="528x379" data-label="outStreamMobile" data-site="Intelligencer" id="ad-cid-pCkBMPQx">

  491. </aside></p>

  492. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005c2hyeyijd0swf@published" data-placeholder="settings" class="ad vp-768-1180" data-name="/4088/Intelligencer" data-sizes="300x250" data-label="inArticleTablet" data-site="Intelligencer" id="ad-cid-k8B0lq7H">

  493. </aside></p>

  494. <p><p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/cjpyczd9b001s3a5zarcelt0h@published" data-word-count="75">Can we still trust the metrics? After the Inversion, what’s the point? Even when we put our faith in their accuracy, there’s something not quite real about them: My favorite statistic this year was Facebook’s claim that 75 million people watched at least a minute of Facebook Watch videos every day — <a href="https://twitter.com/sarafischer/status/1073415988262174721">though, as Facebook admitted, the 60 seconds in that one minute didn’t need to be watched consecutively</a>. Real videos, real people, fake minutes.</p></p>

  495. <h2 class="clay-subheader" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-subheader/instances/cjpyd4z0500463a5z010wnwwq@published">

  496. 

  497. <pre><code>The people are fake.

  498. </code></pre>

  499. </h2>

  500. 

  501. <p><p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/cjpyczd9c001u3a5ziojcd8p1@published" data-word-count="172">And maybe we shouldn’t even assume that the people are real. Over at YouTube, the business of buying and selling video views is “flourishing,” as <a href="https://www.nytimes.com/interactive/2018/08/11/technology/youtube-fake-view-sellers.html">the <em>Times</em> reminded readers with a lengthy investigation in August</a>. The company says only “a tiny fraction” of its traffic is fake, but fake subscribers are enough of a problem that the site undertook a purge of “spam accounts” in mid-December. These days, the <em>Times</em> found, you can buy 5,000 YouTube views — 30 seconds of a video counts as a view — for as low as $15; oftentimes, customers are led to believe that the views they purchase come from real people. More likely, they come from bots. On some platforms, video views and app downloads can be forged in lucrative industrial counterfeiting operations. If you want a picture of what the Inversion looks like, <a href="https://twitter.com/mbrennanchina/status/1072114511212109824?ref_src=twsrc%5Etfw">find a video of a “click farm”</a>: hundreds of individual smartphones, arranged in rows on shelves or racks in professional-looking offices, each watching the same video or downloading the same app.</p></p>

  502. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005b2hyedp46mn74@published" data-placeholder="settings" class="ad vp-0-480" data-name="/4088/Intelligencer_Mobile" data-sizes="300x250,300x252,320x100" data-label="inArticleMobile" data-site="Intelligencer" id="ad-cid-wElmjdYg">

  503. </aside></p>

  504. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005d2hyese3o9yc7@published" data-placeholder="settings" class="ad vp-480-768" data-name="/4088/Intelligencer_Mobile" data-sizes="468x60,480x60,300x250" data-label="inArticleMobile" data-site="Intelligencer" id="ad-cid-ZtR3ccCi">

  505. </aside></p>

  506. <aside data-uri="nymag.com/intelligencer/_components/clay-tweet/instances/cjq5h145u000v2c67kceklaf9@published" class="clay-tweet" data-editable="default">

  507.     <blockquote class="twitter-tweet"><p lang="en" dir="ltr">I never tire of looking at videos of Chinese click farms. It's just so surreal to see hundreds of phones playing the same video for the purposes of fake engagment. <a href="https://t.co/bHAGLqRqVb">pic.twitter.com/bHAGLqRqVb</a></p>— Matthew Brennan (@mbrennanchina) <a href="https://twitter.com/mbrennanchina/status/1072114511212109824?ref_src=twsrc%5Etfw">December 10, 2018</a></blockquote>

  508. 

  509. 

  510. 

  511. </aside>

  512. 

  513. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005c2hyeyijd0swf@published" data-placeholder="settings" class="ad vp-768-1180" data-name="/4088/Intelligencer" data-sizes="300x250" data-label="inArticleTablet" data-site="Intelligencer" id="ad-cid-fJfUD0BB">

  514. </aside></p>

  515. <p><p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/cjpyczd9d001v3a5zacvmolup@published" data-word-count="171">This is obviously not real human traffic. But what would real human traffic look like? The Inversion gives rise to some odd philosophical quandaries: If <a href="https://www.nytimes.com/2017/09/13/us/politics/russia-facebook-election.html">a Russian troll using a Brazilian man’s photograph to masquerade as an American Trump supporter</a> watches a video on Facebook, is that view “real”? Not only do we have bots masquerading as humans and humans masquerading as other humans, but also sometimes humans masquerading as bots, pretending to be “<a href="https://www.bloomberg.com/news/articles/2016-04-18/the-humans-hiding-behind-the-chatbots">artificial-intelligence personal assistants</a>,” like Facebook’s “M,” in order to help tech companies appear to possess cutting-edge AI. We even have <a href="https://www.thecut.com/2018/05/lil-miquela-digital-avatar-instagram-influencer.html">whatever CGI Instagram influencer Lil Miquela is</a>: a fake human with a real body, a fake face, and real influence. Even humans who aren’t masquerading can contort themselves through layers of diminishing reality: <a href="https://www.theatlantic.com/technology/archive/2018/12/influencers-are-faking-brand-deals/578401/"><em>The Atlantic</em> reports that non-CGI human influencers are posting fake sponsored content</a> — that is, content meant to look like content that is meant to look authentic, for free — to attract attention from brand reps, who, they hope, will pay them real money.</p></p>

  516. <h2 class="clay-subheader" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-subheader/instances/cjpyd4rr7003w3a5z5n3qamfc@published">

  517. 

  518. <pre><code>The businesses are fake.

  519. </code></pre>

  520. </h2>

  521. 

  522. <p><p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/cjpyczd9e001x3a5zwe849ki0@published" data-word-count="189">The money is usually real. Not always — ask someone who enthusiastically got into cryptocurrency this time last year — but often enough to be an engine of the Inversion. If the money is real, why does anything else need to be? Earlier this year, the writer and artist Jenny Odell began to look into an Amazon reseller that had bought goods from other Amazon resellers and resold them, again on Amazon, at higher prices. <a href="https://www.nytimes.com/interactive/2018/11/27/style/what-is-inside-this-internet-rabbit-hole.html">Odell discovered an elaborate network of fake price-gouging and copyright-stealing businesses connected to the cultlike Evangelical church</a> whose followers resurrected <em>Newsweek</em> in 2013 as a zombie search-engine-optimized spam farm. She visited a strange bookstore operated by the resellers in San Francisco and found a stunted concrete reproduction of the dazzlingly phony storefronts she’d encountered on Amazon, arranged haphazardly with best-selling books, plastic tchotchkes, and beauty products apparently bought from wholesalers. “At some point I began to feel like I was in a dream,” she wrote. “Or that I was half-awake, unable to distinguish the virtual from the real, the local from the global, a product from a Photoshop image, the sincere from the insincere.”</p></p>

  523. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005b2hyedp46mn74@published" data-placeholder="settings" class="ad vp-0-480" data-name="/4088/Intelligencer_Mobile" data-sizes="300x250,300x252,320x100" data-label="inArticleMobile" data-site="Intelligencer" id="ad-cid-j0z1uzoR">

  524. </aside></p>

  525. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005d2hyese3o9yc7@published" data-placeholder="settings" class="ad vp-480-768" data-name="/4088/Intelligencer_Mobile" data-sizes="468x60,480x60,300x250" data-label="inArticleMobile" data-site="Intelligencer" id="ad-cid-UHkjT3nx">

  526. </aside></p>

  527. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005c2hyeyijd0swf@published" data-placeholder="settings" class="ad vp-768-1180" data-name="/4088/Intelligencer" data-sizes="300x250" data-label="inArticleTablet" data-site="Intelligencer" id="ad-cid-5jL0guVy">

  528. </aside></p>

  529. <h2 class="clay-subheader" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-subheader/instances/cjpyd4lxv003m3a5zicpceo8h@published">

  530. 

  531. <pre><code>The content is fake.

  532. </code></pre>

  533. </h2>

  534. 

  535. <p><p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/cjpyczd9g001z3a5zi6248gd6@published" data-word-count="148">The only site that gives me that dizzying sensation of unreality as often as Amazon does is YouTube, which plays host to weeks’ worth of inverted, inhuman content. TV episodes that have been mirror-flipped to avoid copyright takedowns air next to huckster vloggers flogging merch who air next to <a href="http://nymag.com/intelligencer/2018/08/what-is-the-baby-meme-about-eating-sugar-and-telling-lies.html">anonymously produced videos that are ostensibly for children</a>. An animated video of Spider-Man and Elsa from <em>Frozen</em> riding tractors is not, you know, <em>not</em> real: Some poor soul animated it and gave voice to its actors, and I have no doubt that some number (dozens? Hundreds? Millions? Sure, why not?) of kids have sat and watched it and found some mystifying, occult enjoyment in it. But it’s certainly not “official,” and it’s hard, watching it onscreen as an adult, to understand where it came from and what it means that the view count beneath it is continually ticking up.</p></p>

  536. <p><p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/cjpyczd9g00203a5z2k7kxpli@published" data-word-count="175">These, at least, are mostly bootleg videos of popular fictional characters, i.e., counterfeit unreality. Counterfeit <em>reality</em> is still more difficult to find—for now. In January 2018, an anonymous Redditor created a relatively easy-to-use desktop-app implementation of “deepfakes,” the now-infamous technology that uses artificial-intelligence image processing to replace one face in a video with another — putting, say, a politician’s over a porn star’s. <a href="https://arxiv.org/pdf/1812.04948.pdf">A recent academic paper from researchers at the graphics-card company Nvidia</a> demonstrates a similar technique used to create images of computer-generated “human” faces that look shockingly like photographs of real people. (Next time Russians want to puppeteer a group of invented Americans on Facebook, they won’t even need to steal photos of real people.) Contrary to what you might expect, a world suffused with deepfakes and other artificially generated photographic images won’t be one in which “fake” images are routinely believed to be real, but one in which “real” images are routinely believed to be fake — simply because, in the wake of the Inversion, who’ll be able to tell the difference?</p></p>

  537. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005b2hyedp46mn74@published" data-placeholder="settings" class="ad vp-0-480" data-name="/4088/Intelligencer_Mobile" data-sizes="300x250,300x252,320x100" data-label="inArticleMobile" data-site="Intelligencer" id="ad-cid-9LMNZw7r">

  538. </aside></p>

  539. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005d2hyese3o9yc7@published" data-placeholder="settings" class="ad vp-480-768" data-name="/4088/Intelligencer_Mobile" data-sizes="468x60,480x60,300x250" data-label="inArticleMobile" data-site="Intelligencer" id="ad-cid-2oaoxHjo">

  540. </aside></p>

  541. <p><aside data-uri="nymag.com/intelligencer/_components/ad/instances/cjpycxdq6005c2hyeyijd0swf@published" data-placeholder="settings" class="ad vp-768-1180" data-name="/4088/Intelligencer" data-sizes="300x250" data-label="inArticleTablet" data-site="Intelligencer" id="ad-cid-rB85N7nU">

  542. </aside></p>

  543. <h2 class="clay-subheader" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-subheader/instances/cjpyd4fsk003b3a5zbkada1ms@published">

  544. 

  545. <pre><code>Our politics are fake.

  546. </code></pre>

  547. </h2>

  548. 

  549. <p><p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/cjpyczd9l00223a5zr0jo97hz@published" data-word-count="130">Such a loss of any anchoring “reality” only makes us pine for it more. Our politics have been inverted along with everything else, suffused with a Gnostic sense that we’re being scammed and defrauded and lied to but that a “real truth” still lurks somewhere. Adolescents are deeply engaged by YouTube videos that promise to show the hard reality beneath the “scams” of feminism and diversity — a process they call “red-pilling” after the scene in <em>The Matrix</em> when the computer simulation falls away and reality appears. Political arguments now involve trading accusations of “virtue signaling” — the idea that liberals are faking their politics for social reward — against charges of being Russian bots. The only thing anyone can agree on is that everyone online is lying and fake.</p></p>

  550. <h2 class="clay-subheader" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-subheader/instances/cjpyd49ju00303a5zzrcxiuwt@published">

  551. 

  552. <pre><code>We ourselves are fake.

  553. </code></pre>

  554. </h2>

  555. 

  556. <p><p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/cjpyczd9n00243a5zsvw7v7uk@published" data-word-count="133">Which, well. Everywhere I went online this year, I was asked to prove I’m a human. Can you retype this distorted word? Can you transcribe this house number? Can you select the images that contain a motorcycle? I found myself prostrate daily at the feet of robot bouncers, frantically showing off my highly developed pattern-matching skills — does a Vespa count as a motorcycle, even? — so I could get into nightclubs I’m not even sure I want to enter. Once inside, I was directed by dopamine-feedback loops to scroll well past any healthy point, manipulated by emotionally charged headlines and posts to click on things I didn’t care about, and harried and hectored and sweet-talked into arguments and purchases and relationships so algorithmically determined it was hard to describe them as real.</p></p>

  557. <p><p class="clay-paragraph" data-editable="text" data-uri="nymag.com/intelligencer/_components/clay-paragraph/instances/cjpyczd9p00253a5zsvdj07j9@published" data-word-count="143">Where does that leave us? I’m not sure the solution is to seek out some pre-Inversion authenticity — to red-pill ourselves back to “reality.” What’s gone from the internet, after all, isn’t “truth,” but trust: the sense that the people and things we encounter are what they represent themselves to be. Years of metrics-driven growth, lucrative manipulative systems, and unregulated platform marketplaces, have created an environment where it makes more sense to be fake online — to be disingenuous and cynical, to lie and cheat, to misrepresent and distort — than it does to be real. Fixing that would require cultural and political reform in Silicon Valley and around the world, but it’s our only choice. Otherwise we’ll all end up on the bot internet of fake people, fake clicks, fake sites, and fake computers, where the only real thing is the ads.</p></p>

  558.   </article>

  559. </section>

  560. 

  561. 

  562. <nav id="jumpto">

  563.   <p>

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

  565.     <a href="http://nymag.com/intelligencer/2018/12/how-much-of-the-internet-is-fake.html">Source originale</a> |

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

  567.   </p>

  568. </nav>

  569. 

  570. <footer>

  571.   <div>

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

  573.     <p>

  574.       Bonjour/Hi!

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

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

  577.     </p>

  578.     <p>

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

  580.     </p>

  581.     

  582.     <p>

  583.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  600.     </p>

  601.     <p>

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

  603.     </p>

  604.     <p>

  605.       Je ne traque pas ta navigation mais mon

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

  607.       conserve des logs d’accès.

  608.     </p>

  609.   </div>

  610. </footer>

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

  612.   ;(_ => {

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

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

  615.       e.preventDefault()

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

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

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

  619.     })

  620.   })()

  621. </script>