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.
224 Révisions
1 Branche
Aborescence: f8f4c58548
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'f8f4c58548'
${ noResults }
larlet-fr-david-cache/cache/a4ddc39b663df3dd8dcee7f7233.../index.html

index.html 40KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Le monde et le pantalon de Mark Zuckerberg. (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://affordance.typepad.com//mon_weblog/2017/01/zuckerberg-president-united-states.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.   Le monde et le pantalon de Mark Zuckerberg. (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://affordance.typepad.com//mon_weblog/2017/01/zuckerberg-president-united-states.html">Source originale du contenu</a></h3>

  463.     <p>Nous y voilà. Pas tout à fait certes mais jamais nous n'en fûmes si près. Mark Zuckerberg en campagne pour devenir le prochain président des Etats-Unis. Pour gagner du temps, voilà déjà l'affiche officielle du Facebook Digital Labor Party. Le slogan a été facile à trouver :</p>

  464. 

  465. <h2>Yes We <span>Can</span> Like.</h2>

  466. 

  467. <p><a class="asset-img-link" href="http://www.affordance.info/.a/6a00d8341c622e53ef01b7c8c44b3b970b-pi"><img alt="Diapositive1" border="0" class="asset  asset-image at-xid-6a00d8341c622e53ef01b7c8c44b3b970b image-full img-responsive" src="http://www.affordance.info/.a/6a00d8341c622e53ef01b7c8c44b3b970b-800wi" title="Diapositive1"/></a></p>

  468. 

  469. <h2>Science-fiction ? Oui mais non.</h2>

  470. 

  471. <p>Oui, science-fiction parce que c'est bien une nouvelle de science-fiction publiée récemment ("<a href="http://affordance.typepad.com/mon_weblog/2016/11/le-professeur-histoire.html" rel="noopener noreferrer" target="_blank">Le professeur d'histoire</a>") dans laquelle je vous racontais l'accession au pouvoir de Mark Zuckerberg et de son "Facebook Digital Labor Party." Extrait : </p>

  472. 

  473. <blockquote>

  474. <p><em>"Facebook devenait "The Facebook Digital Labor Party" (FDLP) et (...) Larry Page annonça presque simultanément que Google devenait "The Google Democracy Engine" (GDE), ils remportèrent à eux deux l'ensemble des élections dans plus de 70% des pays du globe en à peine moins de 10 ans. Elections qu'ils organisaient via leurs dispositifs d'acclamation sociale qui avaient remplacé les anciennes machines électroniques à voter."</em></p>

  475. </blockquote>

  476. 

  477. <p>Mais non parce que toute la presse est en train de s'enflammer (à mon avis à juste titre) sur ce qui ressemble en effet à une sorte de rôdage pré-campagne de futur candidat. Wired titrant : "<a href="https://www.wired.com/2017/01/zucks-sure-acting-like-someone-might-run-president/" rel="noopener noreferrer" target="_blank">Mark Zuckerberg se comporte assurément comme quelqu'un se préparant à être candidat.</a>"</p>

  478. 

  479. <p><a class="asset-img-link" href="http://www.affordance.info/.a/6a00d8341c622e53ef01b7c8c4995c970b-pi"><img alt="GettyImages-624350188-1" border="0" class="asset  asset-image at-xid-6a00d8341c622e53ef01b7c8c4995c970b image-full img-responsive" src="http://www.affordance.info/.a/6a00d8341c622e53ef01b7c8c4995c970b-800wi" title="GettyImages-624350188-1"/></a><span class="credit link-underline-sm">ERNESTO BENAVIDES/AFP/Getty Images</span></p>

  480. 

  481. <p><span class="credit link-underline-sm">Tout a commencé <a href="https://www.facebook.com/zuck/posts/10103385178272401" rel="noopener noreferrer" target="_blank">le 3 janvier à 22h43 avec ce post de Mark Zuckerberg</a> expliquant sa bonne résolution pour l'année à venir. Après avoir l'année dernière créé une intelligence artificielle pour sa maison et appris le Mandarin, son "challenge" pour l'année 2017 allait consister à aller à la rencontre des gens dans chaque état des USA : </span></p>

  482. 

  483. <blockquote>

  484. <p><span class="credit link-underline-sm">"<em>My personal challenge for 2017 is to have visited and met people in every state in the US by the end of the year. I've spent significant time in many states already, so I'll need to travel to about 30 states this year to complete this challenge.</em>"</span></p>

  485. </blockquote>

  486. 

  487. <p><span class="credit link-underline-sm">En lisant l'info nous avons été <a href="https://www.facebook.com/gchampeau/posts/10155028187006454?pnref=story" rel="noopener noreferrer" target="_blank">plusieurs à causer sur le même Facebook du fait que cela ressemblait fort à une pré-campagne</a>. Et pendant que nous causions, USA Today titrait : "<a href="http://www.usatoday.com/story/tech/talkingtech/2017/01/04/facebook-ceo-mark-zuckerberg-political-ambitions/96161822/" rel="noopener noreferrer" target="_blank">Is Mark Zuckerberg Considering White House Run ?</a>" De fait,</span><span class="credit link-underline-sm"> ces voeux ont été perçus comme "<a href="http://www.lemonde.fr/pixels/article/2017/01/04/les-v-ux-tres-politiques-du-patron-de-facebook_5057655_4408996.html" rel="noopener noreferrer" target="_blank">très politiques</a>". </span></p>

  488. 

  489. <p><span class="credit link-underline-sm">Voici la liste des principaux "indices" que l'on retrouve dans la plupart des articles sur le sujet et qui attestent d'un futur Big Move du patron de Facebook. </span></p>

  490. 

  491. <h3><span class="credit link-underline-sm">1er indice.</span></h3>

  492. 

  493. <p><span class="credit link-underline-sm">Le mois dernier Zuckerberg a réussi à convaincre "l'Executive Board" de Facebook de le laisser aux commandes de l'entreprise même s'il prenait un congé de 2 ans pour servir le gouvernement (il misait probablement à l'époque davantage sur une victoire d'Hillary) ou pour une mission de nature politique. <a href="http://www.businessinsider.fr/des-echanges-de-sms-entre-mark-zuckerberg-et-un-investisseur-montrent-que-le-fondateur-de-facebook-envisageait-de-faire-de-la-politique/" rel="noopener noreferrer" target="_blank">Différents documents (mails, SMS) attestent</a> que Mark Zuckerberg est tout autant décidé à faire de la politique qu'à ne pas perdre le contrôle et la direction de Facebook. Le plan initial semblait être d'occuper un poste gouvernemental dans l'équipe d'Hillary Clinton, probablement en lien avec la recherche, l'immigration ou l'éducation (cf le 4ème indice plus bas). Sauf que l'issue ne fut pas celle prévue ...</span></p>

  494. 

  495. <h3><span class="credit link-underline-sm">2ème indice. </span></h3>

  496. 

  497. <p><span class="credit link-underline-sm">Le jour de Noël, alors qu'il s'était toujours assez vigoureusement revendiqué comme athée, Zuckerberg a publié un <a href="https://www.facebook.com/zuck/posts/10103363940448171" rel="noopener noreferrer" target="_blank">post pour souhaiter un "Merry Christmas and Happy Nanukkah"</a> à tout le monde. Alors qu'un commentateur lui demandait s'il n'était plus athée, Mark lui a répondu ceci : </span></p>

  498. 

  499. <blockquote>

  500. <p><span class="credit link-underline-sm">"No. I was raised Jewish and then I went through a period where I questioned things, but now I believe religion is very important."</span></p>

  501. </blockquote>

  502. 

  503. <p><span class="credit link-underline-sm"><a href="shingtonpost.com/news/acts-of-faith/wp/2016/12/30/mark-zuckerberg-says-hes-no-longer-an-atheist-believes-religion-is-very-important/" rel="noopener noreferrer" target="_blank">Comme le rappelle le Washington Post</a>, revendiquer sa foi est le préalable et la condition <em>sine qua non</em> lorsque l'on aspire à diriger les états-unis.</span></p>

  504. 

  505. <h3><span class="credit link-underline-sm">3ème indice. </span></h3>

  506. 

  507. <p><span class="credit link-underline-sm">On sait, depuis des échanges de mails datés de l'été 2015 entre John Podesta (le directeur de campagne d'Hillary Clinton) et Sheryll Sandberg (n°2 de Facebook) que Mark Zuckerberg veut "<a href="http://www.numerama.com/politique/202721-mark-zuckerberg-2020-le-patron-de-facebook-veut-apprendre-la-politique.html" rel="noopener noreferrer" target="_blank">apprendre la politique</a>" pour servir au mieux ses intérêts philantropiques mais également être en capacité d'intervenir sur "les politiques publiques qui lui tiennent le plus à coeur".</span></p>

  508. 

  509. <h3><span class="credit link-underline-sm">4ème indice.</span></h3>

  510. 

  511. <p>C'est le mois de Mars 2013 qui marque "officiellement" l'entrée en politique de Zuckerberg. A l'époque, <a href="http://www.telegraph.co.uk/technology/mark-zuckerberg/9951337/Mark-Zuckerberg-to-enter-politics-with-political-campaign-group.html" rel="noopener noreferrer" target="_blank">il fonde avec d'autres entrepreneurs un groupe de réflexion (lobby) s'intéressant notamment aux questions de l'immigration</a>, groupe <a href="https://www.fwd.us/" rel="noopener noreferrer" target="_blank">nommé Fwd.Us</a>, pour faciliter la venue et l'installation sur le territoire d'étrangers travaillant dans le domaine des nouvelles technologies. Selon lui, un contrôle migratoire trop strict empêche la Silicon Valley (et Facebook) de recruter et de faire venir les meilleurs cerveaux.</p>

  512. 

  513. <h2>A Bug Called Donald Trump.</h2>

  514. 

  515. <p>Si Donald Trump n'avait pas été élu, le PDG de Facebook aurait alors probablement entamé une carrière politique officielle au sein du gouvernement d'Hillary Clinton. Et l'on peut supposer que sa mission de 2 ans en aurait probablement amenée une autre, et aurait tout aussi certainement causé beaucoup de remous dans la sphère médiatico-politique du fait de cette situation inédite dans laquelle l'homme à la tête du réseau social le plus peuplé de la planète se  serait trouvé dans l'équipe gouvernementale de la présidente de 1ère puissance économique et politique mondiale.  </p>

  516. 

  517. <p><span class="credit link-underline-sm">Notons que Mark Zuckerberg était, mi-décembre 2016, l'un des très rares PDG (Jeff Bezos n'y était pas non plus) a ne pas s'être rendu au meeting de Donald Trump réunissant toute la fine fleur de la Silicon Valley. Il avait envoyé la numéro 2 de Facebook, Sheryl Sandberg. On saura peut-être un jour la raison de cette absence mais, si les choses sont assez claires pour l'absence de Bezos (propriétaire du Washington Post, lequel journal avait mené une très virulente campagne anti-Trump), on peut supposer que Mark Zuckerberg souhaitait mettre un peu de distance avec Donald Trump au regard des diverses polémiques qui avaient souligné le rôle que Facebook avait ou non joué dans cette élection. L'argument selon lequel Mark Zuckerberg n'y était pas parce qu'il avait assez clairement pris position contre Donald Trump (notamment lors de sa Keynote d'avril 2016 où il avait dénoncé, entre autres, le projet de mur entre le Mexique et les Etats-Unis) ou en tout cas manifesté une relative inquiétude en cas de succès du milliardaire à la houpette ne tient pas, étant donné que l'ensemble des autres convives présents avaient également manifesté la même inquiétude, voire une franche opposition.</span></p>

  518. 

  519. <h2><span class="credit link-underline-sm">Zuckerberg et le syndrome du tailleur : le monde et le pantalon.</span></h2>

  520. 

  521. <p><span class="credit link-underline-sm">L'avenir dira bien sûr si le patron de Facebook ira jusqu'au bout de son ambition politique, de quelle manière et avec quel(s) impact(s). Mais j'ai la conviction qu'un jour il sera président. Ou tout au moins candidat. </span></p>

  522. 

  523. <p><span class="credit link-underline-sm">En exergue à son ouvrage éponyme, Samuel Beckett met en exergue la plaisanterie suivante : </span></p>

  524. 

  525. <p><em>Le client :</em> Dieu a fait le monde en six jours, et vous, vous n'êtes pas foutu de me faire un pantalon en six mois.</p>

  526. 

  527. <p><em>Le tailleur</em> : Mais monsieur, regardez le monde, et regardez mon pantalon.</p>

  528. 

  529. <p><span class="credit link-underline-sm"><strong>Mark Zuckerberg est atteint du syndrome du tailleur.</strong> Il est un peu comme ce tailleur contemplant la perfection subjective de ce qu'il a construit et nourrissant l'ambition à peine voilée de réussir avec le monde ce qu'il a réussi avec son "pantalon", c'est à dire sa plateforme de réseau social. Facebook c'est le pantalon de Mark Zuckerberg. Ce n'est certes pas la première fois qu'un milliardaire technophile américain se prend à rêver de sauver le monde. Bill Gates et d'autres ont, au travers de fondations, mis en oeuvre des actions philantropiques à grands coups de millions venant de leur fortune privée. Ce n'est pas non plus la première fois qu'un patron de grande entreprise se pique de politique ou soutient et finance ouvertement la campagne de tel ou tel candidat, d'autant que ce sujet n'est pas du tout culturellement tabou outre-atlantique comme il peut l'être en France. </span></p>

  530. 

  531. <p><span class="credit link-underline-sm"><strong>Mais le projet et l'ambition de Mark Zuckerberg semblent pourtant différents.</strong> D'abord parce qu'ils sont consubstantiels à son parcours d'entrepreneur et qu'ils arrivent très tôt dans celui-ci. Ensuite parce que la présidence de Donald Trump pourrait, de bien des manières, accélérer les choses, notamment en cristallisant un certain nombre d'ambitions et en pointant la fin d'u cycle, la fin d'une certaine manière de faire de la politique, ou de croire dans cette manière de faire de la politique. Et parce qu'échaudé devant l'échec de la candidate qui lui aurait permis d'entrer officiellement en politique, il pourrait bien ne plus attendre qu'un prochain improbable candidat démocrate ne lui tende la main et préférer y aller tout seul. </span></p>

  532. 

  533. <p><span class="credit link-underline-sm">Enfin, et peut-être surtout, parce que "le numérique" est au centre d'un équilibre précaire qui peut à tout moment nous projeter <a href="http://affordance.typepad.com//mon_weblog/2016/12/dystopie-2017.html" rel="noopener noreferrer" target="_blank">dans la pire des dystopies</a>, et que le rôle de Facebook, dans l'accélération ou l'évitement de cette bascule, est <em>déjà</em> central. Parce qu'une plateforme, n'importe quelle plateforme, par les enjeux économiques qu'elle mobilise, <a href="http://affordance.typepad.com//mon_weblog/2016/11/comment-dit-on-facebook-en-chinois-censure.html" rel="noopener noreferrer" target="_blank">doit nécessairement choisir un positionnement politique</a>. Parce que s'il est acté qu'il faudra désormais <a href="https://www.technologyreview.com/s/602612/obama-my-successor-will-govern-a-country-being-transformed-by-ai/" rel="noopener noreferrer" target="_blank">gouverner des pays profondément bouleversés par le progrès de l'intelligence artificielle</a>, Zuckerberg (ou d'autres) y trouveront une compétence qui vaudra légitimité. Parce que la "plateformisation" de la politique comme processus est déjà opérante et opérationnelle, <a href="http://affordance.typepad.com/mon_weblog/2016/04/construire-une-nation-comme-un-fichier-client.html" rel="noopener noreferrer" target="_blank">avec le risque de construire une nation comme un fichier client</a>. </span></p>

  534. 

  535. <p><span class="credit link-underline-sm">L'autre légitimité que Zuckerberg perçoit peut-être dans l'extraordinaire aventure "entreprenariale" de Facebook est qu'elle est le creuset d'un panorama politique total : avec 1,5 milliard d'utilisateurs actifs, Facebook est le "pays" le plus peuplé de la planète, Zuckerberg parle d'égal à égal avec la plupart des gouvernants de notre monde, il est reçu et écouté comme pourrait l'être un chef d'état ; à l'échelle de sa plateforme, Zuckerberg est amené, chaque jour à prendre des décisions économiques, sociétales, éditoriales, politiques dont le poids est souvent équivalent à celui que prennent des ministres ou des chefs d'état. Qu'on le veuille ou non, Facebook est et restera <a href="http://www.france24.com/fr/20160518-facebook-zuckerberg-democrate-republicain-politique-trending-liberaux-internet-trump" rel="noopener noreferrer" target="_blank">l'arbitre des élégances politiques</a> pour chacune des prochaines élections et, tout débat sur la bulle de filtre mis à part, aucun des choix éditorialo-algorithmiques de la plateforme ne sera "neutre". <br/></span></p>

  536. 

  537. <h2><span class="credit link-underline-sm">Gouverner c'est prévoir. Mais "coder" aussi, c'est prévoir. </span></h2>

  538. 

  539. <p><span class="credit link-underline-sm">Je n'ai pas de boule de cristal. Et je suis même incapable de vous dire, pour autant qu'elle se confirme, si cette entrée en politique est une bonne nouvelle. Ce qui me semble certain en revanche, c'est que le champ social et politique va être profondément bouleversé par le numérique et qu'il n'est donc pas illégitime que ceux qui sont à l'origine de ces bouleversements se piquent de faire de la politique. Comme il me semble certain qu'il nous faudra faire preuve d'une vigilance de chaque instant. Car un projet philantropique ne peut pas tenir lieu de politique publique. Car l'idéologie libertarienne revendiquée par ces entrepreneurs qui <em>ont</em> déjà changé le monde est une idéologie "sans état". Or le modèle économique des GAFAM va obliger à repenser l'articulation du monde entre une forme clivante et extrême de capitalisme et une forme renouvelée de Marxisme à l'heure du Digital Labor, des intelligences artificielles, de la singularité, du transhumanisme, de l'automatisation et des biotechs : </span></p>

  540. 

  541. <blockquote>

  542. <p><span class="credit link-underline-sm">"<em>la relation entre les propriétaires de cette machine et les ouvriers qui l’ont construite repose toujours sous une forme d’exploitation sévère. »</em> Les travailleurs que nous sommes ne construisent pas seulement le produit, mais également un automate qui construit des produits. <em>« La tragédie de l’automatisation et de l’IA, la crainte de la « singularité », n’est en réalité que la réalisation d’une caractéristique fondamentale du capitalisme : ceux qui ne contrôlent pas les moyens de production seront toujours exclus des avantages de leur travail. » </em>(<a href="http://www.internetactu.net/a-lire-ailleurs/du-but-de-lautomatisation/" rel="noopener noreferrer" target="_blank">Internet Actu</a>)</span></p>

  543. </blockquote>

  544. 

  545. <p><span class="credit link-underline-sm">Je l'ai déjà plusieurs fois écrit ici, la plupart des progrès significatifs des prochaines années dans le domaine de la médecine, de l'éducation, des conditions de travail, des transports, de la culture, de l'armement, seront développés au sein des entités de R&amp;D ou des antennes "philantropiques" et autres fondations des magnats du numérique. Et comme cela fait déjà trop longtemps que chaque élection mobilise avant tout un vote "d'évitement" (pour "éviter" tel ou tel candidat), cet évitement pourrait trouver dans l'une des figures de la Silicon Valley l'occasion d'un nouveau vote d'adhésion qu'il sera d'autant plus facile de "marketer".</span></p>

  546. 

  547. <p><span class="credit link-underline-sm">Le projet politique qu'incarne Facebook, cette manière de gouverner les hommes en mariant surveillance objective et sous-veillance subjective, est déjà éminemment questionnable en tant que plateforme de mise en relation. Que l'homme qui l'a conçu et organisé puisse un jour être en situation de gouverner ou de participer à la gouvernance de la 1ère puissance économique mondiale nous <em>oblige</em> à poser maintenant la question du régime démocratique susceptible d'en découler et des moyens de nous en prémunir. <a href="http://www.fypeditions.com/les-algorithmes-secrets-qui-controlent-leconomie-et-linformation-the-black-box-society/" rel="noopener noreferrer" target="_blank">Black Box Society</a>.</span></p>

  548. 

  549. <p><span class="credit link-underline-sm">La gouvernance du monde telle que les GAFAM l'ont organisé, pensée et construite, s'est d'abord focalisée sur l'information et les connaissances, avec le capitalisme linguistique comme étendard et comme doctrine. Elle a ensuite placé l'Homme au centre d'un système de quantification qui a permis de l'essentialiser pour mieux servir les mêmes intérêts marchands. Une troisième vague d'essentialisation est en train de débarquer simultanément du côté des objets connectés et du corps comme interface dans le cadre de ce que j'appelle une économie de l'occupation, l'idée selon laquelle, à l'heure des bio-tech et de l'internet du génome, <a href="http://affordance.typepad.com/mon_weblog/2016/07/traces-du-corps.html" rel="noopener noreferrer" target="_blank">le corps devient une technologie "détachable" dont les traces fondent un bio-capitalisme de la surveillance</a>.</span></p>

  550. 

  551. <h2><span class="credit link-underline-sm">Quelle république algorithmique voulons-nous ?</span></h2>

  552. 

  553. <p><span class="credit link-underline-sm">Pour bâtir une <a href="http://affordance.typepad.com//mon_weblog/2016/05/nationaliser-code-republique-algorithmique.html" rel="noopener noreferrer" target="_blank">vraie république algorithmique</a>, il nous faut, sans attendre, organiser et préparer sinon une riposte, au moins des réponses à cet ensemble de mutations de la société et de ce qui nous permet de <em>faire société</em>. Ces réponses sont déjà en partie connues. <strong>La réponse au capitalisme linguistique</strong> passe par une reconnaissance positive en droit du domaine public et une sanctuarisation des communs de la connaissance (ce point figure désormais dans certains programmes politiques dont celui de Benoit Hamon). <strong>La réponse aux problématiques de surveillance et de Privacy</strong> passe par le développement et le soutien politique affirmé au logiciel libre et aux alternatives fédératrices comme le "dégooglisons internet" de l'association Framasoft. <strong>La réponse à l'emprise algorithmique</strong> passe par le <a href="http://affordance.typepad.com//mon_weblog/2016/12/etats-generaux-web-independant.html" rel="noopener noreferrer" target="_blank">déploiement d'un index indépendant du web et la convocation d'états généraux.</a> <strong>La réponse à l'automatisation</strong>, au Digital Labor et à <a href="http://affordance.typepad.com//mon_weblog/2016/06/france-culture-data-gafa-emploi.html" rel="noopener noreferrer" target="_blank">l'éclatement de l'ensemble des repères qui fondaient jusqu'ici le marché de "l'emploi"</a> passe par une réflexion sur le revenu universel. <strong>La réponse aux biotechs</strong> passe par un moratoire, <a href="http://affordance.typepad.com/mon_weblog/2015/05/telephone-cellulaire-smartphone-genome.html" rel="noopener noreferrer" target="_blank">un moment Asilomar</a>, couplé à un soutien clair et fort à la recherche <em>publique</em> sur ces questions. Et ainsi de suite. Car si la démocratie est un bien non-rival, <a href="http://affordance.typepad.com//mon_weblog/2015/11/politique-des-plateformes.html" rel="noopener noreferrer" target="_blank">ces plateformes offrent un espace "rival" à celui de l'exercice démocratique</a>.</span></p>

  554. 

  555. <p><span class="credit link-underline-sm">Contre les futurs <a href="http://affordance.typepad.com/mon_weblog/2016/11/le-professeur-histoire.html" rel="noopener noreferrer" target="_blank">Facebook Digital Labor Party ou le Google Democracy Engine</a>, en réponse à la future candidature probable de Mark Zuckerberg ou d'un autre, il nous faut, sinon un "parti", à tout le moins une vision qui mette les communs (de l'information, de la connaissance), l'ouverture (de données, du code, des logiciels), et le financement des politiques publiques au centre d'un projet d'émancipation citoyenne. </span></p>

  556. 

  557. <p><span class="credit link-underline-sm">Pour le reste, comme le conclut <a href="https://www.wired.com/2017/01/zucks-sure-acting-like-someone-might-run-president/" rel="noopener noreferrer" target="_blank">l'article de Wired</a> : </span></p>

  558. 

  559. <blockquote>

  560. <p><span class="credit link-underline-sm">"<em>De grands barons des médias ont déjà occupé de hautes fonctions politiques. Mais un baron des médias sociaux s'il était élu président, constituerait une expérience sans aucun précédent en politique et dans la capacité de contrôler nos perceptions.</em>" </span></p>

  561. </blockquote>

  562. 

  563. <p><span class="credit link-underline-sm">Il va falloir que l'on se mette rapidement d'accord sur le genre de pantalon que nous voulons pour nous-mêmes et pour nos enfants. Car les nouveaux tailleurs, eux, <a href="https://atap.google.com/jacquard/" rel="noopener noreferrer" target="_blank">préparent déjà des pantalons connectés</a>.</span></p>

  564. 

  565. <p><em>Le client :</em> Dieu a fait le monde en six jours, et vous, vous n'êtes pas foutu de me faire un pantalon en six mois.</p>

  566. 

  567. <p><em>Le tailleur</em> : Mais monsieur, regardez le monde, et regardez mon pantalon.</p>

  568.   </article>

  569. </section>

  570. 

  571. 

  572. <nav id="jumpto">

  573.   <p>

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

  575.     <a href="http://affordance.typepad.com//mon_weblog/2017/01/zuckerberg-president-united-states.html">Source originale</a> |

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

  577.   </p>

  578. </nav>

  579. 

  580. <footer>

  581.   <div>

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

  583.     <p>

  584.       Bonjour/Hi!

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

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

  587.     </p>

  588.     <p>

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

  590.     </p>

  591.     

  592.     <p>

  593.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  610.     </p>

  611.     <p>

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

  613.     </p>

  614.     <p>

  615.       Je ne traque pas ta navigation mais mon

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

  617.       conserve des logs d’accès.

  618.     </p>

  619.   </div>

  620. </footer>

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

  622.   ;(_ => {

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

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

  625.       e.preventDefault()

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

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

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

  629.     })

  630.   })()

  631. </script>