Esta es una traducción generada por IA del artículo original en polaco y puede contener errores menores.
Construyendo un Ecosistema de Herramientas Web Personal
Como ingenieros de software, cada día nos enfrentamos a pequeños problemas que requieren cálculos técnicos rápidos: decodificar base64, comprobar un hash SHA-256, formatear un archivo JSON dañado o convertir rem a píxeles.
El reflejo estándar es escribir el problema en una búsqueda de Google y hacer clic en el primer "Formateador JSON en línea". El problema es que estos sitios a menudo:
- Están a reventar de anuncios y banners de cookies.
- Requieren conexión a internet (lo cual es irritante en un tren sin señal).
- ¡Envían nuestros datos o claves de API a menudo sensibles a servidores externos no certificados para procesarlos allí!
Me di cuenta de que esta "basura de herramientas" afecta demasiado a mi seguridad y comodidad. Por eso creé tools-app: un repositorio centralizado de mis propias herramientas prácticas.
El proyecto se puede ver y co-crear en mi instancia de Gitea: gkucmierz/tools-app.
Arquitectura y Supuestos del Proyecto
El proyecto tools-app no es una aplicación empresarial pesada y con exceso de funciones. Es un conjunto ágil de calculadoras y widgets altamente optimizados unidos a un buen framework frontend.
1. Cero Procesamiento Backend (Solo del Lado del Cliente)
La regla más importante que sigo al agregar nuevos módulos a mis herramientas es una prohibición absoluta en el procesamiento de datos del backend. Incluso el cálculo de hash de curvas elípticas avanzadas o el formato complejo debe ocurrir exclusivamente en la RAM del navegador del usuario.
- Esto garantiza una privacidad del 100%. El código pegado en la herramienta nunca sale de la máquina operativa.
- Resiliencia a los fallos de red. Si la página se carga, la herramienta funcionará incluso después de quedarse sin conexión por la fuerza.
2. Velocidad gracias a Vanilla JS / Vue
Aunque me gustan los buenos entornos como el motor Vite con el framework Vue 3, sigo escribiendo obstinadamente muchas de estas "herramientas" utilizando componentes ligeros o incluso volviendo a las raíces de los Web Components nativos.
La falta de un DOM virtual (o su control estricto en Vue) en el caso de un simple reloj de época o una calculadora HEX-RGB simplemente significa un Time-To-Interactive (TTI) más corto. La aplicación debería abrirse en un segundo y aceptar inmediatamente pegar desde el portapapeles del sistema.
3. Progressive Web App (PWA)
Crear tus propias herramientas tiene la gran ventaja de que es fácil unirlas con un Service Worker. Gracias a esto, todo el conjunto tools-app aterriza en mi dock en macOS o en la pantalla de inicio de mi teléfono como una aplicación aislada y completa (PWA), lista para funcionar sin conexión.
La alegría de una historia interminable
La mejor parte de poseer y nutrir tu propia tools-app es que este proyecto nunca se termina. Cada semana puedo escribir una nueva función: a veces es un analizador JWT (JSON Web Token), al que le lancé blasfemias mientras trabajaba con el backend de un cliente, otras veces un diminuto simulador de colores.
Este repositorio en Gitea es un campo de pruebas para las nuevas API de navegador CSS, optimizaciones y jugar con pura artesanía de ingeniería. En lugar de construir el alcance de alguien con un clic gratuito, cargo estos módulos para expandir mi propio taller.
¡Te invito a clonar, modificar el diseño a tu gusto y añadir tus propios widgets!