Tools Site

tools.tomichen.com is a utility site I built for tools I’ve always wanted but couldn’t find. Notable tools include a crontab timezone shifter for computing offset cron syntax and a color contrast picker that shows the contrast boundary on the picker itself.

Why?

I first got the idea for creating a collection of utilities when I couldn’t find a good word counting tool. I wanted to build something myself, and also create a home for various other tools that come to mind.

While building the CVUSD COVID-19 tracker, for example, I came up with the idea for a tool that would automatically shift cron schedules to a different timezone. While picking colors for other projects, I thought it would be great to have a color picker that displayed the regions with a passing WCAG contrast ratio. These could all live on the same utility site.

Stack

The site is built with SvelteKit and Tailwind CSS. Building these utilities might require some complex client JS behavior, and Svelte is just an amazing tool to build with. I love Svelte’s reactivity and simplicity, which has major performance bonuses too.

While Svelte’s CSS scoping makes it a lot easier to style with vanilla CSS, Tailwind is great for styling components from the parent. Just export a class property and use as normal. Tailwind also has a great color palette, sizing scale, and typographic defaults (with their typography plugin).

Challenges

The site itself was very straightforward, thanks to SvelteKit. Just npm init svelte and you’re already most of the way there!

Building the utilities themselves were a bit more involved. In fact, I wrote an entire blog post on how I built the color picker.

For the cron schedule shifter, the logic was a bit difficult to wrap my head around. I eventually figured out that a new schedule would need to be created for each field that shifts out of range. It took a couple tries to work out the implementation, but I settled on having functions for each field that call down the chain, forking if necessary. There are quire a few cases where it doesn’t work, but I think it’s good enough for most situations.

For the word counter, I was somewhat surprised how undefined a “word” is. Most people agree that spaces are word boundaries, but what about punctuation? What counts as a word? I ended up adding configurable word boundaries and called it a day.

Overall, this will be a great site to have around in the future, especially if I ever want to add more utilities.