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 Return of the 90s Web (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://mxb.dev/blog/the-return-of-the-90s-web/">

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

<article>
  <header>
    <h1>The Return of the 90s Web</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="https://mxb.dev/blog/the-return-of-the-90s-web/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <p class="lead">In big cultural concepts like music or fashion, things have a way of coming around full circle. I'm pretty sure someday grunge will come back as a hot new sample, and at some point our kids might think frosted hair tips are totally cool.</p>

<p>When I look at some of the trends on the web today, I wonder if we’re at that point yet. I wonder if we’re ready to revisit some of the ideas of the early web again.</p>

<p>Probably not in design - I’m afraid <code>dancing-baby.gif</code> is gone for good. But some of the broader ideas from back then are picking up a second wind lately, and I like it.</p>

<h2 id="h-serverside-rendering"><a class="heading-anchor" href="#h-serverside-rendering">#</a> Serverside Rendering</h2>

<p>After spending the better part of the last decade shifting rendering logic to the client, it looks like the pendulum is about to swing into the other direction again.</p>

<p>With projects like <a href="https://www.phoenixframework.org/">Phoenix Liveview</a> or <a href="https://hey.com/how-it-works/">hey.com</a>’s recent “it’s-just-HTML” approach, it seems like server-side rendering (SSR) is stepping back into the spotlight.</p>

<p>It makes sense - servers are <strong>really good</strong> at this, and sending compressed HTML through the network can be lightning fast. The classic request-response cycle has evolved as well: HTTP/2 and smart techniques like <a href="https://github.com/turbolinks/turbolinks">Turbolinks</a> or <a href="https://instant.page/">just-in-time preloading</a> allow for a much better experience now than when you first tried to load that Michael Jordan photo on the Space Jam website over dial-up.</p>

<p>Taking the responsibility of rendering UI and all the Javascript that comes with it off users’ shoulders would be a great <s>old</s> new strategy for the next generation of web apps.</p>

<p><a href="https://en.wikipedia.org/wiki/Microsoft_FrontPage">Frontpage</a> and <a href="https://en.wikipedia.org/wiki/Adobe_Dreamweaver">Dreamweaver</a> were big in the 90s because of their “What You See Is What You Get” interface. People could set up a website without any coding skills, just by dragging boxes and typing text in them.</p>

<p>Of course they soon found that there was still source code underneath, you just didn’t see it. And most of the time, that source code was a big heap of auto-generated garbage - it ultimately failed to keep up with the requirements of the modern web.</p>

<figure class="extend"><a href="https://webflow.com" rel="noopener noreferrer" target="_blank"><img src="/assets/media/return-of-the-90s-web/webflow.jpg" alt="the webflow interface, different design widgets and controls" loading="lazy"/></a></figure>

<p>Today our understanding of the web has improved, and so have our tools. <a href="https://webflow.com/">Webflow</a> is one of the contenders for the “no-code editor” trophy. The output it generates is far better.</p>

<p>These tools will probably not be a replacement for developers as a whole - complex projects still require tons of human brainpower to work. But for all the landing pages and marketing sites, this could be the holy grail of <abbr title="What you see is what you get">WYSIWYG</abbr> we thought we had in the 90s.</p>

<h2 id="h-personal-websites"><a class="heading-anchor" href="#h-personal-websites">#</a> Personal Websites</h2>

<p>It might just be my IndieWeb filter bubble talking, but I think there is a renewed interest in personal websites. A lot of big social media giants are falling out of favor, and it becomes cool again to <strong>own a space</strong> on the web rather then being one of a billion usernames.</p>

<p>Our digitial identities are becoming increasingly more important, and people become aware that they’re not in control of their data. Personal sites were very popular in the era before Myspace and Facebook, and it’s now easier than ever to build one.</p>

<p>Services like <a href="https://carrd.co/">Carrd</a> offer a straightforward way to create simple one-pagers, and their numbers show a lot of interest:</p>

<p>Blogging is gaining popularity again as well, used as a tool for self-marketing or simply to express opinions. There are lots of good options for people who want to pick up blogging - either on their own sites or with platforms like <a href="http://micro.blog/">micro.blog</a>, that offer more independence than Medium &amp; Co.</p>

<h2 id="h-curated-feeds-and-discovery"><a class="heading-anchor" href="#h-curated-feeds-and-discovery">#</a> Curated Feeds and Discovery</h2>

<p>Another issue created by social media is the prevalence of “algorithmic feeds”. We decided that the constant stream of input for our eyeballs should never end, so we built these complex systems to generate new content for us based on our interests.</p>

<p>But these are giant black boxes, and nobody really knows what signals go into them. Throw advertising, “fake news” and a couple of trolls into the mix, and you get the mess we all know now.</p>

<p>That’s why many people crave a <strong>more controlled reading experience</strong> on their own terms. Chronological, personal, relevant - a bespoke magazine of trusted sources. A curated feed.</p>

<p>One way to achieve something like that is through plain ol’ boring RSS. One more thing that was said to be dead but is growing in popularity again:</p>

<p>Another possibility is to discover new content through human connections instead of algorithms. People we already know for their content recommend others in the same field, creating decentralized clusters of trusted information.</p>

<p>Website owners used to do this a lot in the days before search engines, by providing <a href="/blogroll/">Blogroll Pages</a> or forming <a href="https://en.wikipedia.org/wiki/Webring">Webrings</a> with links to others in their cluster.</p>

<div class="callout callout--info"><span class="callout__icon"><svg class="icon icon--info" role="img" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/icons.sprite.svg#icon-info"/></svg></span><div class="callout__content"><p><strong>Webrings</strong> were a common way for people to connect their sites in the early web. To be a member of a webring, you had to embed a little widget on your site that contained a “forward”, a “backward”, and a “random” button. These buttons would then link to other sites in the ring.</p><p>BTW: If you want to host your own webring, I made this free <a href="/blog/webring-kit/">Starter Kit</a> for you.</p></div></div>

<p><webring-banner><p>Member of the <a href="https://webringdemo.netlify.com">An Example Webring</a> webring</p><a href="https://webringdemo.netlify.com/prev">Previous</a> <a href="https://webringdemo.netlify.com/random">Random</a> <a href="https://webringdemo.netlify.com/next">Next</a></webring-banner>
<h2 id="h-smaller-communities-and-web-monetization"><a class="heading-anchor" href="#h-smaller-communities-and-web-monetization">#</a> Smaller Communities and Web Monetization</h2><p>Many independent creators are moving away from big “everyone’s on them” platforms back to private, more niche communities. New models for membership sites like <a href="https://ghost.org/members/">Ghost’s “Members”</a> feature enable creators to build communities on their content. People teach courses, self-publish books or provide APIs for specific topics.</p><p>Where the 90s had chatrooms and message boards, today there are tools like <a href="https://discord.com/">Discord</a> or <a href="https://www.twitch.tv/">Twitch</a> that help people with shared interests to connect with each other. These niche communities can then be a powerful userbase for independent businesses.</p><p>Of course the problem of monetization has existed from the very start of the web, and it’s still not easy today to earn money without splattering ads everywhere. But new standards like the <a href="https://webmonetization.org/">Web Monetization API</a> could be a very interesting solution, enabling creators to <a href="https://coil.com/">receive micro-payments</a> for their content.</p>
<h2 id="h-learning-from-the-past"><a class="heading-anchor" href="#h-learning-from-the-past">#</a> Learning from the Past</h2><p>I don’t know if all of these trends will really play out, or if we’re up for something completely different. I do think it’s a good idea to learn from the past though, because that is what keeps us moving forward.</p><p>So maybe the second 90s can be even better than the first. At least we’re done with NSYNC this time.</p></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>