Outils de productivité des développeurs : les 40 que j'ouvre réellement chaque semaine

Je garde une fenêtre de navigateur ouverte sur mon deuxième moniteur qui n'est rien d'autre que des onglets utilitaires. Formateur JSON, convertisseur de horodatage, testeur de regex, générateur de hachage. Il existe depuis des années, grâce aux versions de WP Adminify, à travers des projets parallèles Laravel, à travers chaque session de débogage de fin de soirée où une charge utile Webhook arrive minifiée et j'ai besoin de voir ce qu'il contient réellement.

Pendant longtemps, ces onglets pointaient vers sept sites Web différents. Certains allaient bien. Certains étaient des batteries de publicité qui ont téléchargé ma charge utile sur un serveur dont je n'avais jamais entendu parler. L'un d'eux - je ne vais pas le nommer - j'ai collé un JWT de mise en scène avant que la pensée ne me rattrape : Ce jeton vient de passer par-dessus le fil de la boîte de quelqu'un d'autre. C'était un signe de mise en scène, rien n'a brûlé, mais la sensation de se coincer. J'ai construit Toolz.dev en partie parce que je voulais ma propre bande de tabulation, et en partie parce que je n'ai plus jamais voulu refaire cette erreur.

Il ne s'agit donc pas d'une liste de 500 outils rayés d'un répertoire. C'est le décor qui est réellement en ligne toolz.dev En ce moment, une quarantaine d'entre eux, organisés comme je les utilise : au moment de la journée de travail, lorsque j'en attrape un. Chacun s'exécute dans votre navigateur. Rien ne télécharge. Il n'y a pas de compte.

tl;dr : Les cinq que j'ouvre le plus, à un mile : Formateur JSON Pour les réponses API illisibles, Convertisseur d'horodatage Pour la forensic des journaux, testeur de regex Pour le travail de modèle, Convertisseur de base64 pour les JWT et les URI de données, et Générateur UUID pour l'ensemencement des données de test. Tout ce qui est ci-dessous fonctionne côté client - votre charge utile ne quitte jamais l'onglet. Si vous ne mettez qu'une seule chose en signet, mettez en signet le formateur JSON.

Pourquoi ne pas simplement utiliser la CLI ?

question juste, et j'utilise la CLI. jq est meilleur que n'importe quel outil Web pour les scripts. base64 -d est deux frappes de clé. Si une tâche va dans un script shell, elle appartient à un script shell.

Mais il y a trois situations où un onglet de navigateur gagne vraiment, et après une décennie de faire cela, j'ai cessé de me sentir coupable à leur sujet :

1. Boucles de rétroaction visuelle. La regex est la plus évidente. Voir 14 correspondances s'allumer dans un exemple de texte réel lorsque vous tapez une activité différente de l'exécution grep -P Et obtenir un oui/non, même pour les dégradés et les couleurs, vous ne pouvez pas un œil sur un code hexadécimal.
2. La machine n'est pas à vous. Ordinateur portable client, machine de travail verrouillée, bureau de quelqu'un d'autre lors d'une session de jumelage. non jq, aucun droit d'installation, pas de temps.
3. La tâche est véritablement unique. Je n'écris pas de script python pour convertir un CSV en JSON. Je vais le coller, cliquer et continuer ma vie.

Voici la comparaison honnête que je donnerais à un développeur junior demandant à quoi utiliser :

Cette dernière ligne est la règle réelle que je suis. Si je vais faire plus de deux fois, ça va dans un scénario. Tout le reste reçoit un onglet.

Quels outils dois-je ouvrir lors d'une mauvaise journée d'API ?

C'est le cluster qui gagne son don. Une API tierce se comporte mal, vous avez une charge utile et vous devez la comprendre avant de pouvoir réparer quoi que ce soit.

Formatter JSON - celui que je garderais si je ne pouvais garder qu'un seul

JSON minifié est illisible, et pire, quand il est nul L'erreur du navigateur vous indique "token inattendu" et un décalage de caractères qui ne signifie rien pour un humain. le Formateur JSON Pretty-Imprime avec une véritable indentation et des points à la ligne réelle qui est cassée. Quatre-vingt-dix pour cent du temps, le coupable est une virgule qui est légale dans les littéraux d'objets JavaScript et illégale en JSON - une distinction qui m'a coûté plus d'heures que je ne le souhaite. Plongée plus profonde : Comment formater JSON en ligne.

