hacking together a local CSS editing workflow on bear

17 Sep, 2024

#now playing: Pictures of Purple Skies by Memorex Memories

I have been enjoying the "no frills" aspect of running a blog on bear so far. the one thing I am missing from my previous blog setup, however, is a way to quickly experiment with the CSS of my blog.

while bear's dashboard has been pretty convenient to quickly edit some CSS variables, I feel if I want to do deeper edits the "tweak -> publish -> refresh" loop will feel like a slow to me.

so I did what I usually do in those situations: I write some JavaScript¹ about it.

The code is on https://github.com/eramdam/files.damien.zone but the logic is pretty straightforward:

run a web server running on localhost:3000 (I'm using fastify but i'm sure any web server thing for Node would work)
run an instance of live-server in parallel (this one is key!)
on every route, take the request's URL, transform the URL such that localhost:3000/foobar becomes damien.zone/foobar
download the HTML from damien.zone/foobar, parse it, remove every stylesheets from it, and inject my own from the repo
and lastly, inject a modified version of the injected.html file from the live-server repo, which will make the live reloading of stylesheets work

then the whole thing runs with a simple npm run start, I open localhost:3000 in my browser and.. it just works! I can edit my CSS freely and with instant feedback.

it feels like a very stupid solution but as I often like to say: "If it's stupid and it works, it's not stupid".

see ya,
- damien

or rather, TypeScript these days, I'm not a fool↩

#bear #javascript #meta #typescript