This is an AI-generated translation of the original Polish article and may contain minor errors.
Building a Personal Web Tools Ecosystem
As software engineers, every day we face minor problems that require quick, technical calculations: decoding base64, checking a SHA-256 hash, formatting a broken JSON file, or converting rem to pixels.
The standard reflex is to type the problem into a Google search and click on the first "Online JSON Formatter". The problem is that these sites often:
- Are bursting at the seams with ads and cookie banners.
- Require an internet connection (which is irritating on a train without signal).
- Send our often sensitive data or API keys to external, uncertified servers to process them there!
I realized that this "tool garbage" affects my security and comfort too much. That's why I created tools-app – a centralized repository of my own handy tools.
The project can be viewed and co-created on my Gitea instance: gkucmierz/tools-app.
Architecture and Project Assumptions
The tools-app project is not a heavy, bloated business application. It is an agile set of highly optimized calculators and widgets tied together with a good frontend framework.
1. Zero Backend Processing (Client-Side Only)
The most important rule I follow when adding new modules to my tools is an absolute ban on backend data processing. Even calculating advanced elliptic curve hashes or complex formatting must happen exclusively in the RAM of the user's browser.
- This guarantees 100% privacy. Code pasted into the tool never leaves the operating machine.
- Network failure resilience. If the page loads, the tool will work even after being forced offline.
2. Speed thanks to Vanilla JS / Vue
Although I like good environments like the Vite engine with the Vue 3 framework, I stubbornly write many of these "tools" using lightweight components or even returning to the roots of native Web Components.
The lack of a virtual DOM (or its strict control in Vue) in the case of a simple epoch clock or HEX-RGB calculator simply means a shorter Time-To-Interactive (TTI). The application should open in a second and immediately accept pasting from the system clipboard.
3. Progressive Web App (PWA)
Creating your own tools has this giant plus that it's easy to tie them with a Service Worker. Thanks to this, the whole tools-app set lands in my dock on macOS or on my phone's home screen as a full-fledged, isolated application (PWA), ready to work offline.
The joy of a never-ending story
The best part of owning and nurturing your own tools-app is that this project is never finished. Every week I can write a new function – sometimes it's a JWT (JSON Web Token) parser, which I threw profanities at while working with a client's backend, other times a tiny color simulator.
This repository in Gitea is a testing ground for new CSS browser APIs, optimizations, and playing with pure engineering craftsmanship. Instead of building someone's reach with a free click, I load these modules to expand my own workshop.
I invite you to clone, modify the layout to your own liking, and throw in your own widgets!