Tiny Web Stacks

A lot of my day to day work involves design systems. These can get pretty complex, with a lot of moving parts. Perhaps as a reaction to that, I’ve grown to love small, simple tech stacks for those occasional side projects, micro-sites and one-off experiments that don’t demand as many features or justify such diligent maintenance.

These projects usually start the same way. Once I’ve sketched my idea and have a sense of what I want to do, I create a folder and a package.json file so I can install and manage dependencies:

mkdir new-project
cd new-project
npm init -y
Code language: JavaScript (javascript)

Which dependencies I install depends on the project. If I’m building a single-page app, I might use Parcel, which gives me Sass support, JavaScript bundling, a local development server and a bunch of other features with no configuration:

npm i --save parcel-bundler
touch index.html main.scss app.js
npx parcel index.html
Code language: CSS (css)

But if my project involves multiple pages or a lot of templating needs, I’m more likely to set it up with Eleventy. This takes the same number of steps:

npm i --save @11ty/eleventy
touch index.md subpage.md
npx @11ty/eleventy --serve
Code language: CSS (css)

Projects that go well will naturally grow more complex. But there’s something to be said for starting simple.