Convertisseur Base64 — pour les JWT et les URI de données

Un JWT est composé de trois segments Base64URL séparés par des points. Collez le milieu dans le Convertisseur de base64 Et vous pouvez lire les réclamations - émetteur, expiration, portées - sans expédier le jeton à un décodeur tiers. (j'utilise le Décodeur JWT Quand je veux que les trois segments soient analysés à la fois, mais que j'atteins toujours Raw Base64 lorsqu'une charge utile semble bizarre et que je veux voir les octets.) Le gotcha Unicode, et pourquoi btoa() jette sur un emoji, est dans le Guide d'encodage Base64.

Convertisseur d'horodatage — Forensics des journaux

1752278400. C'est hier ou 2029 ? le Convertisseur d'horodatage Transforme unix secondes, millisecondes et ISO 8601 en quelque chose dont un humain peut raisonner, dans le fuseau horaire qui vous intéresse. Les deux tiers de mon débogage d'incidents alignent des horodatages de trois services qui ont chacun enregistré un format différent, et l'un d'eux est en UTC, tandis que les autres ne le sont pas.

Validateur YAML — parce que l'indentation est de charge

Kubernetes Manifestes, actions GitHub, Docker-Compose. YAML est significatif pour les espaces blancs et il réinterprétera silencieusement votre intention plutôt qu'une erreur. le Validateur de YAML Attrape le tab-vs-space et le non-quoted no que Yaml 1.1 s'analyse utilement comme booléen false. (Oui, vraiment. Le problème de la Norvège est réel : le code du pays NO se transforme false à moins que vous ne le citez.)

JSON Diff - Qu'est-ce qui a réellement changé ?

Deux réponses API, une fonctionnante et non. Les regarder côte à côte dans un éditeur de texte est un jeu perdant. Diff JSON Vous montre les trois clés qui diffèrent et ignorent les 200 qui ne le font pas.

Le reste de l'étagère de débogage

• Formateur SQL — Pour la requête de 90 lignes avec quatre jointures que quelqu'un a écrites sur une seule ligne.
• générateur de hasch — MD5/SHA-1/SHA-256/SHA-512, principalement pour vérifier un téléchargement ou une clé de cache.
• analyseur — Parce que 0 */2 * * * et */2 * * * * diffèrent par un caractère et une soixantaine de fois la charge.
• annuler la série — PHP serialize() sortie d'un wp_options Rangée. Si vous avez déjà débogué les paramètres stockés d'un plugin WordPress, vous savez exactement pourquoi cela existe.

Qu'est-ce que j'utilise lorsque j'écris du code, sans le déboguer ?

Regex, sans deviner

J'écris Regex dans le testeur de regex avant de toucher une base de code. Collez un échantillon réaliste, écrivez le modèle, regardez le point culminant des matchs. le Regex Builder est l'autre moitié de ceci - c'est pour quand vous savez ce que vous voulez en anglais et que vous ne vous souvenez pas si c'est \b ou \B. La feuille de triche de motifs complets, ainsi que le piège de retour catastrophique qui peut geler un serveur avec un quantificateur imbriqué, est dans le Guide de construction de Regex.

UUID pour le semis

Vingt lignes de test, vingt identifiants uniques, en ce moment. Générateur UUID V1, V4 et V7 en masse. Utilisez la V7 pour les nouvelles clés primaires, c'est chronométré, de sorte que votre index B-tree n'est pas déchiqueté par des insertions aléatoires. J'ai appris que la manière coûteuse et je l'ai écrit dans le Guide du générateur UUID.

Encodage, les deux saveurs

Encodeur d'URL Pour les chaînes de requête contenant & et = Et un espace. Entités HTML Pour le moment, vous devez afficher <script> sur une page sous forme de texte plutôt que de rapport d'incident. Ces deux-là sont ennuyeux et je les utilise constamment.

Format de querelle

Les données arrivent à peu près toujours dans la mauvaise forme. Le jeu de conversions couvre les mouvements que je fais réellement :

• JSON vers CSV — Lorsqu'une partie prenante demande "les données" et signifie une feuille de calcul. Les objets imbriqués sont aplatis dans des colonnes de notation de points. détails dans le Guide JSON vers CSV.
• CSV à JSON — L'inverse, pour l'ensemencement.
• JSON vers Yaml — Pour transformer un blob de configuration en quelque chose qu'un humain modifiera.
• XML vers JSON — Chaque intégration SOAP héritée, pour toujours.
• traducteur binaire — Texte ↔ binaire/hex/décimal/octal. Principalement pour l'enseignement et pour l'octet de protocole impair.

L'ensemble de l'étagère de codage, avec le raisonnement derrière chacun, est dans le Guide des outils de codage.

Lesquels dois-je utiliser pour le texte et le contenu ?

J'écris beaucoup - Docs de plugin, journaux des modifications, ce blog. Ce sont les outils entre Draft et Publish.

• compteur de mots — Mots, caractères, temps de lecture. De plus, le moyen le plus rapide de vérifier une méta description par rapport au budget de 160 caractères avant que Google ne la tronque. plus dans le Guide du compteur de mots.
• Convertisseur de boîtier — Camelcase, Snake_case, Kebab-Case, Pascalcase. Je renomme plus souvent les variables en masse de cette manière que j'utilise l'outil Refactor de mon éditeur, ce qui est légèrement embarrassant mais vrai. Guide du convertisseur de cas.
• générateur de limace — Titre de l'URL, avec des signes diacritiques gérés correctement. Café Décor devrait devenir cafe-decor, pas caf-dcor.
• Diff de texte — Deux fichiers de configuration, ou deux versions d'un paragraphe côte à côte.
• Lorem Ipsum — Copie d'espace réservé pour une mise en page qui n'a pas encore de contenu.
• Chaîne inversée — Niche, mais ça apparaît dans la préparation des entretiens et dans les vérifications de palindromes plus que vous ne le pensez.

Le jeu de textes complets est couvert dans le Guide des outils de texte.

Qu'en est-il du design et du travail frontal ?

Je suis un développeur qui doit rendre les choses acceptables, pas un designer. C'est un travail spécifique, et ces trois-là le font.

• cueillette de couleurs — Hex ↔ RGB ↔ HSL, avec vérification du contraste pour que vous n'expédiiez pas de texte corporel 3:1. HSL est le format qui fait de Hover une soustraction au lieu d'une supposition. Traitement complet : Guide de sélection de couleurs et de convertisseur.
• Générateur de gradient — Linéaire, radial, conique, avec un aperçu en direct et un CSS copiable. écriture conic-gradient() L'aveugle est un type de misère tout particulier. Guide du générateur de dégradé CSS.
• CSS Minifier et minificateur HTML — Pour le moment, vous devez intégrer quelque chose dans un <style> taguez et voulez-le petit.
• Générateur de balises — Titre, description, graphe ouvert, cartes Twitter et JSON-LD en un seul passage. J'ai construit ceci parce que j'écrivais à la main les mêmes quatorze balises sur chaque projet.

Qu'est-ce que j'utilise pour les fichiers — images, PDF, tout le reste ?

Les outils d'image sont tous exécutés via l'API Canvas du navigateur, ce qui signifie qu'un PNG de 4 Mo ne quitte jamais votre machine. Ce n'est pas du marketing, c'est exactement ce qui se passe lorsque le traitement est un <canvas> Et pas une demande de poste.

• Compresse d'images — Curseur de qualité, lecture de la taille réelle. La plupart des captures d'écran que j'expédie perdent 70 à 85 % sans différence visible. voir le Guide de compression d'images.
• Redimensionnement d'images — Dimensions exactes ou pourcentage, rapport d'aspect verrouillé.
• Convertisseur de format — PNG/JPEG/WEBP/AVIF. Webp est la valeur par défaut que j'expédie maintenant.
• dissolvant d'arrière-plan — Exécute le modèle de segmentation dans le navigateur. C'est le seul outil où je remarque la première charge.
• Générateur QR — URL, identifiants WiFi, vCards. J'ai écrit l'encodeur ISO/IEC 18004 pour celui-ci à la main, correction d'erreurs et tout, qui était soit une excellente utilisation d'un week-end, soit d'un terrible.
• générateur de mots de passe — Utilisations crypto.getRandomValues(), pas Math.random(). Cette distinction compte plus que le curseur de longueur.

Et quelques bric-à-brac que j'ai construits parce que j'en avais besoin une fois, puis j'en ai eu besoin : Convertisseur d'unités, Calculateur de pourcentage, Date de différence, Texte à l'écriture manuscrite.

L'ensemble d'images plus large est dans le Guide des outils d'image, et les PDF reçoivent leur propre traitement dans le Guide des outils PDF.

Comment ces chaînes se joignent-elles dans un travail réel ?

Chaque outil permet d'économiser une minute. La composition se produit lorsque vous les enchaînez. Voici une séquence réelle d'une semaine, débogage d'une intégration qui renvoyait 401 s par intermittence :

1. Copiez la demande d'échec Authorization en-tête. fendez sur les points, collez le segment deux dans le Convertisseur de base64. lire exp.
2. exp est un horodatage Unix. dans le Convertisseur d'horodatage. Il a expiré 41 secondes avant la mise en œuvre de la demande.
3. C'est un problème d'obstruction d'horloge, pas un problème d'authentification. Vérifiez le rafraîchissement cron avec le analyseur — Il rafraîchit le jeton toutes les 60 minutes pour un jeton avec un TTL de 60 minutes. Pas de marge. Condition de course.
4. Changez le cron en 50 minutes. Terminé.

Quatre outils, peut-être trois minutes, et la réponse était un changement d'un caractère en une expression cron. L'alternative - ajouter la journalisation, le redéploiement, l'attente de sa récidive - était une demi-journée.

L'autre chaîne que je dirige constamment est celle du contenu : Draft → compteur de mots → générateur de limace → Compresse d'images Pour l'image d'en-tête → Générateur de balises → Publier.

Pourquoi "le côté client" est-il vraiment important ?

En raison de l'histoire de la mise en scène en haut de cet article, principalement. Mais permettez-moi d'être précis sur la revendication plutôt que de "la confidentialité" est une phrase qui a été drainée de tout sens.

Lorsqu'un outil est côté client, le fichier ou la chaîne que vous collez est gérée par JavaScript en cours d'exécution dans votre onglet. Il entre dans une variable dans la mémoire de votre navigateur et revient en conséquence. il n'y a pas fetch(), non FormData, pas de téléchargement. Vous pouvez le vérifier vous-même en une dizaine de secondes : ouvrez DevTools, accédez à l'onglet Réseau, collez quelque chose dans n'importe quel outil sur Toolz.dev et ne regardez rien. C'est la preuve. Si une demande de réseau se déclenche lorsque vous cliquez sur "Convertir", vos données sont sur le serveur de quelqu'un.

Ce que cela vous achète concrètement :

• Vous pouvez coller des secrets. Jetons de staging, réponses d'API internes, CSV client. Ça ne va nulle part.
• C'est rapide. Pas de voyage aller-retour. Un format de fichier JSON de 5 Mo dans le temps nécessaire au navigateur pour l'analyser.
• Pas de plafond de taille de fichier au-delà de votre propre RAM.
• Pas de limite de tarif, Parce qu'il n'y a pas de serveur pour vous limiter.

Le compromis est réel et je l'appellerai : un travail lourd (une vidéo de 200 Mo, un passage OCR sur 500 pages) est vraiment plus lent dans un navigateur que sur un serveur avec un GPU. Le côté client est le bon défaut, pas une réponse universelle.

Questions fréquentes

Ces outils de productivité des développeurs sont-ils réellement gratuits ?

Oui — Aucun compte, aucun plafond d'utilisation, aucun essai expirant. Les outils fonctionnent sur votre machine, ce qui signifie qu'ils ne me coûtent rien par utilisation, ce qui signifie qu'il n'y a rien à compter.

Ai-je besoin d'un compte pour les utiliser ?

non . Ouvrez un outil, utilisez-le, fermez l'onglet. Il n'y a pas de mur d'inscription, et parce que le traitement est côté client, il n'y a pas de session à laquelle j'attache vos données en premier lieu.

Est-il sûr de coller des données sensibles comme des clés d'API ou des jetons ?

Pour les outils côté client, oui, et vous pouvez le confirmer plutôt que de me faire confiance. Ouvrez l'onglet Réseau de DevTools de votre navigateur, collez et surveillez les demandes sortantes. Il n'y en a pas. La seule chose que j'éviterais encore n'importe où, y compris ici, est de coller un production Vous ne pouvez pas tourner secrètement, non pas à cause de l'outil, mais parce que les presse-papiers, les partages d'écran et les extensions de navigateur sont tous de véritables surfaces d'attaque.

Ces outils fonctionnent-ils hors ligne ?

La page doit être chargée une fois. Après cela, la plupart des outils continuent de fonctionner si votre connexion s'abaisse, car le Javascript qui effectue le travail est déjà dans votre onglet. Rechargez la page lorsque vous déconnectez et vous n'obtiendrez rien.

Comment se comparent-ils aux outils CLI comme JQ ou OpenSSL ?

différents emplois. CLI gagne pour tout ce qui est scénarisé, répété ou dans CI - c'est composable et reproductible. Les outils de navigateur gagnent pour des tâches ponctuelles, tout ce qui bénéficie d'un aperçu visuel (regex, dégradés, couleurs, qualité d'image) et des machines où vous ne pouvez pas installer de logiciel. J'utilise les deux quotidiens et je ne pense pas que ce soit une compétition.

Quels outils dois-je mettre en signet en premier ?

Si vous écrivez du code : formateur JSON, convertisseur de horodatage, testeur de regex, convertisseur base64. Si vous écrivez du contenu : compteur de mots, générateur de slug, compresse d'image. Si vous faites du frontend : sélecteur de couleurs, générateur de dégradé, générateur de balises méta. Marquez-les comme un dossier et cliquez sur le milieu pour les ouvrir tous en même temps.

Les outils fonctionnent-ils sur mobile ?

Ils sont réactifs et ils fonctionnent, mais je vais être honnête - je les ai conçus pour un clavier et une fenêtre large. Les tâches de collage et de copie sont correctes sur un téléphone. Tout ce qui implique un spectre de couleurs ou un échantillon regex sera un combat.

Existe-t-il une API pour ces outils ?

Pas actuellement. Tout est côté client par la conception, ce qui est fondamentalement en contradiction avec une API côté serveur. Pour une utilisation par programmation, les opérations sous-jacentes sont toutes une invitation de bibliothèque dans la langue que vous écrivez déjà : json_encode, base64_decode, preg_match, et ainsi de suite.

Quels sont les meilleurs outils en ligne gratuits pour les développeurs ?

Cela dépend de votre travail, mais un noyau solide couvre le formatage et l'inspection (formatateur JSON, convertisseur de base64), l'heure et le texte (convertisseur d'horodatage, compteur de mots, générateur de slug), travail de modèle (testeur de regex) et média (compresseur d'images, sélecteur de couleurs). Toolz.dev en conserve plus de 600 surfaces, tous gratuits et côté client. Le meilleur outil est généralement celui déjà ouvert dans un onglet lorsque vous frappez la friction.

Puis-je utiliser ces outils de développement sans rien installer ?

Oui, il n'y a rien à installer et aucune extension à ajouter. Chaque outil est une page Web qui exécute sa logique dans votre navigateur, vous ouvrez une URL et commencez à travailler sur n'importe quel système d'exploitation. Une fois la page chargée, elle continue de fonctionner même si votre connexion est supprimée.

la version courte

La productivité des développeurs n'est pas un gros déverrouillage. C'est la suppression d'une centaine de petites frictions : la charge utile que vous ne pouvez pas lire, l'horodatage que vous ne pouvez pas analyser, la regex que vous devinez, la capture d'écran qui est de 4 Mo alors qu'elle devrait être de 400 Ko. Aucun de ceux-ci ne vaut individuellement un article de blog. Collectivement, ils font la plus grande différence entre une journée où vous avez expédié quelque chose et une journée où vous étiez occupé.

Tout ici est à toolz.dev, gratuit, dans votre navigateur, avec vos données restant sur votre machine. Commencez par le Formateur JSON — Si vous ne prenez qu'un seul onglet de ce message, c'est celui qui se rentabilise à l'heure du déjeuner.