davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>The modern web is becoming an unusable, user-hostile wasteland (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://omarabid.com/the-modern-web">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
  <header>
    <h1>The modern web is becoming an unusable, user-hostile wasteland</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="https://omarabid.com/the-modern-web" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <blockquote>
<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>
</blockquote>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<blockquote class="short">
<p>Keep it ad-free<br/>
Medium doesn’t accept advertising. Please don’t market yourself or other products, feature advertisements, or include requests for claps or donations.</p>
</blockquote>

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

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

<blockquote>
<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>
</blockquote>

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

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

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

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

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

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

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

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

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

<ul>
<li>Websites asking to login, register or enter an email.</li>
<li>Websites asking for your phone number after you gave up your email.</li>
<li>Websites asking to allow HTML5 notifications.</li>
<li>Websites downloading 50Mb of data and making hundreds of requests to serve 6Kb worth of text.</li>
<li>Websites that are not functioning because they have too much JavaScript.</li>
<li>Websites that are not functioning because some of the JavaScript was caught by uBlock Origin.</li>
<li>Websites asking to turn off the Ad Blocker.</li>
<li>Websites asking to accept the cookies in 41,484 different ways.</li>
<li>Websites asking to download their mobile app which is non-native and requires around 200Mb of storage.</li>
<li>Popups to buy a deal or download some random crap.</li>
<li>reCaptcha with random street images; that are sometimes impossible to solve.</li>
<li>CloudFlare DDoS protection thinking I’m a bot.</li>
<li>Youtube running a 2:30 minutes ad for a 3:30 minutes music video.</li>
<li>Video or Website not showing up because I’m not in said country.</li>
<li>Linkedin that keeps sending dozens of emails despite unsubscribing multiple times; and somehow evades the Spam filter</li>
</ul>

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

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

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

<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>
  </main>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script type="text/javascript">
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>