davidbgk
/
larlet-fr-david-cache
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
237 提交
1 分支
目录树: f57bf93b43
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'f57bf93b43'
${ noResults }
larlet-fr-david-cache/cache/685842ac9d1a3206af33dbd51d0.../index.html

index.html 26KB
原始文件 Blame 文件历史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647 
  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>The modern web is becoming an unusable, user-hostile wasteland (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://omarabid.com/the-modern-web">

  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.   The modern web is becoming an unusable, user-hostile wasteland (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://omarabid.com/the-modern-web">Source originale du contenu</a></h3>

  463.     <blockquote>

  464. <p>In one of Gerald Weinberg’s books, probably The Secrets of Consulting, there’s the apocryphal story of the giant multinational hamburger chain where some bright MBA figured out that eliminating just three sesame seeds from a sesame-seed bun would be completely unnoticeable by anyone yet would save the company $126,000 per year. So they do it, and time passes, and another bushy-tailed MBA comes along, and does another study, and concludes that removing another five sesame seeds wouldn’t hurt either, and would save even more money, and so on and so forth, every year or two, the new management trainee looking for ways to save money proposes removing a sesame seed or two, until eventually, they’re shipping hamburger buns with exactly three sesame seeds artfully arranged in a triangle, and nobody buys their hamburgers any more.</p>

  465. </blockquote>

  466. 

  467. <p><em>Joel Spolsky from <a href="https://www.joelonsoftware.com/2007/09/11/theres-no-place-like-127001/">There’s no place like 127.0.0.1</a></em></p>

  468. 

  469. <p>As I keep browsing today’s internet, I keep recalling this extract. It’s the same thing happening with the modern web: If you add another advertisement to your pages, you generate more revenue. If you track your users better, now you can deliver tailored ads and your conversion rates are higher. If you restrict users from leaving your walled garden ecosystem, now you get all the juice from whatever attention they have.</p>

  470. 

  471. <p>The question is: At which point do we reach the breaking point?</p>

  472. 

  473. <p>And I think the answer is: <em>We are very close</em>.</p>

  474. 

  475. <p>Here are some of these websites, who have managed over time to turn the user experience almost unusable for anyone who doesn’t have an account.</p>

  476. 

  477. <h2 id="facebook_2">Facebook <a class="head_anchor" href="#facebook_2">#</a>

  478. </h2>

  479. 

  480. <p>If you try to open a Facebook page without an account, this is what you get.</p>

  481. 

  482. <p><a href="https://svbtleusercontent.com/dJwcwmJQW8QkFHeMQBKnTC0xspap.png"><img src="https://svbtleusercontent.com/dJwcwmJQW8QkFHeMQBKnTC0xspap.png" alt="Screen Shot 2019-11-11 at 6.34.32 PM.png"/></a></p>

  483. 

  484. <p>There is a blue header at the top that has the login form. But in case you missed it, Facebook has made another big white one at the bottom. Have you signed up yet?</p>

  485. 

  486. <p>Let’s try to scroll a little bit more.</p>

  487. 

  488. <p><a href="https://svbtleusercontent.com/gNR1XozEXRGq8TxxBbtSK60xspap.png"><img src="https://svbtleusercontent.com/gNR1XozEXRGq8TxxBbtSK60xspap.png" alt="Screen Shot 2019-11-11 at 6.34.55 PM.png"/></a></p>

  489. 

  490. <p>Wooha! Looks like you didn’t login, or you haven’t signed up yet! But there is a small “Not Now” button; because we know <em>you’ll have to create an account later</em>.</p>

  491. 

  492. <p>In case you think this experience is garbage; wait until you see the mobile version.</p>

  493. 

  494. <p><a href="https://svbtleusercontent.com/GkQ5zG4SoV2yZDFPZCn1a0xspap.png"><img src="https://svbtleusercontent.com/GkQ5zG4SoV2yZDFPZCn1a0xspap.png" alt="IMG_3528.PNG"/></a></p>

  495. 

  496. <p>It’s not even clear, at this point, what the actual page is about. Let’s try to scroll a bit more.</p>

  497. 

  498. <p><a href="https://svbtleusercontent.com/iwrmnvSWCCZ6LWkp1V3SRH0xspap.png"><img src="https://svbtleusercontent.com/iwrmnvSWCCZ6LWkp1V3SRH0xspap.png" alt="IMG_3530.PNG"/></a></p>

  499. 

  500. <p>There isn’t even any content in this page. Who designed and approved this mess?</p>

  501. 

  502. <p>Think you are a smart-ass? You can create a fake account. But after a while, Facebook will think you are dodgy and ask for more identifiable information.</p>

  503. 

  504. <p><a href="https://svbtleusercontent.com/5xyZiwADWPEziRppRmEvSM0xspap.png"><img src="https://svbtleusercontent.com/5xyZiwADWPEziRppRmEvSM0xspap.png" alt="Screen Shot 2019-11-20 at 11.58.45 AM.png"/></a></p>

  505. 

  506. <p>There is a solution: To buy a disposable phone number and use it to complete the verification. But this was the breaking point. At this point, I no longer bother.</p>

  507. 

  508. <p>Is Twitter any better? Well, it looks like they are trying to strike a balance between giving you free data and their craving for your identity. You can still read  the president tweets from his main page.</p>

  509. 

  510. <p><a href="https://svbtleusercontent.com/vfk2SLog4xoJR693CHSUaX0xspap.png"><img src="https://svbtleusercontent.com/vfk2SLog4xoJR693CHSUaX0xspap.png" alt="Screen Shot 2019-12-20 at 1.07.06 PM.png"/></a></p>

  511. 

  512. <p>Trying to read his “Tweets &amp; replies” is less fruitful though.</p>

  513. 

  514. <p><a href="https://svbtleusercontent.com/8eBsgGd149ankeY2dh9qj80xspap.png"><img src="https://svbtleusercontent.com/8eBsgGd149ankeY2dh9qj80xspap.png" alt="Screen Shot 2019-12-20 at 1.07.44 PM.png"/></a></p>

  515. 

  516. <p>Actually, all of these buttons are inaccessible as for right now.</p>

  517. 

  518. <p><a href="https://svbtleusercontent.com/iN7M3MxngAUo8bX8F2JCA80xspap.png"><img src="https://svbtleusercontent.com/iN7M3MxngAUo8bX8F2JCA80xspap.png" alt="Screen Shot 2019-12-20 at 1.07.06 PM.png"/></a></p>

  519. 

  520. <p>Extrapolating on the progress these websites have been making, it’s only a matter of time before <em>nothing</em> on Twitter is readable without an account. Maybe, you’ll get a spoiler in the future; but that’s it.</p>

  521. 

  522. <h2 id="medium_2">Medium <a class="head_anchor" href="#medium_2">#</a>

  523. </h2>

  524. 

  525. <p>Everyone is complaining about these tech-giants these days, but are the new incumbents doing any better? Medium is one these <em>dudes</em> and they claim to be the good guys.</p>

  526. 

  527. <blockquote class="short">

  528. <p>Keep it ad-free<br/>

  529. Medium doesn’t accept advertising. Please don’t market yourself or other products, feature advertisements, or include requests for claps or donations.</p>

  530. </blockquote>

  531. 

  532. <p><a href="https://svbtleusercontent.com/9VdU6n8fbQbksQwSnKp6Nx0xspap.png"><img src="https://svbtleusercontent.com/9VdU6n8fbQbksQwSnKp6Nx0xspap.png" alt="Screen Shot 2019-11-11 at 7.26.25 PM.png"/></a></p>

  533. 

  534. <p>No ads? Time to check the terms of service.</p>

  535. 

  536. <blockquote>

  537. <p>In consideration for Medium granting you access to and use of the Services, you agree that Medium may enable advertising on the Services, including in connection with the display <em>of your content</em> or other information. We may also <em>use your content</em> to promote Medium, including its products and content. We will never sell your content to third parties without your explicit permission.</p>

  538. </blockquote>

  539. 

  540. <p>So they are advertising, but <em>you are not</em>. But hey! at least they are not selling your content without your permission. Don’t hold your breath, though. The terms can change at a moment notice.</p>

  541. 

  542. <p>And in case you wondered what the experience of browsing medium is, here it is:</p>

  543. 

  544. <p><a href="https://svbtleusercontent.com/wyvY4QLnCK9RFwxDG7CSDc0xspap.png"><img src="https://svbtleusercontent.com/wyvY4QLnCK9RFwxDG7CSDc0xspap.png" alt="Screen Shot 2019-11-11 at 7.20.10 PM.png"/></a></p>

  545. 

  546. <p><a href="https://svbtleusercontent.com/wcxC522McDBrpK98NQyK4f0xspap.png"><img src="https://svbtleusercontent.com/wcxC522McDBrpK98NQyK4f0xspap.png" alt="Screen Shot 2019-11-11 at 7.22.33 PM.png"/></a></p>

  547. 

  548. <p><a href="https://svbtleusercontent.com/rFMbk9Nh775qzsV2Lx3FLn0xspap.png"><img src="https://svbtleusercontent.com/rFMbk9Nh775qzsV2Lx3FLn0xspap.png" alt="Screen Shot 2019-11-11 at 7.23.44 PM.png"/></a></p>

  549. 

  550. <p>But what if you pay? That is you are not the product like they said. Let’s say you check a supposedly reputable company (i.e. Bloomberg) and think of opting for a digital subscription.</p>

  551. 

  552. <p><a href="https://svbtleusercontent.com/uZ3k94FgmD61DTUb4m1bqd0xspap.png"><img src="https://svbtleusercontent.com/uZ3k94FgmD61DTUb4m1bqd0xspap.png" alt="Screen Shot 2019-11-23 at 9.33.01 PM.png"/></a></p>

  553. 

  554. <p>I mean it’s only $2/month. Less than what you’d pay for a cup of coffee. Or $<strong>340</strong>/year; here hoping you are very bad at math.</p>

  555. 

  556. <p>In a nutshell, if I can describe my browsing experience in 2019.</p>

  557. 

  558. <ul>

  559. <li>Websites asking to login, register or enter an email.</li>

  560. <li>Websites asking for your phone number after you gave up your email.</li>

  561. <li>Websites asking to allow HTML5 notifications.</li>

  562. <li>Websites downloading 50Mb of data and making hundreds of requests to serve 6Kb worth of text.</li>

  563. <li>Websites that are not functioning because they have too much JavaScript.</li>

  564. <li>Websites that are not functioning because some of the JavaScript was caught by uBlock Origin.</li>

  565. <li>Websites asking to turn off the Ad Blocker.</li>

  566. <li>Websites asking to accept the cookies in 41,484 different ways.</li>

  567. <li>Websites asking to download their mobile app which is non-native and requires around 200Mb of storage.</li>

  568. <li>Popups to buy a deal or download some random crap.</li>

  569. <li>reCaptcha with random street images; that are sometimes impossible to solve.</li>

  570. <li>CloudFlare DDoS protection thinking I’m a bot.</li>

  571. <li>Youtube running a 2:30 minutes ad for a 3:30 minutes music video.</li>

  572. <li>Video or Website not showing up because I’m not in said country.</li>

  573. <li>Linkedin that keeps sending dozens of emails despite unsubscribing multiple times; and somehow evades the Spam filter</li>

  574. </ul>

  575. 

  576. <h1 id="the-breaking-point_1">The breaking point <a class="head_anchor" href="#the-breaking-point_1">#</a>

  577. </h1>

  578. 

  579. <p>I used to have a bank account with a local branch of BNP Paribas. When I signed up, I opted for various services like Online Banking, a “Platinum” debit card and other services. It made sense at the time to pay for online banking since it was long ago, but does it make sense now?</p>

  580. 

  581. <p>Worse, in the last few years, I have seen the bill for these services increase three fold in the last 3 years. And they started charging for small crap: Deposit money? There is a small fee. Deposit a check? There is a small fee. Withdraw from another bank ATM? The fee now is so high I have to think twice. <em>Inconvenient</em>.</p>

  582. 

  583. <p>Changing banks is annoying but not impossible. It’d be better if I can avoid such a thing but there is a point where the system breaks. And at some point, you look at the bill and decide: That’s the <strong>breaking point</strong>.</p>

  584.   </article>

  585. </section>

  586. 

  587. 

  588. <nav id="jumpto">

  589.   <p>

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

  591.     <a href="https://omarabid.com/the-modern-web">Source originale</a> |

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

  593.   </p>

  594. </nav>

  595. 

  596. <footer>

  597.   <div>

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

  599.     <p>

  600.       Bonjour/Hi!

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

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

  603.     </p>

  604.     <p>

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

  606.     </p>

  607.     

  608.     <p>

  609.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  626.     </p>

  627.     <p>

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

  629.     </p>

  630.     <p>

  631.       Je ne traque pas ta navigation mais mon

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

  633.       conserve des logs d’accès.

  634.     </p>

  635.   </div>

  636. </footer>

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

  638.   ;(_ => {

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

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

  641.       e.preventDefault()

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

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

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

  645.     })

  646.   })()

  647. </script>