ESSENTIEL

UI kit personnel :

Outils kit personnel :

HTML

Générateurs de Code HTML :

Unicode et emoji pour du texte :

  • charactercodes.net : Collection d'unicode et d'emoji pour les insérer dans du texte
  • symbolcopy.com : Collection de symbole et d'emoji pour les insérer dans du texte

Générateurs de Code avec IA :

  • GitHub Copilot : Suggestions de code contextuelles basées sur l’IA.
  • Replit Ghostwriter : Génération de code intégrée dans l’éditeur en ligne.
  • Codeium : Alternative gratuite à Copilot pour générer du code.
  • Tabnine : Complétions de code basées sur l’IA.
  • Toolify.ai : Liste d’IA gratuites pour générer ou assister le code.
  • Google Stitch : Génération de code et d’automatisations via IA.

CSS

Générateurs de Code CSS :

Générateurs de Layout CSS :

Générateurs de SVG :

  • Haikei : Générateur de formes SVG, waves, blobs et backgrounds
  • Blobmaker : Générateur de blobs SVG
  • Patternpad : Générateur de motifs SVG personnalisables
  • SVG Wave : Générateur de vagues SVG

Générateurs d’Animations CSS :

  • Animista : Création d’animations CSS avec interface visuelle
  • Animate.css : Bibliothèque de classes CSS pour animations simples
  • Hover Effects : Effets modernes au survol pour vos éléments
  • Keyframes.app : Création d’animations CSS via interface visuelle

Autres générateurs visuels :

Outils de Conception :

  • Mockflow : Pour créer des graphiques et des designs
  • Canva : Pour créer des graphiques et des designs
  • Figma : Pour créer des interfaces et des maquettes
  • Excalidraw : Pour réaliser des schémas et wireframes rapidement
  • Uizard : Pour générer des maquettes grâce à l’IA
  • Tldraw : Pour dessiner des schémas simples et rapides
  • spline : Outil de création 3D

Sites d’Inspiration :

  • brandingstyleguides : Inspiration, visuels de sites, logos et chartes graphiques
  • Wix : Pour créer des sites et s'inspirer de designs
  • freefrontend : Recueil de codes open source pour s'inspirer
  • Dribbble : Plateforme où les designers partagent leurs travaux
  • Pinterest : Découvrir des idées de design et les tendances actuelles
  • uiverse.io : Composants UI open source pour s’inspirer
  • Awwwards : Sélection des meilleurs sites web modernes
  • Behance : Portfolios professionnels en design et UI
  • Mobbin : Bibliothèque d’interfaces réelles pour s’inspirer
  • Landbook : Galerie de landing pages modernes
  • Lapa Ninja : Inspiration de pages web et UI modernes
  • Collect UI : Composants UI classés par catégories

Outils de Design et Prototypage :

  • Photoshop : Logiciel de retouche, de traitement et de dessin assisté par ordinateur
  • Illustrator : Logiciel de création graphique vectorielle
  • Adobe XD : Pour le design et le prototypage d’interfaces utilisateur
  • Blender : Logiciel Open Source de création 3D
  • Sketch : Un outil de design vectoriel pour les interfaces utilisateur
  • SketchBook Pro : Un outil de DAO

Polices et Typographie :

  • Google Fonts : Une vaste collection de polices gratuites et open-source
  • Font Awesome : Une bibliothèque d’icônes vectorielles et de polices
  • Fontshare : Polices modernes gratuites à télécharger
  • Unicode Table : Explorer les caractères, symboles et glyphes Unicode
  • Fontjoy : Générateur d’associations de polices via IA

Dégradés en tout genre :

Choix de couleur :

  • HTML color code : Couleur avec leurs codes hexadécimaux, valeurs RVB et autres
  • Coolors : Générateur moderne de palettes de couleurs
  • Color Hunt : Collections de palettes tendances et modernes
  • Happy Hues : Palettes avec exemples d’utilisation dans une interface
  • Khroma : Générateur de palettes basé sur l’IA
  • colorkit.co : Pour générer des palettes

Icon et SVG :

  • Flaticon : Bibliothèque d’icônes vectorielles et stickers
  • css.gg : Icônes SVG modernes et open source
  • SVG Repo : Grande bibliothèque d’icônes SVG libres
  • Lucide Icons : Icônes SVG modernes et open source
  • Tabler Icons : Icônes SVG élégantes pour interfaces modernes
  • Heroicons : Icônes SVG utilisées dans Tailwind

