Ceci est une traduction générée par l'IA de l'article polonais original et peut contenir des erreurs mineures.
Créer un écosystème d'outils web personnels
En tant qu'ingénieurs logiciels, nous sommes chaque jour confrontés à des problèmes mineurs qui nécessitent des calculs techniques rapides : décoder de la base64, vérifier un hash SHA-256, formater un fichier JSON corrompu ou convertir des rem en pixels.
Le réflexe standard est de taper le problème dans une recherche Google et de cliquer sur le premier « Formateur JSON en ligne ». Le problème est que ces sites sont souvent :
- Bourrés de publicités et de bannières de cookies jusqu'à éclater.
- Nécessitent une connexion internet (ce qui est irritant dans un train sans réseau).
- Envoient nos données ou clés d'API souvent sensibles vers des serveurs externes non certifiés pour y être traitées !
J'ai réalisé que ces « outils poubelles » affectaient trop ma sécurité et mon confort. C'est pourquoi j'ai créé tools-app – un dépôt centralisé de mes propres outils pratiques.
Le projet peut être consulté et co-créé sur mon instance Gitea : gkucmierz/tools-app.
Architecture et hypothèses du projet
Le projet tools-app n'est pas une application d'entreprise lourde et gonflée. C'est un ensemble agile de calculatrices et de widgets hautement optimisés liés par un bon framework frontend.
1. Zéro traitement backend (côté client uniquement)
La règle la plus importante que je suis lors de l'ajout de nouveaux modules à mes outils est une interdiction absolue du traitement des données en backend. Même le calcul de hashs de courbes elliptiques avancés ou de formatage complexe doit se faire exclusivement dans la RAM du navigateur de l'utilisateur.
- Cela garantit 100% de confidentialité. Le code collé dans l'outil ne quitte jamais la machine sur laquelle on l'opère.
- Résilience aux pannes de réseau. Si la page se charge, l'outil fonctionnera même après avoir été forcé à se déconnecter.
2. La vitesse grâce à Vanilla JS / Vue
Bien que j'aime les bons environnements comme le moteur Vite avec le framework Vue 3, je m'obstine à écrire beaucoup de ces « outils » en utilisant des composants légers ou même en retournant aux racines des composants Web natifs (Web Components).
L'absence de DOM virtuel (ou son contrôle strict dans Vue) dans le cas d'une simple horloge Epoch ou d'une calculatrice HEX-RGB signifie simplement un Time-To-Interactive (TTI) plus court. L'application doit s'ouvrir en une seconde et accepter immédiatement le copier-coller du presse-papiers système.
3. Application Web Progressive (PWA)
Créer ses propres outils a cet avantage géant qu'il est facile de les lier à un Service Worker. Grâce à cela, tout l'ensemble tools-app atterrit dans mon dock sur macOS ou sur l'écran d'accueil de mon téléphone comme une application complète et isolée (PWA), prête à fonctionner hors ligne.
La joie d'une histoire sans fin
La meilleure partie de posséder et de cultiver sa propre tools-app est que ce projet n'est jamais terminé. Chaque semaine, je peux écrire une nouvelle fonction – parfois c'est un parseur JWT (JSON Web Token), auquel j'ai lancé des jurons en travaillant avec le backend d'un client, d'autres fois c'est un minuscule simulateur de couleurs.
Ce dépôt dans Gitea est un terrain d'essai pour de nouvelles API de navigateur CSS, des optimisations et pour jouer avec un pur artisanat d'ingénierie. Plutôt que de bâtir la visibilité de quelqu'un par un clic gratuit, je charge ces modules pour agrandir mon propre atelier.
Je vous invite à cloner, modifier la mise en page à votre guise et y jeter vos propres widgets !