Tiny Web Stacks

Programming - Apr 19, 2024

A small stack of pancakes with butter and syrup on a plate

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.

Previous Next
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More