When I’m working at my computer, I really struggle to get into a flow and be productive if I don’t have something playing in my headphones. Usually that something is music, but lately I’ve been really into
soundscape types of background noise, like the kind you get in white noise apps and websites. I used a few different sites for this, but with each, I kept finding myself wanting for the noise mixer to be:
- a standalone thing I could control with keyboard shortcuts, not another website tab
- usable offline for when I’m working without internet
- simpler and easier to make a mixture of sounds that would be my “preferred” mix, which would be remembered when I came back
Basically I wanted to be able to turn on my favorite mixture of
rain + fire crackling + thunder every time, with as few clicks as possible, even if I don’t have internet.
None of the sites I found ticked all these boxes, so I decided I would make it on my own. I decided to do so as a browser extension to take advantage of the fact that it elevates the functionality to an “always there, ready when you are” status. It also made it super simple to remember the most recent mix I had playing, and more generally, I find it really fun to make extensions for the browser!
Nix - the simple noise mixer 🎉
Of course, the extension code is fully open source and
MITlicensed, so check that out on GitHub —> andrewbrey/nix
It was super fun and quick to build, and here are some highlights:
- I used
Reactfor the UI. I’ve really come to enjoy working in
Reactespecially with the way that you’re are incentivized so early to make small component abstractions with almost no overhead - I really enjoy this over the ”ugh, I guess I need a whole new file for this thing, and what folder should it go into??” questions that come with
- I used ActiveJS for observable state management, and it was positively delightful! I have been itching to give it a try for a while now, and I found it’s blend of
rxjsobservables (which I mostly liked from my time doing
Angular) with the
redux-like store-with-actions model to be such a nice middle ground between the different state solutions I’ve used. It you’ve never heard of
ActiveJSbefore, I strongly recommend poking around in their docs and learning all it can do, it’s really neat.
- I used
Tailwind CSS- at this point, I don’t imagine I’ll ever use anything else for styling on a personal project.
I really enjoy building browser extensions, and this one didn’t break that trend - it’s quite simple, but with just enough surface area to have presented a challenge or two, mostly around picking the right architecture and message passing controls exposed to the popup by the background. Give it a try and see what you think - I find it quite nice when I’m really trying to be productive 👍