Making a Shuffle Button
The author redesigned his notes blog's "Shuffle" button to navigate to a dedicated /shuffle/ page, which shows a brief "Shuffling..." message before redirecting to a random note via JavaScript. This avoids injecting all note IDs into every HTML page, reducing build changes. He intentionally added a slight delay to mimic an old CD player's shuffle feedback.
Background
- Jim Nielsen is a web developer and blogger who runs a personal "notes blog" at notes.jim-nielsen.com, where he publishes short-form writing. He uses a **static site generator (SSG)** — a tool that pre-builds all HTML pages before deployment, with no server-side code running at request time. His site is hosted on **Netlify**, a popular platform for deploying static sites. This means every feature must either be baked into the HTML at build time or use client-side JavaScript; there's no backend to handle logic on the fly.
- The post walks through a small engineering decision: how to implement a "shuffle" button that takes you to a random past note. The challenge is that in a static-site setup, every tiny change to any page forces every single HTML file to be re-uploaded (invalidating CDN caches, slowing builds). Nielsen's final solution — a dedicated /shuffle/ page that shows "Shuffling…" with a deliberate 300ms delay before redirecting — prioritizes user experience and aesthetic nostalgia over raw efficiency, which is a recurring theme in his writing.