Images Open Source :

  • Pixabay : Plus d’un million d’images libres de droits et gratuites
  • Unsplash : Des photos de haute qualité gratuites pour usage personnel et commercial
  • Pexels : Une vaste collection de photos et vidéos gratuites
  • Openverse : Une bibliothèque d’images, audio et autres médias sous licence ouverte
  • Kaboompics : Photos modernes et esthétiques libres de droits
  • Life of Pix : Photos artistiques HD gratuites et sans copyright

Vectorisation PNG en SVG :

  • PNG2SVG : Transformer des fichiers PNG en SVG
  • SVGTrace : Vectoriser des images PNG en SVG
  • Vectorizer AI : Vectorisation PNG en SVG assistée par IA
  • Vector Magic : Vectorisation précise de PNG en SVG

Convertisseurs vers WebP :

  • Convertio : Convertir des images en WebP facilement
  • CloudConvert : Conversion WebP fiable avec options avancées
  • Squoosh : Optimisation WebP avec aperçu en temps réel

Outils de compression et Optimisation d’Images :

  • TinyPNG : Pour compresser les images PNG et JPEG sans perte de qualité
  • SVGOMG : Un outil pour optimiser les fichiers SVG

JAVASCRIPT

Extensions de Navigateur pour JS :

Outils de test :

  • Jest : Framework de test unitaire JavaScript
  • Mocha : Framework de test unitaire JS pour navigateur et Node.js
  • Vitest : Alternative moderne et rapide à Jest
  • Cypress : Tests end‑to‑end dans un vrai navigateur
  • Playwright : Tests E2E multi‑navigateurs modernes

Outils de Documentation :

  • Docusaurus : Un générateur de sites de documentation open-source
  • Swagger : Pour documenter et tester vos API
  • JSDoc : Générer une documentation à partir du code JavaScript
  • Storybook : Documenter et tester des composants UI
  • MkDocs : Générateur de documentation simple et rapide

Autres Outils Utiles :

  • Npm : Un gestionnaire de paquets pour JavaScript
  • Webpack : Un module bundler pour JavaScript
  • Node.js : Un environnement d’exécution JavaScript côté serveur
  • Tensorflow.js : Permet de créer et d’entraîner des modèles d’intelligence artificielle
  • Vite : Un bundler moderne et ultra rapide pour JS
  • ESLint : Analyse et correction automatique du code JavaScript
  • Prettier : Formateur de code pour JavaScript et TypeScript

Frameworks et Bibliothèques :

  • Bootstrap : Un framework CSS pour créer des sites web réactifs
  • React : Une bibliothèque JavaScript pour construire des interfaces utilisateur
  • Vue.js : Facilite la création d’applications web interactives
  • preactjs : Une alternative à React, pour les applications nécessitant une faible empreinte
  • Ember : Un framework adapté aux applications web complexes
  • Svelte : Un framework qui compile le code en JavaScript pur au moment de la construction
  • Angular : Un framework signé google, complet pour la création d’applications web robustes
  • JQuery : Une bibliothèque JavaScript pour la manipulation du DOM et les requêtes AJAX
  • Semantic UI : Un framework CSS pour la création d’interfaces utilisateur responsives
  • Foundation : Un autre framework CSS qui offre une base solide pour la conception web
  • Backbone : Une bibliothèque qui fournit des modèles et des collections
  • Tailwind CSS : Une bibliothèque CSS pour construire des interfaces utilisateur
  • Next.js : Un framework basé sur React pour créer des applications web modernes
  • Nuxt : Un framework basé sur Vue pour créer des applications web performantes
  • Astro : Un framework moderne orienté contenu et performance
  • SolidJS : Une bibliothèque JavaScript ultra rapide pour interfaces réactives
  • Alpine.js : Un micro‑framework léger pour ajouter des interactions simples

Bibliothèques de jeux :

  • phaser.io : Framework de jeu open source qui facilite la création de jeux 2D
  • threejs : Bibliothèque 3D avec WebGL
  • p5js : Bibliothèque idéale pour débutants et permet de créer des visualisations et des jeux
  • babylonjs : Bibliothèque 3D basée sur WebGL pour expériences interactives
  • playcanvas : Un moteur de jeu 3D pour créer des jeux directement dans le navigateur
  • PixiJS : Une bibliothèque 2D rapide et performante basée sur WebGL
  • MelonJS : Un framework 2D simple pour créer des jeux de plateforme
  • Kaboom.js : Une bibliothèque moderne pour créer des jeux 2D rapidement

API de Données Météorologiques et Astronomiques :

  • OpenWeatherMap : Données météorologiques actuelles, des prévisions et des historiques
  • NASA : Données et images de la NASA, photos de la Terre et des données sur l’espace

