Only the platform

Planted: May 25, 2023
Last watered: October 7, 2023

In May I was talking to a friend who had just graduated from a CS undergrad program, and he mentioned that he was creating a website. I asked which web framework he was using. React? Svelte? Something else? Nope, no framework—just HTML, CSS, and JavaScript.

It’s been over two years since I worked on a website without heavy abstractions to guide me, so out of curiosity I opened my editor and created three files: index.html, styles.css, and index.js. Pretty immediately I was annoyed by lack of HMR, so I reached for nodemon. Before running npm i nodemon, though, I decided to take the experiment a step further and see what it would be like to build a website without any external dependencies whatsoever, literally.

I plan to deploy my sandbox site once I have a critical mass of browser API demos that I think others would find interesting. Open source is awesome, and I’ve missed many libraries while tinkering here, but it’s a lot of fun to #usetheplatform.

Browser APIs I’ve explored

So far I’ve played around with:

Service workers

Service workers are the browser feature that I get most excited about. I find the every-website-should-have-a-service-worker argument very compelling. A sensible offline experience, for example, should be a given. I think about this whenever I’m on an airplane and a browser tab that I had already loaded 404s on refresh, especially for static sites. Full disclosure: I am the pot calling the kettle a website without a service worker here (i.e. I haven't implemented any service worker caching strategy in my garden just yet).

I’m also interested in what an abstraction would look like for SPAs. next/offline exists and looks useful. An even simpler interface like a useOffline React hook might be handy to cache recently visited or high-traffic pages.

Things I’ve missed

I’ve resisted the urge to npm install so far, but I’ve missed a lot of libraries, namely nodemon / HMR, TypeScript, React, and Webpack.

nodemon / HMR

As mentioned up top, restarting my server manually is rather annoying. But it’s an interesting exercise to build automatic server restart from scratch. I’m using fs.watch to listen for file events and trigger a server restart whenever a file changes. This quick and dirty approach isn’t perfect, though. It works well for HTML/CSS updates, I’ve found, but it’s more finicky with JS and occasionally crashes. The abriged version looks like this:

server.js


import http from "http";
import fs from "fs";
import path from "path";
let server;
startServer();
function startServer() {
  server = http.createServer((req, res) => {
    /* Serve static assets */
  });
  server.listen(process.env.port || 3001, () =>
    console.log("Server listening...")
  );
}
fs.watch(
  path.join(__dirname, "./"),
  { recursive: true },
  (eventType, filename) => {
    if (eventType === "change") {
      console.log("Updated: ", filename);
    }
    server.close(() => {
      console.log("Restarting server...");
      startServer();
    });
  }
);

It turns out Node 18 (LTS) has supported this out of the box since October ’22 with the --watch flag, so I ended up replacing the flaky fs.watch implementation. Thanks to Jason Lengstorf for the tip!

Browser APIs I'd like to explore

The collection of features that browsers ship out of the box is vast. There are a handful that I’m particularly keen to try out:

Where to learn about browser features

There are a lot of #usetheplatform advocates out there (read: Twitter). Syntax.fm has a couple fun, relevant episodes:

Backlinks

Think small