Build Your Own Browser Tools Without a Backend - J Lopes

J Lopes<br>Carrot, meet stick!

Once upon a time, I wanted to resize about forty screenshots. The first few search results either<br>wanted an account before they would touch a file, or did three of them and then asked me to<br>register for the rest.

So… What’s stopping them from just doing the thing?

If you are not paying for it, you’re not the customer; you’re the product being sold.<br>blue_beetle1, 2010

Resizing or converting an image can be accomplished by using browser APIs and a few bits of JavaScript , like and toBlob. Why would the user need yet another login and be tracked for this?

I don’t know… I guess I’ve gotten jaded about being treated as the product, when I showed up expecting to be a customer.

For a few years now, instead of relying on black-boxed services for the small things I needed in my daily routine, I ended up building a few myself. Maybe out of revolt, or just a will to understand how the gears turn to make a machine work.

You too can make tools, and I promise you’ll love it

I’ve been building tools for myself, for years. For specific things like:

Colour palette generator, because I wanted to know how you get a set of colours, and how to convert them into other colour formats.

Word cloud generator, which turned out to be a collision-detection problem rather than a typography one.

Markdown and WYSIWYG converter, to find out what happens when two different editors both think they’re in charge of the same document.

Text fragment URL generator, because the #:~:text= syntax that links straight to a phrase on a page is fiddly enough that I’d rather generate it than type it.

My stack recommendations

I tend to rely on frameworks like React, Vue, Svelte and Astro, as these arrive with routing, build steps and dev server already wired up.<br>Frontend stacks might seem intimidating to get into from the beginning, but the learning curve isn’t as steep as you might expect, and the learnings from one apply to the rest, in one form or another. The important part is that the stack can be interchangeable after a while.

I’d avoid relying on AI to help though, as it defeats the purpose of making tools for learning. Otherwise you might as well use anyone else’s tool site2…

DISCLAIMER: This is not an article about me tooting my own horn. Please take it as a short manifesto.

Spidey Super Stories #53

But first, my tools!

This year I decided to consolidate them in /tools. Every tool page links to its own<br>file on GitHub3, so users can see how the gears work for themselves.

For code developers and enthusiasts

Minify & Beautify shrinks huge swathes of code down to one line to save space, then spreads it back out to be readable. The detectCode function works out whether you’re pasting HTML, CSS, JavaScript or SVG as you type, which is a tokeniser in disguise : it has to break the code into meaningful pieces before it can tell you what it’s looking at.

Regex Tester is honestly just for me. regex1014 already does the job better than I ever will, for free.

:nth-child Helper lets you click the elements you want and<br>works out the CSS formulas that cover them. Finding the shortest set of formulas meant reaching<br>for the greatest common divisor, which I did not expect from a styling tool.

Flexbox Generator is a playground for every CSS flexbox5 property at once, so you can watch what each one does instead of guessing.

Cron Helper translates cron values into plain English, with cRonstrue6 doing the parsing under the hood.

Icon Search covers thousands of icons. Rendering that many at once is what taught me list virtualization: only the icons currently in view exist in the page, and the rest get built as you scroll.

For designers

Image Resizer does bulk resizing with aspect-ratio<br>presets, an optional crop with pan, and a zip download at the end. However many images you throw<br>at it they go through in one pass, and the files never leave your computer . This is the tool that<br>came out of the complaint at the top of this article.

Colour Palette generates random palettes for theming, and pulls them out of any image you drop in. It’s the one that made me want to consolidate everything into one site, and it’s where I learned that the mathematical distance between two RGB colours has nothing to do with how different they look. The pixels get converted into<br>Lab7 first, a colour<br>space built so that equal distances look equally different to the eye.

SVG Optimizer strips the unnecessary parts out of exported SVGs, with svgo/browser8 under the hood and my preferred compression settings baked in.

For text wranglers

Character Map needed a huge (7MB+ ) JSON file of every<br>Unicode code point, and the browser’s own IndexedDB to keep it between visits. Keeping it fast is<br>the reason I wrote Understanding List<br>Virtualization. Did I need to make this? Not really, &what;9 did it well already, but I wanted to learn<br>Markdown Editor is built on<br>tiptap10, with tiptap-markdown...