API de Données Alimentaires :

  • Open Food Facts : Informations sur les aliments, les ingrédients, le nutri-score, et plus

API de Données Botaniques :

  • Trefle.io : Informations sur les plantes, les noms scientifiques, les familles, et des photos

API de Données Aéronautiques :

  • OpenSky : Donne des informations en temps réel sur les avions et les vols

API de Données Géographiques et de Localisation :

  • CountryLayer : Informations sur les pays, les codes ISO, les noms, et les drapeaux
  • Zippopotam : Donne des informations sur les codes postaux et les localisations

API de Données de Recherche :

  • SerpAPI : Agrège les résultats de recherche de différents moteurs de recherche

API de Données de Films :

  • TheMovieDB : Informations sur les films, les séries TV, et les acteurs

API de Données de GIFs :

  • Giphy : Permet de rechercher et d’intégrer des GIFs animés

API de Données de Conversion :

  • Cloud Convert : Permet de convertir des fichiers entre différents formats

API de Données de Utilisateurs Aléatoires :

  • RandomUser : Génère des données de faux utilisateurs pour les tests

API de Données Animales :

  • CatFact : Faits aléatoires sur les chats
  • Dog API : Donne des images et races de chiens

API de Données Musicales :

  • Deezer API : Informations sur artistes, albums et pistes

API de Données de Jeux Vidéo :

  • RAWG : Donne des informations sur jeux vidéo, plateformes et notes

API de Données de Livres :

  • OpenLibrary : Donne des informations sur les livres, auteurs et éditions

API de Données de Citations :

  • Quotable : Citations aléatoires ou filtrées par auteur

API de Données de Blagues :

  • JokeAPI : Donne des blagues classées par catégories

API de Données de Couleurs :

API de Données de Pokémon :

  • PokeAPI : Donne des informations sur les Pokémon, attaques et types

SEO, TEST ET AUTRES

Éditeurs de Texte et IDE :

  • Visual Studio Code : Un éditeur de code open-source avec de nombreuses extensions.
  • Atom : Un éditeur léger orienté personnalisation et extensions
  • Sublime Text : Un éditeur rapide et minimaliste pour le développement
  • Brackets : Un éditeur orienté web avec aperçu en direct
  • Notepad++ : Un éditeur simple et rapide pour le code et les scripts
  • IntelliJ Community : Un IDE gratuit pour Java et projets multi-langages

Gestion de Version :

  • GitHub : Pour héberger et gérer vos projets de code.
  • GitHub Desktop : Une interface graphique pour GitHub
  • GitLab : Logiciel libre et open-source basé sur git
  • Git : Le système de gestion de versions distribué utilisé par la majorité des projets
  • Bitbucket : Une plateforme de gestion de code basée sur git
  • SourceForge : Une plateforme d’hébergement pour projets open-source
  • Mercurial : Un système de gestion de versions rapide et distribué

Outils de Collaboration :

  • Slack : Pour communiquer et organiser le travail en équipe
  • Trello : Pour gérer des projets avec un système de tableaux
  • Notion : Pour centraliser documents, tâches et collaboration
  • Discord : Pour collaborer via salons vocaux et textuels

Outils de Développement :

  • CodePen : Un environnement de développement en ligne pour HTML, CSS et JavaScript.
  • JSFiddle : Un autre outil en ligne pour tester et partager des extraits de code.
  • StackBlitz : Un environnement de développement en ligne rapide basé sur WebContainers
  • CodeSandbox : Pour créer et partager des projets JavaScript en ligne
  • Replit : Un IDE en ligne multi-langages avec exécution instantanée
  • Glitch : Pour créer rapidement des applications web collaboratives

Visualiseurs sur Écran de Téléphone :

  • Scrcpy : Outil pour contrôler l’écran de votre smartphone Android sur votre PC via USB
  • Vysor : Une application pour afficher et contrôler votre Android sur votre ordinateur.
  • Miracast : Pour diffuser l’écran de votre smartphone Android sur un PC compatible
  • AirDroid : Pour afficher et contrôler un smartphone Android via WiFi
  • TeamViewer : Pour accéder à distance à un appareil Android depuis un PC
  • ApowerMirror : Pour diffuser l’écran d’un smartphone sur PC en USB ou WiFi

Outils de Productivité :

  • Microsoft To Do : Pour organiser des tâches simples et des listes quotidiennes
  • Asana : Pour gérer des projets et suivre l’avancement des équipes
  • MindMeister : Pour créer des cartes mentales et organiser des idées
  • Clockify : Pour suivre le temps passé sur vos tâches et projets

