En 2020, j'ai quitté mon travail et je suis resté à la maison, ayant beaucoup de temps chaque jour. J'ai donc commencé à développer des outils liés au développement, visant à résoudre des problèmes rencontrés lors du développement ou à aider à mieux comprendre certains concepts techniques.

Écrire des petits outils tous les jours, le temps passait de jour en jour. Avec le recul, cette expérience était en fait assez intéressante.

Au début, l'interface utilisateur de ces outils était en effet assez rudimentaire. Cependant, au fil du temps, j’ai continuellement amélioré leur apparence. Même s’ils ne sont peut-être pas encore considérés comme exquis à l’heure actuelle, ils ont fait des progrès significatifs.

Pour être honnête, ces outils ont très peu de conseils d'utilisation et de documentation, plus comme mon propre petit monde. Grâce aux données de Google Analytics, j'ai découvert que certains outils pouvaient n'avoir que moi-même comme utilisateur, comme l'hébergement de micro-images. Mais précisément parce que je les utilise moi-même, même si la fréquence d'ajout de nouveaux outils a diminué récemment, je les entretiens de manière cohérente.

Ce qui me rend gratifiant, c'est que j'ai soumis certains de ces outils sur le blog de M. Ruan Yifeng, et que de nombreux petits outils ont reçu sa recommandation. Cela a été un grand encouragement pour moi.

Quelques outils liés aux principes approfondis

Ces outils sont conçus pour aider les développeurs à mieux comprendre certains concepts de base et principes sous-jacents.

Conversion à virgule flottante IEEE754

Cet outil peut vous aider à comprendre la représentation interne des nombres à virgule flottante double précision dans la norme IEEE 754. Il peut convertir les nombres décimaux en leur représentation binaire correspondante, affichant clairement le bit de signe, les bits d'exposant et les bits de mantisse. Ceci est très utile pour comprendre comment les ordinateurs gèrent les nombres à virgule flottante.

Selon la norme IEEE754, la conversion en virgule flottante pour Infinity est : tous les bits d'exposant sont 1, tous les bits de mantisse sont 0.

Voici la conversion en virgule flottante pour Infinity :

Selon la norme IEEE754, la conversion en virgule flottante pour 0 est : le bit de signe est 0, tous les bits d'exposant sont 0, tous les bits de mantisse sont 0.

Voici la conversion en virgule flottante pour 0 :

Conversion d'encodage UTF-8

UTF-8 est un codage de caractères de longueur variable. Cet outil peut vous aider à comprendre comment les caractères Unicode sont codés en UTF-8. Vous pouvez saisir n'importe quel caractère Unicode et l'outil affichera sa représentation binaire codée en UTF-8, vous permettant de voir visuellement le processus d'encodage.

Conversion d'encodage Base64

Base64 est une méthode de codage couramment utilisée, en particulier lorsqu'il s'agit de données binaires. Cet outil vous aide non seulement à comprendre les principes du codage Base64, mais fournit également des fonctions pratiques de codage et de décodage. Il est particulièrement utile pour les scénarios dans lesquels des données binaires doivent être transmises dans un environnement texte.

Détection du type de fichier

Cet outil peut vous aider à comprendre comment déterminer les types de fichiers grâce aux nombres magiques de fichiers. Vous pouvez télécharger un fichier et l'outil lira les données binaires du fichier et déterminera le type de fichier en fonction du nombre magique. Ceci est très utile lorsqu'il s'agit de fichiers inconnus ou de vérification des types de fichiers.

Par exemple, JPEG est identifié car son numéro magique est FF D8 FF DB

Lié à l’image

Le traitement des images est un aspect important du développement Web. Voici quelques outils liés au traitement d'image.

Micro-image

Il s'agit d'un outil de compression d'image rapide qui peut vous aider à réduire la taille des fichiers image sans réduire considérablement la qualité de l'image.

Il prend en charge différents formats d'image et n'a aucune limitation sur la taille ou la quantité des fichiers. Cet outil est particulièrement utile pour optimiser la vitesse de chargement des sites Web.

Plus important encore, il est implémenté à l'aide de technologies frontales, ne nécessitant aucun coût de serveur, vous n'avez donc pas à vous soucier des problèmes de confidentialité. Son implémentation est similaire à squoosh, tous deux tirant parti de WebAssembly.

Hébergement de micro-images

Il s'agit d'un outil d'hébergement d'images personnelles qui vous permet d'utiliser un référentiel GitHub comme hébergeur d'images personnelles. Il fournit des fonctions simples de téléchargement et de gestion, ce qui vous permet de référencer facilement des images dans des articles ou des pages Web. Il s'agit d'un outil très pratique pour les développeurs qui ont fréquemment besoin de partager des images en ligne.

Partage d'images

Cet outil peut vous aider à générer rapidement des images avec du texte, adaptées au partage sur les réseaux sociaux ou à la création d'affiches simples. Il simplifie le processus de combinaison de texte et d'images, vous permettant de créer des images attrayantes sans utiliser de logiciel de retouche d'image complexe.

Espace réservé pour l’image

Il s'agit d'un outil générateur d'espaces réservés d'images qui peut créer rapidement des images d'espaces réservés de taille et de couleur personnalisées, très adaptées à une utilisation pendant le processus de développement. Cela peut vous aider à maintenir l'intégrité de la mise en page lorsque les images réelles ne sont pas encore prêtes.

Encodage et cryptage

Dans le développement Web, nous devons souvent gérer divers encodages et cryptages. Voici quelques outils associés :

Encodage d'URL

Cet outil peut vous aider à effectuer l'encodage et le décodage d'URL, ce qui est très utile pour gérer les URL contenant des caractères spéciaux. Il peut garantir que vos URL sont correctement transmises et analysées dans divers environnements.

Encodage d'entité HTML

L'outil de codage d'entités HTML peut vous aider à convertir les caractères spéciaux en entités HTML, garantissant ainsi qu'ils s'affichent correctement en HTML. Ceci est important pour prévenir les attaques XSS et garantir un rendu correct des documents HTML.

Générateur de hachage

Cet outil peut générer diverses valeurs de hachage couramment utilisées, notamment MD5, SHA1, SHA256, etc. Il est très utile dans des scénarios tels que la vérification de l'intégrité des données et le stockage de mots de passe.

Outils de couleur

La couleur est un élément important dans la conception Web. Voici quelques outils liés aux couleurs :

Conversion des couleurs

Cet outil peut convertir entre différents modèles de couleurs tels que RVB, HSL, CMJN, etc. Il peut aider les concepteurs et les développeurs à basculer librement entre différentes méthodes de représentation des couleurs.

Générateur de palettes

Cet outil peut vous aider à générer des teintes et des nuances de couleurs, très adaptées à la création de thèmes de couleurs cohérents. Il vous permet de créer rapidement des combinaisons de couleurs harmonieuses, améliorant ainsi l'efficacité de la conception.

Calculateur de rapport de contraste

Cet outil peut calculer le rapport de contraste entre deux couleurs, vous aidant ainsi à garantir la lisibilité du texte sur les arrière-plans. C’est très important pour créer des conceptions qui répondent aux normes d’accessibilité.

Conclusion

Bien que certains outils ne soient utilisés que par moi-même, c'est ce processus continu d'apprentissage et de création qui me rend épanoui et heureux.

Je continuerai à maintenir et à améliorer ces outils, et j'invite tout le monde à les utiliser et à fournir des commentaires.