Advice to young web developers

I’ve been making websites in some form or another since 1995. After 25 years of experience I think I’ve accumulated enough knowledge to know a few things. Here’s some things I’d like younger developers to think about, in no particular order.

  • Sometimes a website is just a website.
  • The browser is already a client; HTML is its language.
  • The web is built around server-side rendering.
  • You can provide your data in more than one way; consider HTML to be one of several possible data representations.
  • Scaling your server helps everyone. Expecting client-side scaling only helps people with the fastest computers and Internet connections.
  • Not everyone has (or can use) a mouse.
  • Not everyone has (or can use) a keyboard.
  • Not everyone has (or can use) a touchscreen.
  • Not everyone can see colors or pictures the same way you can.
  • Not everyone can process information the same way you do.
  • It is inhumane to move things around on people.
  • The browser’s native HTML parsing is far faster than anything you can write in JavaScript.
  • HTML is already an ideal representation of DOM nodes.
  • HTML is a rich framework.
  • You can probably do that layout change in CSS.
  • Before you roll your own UI component, consider that HTML probably provides it. If it doesn’t provide it, that’s probably for a reason. Attaching DOM events to a <div> or <span> is probably not the best way of doing things.
  • Not everything has to be a “single-page application.”
  • Even if you need to preserve client state between page loads (for e.g. music or video playback) you can let the browser do most of the heavy lifting by fetch()ing a new page and replacing your content container at the DOM level.
  • Infinite scrolls are inhumane. People need to be able to reach “the end.” There are forms of eternal torment described in religious texts that are less mean.
  • If you must do an infinite scroll (and you don’t), make sure that there’s nothing you need to reach at the bottom.
  • Give people consistent but random stimulus and you will be habit-forming. Getting people hooked on your product might seem like a good idea, but the tobacco industry feels the same way.
  • If you design with CDNs in mind, then a server round-trip won’t be slow.
  • It is okay to use multiple languages in a thing. Not everything has to be isomorphic.
  • Always validate your data server-side; anything that comes from the client is suspect.
  • To the developer, “isomorphic” code breaks down the barrier between client and server. To a malicious client, it means they potentially have control over the server too. Be sure about where your data is coming from.
  • Browsers change. Relying on browser-specific behavior means you’re relying on that one browser at that one point in time. Code to the standard, and test everywhere.
  • Use polyfills to support browsers that don’t yet support the standard you’re using.
  • It’s okay to copy others; it’s how we learn things. Just remember to learn from it.

UPDATE: Welcome Hacker News. rickpmg brought up a very good addition to this list:

And make sure the back button works?

Also a few folks were wondering what I meant about preserving client state between page loads. This isn’t intended to be a tutorial but what I mean is you can do something like this:

<html><head>
<title>Div replacement test</title>
<script>
window.addEventListener('DOMContentLoaded', () => {
    [].slice.call(document.getElementsByClassName("replace")).forEach(elem => {
        elem.addEventListener('click', event => {
            event.preventDefault();
            fetch(elem.href)
                .then(response => response.text())
                .then(text => {
                    var parser = new DOMParser();
                    var other = parser.parseFromString(text, 'text/html');
                    document.title = other.querySelector('title').innerHTML;
                    var content = document.getElementById('content')
                    content.innerHTML = other.querySelector('#content').innerHTML
                })

        })
    })
})
</script>
</head><body>

<section id="content">
<p>Here is the content container. <a class="replace" href="replaced.html">The other document</a></p>
</section>


<iframe width="560" height="315" src="https://www.youtube.com/embed/DLzxrzFCyOs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body></html>

Just a rough sketch (and of course this breaks the back button, tsk tsk) but you get what I mean, I hope. (And if you want things to be even more lightweight you could have the other page be represented by a JSON blob as fetched through an API or whatever.)

Another update: This isn’t really webdev-specific, but:

  • Not all users or developers are men