Outils de Surveillance et d’Analyse :

  • Google Analytics : Pour suivre et analyser le trafic de votre site web.
  • Hotjar : Comprendre le comportement des utilisateurs avec des enregistrements de sessions.
  • Matomo : Une alternative open-source pour analyser le trafic sans tracker externe
  • Microsoft Clarity : Pour analyser les interactions utilisateurs avec cartes de chaleur et sessions
  • UptimeRobot : Pour surveiller la disponibilité et les temps de réponse d’un site

Outils de Performance :

  • WebPageTest : Pour tester la vitesse de chargement de vos pages web.
  • GTmetrix : Pour analyser et optimiser les performances de vos sites web.
  • PageSpeed Insights : Pour analyser la vitesse et l’optimisation d’un site web
  • YellowLab Tools : Pour détecter les problèmes de performance et de qualité front-end
  • Dareboost : Pour auditer les performances et la qualité d’un site web
  • Web.dev Measure : Pour mesurer les Core Web Vitals et l’accessibilité

Outils de Gestion de Données :

  • Firebase : Pour l’hébergement de bases de données en temps réel et l’authentification.
  • MongoDB Atlas : Une base de données NoSQL hébergée dans le cloud.
  • Supabase : Une alternative open‑source à Firebase avec base de données Postgres
  • Prisma : Un ORM moderne pour gérer vos bases de données facilement
  • Airtable : Pour organiser des données sous forme de tableaux intelligents
  • SQLite : Une base de données légère et embarquée pour projets locaux

Outils de Test :

  • Jest : Un framework de test JavaScript pour React et autres bibliothèques JavaScript
  • caniuse.com : Vérifier la compatibilité des technologies web avec différents navigateurs
  • Selenium : Un outil open-source pour les tests automatisés des applications web
  • Cypress : Un outil de test end-to-end pour les applications web modernes.
  • Lighthouse : Outil de Google pour auditer les performances, l’accessibilité, et plus
  • PageSpeed Insights : Pour analyser et optimiser la vitesse des pages web.
  • Vitest : Un framework de test rapide et moderne compatible avec l’écosystème Vite
  • Playwright : Pour tester des applications web sur plusieurs navigateurs
  • Mocha : Un framework de test JavaScript flexible et léger
  • Testing Library : Pour tester les interfaces en se concentrant sur l’expérience utilisateur

Outils de Sécurité :

  • Snyk : Pour trouver et corriger les vulnérabilités dans vos dépendances open-source.
  • Dependabot : Pour automatiser les mises à jour de sécurité de vos dépendances sur GitHub.
  • OWASP ZAP : Un outil open‑source pour scanner les failles de sécurité des applications web
  • SSL Labs Test : Pour analyser la configuration SSL d’un site web
  • SecurityHeaders : Pour vérifier les en‑têtes de sécurité d’un site web
  • Have I Been Pwned : Pour vérifier si une adresse email a été compromise

Outils de Débogage :

  • Chrome DevTools : Pour déboguer et analyser les performances dans le navigateur.
  • Postman : Pour tester et déboguer vos API.
  • Firefox DevTools : Pour analyser le DOM, le CSS et les performances dans Firefox
  • MDN Inspector : Pour inspecter et comprendre le rendu CSS d’un élément
  • Charles Proxy : Pour analyser les requêtes réseau et déboguer les API
  • mitmproxy : Un proxy open‑source pour inspecter et modifier le trafic HTTP

Outils de Développement Mobile :

  • Expo : Pour développer des applications React Native rapidement.
  • Flutter : Un framework open-source pour créer des applications mobiles natives.
  • React Native : Pour créer des applications mobiles multiplateformes avec JavaScript
  • Android Studio : L’environnement officiel pour développer des applications Android
  • Apache Cordova : Pour créer des applications mobiles avec HTML, CSS et JavaScript
  • Ionic : Pour développer des applications hybrides avec une base web

Outils de Test d’Accessibilité et SEO :

  • WAVE : Un outil de WebAIM qui évalue l’accessibilité des pages web
  • aXe : Extension de navigateur qui analyse les pages pour l’accessibilité
  • Accessibility Checker : Un outil en ligne pour tester l’accessibilité de votre site web
  • Google Search Console : Surveiller et maintenir votre site dans les résultats de Google
  • Ahrefs Webmaster Tools : Pour analyser les performances SEO de votre site
  • Ubersuggest : Pour analyser le SEO de votre site et obtenir des suggestions d’amélioration
  • Screaming Frog SEO Spider : Un outil de crawl SEO qui analyse les URL de votre site
  • Siteimprove : Pour tester à la fois le SEO et l’accessibilité
  • Silktide : Pour combiner des tests

Cheat sheet :