20 outils webs indispensables pour développeurs
Avoir les bons outils en tant que développeur va te faire gagner un temps fou sur tout. Que ce soit pour produire du code, vérifier de la donnée ou valider des commandes et des configurations, ça devient vite indispensable. Je te dévoile mon dossier favoris, j’ai mis plusieurs années à construire cette liste !
1 – DevHints.io
Impossible que je retienne les syntaxes et snippets des outils et langages que j’utilise. D’ailleurs, ça sert à rien puisque c’est pas ça l’important. L’important est de retenir les concepts, pas les détails.
Pour les détails, les cheatsheets sont là pour ça, et DevHints c’est la mine d’or.
Tu peux penser à n’importe quels outils langages ou frameworks utilisés par les développeurs, tu trouveras le cheatsheet sur ce site. En quelques clics tu as accès tout et c’est facilement imprimable. Un must pour aider la mémoire !
2 – Learn X in Y minutes
Learn X in Y minutes est le genre de site fou qu’il faut voir pour le croire.
Tous les langages possibles, expliqués en une page, dans presque toutes les langues, via des exemples concrets de code. Des langages plus que standards comme C++ aux langages infernaux comme le LOLCODE tu trouveras de tout.
Il diffère grandement avec le premier car ici chaque langages est expliqué comme des cours. Il ne s’agit pas de se rafraichir la mémoire (cheatsheet) mais bien d’apprendre rapidement les bases d’un nouveau langage.
3 – Regex101
Les Regex ont arrêté d’être un problème quand j’ai découvert Regex101.
Avant la découverte de cet outil, la création ou la modification d’une Regex complexe était fastidieux. Je devais d’abord me souvenir de chaque syntaxe et détail puis je devais tester longuement ma solution pour la faire fonctionner comme je voulais.
Aujourd’hui, je vais sur cet outil, ça se fait pas à pas avec les explications. Tous les tests sont fait instantanément à chaque modification. Pour en décoder une, je copie/colle et j’ai toute l’explication. L’outil m’accompagne et ça me fait gagner un temps absurde. UN MUST HAVE !
4 – JSON Editor Online
Quand je bosse avec du JSON, je finis fréquemment par dégainer JsonEditorOnline.
Ça me sert déjà à visualiser clairement ma donnée via des nodes. Mais surtout ça me permet de faire des diffs entre plusieurs JSON. Si comme moi tu travailles beaucoup avec des APIs, tu te retrouves fréquemment à devoir comparer de la donnée.
Avant je le faisais en regardant les JSON les uns après les autres. C’était pas rapide et ça pouvait créer des erreurs. Depuis que j’utilise cet outil, plus possible de se tromper et je gagne beaucoup de temps !
5 – CodeSandbox
Mon éditeur de code en ligne préféré que j’utilise tout le temps est Codesandbox.
Un éditeur de code bacs à sable gratuits, instantanés et collaboratifs pour tous tes besoins ! C’est vraiment rapide et tu peux hoster ce que tu veux comme petite app statique.
Je le préfère à CodePen parce que je peux hoster des images sans payer et j’ai plus de choix de technologies et de templates. Parfait pour prototyper mes idées vite fait !
6 – Cloudflare Speed Test
Avec la pandémie, ma connexion internet est devenue encore plus importante qu’avant. S’il y a une coupure ou une baisse de réseau, je veux le savoir immédiatement.
Heureusement, Cloudflare a fait une page d’analyse de ta connexion dans ses moindres détails.
En un clic, ça te dit tout sur la situation actuelle de ta connexion. Pratique pour savoir ce qui se passe quand ton call lag ou quand plus rien fonctionne !
7 – Excalidraw
Avant de coder un problème compliqué, il faut que je fasse un schéma. Crois-en mon expérience, y’a rien qui te fera plus gagner du temps que de schématiser tes idées avant de coder.
La plupart du temps, c’est papier/crayon. Sinon, c’est Excalidraw.
Excalidraw c’est un tableau blanc qui te permet de facilement dessiner ton plan comme si c’était fait à la main ! Une page blanche, de quoi faire des schémas et les enregistrer. Simple, rapide, propre, gratuit, incroyable. Un must.
8 – BundlePhobia
Quand je trouve un package NPM qui pourrait m’aider, il passe tout de suite par BundlePhobia.
Cette petite application web me permet, en un clic, de connaitre le prix en taille et en temps du package. Ça me permet aussi de voir combien de dépendances sont liées.
Ça me permet de prendre décision à savoir si ca vaut le coup d’introduire cette nouvelle dépendances dans mon projet. Parfois ça me permet de faire le choix entre deux packages qui font la même chose. Et quoi qu’il arrive à la fin c’est mon application qui est gagnante !
9 – Semver Check
J’utilise fréquemment Semver check pour contrôler les versions NPM de mes projets.
Ça me permet d’être sûr que certaines contraintes de versions vont bien se comporter comme je veux. C’est plus un outil pour vérifier que je ne vais pas faire de bêtise. Mais c’est très utile pour valider rapidement une version.
Il m’est arrivé de me retrouver avec des versions de package non désirées avant d’utiliser ça. Plus possible de se tromper avec ça. Hyper pratique !
10 – CodeElf
Si t’es un dev ça veut dire que tu passes la moitié de ton temps à choisir des noms de variables et de fonctions. Cet outil va t’aider.
Codelf est conçu pour te faire gagner du temps sur la réflexion du nommage!
Ça fait instantanément une recherche sur Github, GitLab et Bitbucket pour voir si ton idée de nom est populaire ! Il y a une plus grande chance que ton idée soit bonne si elle est déjà utilisée par des milliers de développeurs avant toi.
Incroyable mais vrai
Il est possible de soutenir ce blog tout en étant stylé dans la vraie vie ! Pour ce faire, rien de plus simple, un petit tour nonchalant sur la boutique officielle et le tour est joué.
Qui veut des fringues d’excellente qualité avec un message clair dessus ?
11 – Htaccess Tester
J’ai déjà cassé des sites en entier en changeant le htaccess avec beaucoup trop de confiance.
En utilisant htaccess tester ça ne risque plus d’arriver !
Ce petit outil permet de connaitre exactement le comportement de ton htaccess avant de le pousser. Plus besoin d’angoisser au moment de pousser, tu es déjà sûr que ton site ne va pas imploser et que les redirections vont être correctes. Une seule utilisation rend accro!
12 – ExplainShell
Retenir toutes les petites options de toutes les commandes shell est presque impossible.
Explain shell permet de copier/coller n’importe quelle commande est d’avoir une explication complète!
C’est une sorte de commande man mais en plus rapide à lire, plus détaillée et bien présentée dans le navigateur. Tout est expliqué, option par option, dans une belle interface. Très pratique pour rapidement passer en revue tous types de commande.
13 – Squoosh
La plupart des images énormes -en termes de poids- peuvent être réduites de 60% sans perdre en qualité.
C’est exactement ce que fait Squoosh juste en un drop !
Indispensable si tu veux optimiser ton site et la bande passante de tes visiteurs. Et de manière générale des images énormes sont inutiles. Très pratique pour s’en débarrasser rapidement.
14 – Photopea
Celui-là est complètement fou !
Photopea c’est juste Photoshop gratuit dans le navigateur.
Je me retrouve fréquemment à faire des retouches d’images pour diverses raisons. Plus besoin d’avoir les outils cheap de montage gratuit. J’ouvre une page et j’ai accès au top.
C’est très pratique pour faire un truc rapide depuis n’importe où sans installer tout le bordel. C’est bluffant que ça marche aussi bien et que ça soit gratuit !
15 – DevDocs
Ça serait cool d’avoir accès à toutes les docs de tous les frameworks/langages dans un seul endroit bien organisé.
Et bien c’est exactement ça DevDocs.
Hyper pratique pour ne pas passer sa vie sur tous les sites de la terre et avoir 30 tabs ouverts. La vérité c’est que je l’utilise surtout pour un nombre limité de docs, mais c’est quand même pratique de rester sur un seul endroit.
16 – Carbon
Si tu te demandes comment font certains développeurs pour générer des images de leur code hyper jolies, ne cherche plus !
Carbon est tout simplement le générateur de présentations de bout de code le plus utilisé.
Pratique ! L’équivalent en extension VSCode existe aussi.
17 – Hoppscotch
Presque tout le monde connait Postman ou Insomnia pour tester ces APIs.
Hoppscotch c’est exactement la même chose, mais directement dans le navigateur !
C’est très complet, il y a toutes les options que tu peux imaginer et ça peut toujours dépanner pour tester rapidement une api. Postman permet aussi de tester via le web, mais il faut un code et meme une extension du navigateur pour certains appels.
Hoppscotch tu as accès à tout ce dont tu as besoin en un seul clic.
18 – Crontab Guru
Mettre en place un cron peut être extrêmement catastrophique s’il y a la moindre erreur.
Crontab guru permet de valider exactement le comportement de ton futur cron avant de le programmer.
Dans la même veine qu’htaccess tester, fini de transpirer avant d’ajouter ou de mettre à jour des règles avec un impact fort. Tu sais exactement le comportement que ça va avoir avant de pousser quoique ce soit. Très pratique pour aller vite et avoir l’esprit tranquille !
19 – DevTools
DevTools est une suite d’outils pour gagner un peu de temps dans les petites taches de dev de tous les jours.
Encoder/décoder du texte, comparaison de texte, génération de texte, génération d’UUID et plein d’autres mini-outils au même endroit. Au lieu de jongler avec les commandes et les scripts de partout, tu as tout au meme endroit. Copier/coller tu as ton résultat et tu gagnes du temps !
20 – Repl.it
Les éditeurs de codes en ligne comme Codesandbox ou Codepen se limitent au frontend.
ReplIt c’est plus de 50 langages utilisables dans le navigateur gratuitement.
L’endroit parfait pour prototyper des bouts de code backends rapidement. Je l’utilise très fréquemment pour valider une fonction, un bout d’algo ou tout simplement pour vérifier la compatibilité entre deux versions de NodeJS ou Python. Avec un compte gratuit tu peux meme partager tes bouts d’algos !
Bonus – Pomofocus
On fait les fifous, un petit outil bonus !
Pomofocus est le meilleur outil web de gestion pour la technique pomodoro que j’ai jamais vu.
Le pomodoro est une technique très connu dont je te parle fréquemment sur ce blog. Elle te permet de décupler de façon impressionnante ta productivité ! Et pomofocus c’est parfait pour la tester.
Épilogue
Je ferai ce même genre de post dans le futur avec les logiciels pour développeurs et un autre avec les extensions Visual Studio Code. La liste d’aujourd’hui vient d’un thread que j’ai créé sur Twitter. Si tu veux avoir les infos avant tout le monde hésite pas à me rejoindre sur Twitter !
Hello, merci pour cette liste je vais piocher un peu dans certains probablement.
J’utilise beaucoup jsoneditoronline, surtout depuis que j’utilise une extension chrome pour envoyer rapidement n’importe quel texte sélectionné dans un onglet pour l’envoyer dans un nouvel onglet jsoneditoronline.
Si ça vous intéresse :
– Installer l’extension Context Menus https://chrome.google.com/webstore/detail/context-menus/phlfmkfpmphogkomddckmggcfpmfchpn
– Aller dans l’onglet SelectionMenu, créer un menu Custom, rentrer un raccourci et l’url suivante :
http://jsoneditoronline.org/?json=%s
Maintenant en faisant un clic droit sur du texte dans le menu cont extuelvous avez une nouvelle option « JSON »
Génial! Merci pour le partage!
Je compléterai avec:
– Rosetta Code (https://www.rosettacode.org) qui est vraiment pas mal pour retrouver l’implémentation de tel algo dans tel langage
– Mokaroo (https://www.mockaroo.com) pour générer de la donnée bidon
– Moki (https://mocki.io/fake-json-api) lorsqu’on dev un front, que le back n’est pas à niveau et que l’on souhaite tester l’intégration avec une API REST reprennant la structure de données attendue
– Lorem Picsum (https://picsum.photos/) pour avoir des images de mock aux dimensions adhoc
– HadloLint (https://hadolint.github.io/hadolint/) pour corriger ses Dockerfile
Merci pour tous ces sites plus intéressants les uns que les autres, et plus globalement merci pour tes articles toujours utiles et inspirants 🙂
Le debugger de regex101 c’est juste une tuerie. Quand tu es un être normal (genre tu lis pas les expressions régulière comme si c’était du français 😛 ) c’est un indispensable.
Très bon tout ça, merci !
J’ajouterais pour ma part CyberChef : https://gchq.github.io/CyberChef/
Merci de partager tes liens.
Je découvre de nombreux sites très pratiques
Simplement Merci ! des pépites ces sites
C’est surement à cause de ton orthographe, elle fait plus mal aux yeux que ton langage fleuri 🙃
Merci pour cette liste ! J’ajouterais quicktype ( https://app.quicktype.io/) qui me permet de créer mes interface Typescript (ou Java, ou Swift…) à partir d’un JSON super rapidement 👌
Merci beaucoup pour cette liste! Je suis nouvelle dans le domaine du développement web et je sens que certains éléments de ta liste vont beaucoup m’aider! 🙂
Merci beaucoup ! J’ai découverts pas mal d’outils que je vais m’empresser d’utiliser 😉
Excellent !! Cette liste fera désormais partie de mes cours destiné aux Webdesigner… Merci infiniment pour le partage.
Je relance d’un cryptii.com
Pour encoder/décoder des trucs, enchainer des opérations d’encodage et/ou de chiffrement.
Merci beaucoup pour le partage
Merci pour le partage, y a déjà 4 ou 5 outils que je sais que je vais utiliser au quotidien !!
En alternative à https://devdocs.io/, j’aime bien Zeal : https://zealdocs.org/
Il faut l’installer, donc on s’éloigne de ce que propose l’article (des outils web), mais j’aime bien l’idée d’avoir ma bibliothèque de documentations dispo en hors-ligne, sans devoir ouvrir un n-ième onglet dans mon navigateur.
Merci, j’ajouterais https://devtoys.app/