Outils Developpement Web

60 outils géniaux de
développement web à utiliser en

2022
Downloaded on: 02 December 2022

Il y a quelque chose de romantique et d’excitant à ouvrir TextEdit ou Notepad et à saisir «
<HTML> » pour lancer un nouveau projet. C’est ainsi que beaucoup d’entre nous ont
commencé leur obsession du code pour le web. En 2022, les outils de développement web
ne se contentent pas d’enregistrer notre texte – ils nous aident à créer des projets et
dynamisent l’ensemble du processus. En outre, il faut tenir compte de bien d’autres éléments
que le HTML et le CSS.
La phase de planification, par exemple, est essentielle. Vous devez tenir compte de la
création du maquettage, des choix de conception et des flux de travail collaboratifs. Il faut
ensuite choisir le framework JavaScript idéal, décider d’utiliser ou non un environnement de
développement intégré (IDE), et bien plus encore.
Dans cet article, nous allons jeter un coup d’œil à 60 outils de développement web que vous
voudrez envisager d’utiliser en 2022. Mais avant d’entrer dans le vif du sujet, parlons de ce
que nous pensons être un outil de développement web.
Ce que nous considérons comme un outil de

développement web
À première vue, la catégorisation d’un outil de développement web semble simple.
Cependant, même en plongeant dans la partie la plus superficielle, quelques considérations
viennent brouiller les pistes.
Par exemple, demandez-vous si un service de streaming vidéo compte comme un outil de

développement. Probablement pas. Cependant, si vous l’utilisez pour enregistrer votre écran
pour une application de conception spécifique, il se transforme soudainement en un outil de
collaboration unique.
À notre avis, un outil de développement web est quelque chose qui vous aide à atteindre les
objectifs de votre projet de manière ciblée. Bien que cela n’inclue pas les langages de
programmation individuels, il existe des sous-ensembles, des super-ensembles et des
frameworks tels que TypeScript qui sont sur cette ligne. Si vous voulez gagner beaucoup
d’argent, il est essentiel de garder un œil sur ces aspects.
Prenons un autre exemple, celui de Git. On pourrait dire que ce système de contrôle de
version (VCS) couvre beaucoup de choses. Un langage spécifique est utilisé pour exécuter
les commandes, et la fonctionnalité de base offre de nombreuses possibilités en termes de
développement web. Cependant, vous pouvez également l’utiliser comme outil
d’apprentissage, notamment en parcourant les journaux de suivi des problèmes et les
commits.
Globalement, un outil de développement web peut être pratiquement tout ce qui permet à
votre projet de se dérouler de manière efficace et productive. Vous remarquerez cette
diversité dans la liste des outils.
Comment les outils de développement web peuvent

rationaliser votre flux de travail
Nous allons vous donner un avertissement avant les prochains mots : « Crunch time ».
Oui, cette phrase redoutée appelle des outils de développement web permettant de gagner
du temps. Les statistiques montrent que de plus en plus de projets utilisent crunch comme
standard, et de nombreux secteurs du développement l’utilisent encore aujourd’hui.
Que votre entreprise utilise ou ait besoin de faire des heures supplémentaires, les outils de
développement web peuvent toujours vous aider. Ces outils font le gros du travail et
automatisent les tâches banales qui grignotent votre journée. En tant que tels, ils donnent un
coup de pouce organique à votre productivité.
Cependant, ils peuvent également offrir un bonus si vous opérez dans un cadre de projet
agile tel que Scrum. Par exemple, voyez comment un outil tel que JSFiddle peut vous aider à
partager des extraits de code avec d’autres équipes à la fin d’un sprint, en vue du suivant.
De plus, si les réunions quotidiennes ne sont pas appelées à disparaître, un serveur Discord
ou un canal Slack pourrait offrir un meilleur moyen de se concentrer et d’aligner un ensemble
de tâches à venir, loin de la pression des objectifs de votre sprint actuel.
Dans l’ensemble, les outils de développement web concernent autant la planification que
l’exécution.
Comment choisir la bonne pile de développement pour
votre projet ?
Nous prêchons probablement des convaincus, mais un excellent outil de développement web
vaut son pesant d’or dans un MacBook équipé d’un M1. En tant que tel, il est essentiel de
trouver la bonne combinaison d’outils pour votre projet spécifique afin de construire une base
de travail solide.
S’il s’agit de quelque chose que vous n’avez jamais envisagé auparavant, une première
phase de planification s’avérera inestimable. Prendre du temps pour choisir les outils que
vous utiliserez retarde la phase de code du projet. Cependant, vous récupérerez ce temps
plus tard, car il y aura moins de problèmes potentiels liés aux logiciels. Vous obtiendrez
également un niveau de production plus cohérent (puisque tout le monde sera sur la même
longueur d’ondes).
Considérations pour le choix de votre pile de développement
Le choix de la bonne pile pour le projet se résume à ce qui suit :
Complexité : Tenez compte de la complexité de votre produit à livrer, car elle

déterminera la complexité de la pile.
Évolutivité : Si votre projet est destiné à une entreprise locale, il nécessitera des
solutions différentes de celles d’une entreprise internationale. Vous aurez donc besoin
d’une pile plus évolutive pour atteindre vos objectifs.
Sécurité : Il va presque sans dire que le choix que vous faites ne doit pas
compromettre la sécurité de l’utilisateur et du site.
Coût : Bien sûr, personne n’aime dépenser trop, et si les budgets sont serrés, ce
facteur aura plus d’importance qu’un carnet de chèques vide.
Il y a deux domaines dans lesquels vous pouvez diviser les technologies :
Côté serveur : Ici, vous devez examiner les technologies backend que vous utilisez.
Par exemple, vous devrez examiner votre choix d’hébergement et de serveur web, le
stockage clé-valeur et SQL, toute application et tout cadre d’automatisation que vous
utiliserez, et bien sûr, le langage de programmation.
Côté client : Vos choix d’outils frontend seront sans doute plus simples, surtout en ce
qui concerne les langages utilisés. Si le HTML, le CSS et le JavaScript seront présents,
le choix du framework JavaScript (et du framework d’automatisation) devra faire l’objet
d’une réflexion.
En ce qui concerne les piles de développement du monde réel, vous remarquerez que de
nombreux grands sites utilisent une combinaison de JavaScript et de React.js, ainsi que
Nginx. Vous verrez également Memcached, Redis et Ruby on Rails dans les piles de
développement.
60 outils géniaux de développement web à utiliser en

2022
Sans plus attendre, voyons la liste des outils de développement web que nous
recommandons d’utiliser en 2022. Nous les avons classés par catégories, mais les outils ne
sont pas présentés dans un ordre précis. Si vous êtes pressé, n’hésitez pas à passer
directement à une section particulière de la liste ci-dessous.
Environnements de développement local
Un environnement de développement local est un élément essentiel de toute pile de

développement. Cependant, il est particulièrement vital pour le développement web. Voici
quelques-uns des outils de développement local les plus importants.
1. DevKinsta
— L’écran d’accueil de DevKinsta.
Nous sommes peut-être partiaux, mais DevKinsta pourrait devenir l’outil de développement
web numéro un pour 2022 et au-delà.
Nous avons un parti pris, et nous sommes fiers de ce que nous avons réalisé !
Pour les non-initiés, DevKinsta est un moyen de vous aider à créer des installations
WordPress locales en un clin d’œil. Il s’agit d’une suite complète qui vous permet de
concevoir, développer et déployer un site WordPress pour les machines macOS et Windows
(avec une version Linux en préparation).
Vous êtes en mesure d’adapter votre installation à votre projet actuel. Par exemple, votre
« serveur » peut utiliser Nginx ou Apache, la version de PHP de votre choix, MariaDB ou
MySQL, et bien plus encore :
— Les options de configuration de DevKinsta.
Il y a plus sous le capot. Vous pouvez également déboguer et tester les e-mails grâce au
serveur SMTP intégré, et pour la gestion de la base de données, vous pouvez utiliser l’outil
puissant Adminer :
— Le gestionnaire de base de données de DevKinsta propulsé par Adminer.
Globalement, nous pensons que DevKinsta est idéal pour le développement moderne de
WordPress. Il peut s’intégrer directement dans votre flux de travail.
Nous avons créé cet outil en pensant aux développeurs, aux designers, aux free-lances et
aux agences. Cependant, pratiquement toute personne ayant des besoins quotidiens en
matière de développement trouvera de la valeur dans DevKinsta – en particulier (mais pas
exclusivement) les utilisateurs de Kinsta.
De plus, DevKinsta est entièrement gratuit !

2. MAMP
— Le logo MAMP.
On pourrait penser que les outils classiques de création et de déploiement de pages web sont
morts et enterrés, compte tenu de l’arrivée d’outils sandbox plus rapides. Pourtant, les piles
de services web traditionnelles, telles que LAMP, MAMP et XAMPP, ont toujours le vent en
poupe.
En général, elles combinent en une seule pile un système d’exploitation (OS) – Linux, macOS
ou Windows – avec un serveur web Apache, une base de données MySQL et les langages
de programmation Python, PHP et Perl. En tant que telle, une pile de services web comme
celle-ci sera toujours utilisée en 2022.
MAMP est la version de l’outil spécifique à macOS. Cette approche vous permet d’installer
une pile et de travailler sur la conception et le déploiement. Bien que le processus puisse être
plus fastidieux que les configurations plus modernes, il existe un niveau similaire de flexibilité
sous le capot – ou du moins, le potentiel est là.
Alors que dans un outil tel que DevKinsta, vous pouvez choisir à partir d’une interface
utilisateur graphique (GUI), avec une pile de services web, vous devez installer manuellement
les ajouts dont vous avez besoin. Par exemple, il n’y a pas de moyen intégré de lancer un site
WordPress sans « déployer votre propre site ». Il en va de même pour les tests d’e-mails.
Comme d’autres outils d’environnement de développement local, MAMP est entièrement

gratuit. Cependant, il existe également une version premium de MAMP pour Windows et Mac
qui augmente les fonctionnalités et fournit un outil de développement web complet et robuste.
— Le tableau de bord de MAMP Pro.
En raison de leur flexibilité et de leur prix, les piles de services web classiques sont encore
présentes sur de nombreux ordinateurs de développeurs. Les aficionados de la ligne de
commande graviteront naturellement vers cette solution, surtout si vous aimez utiliser des
gestionnaires de paquets tels que Homebrew, Flatpak ou Ninite.
Bien entendu, les développeurs Apache utiliseront également ces piles, tout comme les
développeurs MySQL et Python ou PHP. Par extension, les développeurs WordPress se
sentiront également chez eux ici.
3. XAMPP
— L’application XAMPP.
XAMPP est une autre pile de services web qui reçoit beaucoup d’amour de la part des
développeurs PHP, y compris ceux qui créent des produits WordPress. Le « X » dans le nom
représente la nature multi-plateforme de l’outil. Il propose des installateurs pour les machines
Windows, macOS et Linux :
— La page de téléchargement de XAMPP.

Alors qu’il y avait autrefois une différence entre les diverses piles de services web, les mises
à jour et améliorations constantes ont égalisé le score. Néanmoins, XAMPP possède
quelques atouts uniques dans sa manche.
Par exemple, MySQL n’est plus le système de gestion de base de données relationnelle
(SGBDR) par défaut. À la place, XAMPP utilise MariaDB. Il s’agit probablement d’une
représentation plus fidèle d’un serveur de production, étant donné le passage à d’autres
solutions après l’acquisition d’Oracle.
De plus, il y a un installateur d’applications web dans le paquetage XAMPP. Bitnami est

similaire à des solutions telles que Softaculous, mais Bitnami est spécifique à XAMPP :
— La page d’accueil de Bitnami.
Bien que de nombreuses applications soient disponibles, vous serez probablement plus
intéressé par l’installateur WordPress. Néanmoins, vous pouvez choisir parmi de nombreux
modules, ce qui fait de XAMPP une solution flexible pour le développement local.
Éditeurs de texte et de code
La plupart des développeurs adorent se disputer sur le choix de l’éditeur de code à utiliser.
D’accord, nous sommes hyperboliques, mais il y a beaucoup d’opinions sur le sujet, avec une
base de fans fervente pour chaque éditeur.
Toutefois, si les sondages sont corrects, vous utilisez probablement Sublime Text, Visual
Studio Code (VSCode) ou IntelliJ IDEA. C’est logique, car ces trois outils vont de la simple
édition de texte à l’environnement de développement intégré (IDE) à part entière. Cependant,
d’autres outils méritent également d’être mentionnés. Jetons un coup d’œil à quelques-uns
d’entre eux.
4. Visual Studio Code
Depuis son lancement en 2015, l’utilisation de Visual Studio Code a explosé sur l’ensemble
des bureaux de développement de tous bords.
— L’éditeur Visual Studio Code.
Il s’agit d’un éditeur de code open source développé par Microsoft qui offre suffisamment de
fonctionnalités pour être considéré comme un IDE. Il offre sans aucun doute suffisamment de
fonctionnalités pour conquérir plus de la moitié du marché – 55 % des développeurs web
utilisent quotidiennement Visual Studio Code.
Dans sa configuration par défaut, Visual Studio Code est avant tout un éditeur de texte.
Toutefois, lorsqu’il est couplé à sa bibliothèque d’extensions, il devient suffisamment
modulaire et flexible pour répondre à tous vos besoins de développement :
— La bibliothèque des extensions de Visual Studio Code.
Cela signifie que vous pouvez installer des linters et des fixateurs pour le langage de votre
choix (oui, ESLint et PHP CS Fixer sont là), ainsi que des extensions Docker et Vagrant, et
bien plus encore.
En parlant de langages, Visual Studio Code prend en charge JavaScript, Node.js et

TypeScript dès le départ. Cependant, l’écosystème d’extensions est si riche que vous serez
en mesure de trouver quelque chose pour prendre en charge le langage que vous utilisez.
De plus, vous trouverez également une intégration de premier ordre avec d’autres produits
Microsoft, notamment GitHub :
— Visual Studio Code dispose d’une intégration VCS dédiée avec GitHub.
Visual Studio est entièrement gratuit, et compte tenu de l’ensemble des fonctionnalités, il est
idéal pour beaucoup. Nous considérons que VSCode est un excellent moyen terme entre
IDEA et Sublime Text. À ce propos, examinons maintenant ce dernier.
5. Sublime Text
— L’application Sublime Text.
Sublime Text est un pilier dans le monde des éditeurs de texte. Il est plus dépouillé que la
plupart des autres solutions, mais son apparence cache la puissance qu’il recèle.
Par exemple, vous verrez beaucoup de ce que Sublime Text offre chez d’autres concurrents.
La palette de commande est quelque chose que vous verrez dans de nombreuses solutions
car elle est simple à utiliser.
— La palette de commande de Sublime Text.
En outre, il existe de puissants raccourcis clavier d’édition, tels que les sélections multiples
pour modifier plusieurs colonnes à la fois. En outre, la fonction Goto Anything offre des
combinaisons de raccourcis clavier semblables à celles de Vim pour parcourir vos fichiers :
— Sublime Text peut combiner les frappes au clavier pour vous aider à naviguer.
Sublime Text est un outil premium avec une période d’essai très libre. Il peut être considéré
comme gratuit, mais pour rendre la pareille au développeur, vous devez acheter une licence
pour une utilisation étendue.
À notre avis, pour de nombreux petits codeurs ou codeurs amateurs, Sublime Text offre une
excellente expérience utilisateur (UX), fournissant le strict nécessaire. Il continue à trouver la
faveur de nombreux développeurs pour ses visuels agréables, sa mise en page simple et son
extensibilité.
6. Atom
À un moment donné, Atom était très utilisé par les développeurs. Cependant, depuis l’arrivée
de Visual Studio Code, il a été moins adopté. C’est dommage, car c’est un excellent éditeur
de code qui convient à de nombreuses applications différentes.
— L’application Atom.
Il s’agit d’une application développée par GitHub, ce qui peut expliquer pourquoi elle a été
reléguée au second plan chez Microsoft. Cependant, elle est mise à jour régulièrement et
peut être considérée comme une version alternative de Visual Studio Code.
L’édition de texte est fonctionnelle, et comme son grand frère, il dispose d’une intégration
GitHub intégrée. Il existe également de nombreux modules appelés « paquets » :
— L’installateur de paquets d’Atom.
De nombreux thèmes sont disponibles pour vous aider à adapter Atom à votre flux de travail
et à vos projets. Atom comprend plusieurs thèmes parmi lesquels vous pouvez choisir, et
certains, comme One Dark, sont si populaires qu’ils ont trouvé leur place dans d’autres
éditeurs :
— Le thème One Dark d’Atom.
Atom est un éditeur de code fonctionnel qui mérite d’être essayé. Cependant, comme Atom
est construit sur Electron (sans jeu de mots), certains utilisateurs se sont plaints de fichiers
volumineux et de projets fonctionnant lentement. En tant que tel, nous suggérons qu’il est bon
pour les petits projets et les scripts rapides (surtout avec le paquet terminal intégré), mais il
n’est peut-être pas le meilleur pour les travaux complexes.
7. Notepad++
— La page d’accueil de Notepad++.
D’emblée, il convient de préciser que Notepad++ ne remplacera pas nécessairement les

éditeurs de code « grand public » que vous utilisez déjà, tels qu’IntelliJ IDEA ou Visual Studio
Code. Cependant, il vous donnera plus de puissance sous le capot pour les scripts simples et
les applications générales d’édition de texte.
En fonction de vos projets, vous serez peut-être tenté de changer. Malgré sa simplicité,
Notepad++ est utilisé dans une grande variété de projets.
Il s’agit d’un éditeur de code réservé à Windows, ce qui explique l’élément « plus-plus » de
son nom. Bien entendu, Notepad est un éditeur de texte simple que l’on trouve par défaut
dans les installations Windows. Notepad++ ressemble à son frère, mais il comprend
également des fonctions spécifiques au développement, telles que :
Fenêtres à onglets et divisées
Prise en charge de près de 80 langages de programmation
Fonction d’autocomplétion
Liste de fonctions, qui permet de visualiser d’un coup d’œil toutes les fonctions utilisées
dans un fichier.
De plus, Notepad++ est flexible en matière de gestion de projets. Il prend en charge trois
approches différentes : les sessions, les espaces de travail et les projets. Lorsque vous
commencerez à vous familiariser avec Notepad++, vous verrez que vous pouvez l’utiliser
pour des projets plus importants que des scripts d’une seule page.
Nous pensons que Notepad++ va convenir aux développeurs qui veulent une grande
fonctionnalité, qui est également personnalisable. À l’usage, il a le côté open source de Vim,
ce qui convient mieux à certains types de projets qu’à d’autres.
8. La suite JetBrains
Lorsqu’il s’agit d’IDE de développement, la suite de solutions JetBrains va se trouver en haut

de votre liste (ou tout près). Le modèle commercial est astucieux, car si JetBrains propose de
nombreux éditeurs, ils sont en fait tous des « sous-ensembles » de son éditeur phare, IntelliJ
IDEA.
— IntelliJ IDEA est un IDE Java de premier plan.
IDEA se présente comme un IDE Java. Il prend en charge pratiquement toutes les
fonctionnalités des autres outils IDE de sa gamme. Et en tant que tel, il prend également en
charge de nombreux langages de programmation.
Par exemple, PyCharm reprend la plupart des fonctionnalités Python d’IDEA et en fait son
propre outil. Vous trouverez également phpStorm et WebStorm qui font la même chose.
— PyCharm est un IDE spécifique à Python qui est populaire.
L’utilisation d’IDEA est un jeu d’enfant – JetBrains a fait un excellent travail pour vous faire
coder plutôt que de vous plonger dans les configurations et les réglages. Cela peut
surprendre, mais la frontière entre l’utilisation d’un éditeur en ligne de commande tel que Vim
et l’utilisation d’IDEA est souvent mince.
Les deux outils mettent l’accent sur le flux de travail et l’efficacité, mais IDEA vous permet
également d’importer les liaisons clavier de Vim si vous êtes à l’aise avec cette méthode de
travail.
— Les extensions IDEA vous permettent d’utiliser les liaisons clavier de Vim pour vous donner l’impression
d’être un magicien.
Nous supposons que vous utilisez probablement IntelliJ IDEA si vous travaillez dans le cadre
d’un grand projet ou d’une entreprise ayant conclu un accord sur les logiciels. Cela peut être
pour partager des projets ou pour travailler dans un environnement cohérent. De nombreux
développeurs WordPress utilisent les produits JetBrains en raison de leur capacité à gérer
des projets.
Le prix est également un facteur, et IntelliJ est construit sur un modèle d’abonnement qui
atteint souvent trois ou quatre chiffres par an.
— L’écran de tarification d’IntelliJ IDEAs.
Malgré cela, il existe des éditions « communautaires » des produits JetBrains. Cependant, il
s’agit de versions réduites du logiciel parent ; essentiellement, ce sont des solutions open
source dont les éléments propriétaires ont été retirés.
De plus, JetBrains propose des prix compétitifs pour les projets open source, les startups, les
établissements d’enseignement et de nombreux autres groupes de niche.
Outils de conception et de prototypage de sites web
Bien sûr, une application web n’est rien sans une bonne expérience utilisateur (UX). À ce
titre, le prototypage de vos mises en page et de vos visuels nécessite souvent un outil dédié.
Les outils de conception seront essentiels tant du côté serveur que du côté client du
développement. Voici quelques choix populaires.
9. Figma
Figma est un outil de développement web souvent mentionné qui vous permet de collaborer à
la conception.
— L’éditeur Figma.
Vous pouvez utiliser l’éditeur en glisser-déposer pour créer des interfaces et d’autres
éléments destinés aux utilisateurs. Pour les développeurs, vous pouvez également récupérer
des extraits de code à implanter dans vos projets. Figma rend le processus – de l’idéation à
la mise en œuvre – fluide et réduit les révisions tout au long de la chaîne du projet.
Vous bénéficiez également d’un ensemble homogène d’outils pour vous aider à choisir les
polices et les couleurs. Ce processus s’oppose à l’utilisation d’outils distincts tels que Type
Scale :
— Le site de Type Scale.
…et un sous-ensemble d’outils de développement web tels que Adobe Color, Coolors, divers
sélecteurs de couleurs, et bien plus encore.
— Le sélecteur de couleurs Coolors.
Bien que Figma ait de la valeur pour les projets d’un développeur, il présente davantage
d’avantages pour une équipe à mesure que sa taille augmente. Les équipes apprécieront les
aspects collaboratifs de Figma, tels que le référentiel central des ressources et les
composants réutilisables. Les chefs d’équipe apprécieront également les options complètes
de rapport permettant de voir comment les membres de l’équipe utilisent les différents
systèmes de conception.
En ce qui concerne la tarification, Figma coûte 12 $ par « éditeur » sur le niveau standard, qui
passe à 45 $ par « éditeur » pour les équipes basées sur l’entreprise (pour « éditeur », lire
« place » – c’est le même concept). Le prix peut donc augmenter en fonction du nombre
d’éditeurs que vous souhaitez intégrer.
10. Sketch
Sketch est une application réservée à macOS qui est également très citée par les
développeurs :
— Le logo Sketch.
Il est populaire parce que Sketch comprend de nombreuses fonctionnalités, et il est

également très facile à utiliser, ce qui est logique étant donné qu’il s’agit d’une application
macOS native. Il ressemble un peu à l’IDE Xcode d’Apple, ce qui n’est pas une mauvaise
chose, et sa navigation est agréable.
Bien sûr, vous pouvez exécuter des fonctions essentielles telles que l’édition vectorielle et le
redimensionnement des contraintes. Cependant, l’application offre bien d’autres possibilités
qui vous aideront à créer des designs et à les exporter rapidement.
Prenez par exemple la fonctionnalité Smart Layout de Sketch, qui utilise un

redimensionnement adaptatif pour s’adapter à vos dimensions et à la mise en page actuelle.
Il existe également de nombreux outils de collaboration qui permettent à chacun de se
plonger dans une conception et de participer à son perfectionnement.
— Un aperçu de Sketch pour Teams.
Sketch diffère d’un outil tel que Figma en ce sens qu’un free-lance ou un développeur
solitaire peut y accéder gratuitement, puis souscrire un abonnement en cas de besoin. À cet
égard, le prix de Sketch est soit un paiement unique de 99 $, soit 9 $ par mois et par
utilisateur.
11. InVision Studio
InVision Studio se vend uniquement comme une application de « conception d’écran ». C’est
logique, et c’est aussi plus facile à comprendre. InVision Studio offre toutes les
caractéristiques et fonctionnalités standard que vous êtes en droit d’attendre, telles qu’un
éditeur intuitif basé sur des calques et la prise en charge des vecteurs.
— L’application InVision Studio.
Cependant, il contient bien d’autres fonctionnalités liées au prototypage et à la création

d’animations. Par exemple, vous pouvez pointer, cliquer et faire glisser pour relier les
tableaux et les écrans entre eux. Cette fonctionnalité vous permet de créer des animations
dans le cadre du processus de conception plutôt que de les transmettre ultérieurement.
— Animations dans l’application InVision Studio.
En parlant de transfert, toute l’équipe peut travailler dans InVision Studio grâce aux
bibliothèques de composants partagées, aux options de synchronisation globale, à un mode
d’inspection robuste, etc.
La structure tarifaire est également compétitive. La version gratuite d’InVision Studio vous
offre presque toutes les fonctionnalités de la version payante, avec seulement une restriction
sur le nombre de documents que vous pouvez enregistrer. Le niveau Pro est très intéressant
pour la puissance de l’application (environ 95 $ par utilisateur et par an).
12. Affinity Designer
Si vous êtes un utilisateur d’Adobe Illustrator, vous avez certainement déjà rencontré Affinity
Designer par le passé. L’approche de Serif en matière de conception graphique semble
donner du fil à retordre à la solution d’Adobe :
— L’application Affinity Designer.
Depuis son lancement, il a gagné une base d’utilisateurs en plein essor grâce à ses bons
rapports avec la communauté, à ses principes de conception remarquables et à son modèle
de prix attrayant. Vous trouverez des versions pour Mac, Windows et iPad, et chaque version
peut travailler avec des vecteurs, des trames ou les deux à la fois :
— L’éditeur d’Affinity Designer.
Les outils auxquels vous êtes habitué dans Illustrator sont tous présents, ainsi qu’une suite
complète de profils de couleurs et d’options d’exportation :
— Les options d’exportation dans Affinity Designer.

En bref, les caractéristiques et les fonctionnalités sont en place pour créer des graphiques
professionnels pour vos projets. De plus, le prix est extrêmement compétitif. Il coûte environ
50 $ à plein tarif, ce qui représente un paiement unique. Il ne dispose pas d’une option
appropriée basée sur le cloud comme Illustrator. Malgré tout, pour un paiement unique, vous
bénéficiez de l’étendue d’Adobe, présentée de manière subjectivement meilleure.
13. CodePen ou JSFiddle
Lorsque nous avons abordé IntelliJ IDEA précédemment, nous n’avons pas mentionné l’une
de ses fonctionnalités mineures mais très pratiques : les fichiers Scratch. Ils vous permettent
d’écrire et de tester rapidement un extrait de code sans avoir à modifier votre projet en cours.
Pour les utilisateurs d’autres éditeurs de code, une solution telle que CodePen ou JSFiddle
est un excellent substitut. Ils fonctionnent tous deux de manière similaire : il y a trois éditeurs
de texte pour HTML, CSS et JavaScript, et un écran de sortie pour voir le résultat :
— La console CodePen.
Vous pouvez nommer votre « Pen » ou votre « Fiddle » en fonction de votre plateforme,
l’enregistrer et le partager avec d’autres. Il s’agit d’une idée si simple, qui peut vous aider à
concrétiser en quelques secondes vos idées à peine formulées sur un aspect d’un projet.
Pour les développeurs qui souhaitent mettre en lumière un élément particulier d’un fichier et
montrer où des modifications sont possibles, un « IDE en ligne » est précieux. En outre, la
collaboration est également possible par le biais du tchat ou d’un « micro en direct » :
— L’écran de collaboration de JSFiddle.
Dans l’ensemble, un IDE en ligne peut être considéré comme un outil de développement web
« dormant », dans la mesure où il n’est pas mentionné trop souvent mais est utilisé par de
nombreux développeurs pour créer un meilleur code.
Clients Git
Disposer d’un moyen centralisé pour stocker du code, documenter les changements et
travailler dessus avec une équipe sans duplication est une tâche pour un système de contrôle
de version (VCS). Voici quelques clients qui gèrent un seul VCS : git.
Parlons d’abord du VCS lui-même.
14. Git
Git est essentiel pour un développeur moderne, et en tant que tel, c’est l’un des outils
disponibles de développement web les plus cruciaux. En bref, il s’agit d’un moyen de
documenter les modifications que vous apportez au code de votre projet et de les stocker
dans des « dépôts » :
— Une liste des commits GitHub de WordPress.
Git a été inventé par le créateur de Linux, Linus Torvalds, et utilise une série de commandes
pour ajouter des modifications de fichiers à une « zone de staging », où vous faîtes des
« commits » vers un dépôt. De là, vous les « pousserez » vers un dépôt distant hébergé en
ligne.
Bien que ce ne soit pas le seul VCS disponible – l’équipe de développement de WordPress
utilise toujours Trac pour de nombreux projets – c’est le plus important. Un VCS tel que Git ou
Trac aide les équipes à travailler ensemble en hébergeant le code dans un emplacement
central.
Les commandes de base sont des fonctions d’un seul mot précédées de git, souvent utilisées
à partir de la ligne de commande. Par exemple :
git add file.php
Cette expression ajoute file.php à votre zone de staging. En d’autres termes, elle enregistre
les modifications comme quelque chose que vous aimeriez stocker sans y mettre la touche
finale. Vous pouvez faire cela avec un fichier ou un projet entier si vous le souhaitez.
Pour commiter le fichier, vous exécutez git commit. À partir de là, vous pouvez ajouter un
commentaire pour informer les autres de vos commits. Après cela, vos modifications sont
stockées et poussées vers la « branche » principale. Bien sûr, cela dépend si vous travaillez
sur un « repo » distant.
Si vous êtes novice en matière de Git et de VCS en général, GitLab propose un excellent
guide d’initiation à l’utilisation de Git en ligne de commande. Nous parlerons également un
peu plus tard de GitLab lui-même.
15. GitHub
— La page GitHub de Kinsta.
Pour la grande majorité des développeurs, GitHub est l‘endroit où sont stockés les dépôts Git
des projets :
— Dépôts GitHub de WordPress.
Il s’agit d’une solution appartenant à Microsoft qui couvre bien plus que l’hébergement de Git.
Il existe également un certain nombre d’outils de tests automatisés et une tentative d’offrir
des fonctions de collaboration supplémentaires.
— Les fonctions de collaboration de GitHub.

Pour les projets open source, les plateformes telles que GitHub sont presque l’option de
facto. De ce fait, GitHub en tant qu’outil de développement web est inestimable pour de
nombreux utilisateurs, apprenants et développeurs open source en général. C’est
particulièrement vrai lorsqu’il s’agit de fouiller dans le gestionnaire de problèmes de GitHub
pour résoudre un problème avec les paquets installés.
— Le gestionnaire de problèmes de GitHub.
GitHub ne sert pas seulement à stocker les dépôts de programmes. Il sert également à
d’autres projets de code, comme le développement web, et même à des livres.
Globalement, GitHub est un outil fantastique qui aide à construire une communauté saine à
partir de nombreuses branches disparates. Cependant, ce n’est pas la seule plateforme
existante.
16. GitLab
— Le logo GitLab.
Nous l’avons mentionné précédemment, mais GitLab est un concurrent de GitHub, avec un
objectif similaire. Il s’agit essentiellement d’un hébergeur pour les dépôts Git, mais il offre
également quelques autres avantages.
Alors que GitHub se définit comme une « plateforme de développement », GitLab se

concentre sur le « DevOps ». Dans sa version gratuite, GitLab propose toutes les étapes du
cycle de vie DevOps, des tests statiques de sécurité des applications et environ 400 minutes
par mois pour le développement continu (CD) et l’intégration continue (CI).
GitLab se distingue par son sens de la communauté, qui est la grande différence avec
GitHub. Il s’agit davantage de déploiement et du cycle complet d’un projet. Ce n’est pas un
point négatif, mais cela signifie que GitLab est une plateforme plus « insulaire », sans doute
pas aussi adaptée aux projets open source que GitHub.
Pour la plupart des équipes, le volet gratuit de GitLab sera suffisant. Pour environ 230 $ par
an et par utilisateur, vous avez accès à des analyses de votre code et de votre productivité, à
environ 10.000 minutes de CD/CI, etc.
17. Sourcetree
Sourcetree n’est pas un hébergeur de dépôt Git, mais une interface utilisateur graphique
(GUI) pour les gérer. C’est l’une des nombreuses solutions, telles que GitKraken, Sublime
Merge, GitHub Desktop, et bien d’autres.
— La page d’accueil de Sourcetree.

Il s’agit d’un produit Atlassian (et nous aimons Atlassian !) qui se connecte à d’autres produits
tels que Bitbucket pour offrir une représentation visuelle de votre dépôt Git.
Sourcetree est commercialisé comme un client Git facile – et il l’est – mais il convient
également aux utilisateurs expérimentés. Il a tout ce qu’il faut pour soutenir une équipe
travaillant avec Git (et Mercurial aussi).
Par exemple, Sourcetree fait des choses simples, telles que mettre en évidence les
changements depuis le dernier commit, mais il s’attaque aussi à plus si vous en avez besoin.
Les chefs d’équipe peuvent examiner les ensembles de modifications, travailler entre les
branches si nécessaire et visualiser le code à l’aide de graphiques et d’onglets d’information :
— Vue graphique de Sourcetree.

Le choix d’un client Git dépend de votre situation. Si vous êtes encore en train d’apprendre,
nous vous recommandons de vous en tenir à un Terminal pendant que vous comprenez le
flux et le processus. Pour les professionnels ou les équipes qui utilisent beaucoup Git, un
client tel que Sourcetree va vous faire gagner du temps dans votre travail quotidien.
Outils pour les développeurs de navigateurs
Sans navigateur web, il n’y a pas de développement web. Toutefois, si le navigateur que vous
avez choisi est essentiel pour naviguer sur le web, vous pouvez également l’utiliser pour
découvrir son fonctionnement.
La plupart des navigateurs modernes incluent des outils de développement spécifiques pour
vous aider à analyser le code backend, que vous pouvez ensuite reprendre dans votre projet.
Voici quelques-uns des plus populaires.
18. Outils Chrome pour les développeurs
Les « DevTools » de Chrome sont vénérés dans toutes les communautés pour leur ensemble
de fonctionnalités et de diagnostics exceptionnels.
Compte tenu de la montée en puissance des navigateurs basés sur Chromium, beaucoup
d’entre eux disposent du même ensemble d’outils de développement avec des raccourcis
similaires. Vous pouvez consulter Microsoft Edge, Brave, Chromium lui-même et bien
d’autres clones et travailler sur vos projets dans le navigateur.
— Les DevTools du navigateur Brave.
L’onglet Éléments sera régulièrement visité, car c’est là que vous pourrez visualiser le code
source de la page. Et à notre avis, l’onglet Performance donne des informations sur le
chargement des pages que les autres outils de développement de navigateur ne peuvent pas
égaler :
— L’onglet Performance de Brave.
L’onglet Sécurité donne également de bonnes informations, qui seront nécessaires pour
surveiller (ou rechercher) le site web d’un client :
— L’onglet Sécurité de Brave.
Mieux encore, vous serez en mesure de générer des rapports Google Lighthouse directement
à partir de votre navigateur basé sur Chromium :
— Un rapport de Google Lighthouse depuis les DevTools de Brave.
Les DevTools sont subjectivement les meilleurs, et les utilisateurs de Chrome et de

Chromium s’appuieront sur eux. Cependant, d’autres navigateurs disposent également de
DevTools, qui méritent d’être pris en considération.
19. Outils Firefox pour les développeurs
— La page d’accueil de Firefox.
Avec une base d’utilisateurs actifs mensuels d’environ 220 millions, Firefox est toujours un
navigateur populaire, malgré la domination de Google. Dans le passé, les développeurs ont
fait l’éloge de Firebug, qui était souvent un leader en matière de débogage dans le
navigateur.
Aujourd’hui, nous avons les outils Firefox pour les développeurs :

— Les outils de Firefox pour les développeurs.
Il existe un ensemble de fonctions de base permettant de visualiser le code source du site (

inspecteur), un débogueur, la mémoire, le stockage, etc.
Pour les débutants, la console est une porte d’entrée vers le code en général, car vous
pouvez exécuter JavaScript directement dans le navigateur, et c’est un moyen facile de tester
des extraits de code et de trouver vos marques lorsque vous commencez :
— Un exemple de console de navigateur.
Malgré cela, nous pensons que Firefox (et d’autres navigateurs) a moins d’atouts dans ses
outils de développement que les navigateurs basés sur Chromium. Pourtant, pour le
débogage et le dépannage inter-navigateurs, vous ferez souvent appel à Firefox. En tant que
tel, c’est une bonne chose qu’il soit idéal pour presque toutes les tâches.
Frameworks frontend
En ce qui concerne le frontend, vous aurez besoin d’un outil adapté à la création de sites web
époustouflants. Le choix du framework est ici crucial. Vous devez toujours sélectionner le
meilleur outil pour le travail.
Dans cette optique, examinons quelques choix populaires.
20. Bootstrap
La réactivité mobile est une caractéristique standard de la conception web moderne. Il s’agit
d’une étape bienvenue, étant donné que la navigation mobile a désormais dépassé celle des
ordinateurs de bureau. Dans ces conditions, vous devez pouvoir créer rapidement des sites
adaptés aux mobiles.
Bootstrap est un excellent outil de développement web qui connaît un grand succès :
— Le logo de Bootstrap.
Il s’agit d’une boîte à outils qui combine des extensions JavaScript, des variables Sass, des
composants pré-construits, un système de grille réactive de qualité, et bien plus encore. Il
existe même une place de marché de thèmes officiels qui fonctionnent avec Bootstrap, et de
nombreux sites WordPress utilisent également des thèmes construits à partir de ce
framework de conception.
Bien sûr, l’utilisation ou non de Bootstrap dépendra des besoins de votre projet. Cependant, il
est logique de supposer que les projets de développement web ayant un budget serré et des
délais d’exécution rapides se tourneront vers une solution « Bootstrap » et l’adapteront à
WordPress. Étant donné que le framework et WordPress sont gratuits, votre temps devient le
seul facteur de coût.
21. Tailwind CSS
Sur le papier, Tailwind CSS n’a aucun sens. Il s’agit d’un framework frontend pour un langage
qui fait partie de la trinité de base du développement web. En tant que tel, il est logique de
penser que l’utilisateur cible possède déjà les connaissances nécessaires sans avoir besoin
d’un framework.
En réalité, Tailwind CSS est parfaitement logique. C’est un moyen de concevoir l’interface
publique de votre site sans quitter le HTML.
— Un exemple de CSS Tailwind.
Vous utilisez des classes utilitaires dans diverses balises pour ajouter du CSS à partir d’une
feuille de style principale. Bien entendu, le CSS reste la principale source de style. Il est
simplement hors de votre vue lorsque vous construisez une mise en page à l’aide de HTML.
Ainsi, il vous permet de développer en même temps la structure et le style.
Cette approche nous rappelle le système Grid 960 et s’intégrerait bien dans ce framework.
Cela dit, il y a un risque de bourrer les éléments de tant de classes que vous pourriez vous
retrouver avec un « code spaghetti ». Il vous faudra de la patience et de la discipline pour
travailler avec Tailwind CSS, mais s’il convient à votre projet, c’est un framework rapide et
robuste.
22. Bulma
Nous avons fait tous les progrès que nous avons fait avec la conception des structures de
site et des mises en page, la création de colonnes flexibles, réactives et dynamiques un
barrage pour beaucoup. Bien que ce ne soit pas la seule chose que Bulma peut faire, ce type
d’application est l’élément essentiel du framework :
— Le site de Bulma.
Tout comme Tailwind CSS, Bulma cache le CSS et vous donne des classes utilitaires pour
votre HTML. Il est construit avec Flexbox, axé sur le mobile, et modulaire. Il est idéal si vous
n’avez besoin que de quelques composants. Vous pouvez également mélanger les
frameworks si vous le souhaitez.
De plus, vous n’avez pas besoin de JavaScript pour mettre Bulma en service, car il s’agit
uniquement de CSS. Vous pouvez ajouter des éléments d’interface tels que des boutons
avec le strict minimum de code. Il s’agit d’un framework simple et open source qui peut
s’adapter aux besoins de votre propre projet. À notre avis, c’est une caractéristique précieuse
que vous avez tout intérêt à exploiter.
23. Foundation
L’équipe de ZURB propose une approche unique du framework CSS avec Foundation. Il
s’agit d’un outil sémantique axé sur le mobile qui se décline en deux versions, pour les sites
et les e-mails :
— La page d’accueil de Foundation.
Foundation est construit avec l’accessibilité comme priorité. Chaque extrait de code de
Foundation est doté d’attributs ARIA dédiés. Toutefois, avant d’en arriver à ce stade,
Foundation est impressionnant pour le prototypage rapide en raison de la manière dont vous
l’ajoutez à votre HTML. Vous êtes en mesure de créer presque tous les éléments structurels
de votre page, même différents types de menus et de navigation :
— Création d’un menu de navigation dans Foundation.
ZURB fournit également une abondante et excellente documentation et des tutoriels pour
vous permettre d’apprendre les tenants et aboutissants du framework. Foundation est simple
à utiliser, mais nous pensons que vous pouvez vous lancer dans la construction de sites et en
sortir avec des mises en page et des fonctionnalités complexes.
Vous trouverez également un certain nombre de modèles sur le site de Foundation. Il s’agit
de maquettes brutes pour vous aider à démarrer – une inclusion bienvenue :
— Bibliothèque de modèles de Foundation.

Dans l’ensemble, le framework Foundation fait ce qu’il est censé faire. Il va jouer un rôle
central dans le développement de votre site, plutôt que de vous permettre d’ajouter des
fonctionnalités. En tant que tel, vous ne l’utiliserez peut-être pas pour tous les projets.
Cependant, lorsqu’il est utilisé, il fait l’affaire sur toutes sortes de sites.
24. Matérial-UI
Nous aborderons React plus en détail ultérieurement, mais pour l’instant, sachez que
Material-UI est basé sur la bibliothèque de composants de ce framework JavaScript. Pour les
non-initiés, Material Design est la « philosophie » de Google sur la façon de concevoir
l’interface d’un site web. Cela signifie beaucoup de polices Roboto et de blocs de couleur :
— Material-UI cherche à répondre aux standards de conception de Google.
Vous importerez la bibliothèque dans React, puis utiliserez des balises HTML dédiées pour
construire votre site :
— Création d’un bouton dans Material-UI.
Pour personnaliser davantage l’élément, vous ajoutez des classes à vos balises HTML.
L’ensemble du bloc de code est enveloppé dans une fonction, et vous rendrez les détails (et
la page par extension) dans React.
De nombreux thèmes gratuits et premium sont également disponibles, couvrant de nombreux

cas d’utilisation et de prix :
— La bibliothèque de thèmes Material-UI.
Puisque Material-UI a un cas d’utilisation spécifique – la création de sites autour du Material

Design – il sera un framework de référence si c’est votre objectif. En particulier, la
bibliothèque de thèmes sera une ressource précieuse pour démarrer, quel que soit votre
budget.
25. HTML5 Boilerplate
— La page d’accueil de HTML5 Boilerplate.
Si vous êtes un développeur WordPress, vous avez peut-être déjà rencontré Underscores. Il
s’agit d’un thème WordPress de base qui vous permet d’économiser un nombre incalculable
d’heures à rassembler les éléments fonctionnels et essentiels de votre site. HTML5
Boilerplate fait la même chose au niveau de la conception générale.
En tant que tel, il comprend sept fichiers couvrant le HTML, le CSS et le JavaScript. Ils ne
contiennent que les fichiers et le code les plus nécessaires au rendu d’une page. Au-delà de
ce point, c’est vous qui décidez du résultat de votre page.
HTML5 Boilerplate a de nombreux fans car il s’agit davantage d’un utilitaire permettant de
gagner du temps que d’un framework à part entière. Ainsi, il n’y a pas de visuels prêts à
l’emploi pour épater le « client de passage », mais si vous mettez HTML5 Boilerplate en
service, vous découvrirez peut-être qu’il accélère votre développement comme Underscores
le fait pour les développeurs WordPress.
26. Matérialize
Bien que nous ne considérions pas Materialize comme un concurrent de Material-UI, il s’agit
d’un autre framework qui cherche à utiliser les principes de Material Design pour créer une
mise en page :
— La page d’accueil de Materialize.
Cependant, plutôt que d’utiliser React, Materialize est un framework CSS. Cela rend
Materialize plus facile à mettre en œuvre sur l’interface publique. Comme pour les autres
frameworks CSS, vous utilisez des classes dans le code HTML pour faire apparaître des
éléments sur l’interface publique.
Cela dit, il existe également un certain nombre de composants JavaScript pour des éléments
tels que les modales et les menus déroulants :
— Un menu déroulant créé avec Materialize.
Comme beaucoup de ces frameworks, il existe des thèmes premium qui vous aident à créer
des mises en page dans un style spécifique. Il s’agit toutefois de thèmes HTML statiques, ce
qui peut poser problème si vous souhaitez implémenter JavaScript. Dans ce cas, vous
pouvez envisager d’utiliser Material-UI.
Frameworks d’applications web
En termes simples, un framework ou une bibliothèque JavaScript vous permet de travailler

différemment avec le code dit « Vanilla ». Dans le cas présent, il s’agit de créer des
applications et des sites web spécifiques. Il existe également de nombreuses « saveurs »,
dont nous allons vous présenter quelques-unes.
27. React.js
— Un exemple de code React sandbox.
React.js est une bibliothèque JavaScript populaire, conçue par Facebook, qui propulse un
grand nombre des éléments les plus modernes de WordPress. Le backend de
WordPress.com et l’éditeur de blocs utilisent tous deux React, et nous considérons qu’il s’agit
d’une façon d’utiliser JavaScript en privilégiant l’interface.
— Le backend Calypso de WordPress.com est construit sur React.
En tant que tels, les développeurs WordPress devraient – pour paraphraser Matt Mullenweg
– apprendre React.js en profondeur. Cependant, il ne s’agit pas seulement d’un framework
pour les développeurs WordPress.
Partout où vous avez besoin d’une interface utilisateur (IU) moderne et dynamique, React
sera le premier choix à considérer. Il utilise une extension syntaxique de JavaScript appelée
JSX pour créer des éléments, qui sont ensuite rendus dans le module d’objet de document
(DOM) :
const name = "Ken Starr';

const element = <h1>Hello, {name}</h1>;
ReactDOM.render
Element,
document.getElementById('root')
);
La variable JavaScript au sein de JSX peut être n’importe quelle expression valide, ce qui
vous permet de construire des arguments complexes. Cela fait de React un choix solide en
matière de frameworks. En raison de sa popularité, nous pensons que React devrait figurer
sur votre liste d’apprentissage indispensable, quel que soit l’endroit où vous passez votre
temps de développement.
28. Vue.js
Vue.js est un autre framework JavaScript pour la création d’interfaces utilisateur. Il est basé
sur le « calque de vue » et est idéal pour l’intégration avec d’autres bibliothèques et
frameworks.
— Sandbox de Vue.js.
Du côté HTML, Vue ne pourrait pas être plus accessible. Vous donnez à votre balise un ID et
appelez une clé à partir d’un dictionnaire défini du côté JavaScript. Les données sont
maintenant réactives, et les données et le DOM sont liés.
En ce sens, Vue.js ressemble beaucoup à certains des frameworks CSS que nous avons
examinés plus tôt dans l’article. Ce framework est convaincant, et nous vous encourageons à
parcourir la documentation pour voir ce qui est possible.
Bien que Vue.js prenne en charge les déclarations JSX, il est plus adapté à l’utilisation de
modèles basés sur les technologies web « classiques ». En tant que tel, il sera idéal pour les
développeurs qui ne veulent pas travailler uniquement en JavaScript.
29. Express.js
Nous entrons ici dans le domaine des méta-frameworks, car Express.js se connecte à
Node.js et sert de base à d’autres frameworks.
— La page d’accueil d’Express.js.
Il s’agit d’un framework minimaliste (d’où son nom), dont l’un des principaux avantages est de
vous aider à organiser les composants côté serveur dans un format MVC (Modèle-Vue-
Contrôleur) familier. En tant que tel, le code semble plus compliqué que celui d’autres
frameworks – même celui de Vanilla JavaScript :
var express = require('express');
var app = express();

app.get('/', function(req, res){
res.send("Hello world!");
});
app.listen(3000);
Nous pensons qu’Express.js va convenir aux applications qui tirent et poussent beaucoup de
bases de données. Il convient donc à de nombreuses applications web modernes et aux
développeurs backend qui souhaitent travailler sur des tâches frontend avec un minimum de
stress.
30. Svelte.js
Une bonne règle à suivre lors du développement pour le web est de s’assurer que vos sites
fonctionnent sur le plus grand nombre de navigateurs possible. Cela dit, dans certains cas,
vous pouvez vouloir créer des applications ou des sites web sans prendre en charge les
anciens navigateurs. Dans ces cas-là, Svelte.js doit figurer en haut de votre liste.
— La page d’accueil de Svelte.js.
Le framework doit son nom à la taille de son fichier, qui ne fait que 5 Ko une fois minifié. Il a
un format semblable à jQuery qui sera facile pour les utilisateurs familiers :
$('.hello').text("Hello svelte");
Il y a moins de 40 fonctions dans l’API Svelte, donc la prise en main sera simple. De plus,
vous pouvez ajouter facilement de nouvelles fonctions en utilisant $.fn.
Vous trouverez des « polyfills » pour le support d’Internet Explorer 9, mais c’est presque la
seule concession. Pour un support de navigateur hyper moderne utilisant un framework très
léger, Svelte.js pourrait être celui qu’il vous faut.
31. Laravel
Jusqu’à présent, nous avons examiné les frameworks JavaScript ou CSS. Étant donné la
prévalence de PHP, il est logique de couvrir également un framework pour ce langage.
Laravel est le choix idéal ici, car il est populaire pour de nombreux développeurs pour sa
syntaxe et son écosystème :
— La page d’accueil de Laravel.
Il est plus juste de dire que Laravel est un écosystème, car il comprend de nombreux outils
pour vous aider à monter des projets. Même si vous n’utilisez pas beaucoup le framework lui-
même, vous pouvez utiliser Homestead de Laravel, un environnement de développement
local basé sur Vagrant.
Laravel lui-même est un framework PHP basé sur Docker et utilise un CLI (appelé Sail) pour
interagir avec lui. Tout comme Vagrant, vous utiliserez Sail pour construire des conteneurs et
les exécuter.
Mais Laravel a bien d’autres cordes à son arc. Par exemple, vous pouvez l’utiliser comme un
framework complet, un backend API pour les applications Next.js, et presque tout le reste.
Si vous êtes un développeur PHP, Laravel sera un outil central (si ce n’est familier) dans
votre flux de travail.
32. Gatsby
Gatsby est un framework frontend open source qui a suscité beaucoup d’attention ces
derniers temps. C’est parce que Gatsby est rapide, évolutif, performant et sécurisé.
— La page d’accueil de Gatsby.
Il y a un processus d’installation super rapide impliquant le Node Package Manager (npm).

Nous en dirons plus à ce sujet ultérieurement. Bien qu’il s’agisse d’un framework JavaScript,
Gatsby génère des fichiers HTML statiques au moment de l’exécution, de sorte qu’il n’y a
aucun moyen d’attaquer un site. De plus, Gatsby automatise les performances pour que votre
site fonctionne dans une configuration optimale.
Entre les performances automatisées, la mise à l’échelle dynamique et la construction HTML

statique, Gatsby ressemble à un organisme vivant. Il existe un « maquillage » de code
complexe impliquant JSX, Markdown, CSS, et bien plus encore, en fonction de vos besoins.
Chaque étape de votre flux de travail et chaque élément de votre pile peut être adapté à vos
besoins.
Les développeurs WordPress apprécieront également la façon dont Gatsby s’intègre à la
plateforme. Cependant, il ne conviendra pas dans tous les cas. Par exemple, si vous avez
besoin de gérer entièrement un CMS basé sur le cloud, ce n’est pas pour vous. Malgré tout,
Gatsby peut s’adapter à votre projet dans la plupart des cas, et il fonctionne parfaitement
avec WordPress.
33. Django
Malgré tout ce qui se dit sur le fait que Python est un langage de programmation « débutant »
ou « d’apprentissage », il sert d’épine dorsale à de nombreux sites très en vue. Certains des
plus grands sites web – Instagram, Uber, Reddit, Pinterest, etc. – utilisent Django. Souvent,
vous ne trouverez aucune mention de Python lui-même, mais uniquement de Django.
Django est un framework qui utilise Python pour créer des applications web côté serveur. Il
est aussi simple à utiliser que Python lui-même, avec un format extrêmement lisible.
— Le formatage par défaut de Django.
Python est un excellent langage de script pour les projets basés sur la logique. Il est donc
tout à fait approprié de l’utiliser pour une application web. De plus, la vitesse de traitement de
Python est rapide, et la structure fondamentale des fichiers est légère. Parce qu’il est rapide,
Django est un excellent framework côté serveur par rapport à PHP et possède autant de
puissance que le langage le plus populaire.
Cela dit, le taux d’adoption est plus faible, ce qui pourrait être dû à la réputation de Python en
tant que langage d’apprentissage. Malgré cela, Django fonctionne bien avec d’autres
langages, tels que JavaScript, pour constituer la base d’une application web moderne.
Bien sûr, si vous prévoyez d’utiliser un CMS tel que WordPress, ou si vous créez des
solutions pour des projets basés sur React, vous avez moins d’options. Malgré cela, nous
pensons que 2022 verra une augmentation du nombre de sites fonctionnant sur Django.
34. Ruby on Rails
Le langage de programmation Ruby était le « chouchou » des langages pour débutants et

des alternatives de script à PHP il y a quelques années. Il est souvent comparé à Python.
Et tout comme Django, Ruby on Rails était également le favori de nombreux développeurs.
— La page d’accueil d’un nouveau projet Ruby on Rails.
Ruby est utilisé dans de nombreuses applications web côté serveur et sous le capot. En
outre, Ruby on Rails est utilisé comme framework côté serveur sur d’innombrables sites web.
Il utilise une approche MVC et offre des structures pour le service web, les pages et une base
de données. Ainsi, vous disposez d’un site de base prêt à l’emploi.
Ruby on Rails conviendra à votre projet s’il doit planifier de nombreux travaux et travailler
avec des solutions tierces. Par exemple, il existe une intégration native avec le stockage de
fichiers tel que Google Cloud, et un wrapper pour l’envoi d’e-mails.
Dans l’ensemble, il s’agit d’un bon choix si vous souhaitez disposer d’un ensemble robuste de
valeurs par défaut (telles que la structure des dossiers) qui peuvent être personnalisées si
nécessaire. En revanche, ce n’est pas un bon choix si vous aimez utiliser les API pendant le
développement.
La structure du code de Ruby on Rails peut devenir complexe et difficile à comprendre dans
le cadre de projets importants. Le temps d’exécution peut également être affecté, ce qui fait
que ce n’est peut-être pas le meilleur framework pour les projets dont la vitesse est critique.
Ruby on Rails n’en reste pas moins l’un des principaux frameworks web côté serveur, et son
utilisation ne faiblit pas pour les projets appropriés.
35. TypeScript
— Un exemple de code TypeScript.
En bref, TypeScript fournit un « contrôle de type » statique optionnel à JavaScript. Il s’agit

d’un « super ensemble » du langage, et il prend également en charge de nombreuses autres
bibliothèques JavaScript. Dans l’ensemble, TypeScript est JavaScript avec quelques
fonctionnalités supplémentaires, et vous pouvez compiler les deux langages l’un à côté de
l’autre.
De nombreux développeurs se sont tournés vers TypeScript pour réduire le nombre d’erreurs
d’exécution qu’ils obtiennent. Les erreurs de type sont l’une des plus courantes, et leur
réduction pourrait vous faire gagner beaucoup de temps.
Pour un exemple très simple de TypeScript, considérez une chaîne de caractères :
let helloWorld = « Hello World »;
// ^ = let helloWorld: string
Ici, TypeScript utilise let plutôt que l’habituel var pour la variable helloWorld. A partir de là,
TypeScript sait que helloWorld est une chaîne de caractères et le vérifie sur cette base.
En fin de compte, TypeScript n’est pas un outil de développement web essentiel, bien qu’il
soit devenu plus populaire en raison de sa caractéristique principale. Si vous parvenez à
gagner un temps précieux, il pourrait devenir vital pour votre flux de travail.
36. GraphQL
Voici un outil unique qui pourrait trouver grâce auprès des développeurs travaillant avec les
données d’une API. GraphQL est un langage de requête utilisé dans une API qui fait
également office de moteur d’exécution pour servir les résultats de la requête que vous
effectuez.
— Le site web de GraphQL.

Avec une API REST standard, vous devez souvent charger depuis plusieurs URL. Avec
GraphQL, vous pouvez récupérer des données à partir d’une seule requête. Qui plus est, les
API GraphQL sont classées par type plutôt que par points de terminaison. Cette classification
favorise l’efficacité de votre requête et fournit des erreurs plus explicites lorsque quelque
chose ne va pas.
Les types peuvent également être utilisés pour éviter d’écraser le code d’analyse manuelle,
étant donné la façon dont GraphQL les met en œuvre. Vous pouvez également ajouter de
nouveaux champs et types à votre API sans que cela n’ait d’incidence sur le travail que vous
avez effectué jusqu’à présent.
L’outil est flexible et évolutif dans de nombreux domaines. Comme GraphQL crée une API
uniforme pour votre projet, vous pouvez faire appel à un moteur correspondant au langage de
votre projet. Cela en fait un outil idéal pour un large éventail d’applications, plutôt qu’une
solution de niche à un problème répandu.
Vous trouverez GraphQL utilisé sur des sites tels que GitHub, Spotify, Facebook, etc. Cela
devrait vous donner une idée de la façon dont GraphQL est utilisé sur les sites à forte
intensité de requêtes de toutes sortes. En tant que tel, vous pourriez avoir besoin de faire
appel à cette solution plus d’une fois au cours des 12 prochains mois et au-delà.
Gestionnaires de paquets
Les langages de programmation, les frameworks, etc. comportent de nombreuses parties

mobiles. Ces dépendances doivent être téléchargées et installées de la bonne manière pour
fonctionner. C’est là qu’interviennent les gestionnaires de paquets. Ils vous aident à
télécharger et à installer des dépendances spécifiques à partir de la ligne de commande.
Passons en revue quelques outils que vous rencontrerez.
37. Node Package Manager (npm)
Oui, le téléchargement d’installateurs a sa place. Cependant, l’utilisation d’un gestionnaire de

paquets en ligne de commande est très simple dans la plupart des cas. Il fournit également
un moyen rapide de récupérer et d’installer des fichiers depuis le web.
Node Package Manager (npm) est un outil de développement web spécifique à JavaScript
appartenant à Microsoft qui vous permet d’installer à la demande des paquets spécifiques au
langage:
— La page d’accueil de npm.
Par exemple, la recherche de paquets React donne plus de 155.000 résultats:

— Une recherche effectuée dans npm.
À l’instar d’un IDE en ligne, npm est un outil de développement web qui ne bénéficie pas de
beaucoup de « temps d’antenne », principalement parce qu’il est omniprésent. En tant que
tel, pratiquement tous les développeurs web vont utiliser cet outil.
Cependant, il est incroyable, et maintenant qu’il est sous l’aile de GitHub, plus de
développeurs que jamais utiliseront npm en 2022.
38. Yarn
Tout comme npm et pip pour Python, Yarn vous aide à installer des paquets liés à votre
projet et à ses outils. La différence ici est que Yarn est aussi un outil de gestion de projet.
— La page d’accueil de Yarn.
L’installation est simple, et l’initialisation de Yarn pour un nouveau projet demande également
un minimum d’efforts. Il est devenu une solution open source robuste pour l’installation de
paquets et la gestion de votre projet en parallèle.
Vous utiliserez des espaces de travail pour créer des « monorepos », et plusieurs versions de
votre projet se trouvent dans le même repo et peuvent être référencées. Vous pouvez
installer des extensions pour tout ce que Yarn ne peut pas faire (pour lequel vous voulez
ajouter de nouveaux sélecteurs et résolveurs). Pour être plus précis, vous pourriez installer
des extensions, mais il n’y en a pas beaucoup, du moins dans les listes officielles. Au lieu de
cela, vous devrez coder votre propre code si vous êtes désespérément à la recherche de
cette fonctionnalité. Néanmoins, vous avez le choix de personnaliser Yarn en fonction des
besoins de votre projet.
Yarn a tout intérêt à devenir votre principal gestionnaire de paquets. Pour un projet réel, vous
pouvez vous appuyer davantage sur npm, mais Yarn s’insérera dans votre flux de travail
d’une manière qui ne pourra que vous être bénéfique.
API et outils de test
S’assurer que les choses fonctionnent est un processus souvent négligé, mais il
s’accompagne aussi de regrets lorsque les choses tournent mal. C’est pourquoi la phase de
test de votre projet doit être solide, robuste et approfondie.
Dans ce contexte, voici quelques outils d’API et de test que vous aurez à portée de main pour
vos projets.
39. HoppScotch
Propulsé par Netlify, HoppScotch est un outil de développement d’API open source. Les
développeurs le qualifient d’écosystème, ce qui est en contradiction avec les fonctionnalités
qu’il contient.
— La page principale de HoppScotch.
Il s’agit d’une solution simple et robuste, qui n’est pas pour les âmes sensibles. Si vous
n’avez jamais utilisé un tel outil, la courbe d’apprentissage est raide. Il n’y a pratiquement
aucune indication sur l’utilisation de HoppScotch sur les pages de l’application, mais ce n’est
généralement pas un problème, car l’outil est de toute façon destiné aux développeurs
expérimentés.
Il existe de nombreuses connexions en temps réel (WebSocket, SSE, etc.), et une
implémentation GraphQL. Nous apprécions également le créateur de la documentation:
— L’écran du créateur de la documentation HoppScotch.
Il fonctionne avec vos « collections » HoppScotch pour créer de la documentation à la volée,

ce qui constitue un gain de temps appréciable.
Dans l’ensemble, HoppScotch est un outil fonctionnel qui s’ouvrira beaucoup dans votre
navigateur. C’est l’une de ces solutions que vous utiliserez toujours sans vous en rendre
compte – nous ne pouvons pas lui faire plus d’éloges que cela !
40. Postman
— Le logo de Postman
Attention, nous sommes sur le point de mentionner le redoutable mot en « C » : collaboration.

Postman est un outil de développement web qui vous aide à créer en équipe une interface de
programmation d’applications (API) via la plateforme Postman :
— Le tableau de bord de Postman.
Il existe de nombreux cas d’utilisation pour intégrer Postman dans votre flux de travail. Par
exemple, vous pouvez l’utiliser de manière standard pour le développement d’applications, ce
qui se traduira directement par des projets basés sur le web. Vous pouvez simuler des points
de terminaison à l’aide de serveurs fictifs, ce qui intéressera particulièrement les
développeurs WordPress.
Vous pouvez même créer un système d’accueil pour aider les utilisateurs de vos API à
apprendre les ficelles du métier. Les projets qui connaissent une forte rotation des utilisateurs
ou un trafic important y trouveront leur compte.
En ce qui concerne les prix, Postman propose un niveau gratuit, mais c’est l’un des niveaux
premium qui vous apportera le plus de valeur. Vous devrez payer entre 12 et 30 $, en
fonction de votre cycle de facturation et du nombre d’utilisateurs.
41. Testing Library
Un code qui fonctionne est idéal, mais des applications qui fonctionnent sont l’objectif final.
Testing Library fait ce que son nom suggère : il fournit un ensemble d’utilitaires pour vous
aider à tester vos projets et vous encourager à utiliser de bonnes pratiques de code.
— La page d’accueil de Testing Library
L’idée est de créer des tests qui représentent l’utilisation de votre application. S’ils
fonctionnent sans problème, il y a de bonnes chances que votre application fonctionne aussi.
Il s’agit d’un outil agnostique en ce qui concerne le framework, et non d’un exécuteur de tests.
L’objectif principal de Testing Library est de vous aider à écrire des tests maintenables et
indépendants des détails de l’implémentation.
Tout ce qui se trouve dans l’outil Testing Library est centré sur ses principes directeurs. Ainsi,
vous ne faites pas que créer des tests, vous apprenez à les améliorer et à les rendre plus
utiles.
Pour cette raison, Testing Library pourrait devenir une partie importante de votre flux de
travail. Nous pensons que presque toutes les chaînes de projets pourraient bénéficier de
Testing Library, et les utilisateurs de React voudront certainement faire de cet outil un
standard.
Outils de collaboration
Malgré la troupe de développeurs antisociaux, la vérité est que la technologie et la

collaboration vont de pair.
C’est pourquoi nous vous présentons quelques outils de collaboration exceptionnels qui
s’intégreront parfaitement à votre prochain projet.
42. Jira
Atlassian est une entreprise très appréciée en matière de logiciels. Nous sommes de grands
fans de quelques-unes des offres de la société : Confluence, Trello, Sourcetree, Bitbucket et,
surtout, Jira.
— La page d’accueil de Jira.

Il s’agit d’un outil de développement destiné aux équipes qui utilisent des frameworks Agile,
en particulier Scrum, qui est très populaire. C’est la raison pour laquelle le logiciel est doté
d’une multitude de fonctionnalités. Par exemple, vous pouvez utiliser des tableaux Kanban
pour organiser les tâches et les sprints. Vous pouvez également mettre en œuvre votre
technique d’estimation, adaptée à votre méthodologie et à votre projet.
Jira se concentre sur un flux de travail reproductible : planification, suivi, publication et

rapport. Il est au cœur de plusieurs frameworks Agile, mais vous pouvez également créer le
vôtre en fonction de votre planification pré-projet. Si vous devez pivoter entre les sprints, vous
pouvez faire évoluer votre projet et le faire monter ou descendre en puissance.
La bonne nouvelle avec Jira, c’est qu’il y a un niveau gratuit pour commencer, et des prix
raisonnables pour les autres niveaux. Cela dit, vous constaterez qu’une équipe de dix
personnes est le minimum requis pour utiliser Jira efficacement. Il pourrait être trop puissant
pour tout groupe plus petit.
43. Taskade
Lorsqu’il s’agit d’outils collaboratifs, il est rare de trouver Taskade. C’est rendre un mauvais
service à l’application, car c’est un outil fantastique pour garder une équipe concentrée et sur
le sujet.
— Le tableau de bord de Taskade.
Si vous utilisez d’autres outils de collaboration tels qu’Asana ou Basecamp (nous y

reviendrons plus tard), vous serez ici comme chez vous. Les informations dont vous avez le
plus besoin, comme les tâches à faire et les rappels, sont centralisées sous le capot. Ainsi,
vous pouvez les présenter de plusieurs façons en fonction de votre projet.
— Les types de présentation dans Taskade.
Les types d’affichage « Mindmap » et « Org Chart » sont excellents, et chacun vous donne
une perspective différente sur les informations que vous avez ajoutées.
— Une carte mentale dans Taskade.
La simplicité de l’application est trompeuse. En dehors d’un moyen flexible de présenter et de

gérer les tâches, elle ne propose pas grand-chose d’autre.
Pour travailler avec votre équipe, il suffit de cliquer sur quelques boutons. Par exemple,
chaque écran dispose d’une fenêtre de discussion extensible :
— La fenêtre de discussion de Taskade.
Pour certains, surtout lorsqu’on le compare à d’autres solutions, Taskade pourrait être perçu
comme étant dépouillé et même sous-équipé. Pourtant, ce n’est pas le cas. Taskade est un
moyen fantastique de collaborer avec une équipe et, en raison de sa simplicité, il s’intégrera
directement à tout projet sur lequel vous travaillez.
44. Asana
— La page d’accueil d’Asana.
Asana est l’un des noms les plus en vue dans le domaine des outils de collaboration. C’est un
monstre lorsqu’il s’agit de s’emparer d’un projet et de le mettre en forme avec l’aide d’une
équipe. Asana est également capable de s’adapter à différents flux de travail. Par exemple,
vous pouvez basculer entre les listes et les calendriers, mais aussi accéder aux chronologies.
— Les types de flux de travail d’Asana.
Il existe également des fonctionnalités fantastiques pour les équipes. Les rapports sont
complets et, avec les plans les plus élevés, vous avez accès à un tableau de bord qui
présente diverses analyses relatives aux performances de votre équipe. Il est même possible
de surveiller les charges de travail de chaque membre de l’équipe. Ainsi, Asana vous aide à
réduire au minimum le stress et à éviter l’épuisement des membres de l’équipe.
De plus, la version gratuite n’est pas une démo paralysée de l’application complète. Vous
pouvez faire évoluer Asana comme vous faites évoluer une équipe, et il y a de bonnes
fonctionnalités pour vous aider. Par exemple, vous pouvez attribuer des tâches aux membres
de l’équipe et gérer chaque flux de travail. Vous pouvez également envoyer des messages
généraux à l’ensemble de l’équipe pour chaque espace de travail.
— Envoi d’un message dans Asana.
Asana est un vieux routier de la gestion collaborative de projets, mais il est presque toujours
à la hauteur. Vous constaterez qu’une bonne partie de vos clients et de vos coéquipiers ont
également un compte Asana, ce qui signifie que les réunions au sein de l’application seront
plus fréquentes que vous ne le pensez.
45. Basecamp
Basecamp est un autre grand acteur de la gestion de projets en équipe. Il fait partie de la
vieille garde, puisqu’il existe depuis presque aussi longtemps que WordPress lui-même. Le
logiciel de base existe depuis bien plus longtemps, il a donc un pedigree et des antécédents
qui méritent d’être soulignés.
— La page d’accueil de Basecamp.
Sur le papier, Basecamp n’a rien d’excitant par rapport à la concurrence. En toute honnêteté,
beaucoup d’autres applications collaboratives ont rattrapé ce que Basecamp offre. Ce n’est
pas toute l’histoire, cependant.
Oui, vous pouvez créer des tâches et des listes de choses à faire, les attribuer aux membres
de l’équipe et travailler avec tout cela à l’échelle d’un projet. Les caractéristiques les plus
importantes de Basecamp, cependant, sont l’infrastructure et la conception.
Il y a une approche simple pour utiliser Basecamp : créer un projet, développer votre liste de
tâches ou votre planning, et assigner les tâches aux coéquipiers. Chaque projet comporte un
certain nombre d’aspects autonomes qui vous aident à faire avancer un projet :
— Les éléments qui composent un projet Basecamp.
Comme nous l’avons dit, il n’y a rien de révolutionnaire ici, mais c’est le but. Basecamp est un
système de gestion de projet fiable sans beaucoup de fioritures. En tant que tel, vous y
reviendrez parce qu’il est fiable et extensible en fonction de vos besoins.
Lanceurs de tâches
Travailler sur les petites tâches d’un projet de développement web pose un problème. Elles
sont nécessaires pour vous rendre plus efficace et plus productif. En revanche, vous devez
consacrer du temps et de l’énergie à la réalisation de ces micro-tâches.
Pour vous aider, vous aurez besoin d’un lanceur de tâches. Voici quelques-uns de nos
préférés.
46. Grunt
— La page d’accueil de Grunt.
Grunt est un lanceur de tâches spécifique à JavaScript qui cherche à automatiser certaines
des tâches banales et répétitives que vous rencontrez quotidiennement. Considérez des
tâches que vous pouvez considérer comme ordinaires : linting, minification, compilation, et
bien d’autres encore.
Grunt s’en occupe pour vous par le biais d’un fichier de configuration basé sur JSON (appelé
« Gruntfile »). Voici un exemple :
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', "src/**/*.js', "test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
Si vous trouvez souvent que vos projets perdent du temps à cause de tâches routinières,
Grunt fera probablement partie de votre boîte d’outils de développement web, comme c’est
déjà le cas pour WordPress, Bootstrap et bien d’autres.
47. Gulp
— Le logo Gulp.
Lorsque l’on compare les lanceurs de tâches, il s’agit souvent d’un combat entre Gulp et
Grunt. Gulp est une boîte à outils basée sur JavaScript pour automatiser votre flux de travail
et augmenter votre efficacité.
Vous utiliserez des fichiers et des « streams » dédiés pour agir sur vos ressources et votre
code avant qu’ils ne soient écrits sur le disque. Chaque tâche que vous créez est une
fonction « asynchrone », et vous pouvez la définir comme privée ou publique. La différence
réside dans les permissions : les tâches privées ne peuvent pas être exécutées par
l’utilisateur final et sont conçues pour fonctionner avec d’autres fonctions.
À ce propos, vous pouvez utiliser les fonctions series() et parallel() pour créer des tâches.
Cela signifie que vous pouvez prendre de petites tâches, en faire un rouage dans un système
plus étendu, puis les imbriquer.
De plus, vous pouvez également étendre les fonctionnalités de Gulp grâce à des extensions
créées par la communauté :
— Une vitrine des extensions Gulp.
C’est peut-être une généralisation, mais Gulp et Grunt sont tous deux bons dans des
domaines différents. Gulp est solide lorsqu’il s’agit de travailler avec des ressources qui
peuvent faire partie d’un ensemble d’instructions plus étendu. Pour cette raison, vous devrez
choisir le gestionnaire de tâches approprié en fonction de chaque projet.
Outils de conteneurisation
Nous allons prendre le risque de dire que si vous n’utilisez pas une forme de conteneurisation
ou un outil de machine virtuelle, vos progrès en tant que développeur web en pâtiront.
Bien sûr, ce n’est pas forcément vrai pour tout le monde, mais l’utilisation d’un environnement
de développement basé sur des conteneurs présente de nombreux avantages. Voici
quelques solutions de choix.
48. Docker
Pour beaucoup, Docker est l’environnement de développement basé sur les conteneurs par
excellence. La plateforme open source ne se limite pas aux conteneurs, mais c’est une raison
souvent évoquée pour l’utiliser.
— Le logo de Docker.
En apparence, le processus est simple : il suffit de cliquer sur un bouton pour obtenir un
environnement de développement virtuel en sandbox. Bien sûr, tout ce qui semble simple en
surface est profond en profondeur. Docker combine une interface utilisateur (UI), une CLI et
une API avec un dispositif de sécurité pour vous permettre un déploiement rapide.
Pour de nombreux développeurs, Docker va jouer un rôle central dans la création de

nouvelles applications. Les développeurs web, et en particulier ceux de WordPress,
disposent d’un certain nombre d’outils pour ce travail. Local by Flywheel et DevKinsta sont
des plateformes de premier plan.
— Docker propulse l’application DevKinsta.
Note : Nous avons récemment lancé DevKinsta – un outil de développement local pour vous
aider à créer de nouveaux sites WordPress. Vous pouvez également déployer les sites sur
votre compte Kinsta en un seul clic.
Docker s’intègre également à de nombreux outils – et plusieurs d’entre eux font déjà partie de
votre flux de travail. Des applications telles que GitHub, VS Code et bien d’autres peuvent se
connecter à Docker et offrir une intégration fluide.
Dans l’ensemble, Docker pourrait occuper toute une série d’articles sur ce qu’il contient.
Malgré cela, rien de tout cela n’est peut-être nécessaire. Il est fort probable que vous utilisiez
Docker quotidiennement et que vous sachiez déjà à quel point il est génial!
49. LXD
En termes simples, LXD est un gestionnaire de conteneurs pour les distributions Linux. Il est
basé sur des images et est livré avec plusieurs images pré-construites pour Linux. En utilisant
LXD, vous avez la certitude de développer sur le même système d’exploitation par défaut que
l’utilisateur final.
— Le logo LXD.
Il a été fondé par les développeurs d’Ubuntu, Canonical, et maintient bien sûr une structure
open source. Vous êtes en mesure de créer des environnements sécurisés en utilisant des
conteneurs non privilégiés, de contrôler l’utilisation des ressources en utilisant de
nombreuses ressources, et même de gérer des réseaux.
LXD est également évolutif, ce qui signifie que vous pouvez faire fonctionner des milliers de
nœuds de calcul ou rester simple. Pour les applications basées sur le cloud, LXD s’intègre à
OpenNebula – ce dernier dispose de pilotes officiels pour gérer les instances LXD.
Par défaut, de nombreux outils de conteneurisation utilisent Ubuntu comme environnement
virtuel standard. Même ainsi, LXD est optimisé pour exécuter la distribution. Si vous ne l’avez
pas encore essayé, cela vaut la peine de tester un espace de travail. Vous pourriez découvrir
qu’il convient mieux à des flux de travail spécifiques ou à des projets clients que la
concurrence.
Outils d’optimisation d’images
Les ressources (ou médias, ou quel que soit le nom que vous préférez) abondent sur le web.
Il existe des cultures en ligne entières dédiées et basées sur les images. Il est donc essentiel
que vos projets de développement web soient performants malgré le nombre d’images
utilisées.
Voici quelques-uns des outils d’optimisation des images les plus populaires et les plus
performants.
50. ShortPixel
— Le site web de ShortPixel.
Il existe de nombreuses applications d’optimisation d’images, mais ShortPixel possède un

algorithme subjectivement robuste. Il est capable de réduire la taille des fichiers d’images
sans en affecter la qualité. Si nous sommes pointilleux, nous dirons que, comme le réglage
par défaut est la plus haute compression disponible, il n’y a pas d’autre solution si votre
image n’est pas assez compressée. Il ne s’agit toutefois pas d’une critique importante.
ShortPixel a des tonnes de fonctionnalités sous le capot. Il y a trois niveaux de compression,

un excellent optimiseur de PDF, et même un compresseur de GIF. Ce dernier est quelque
chose que vous ne trouvez pas dans beaucoup d’autres outils, il est donc un ajout bienvenu à
la gamme de produits.
L’ensemble de l’interface est également accessible : Vous faites glisser et déposez les
images sur le téléverseur et attendez que ShortPixel fasse sa magie. Une fois vos images
traitées, vous pouvez les télécharger par lot ou sélectionner des images individuelles pour les
télécharger :
— Téléchargement d’images depuis ShortPixel.
Les outils de l’API de ShortPixel sont également robustes. Vous trouverez des API distinctes
pour la réduction des images en ligne et hors ligne, des bibliothèques clients PHP et .NET
complètes, un moteur adaptatif basé sur JavaScript, etc.
Nous pensons que ShortPixel est un outil pour les développeurs, car il est idéal pour
connecter votre site web ou votre application. Nous dirions également qu’il surpasserait votre
dépendance à TinyPNG en un clin d’œil, surtout si vous souhaitez l’utiliser dans le cadre d’un
flux de travail plus important.
51. TinyPNG
C’est le moment de l’outil d’optimisation d’image préféré de tout le monde – TinyPNG. Vous
pouvez également inclure TinyJPG dans cette entrée, bien que les deux outils fonctionnent
avec les mêmes formats d’image.
— Le site web de TinyPNG.
Vous constaterez que TinyPNG n’a pas beaucoup changé au fil des ans. Il s’agit toujours
d’un simple outil en glisser-déposer pour optimiser vos images. Il n’y a pas de fioritures, et il
n’y a pas un ensemble étendu de formats de fichiers. Cependant, TinyPNG offre une
convivialité exceptionnelle et un grand nombre d’intégrations avec d’autres outils.
Par exemple, il existe une extension Photoshop et, pour les applications plus fines, une API
fonctionnelle pour les développeurs. Même les utilisateurs de Python peuvent s’y mettre,
puisque l’API prend également en charge ce langage.De nombreuses extensions ont été
créées à l’aide de l’API pour de nombreux outils tiers.
Nous ne voulons pas dire que TinyPNG a le monopole du marché de l’optimisation des
images, mais c’est souvent le premier choix de nombreux utilisateurs. Prendre une image et
la déposer dans le téléverseur prend quelques secondes, et lorsque vous obtenez en retour
une représentation parfaite à 99,9 % de votre image, il est facile de lui faire confiance.
Outils de test de sites web
Nous avons parlé précédemment de tester votre API et le code du site principal, mais cela
passe à côté des performances de votre site web. Voici quelques outils que nous apprécions
et qui pourraient également vous aider à analyser les performances de vos sites.
52. Responsively
— L’application Responsively.
Si vous avez déjà été submergé par le nombre de requêtes de médias que vous devez
exécuter et perfectionner dans votre application, découvrez Responsively. Il s’agit d’un outil
frontend open source qui vous aide à développer des sites en fonction des différentes
fenêtres d’affichage des appareils que vous avez choisis.
— Affichage de différents dispositifs dans Responsively.
L’avantage de cette méthode est que vous pouvez comparer les mises en page côte à côte.
Cela vous donne une bonne chance d’améliorer votre cohérence entre les appareils. Chaque
appareil est précis et le choix est vaste, ce qui est excellent si votre site cible des appareils
spécifiques.
Vous pouvez également ajouter les extensions de navigateur dédiées à Mozilla Firefox,
Microsoft Edge et Google Chrome pour envoyer des pages vers le navigateur Responsively.
À partir de là, vous pouvez ouvrir les outils de développement intégrés et vous mettre au
travail.
— L’inspecteur Responsively.
Il existe des tonnes d’autres fonctionnalités, telles que la fonction de capture d’écran, le
support du chargement à chaud (hot-loading), et bien d’autres pour vous aider à développer.
Il est difficile de contester le slogan selon lequel Responsively est le « navigateur du
développeur web ». Il peut finir par devenir un composant essentiel de votre flux de travail.
53. Google Lighthouse
Pour beaucoup, PageSpeed Insights de Google est un outil précieux qui permet de découvrir
les performances d’un site web et de savoir comment améliorer sa vitesse de chargement.
— PageSpeed Insights de Google.
Cela dit, certains des logiciels sont plus intéressants à étudier en profondeur. Il pourrait
également mieux répondre à vos besoins. Google Lighthouse peut être exécuté sur n’importe
quelle page web et fournit des audits et des rapports sur les performances des pages, le
SEO, les applications web progressives (PWA), etc.
Les principaux moyens d’exécuter Google Lighthouse sont la ligne de commande, l’utilisation
des DevTools de Chrome ou un module Node. Si vous utilisez l’interface PageSpeed
Insights, Lighthouse génère certains des scores et fournit d’autres informations.
Il convient de noter qu’à première vue, Google Lighthouse et PageSpeed Insights semblent
similaires. Mais PageSpeed Insights utilise des données de laboratoire combinées à des
données utilisateur réelles. L’analyse de Lighthouse ne tient pas compte des données des
utilisateurs et mesure davantage d’éléments de votre site web.
À notre avis, il vaut la peine d’utiliser à la fois PageSpeed Insights et Lighthouse, surtout si
l’objectif de votre client est d’atteindre le haut des pages de résultats des moteurs de
recherche (SERP). Dans tous les cas, c’est un outil solide à avoir sous la main, et il pourrait
même supplanter PageSpeed Insights comme outil de performance de choix.
54. Cypress
Les tests de bout en bout ne sont pas une expérience réjouissante pour de nombreux
développeurs. Cypress est une solution simple qui va à l’encontre de la tendance des tests
de bout en bout et produit quelque chose d’exceptionnel.
— La page d’accueil de Cypress.
Alors que la plupart des outils de test de bout en bout sont basés sur Selenium, Cypress va
dans une direction différente. Cela signifie que les problèmes que les utilisateurs rencontrent
avec les testeurs basés sur Selenium ne sont pas présents ici. En fait, les développeurs
veulent faire de la mise en place, de l’écriture et de l’exécution des tests un jeu d’enfant.
Pour ce faire, ils ont construit l’architecture à partir de zéro et se sont concentrés sur les tests
de bout en bout à l’exclusion de toute autre forme. Pour améliorer les performances, Cypress
fonctionne dans la même boucle d’exécution que votre programme, plutôt que d’exécuter des
commandes à distance via le réseau.
Comme le code de test s’exécute dans le navigateur, il n’y a pas de pilotes ou de liaisons de
langage à prendre en compte. Malgré cela, vous pouvez compiler en JavaScript avant
d’exécuter les tests.
Si vous êtes un ingénieur en assurance qualité (QA) ou un développeur qui souhaite que les
tests de bout en bout aient un accès natif à votre travail, Cypress devrait retenir votre
attention. Et le mieux, c’est qu’il y a aussi un niveau gratuit complet!
55. Stack Overflow et les moteurs de recherche
Pour un instant, permettez-nous de repousser les limites de ce qui est considéré comme un
outil de développement web. Stack Overflow est bien connu de tous ceux qui ont ne serait-ce
qu’une vague connaissance du développement web :
— Le site web de Stack Overflow.
Il s’agit d’un site de questions-réponses axé sur la programmation, et il fait partie du réseau
Stack Exchange qui couvre toutes sortes d’autres sujets :
— Un des nombreux sites de niche du réseau Stack Exchange.
Il est connu comme une ressource de référence pour des milliers de développeurs, et malgré
une certaine controverse au sujet de sa communauté, le trafic reste important. Nous nous
risquons à dire que Stack, avec le moteur de recherche de votre choix, représente un outil de
développement web flexible pour apprendre et améliorer vos compétences.
Par exemple, vous vous rendrez probablement sur Stack Overflow lorsque vous rencontrerez
un problème de développement lié au code. De même, lorsqu’une erreur apparaît et que
vous ne savez pas comment la résoudre, la coller dans un moteur de recherche est le moyen
le plus rapide de trouver la réponse dont vous avez besoin.
Étant donné que 90 % des utilisateurs interrogés se rendent sur Stack Overflow pour
résoudre des problèmes, il est probable que tout le monde utilisera cet outil. Cependant, pour
les débutants – ou même si vous ne pouvez pas formuler votre problème – les moteurs de
recherche seront sans doute un peu plus accueillants.
Références en matière de développement web
Si vous êtes un développeur qui souscrit à l’éthique « RTFM », vous n’aurez pas besoin
d’être convaincu dans les quelques entrées qui suivent. En revanche, si vous aimez vous
plonger dans un problème et le résoudre, sachez qu’il y a eu d’innombrables développeurs
avant vous qui ont probablement trouvé une réponse.
Dans ce contexte, examinez les quelques outils de développement web suivants, tous basés
sur des matériaux de référence web.
56. MDN Web Docs
Au tout début d’Internet, il existait un site appelé Webmonkey, géré par Lycos, qui visait à
enseigner le développement et la programmation web aux nouveaux utilisateurs. L’esprit de
ce site est toujours présent dans le MDN Web Docs de Mozilla. Webmonkey a été fermé en
2004 et MDN Web Docs est arrivé en 2005, il y a donc un lien naturel entre les deux.
— La page d’accueil de MDN Web Docs.
Il s’agit d’une collection de ressources destinées à vous enseigner la programmation pour le

web dans certains cas, et les produits spécifiques à Mozilla dans d’autres. Le contenu est
divisé en deux grandes catégories : les technologies et les guides de référence. Plusieurs
tutoriels vous sont proposés en fonction de vos compétences et de votre expérience, un
guide de référence dédié et d’autres ressources pour les premiers.
Les guides sont tous liés à des niches et à des secteurs spécifiques de l’industrie du
développement. Par exemple, la référence sur le développement web sert de page « clé de
voûte » pour d’autres guides HTML, CSS et JavaScript.
— Page JavaScript de MDN Web Docs.
Il y a aussi de larges aperçus de divers secteurs, comme le développement de jeux et ce qu’il

faut faire pour commencer dans ce domaine :
— Guide MDN Web Doc sur le développement de jeux.
MDN Web Docs est une lecture essentielle pour un développeur web débutant, et il offre
également plus qu’assez de valeur pour un expert. S’il y a un site qui mérite un signet de
navigateur, c’est bien celui-là !
57. DevDocs – Navigateur de documentation API
Autrefois, vous conserviez tous les manuels des produits que vous achetiez dans un tiroir ou
un placard poussiéreux. Avec la numérisation de la vie, ces manuels en papier ont cédé la
place à des téléchargements en format PDF sur le site web de chaque fabricant.
Grâce à cela, nous disposons désormais de sites web qui rassemblent les versions
numériques des manuels dans des bibliothèques. Cela vous permet de trouver ce dont vous
avez besoin à partir d’un seul référentiel. Il est donc logique qu’il en existe aussi un pour les
sujets relatifs au développement web.
En bref, DevDocs est une bibliothèque de documentation pour les API, et nous pensons
qu’elle sera précieuse pour presque tous les développeurs :
— La page d’accueil de DevDocs.
Avant de consulter la bibliothèque, vous devez activer la documentation de l’API souhaitée.

Vous pouvez le faire à partir de l’écran Préférences :
— L’écran des préférences de DevDocs.
Une fois cela fait, vous pourrez accéder à la documentation pertinente à partir d’un menu
arborescent dédié :
— L’écran API de WordPress.
Il s’agit d’une solution simple à un problème inefficace dans la mesure où vous avez plusieurs
références d’API à un seul endroit. DevDocs est un autre site qui mérite un signet, et il est
dommage qu’il n’y ait pas une application de bureau disponible pour une référence encore
plus rapide.
58. CSS-Tricks
Chris Coyier est un nom que de nombreux développeurs web connaissent. Nous parions que
vous connaissez déjà le site web qu’il a fondé, CSS-Tricks. Comme son nom l’indique, il
s’agit d’un site consacré au code frontend, en particulier CSS, et à la manière de s’améliorer.
— La page d’accueil de CSS-Tricks.
Comme l’indique la page À propos, pendant les premières années, CSS était le sujet
prédominant. Mais depuis, HTML, JavaScript, WordPress et d’autres sont devenus tout aussi
importants et fréquemment abordés. Le résultat est un site axé sur le développement
frontend, avec un grand nombre d’articles, de vidéos et de guides pour vous inspirer.
— La liste de blogs de CSS-Tricks.
Un élément simple mais précieux est l’Almanach CSS, qui décrit les sélecteurs et les
propriétés de CSS. Il s’agit d’une excellente source de référence si vous avez besoin de vous
familiariser avec certains aspects du langage.
— L’almanach CSS-Tricks.
Bien que CSS-Tricks présente des aspects de référence, il ne s’agit pas d’une ressource de
référence à proprement parler. Il n’en demeure pas moins qu’il doit être un lieu de passage
régulier pour vous, que ce soit par le biais d’un flux RSS ou d’une autre solution. Le contenu
est de grande qualité et peut vous mettre au défi d’une manière que vous n’aviez pas
envisagée auparavant. À tout le moins, abonnez-vous à la newsletter et attendez que CSS-
Tricks arrive dans votre boîte de réception.
59. DEV Community
Imaginez que vous puissiez prendre les meilleurs éléments des réseaux sociaux, du
développement web et de Stack Overflow, puis créer un site qui les fusionne. DEV
Community pourrait en être le résultat.
— La page d’accueil de DEV Community.
Il s’agit d’une plateforme de blogs, mais aussi d’un moyen de trouver les réponses aux
questions de développement. Vous sélectionnez des balises et des personnes à suivre, et
votre fil d’actualité devient une chronologie automatisée et sélectionnée d’articles et d’idées :
— La chronologie de DEV Community pour la balise JavaScript.
Il est juste de suggérer qu’il s’agit d’informations que vous pouvez trouver partout – si vous
êtes prêt à les trouver. L’avantage de DEV Community, c’est qu’elle se trouve ici et qu’elle
regroupe des sujets liés au développement. Pensez-y comme à une piste de convention de
développeurs, plutôt que de surprendre et de vous mêler à une conversation sur le sujet à
l’arrêt de bus.
C’est un autre site qui s’intégrera bien dans votre flux RSS ou dans votre boîte de réception.
En tant que tel, c’est aussi une ressource « dormante » dans la mesure où vous vous y
rendrez souvent sans vous en rendre compte.
60. Can I use…
On pourrait dire que Jeeves a lancé la tendance de poser des questions sur Internet pour
trouver des informations. Il a été rapidement remplacé par divers algorithmes de recherche,
bien que la recherche par questions reste un moyen fiable de trouver ce dont vous avez
besoin.
Can I use… est la réponse du développeur frontend à la question « Existe-t-il une question
Jeeves pour les CSS ? »
— Le site Can I use…
Le principe est simple : vous saisissez le sélecteur ou la propriété CSS dans le champ de
recherche, et la base de données vous indique si vous pouvez l’utiliser pour créer des sites
web. Vous n’êtes pas non plus limité à CSS. JavaScript et HTML sont également pris en
charge :
— Recherche d’un élément HTML dans Can I use…
Il s’agit d’une base de données de langage frontend, elle ne cherchera donc pas à retourner
des résultats pour PHP, Python ou d’autres langages côté serveur. Malgré tout, Can I use…
est un outil immense et précieux qui vous aidera en matière d’accessibilité et de conception
pour plusieurs appareils.
Il est facile de faire apparaître un élément spécifique et de voir d’un coup d’œil si le
navigateur cible le prend en charge :
— Le tableau de prise en charge des navigateurs dans Can I Use…
Si vous regardez de plus près, vous pouvez également trouver des statistiques telles que la
date de sortie de l’élément et un pourcentage d’utilisation :
— Informations pour un élément spécifique dans Can I Use…

Dans l’ensemble, Can I use… ne sera peut-être pas utilisé régulièrement. À certaines étapes
d’un projet, cependant, il sera ouvert presque tout le temps. Une fois que vous aurez
déterminé ce que vos navigateurs cibles prendront en charge, Can I use… retournera dans
vos signets et attendra le moment où vous en aurez besoin. C’est un service utile qui peut
être un « porteur d’eau » lorsqu’il s’agit de votre code frontend.
Résumé
Le temps et l’argent sont comptés, et il y a une certaine logique à opter pour les mêmes vieux
outils de développement web que vous avez toujours utilisés. Cependant, faire un choix
réfléchi sur les besoins d’un projet vous permettra de gagner en temps, en coûts et en
productivité.
Dans cet article, nous avons couvert 60 outils étonnants de développement web que vous
pouvez utiliser en 2022 pour vous donner un coup de pouce ainsi qu‘à votre équipe. Il se
pourrait que vous le fassiez déjà. Si les différentes enquêtes sont correctes, les développeurs
sont plus nombreux que jamais à se tourner vers GitHub, TypeScript, différentes piles de
services web et l’un des nombreux frameworks JavaScript pour faire passer les projets.
Peu importe les outils de développement web que vous choisissez d’utiliser, les clients de
Kinsta ont accès à encore plus d’outils grâce à la plateforme MyKinsta. Cela inclut un coup de
pouce rapide et facile à votre optimisation globale en utilisant la fonction de minification du
code qui est intégrée directement dans le tableau de bord MyKinsta, permettant aux clients
d’activer la minification automatique de CSS et JavaScript avec un simple clic.
Vous avez un outil de développement web à recommander que les développeurs utiliseront
en 2022 ? Faites-nous part de vos idées dans la section des commentaires ci-dessous !

Outils Developpement Web

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Outils Developpement Web

Transféré par

Droits d'auteur :

Formats disponibles

60 outils géniaux de

développement web à utiliser en

Downloaded on: 02 December 2022

Ce que nous considérons comme un outil de

Par exemple, demandez-vous si un service de streaming vidéo compte comme un outil de

Comment les outils de développement web peuvent

Considérations pour le choix de votre pile de développement

Le choix de la bonne pile pour le projet se résume à ce qui suit :

Complexité : Tenez compte de la complexité de votre produit à livrer, car elle

Il y a deux domaines dans lesquels vous pouvez diviser les technologies :

60 outils géniaux de développement web à utiliser en

Environnements de développement local

Un environnement de développement local est un élément essentiel de toute pile de

— L’écran d’accueil de DevKinsta.

De plus, DevKinsta est entièrement gratuit !

Comme d’autres outils d’environnement de développement local, MAMP est entièrement

— La page de téléchargement de XAMPP.

De plus, il y a un installateur d’applications web dans le paquetage XAMPP. Bitnami est

— La page d’accueil de Bitnami.

4. Visual Studio Code

En parlant de langages, Visual Studio Code prend en charge JavaScript, Node.js et

— L’application Sublime Text.

— L’installateur de paquets d’Atom.

— La page d’accueil de Notepad++.

D’emblée, il convient de préciser que Notepad++ ne remplacera pas nécessairement les

Lorsqu’il s’agit d’IDE de développement, la suite de solutions JetBrains va se trouver en haut

— L’écran de tarification d’IntelliJ IDEAs.

— Le site de Type Scale.

Il est populaire parce que Sketch comprend de nombreuses fonctionnalités, et il est

Prenez par exemple la fonctionnalité Smart Layout de Sketch, qui utilise un

— L’application InVision Studio.

Cependant, il contient bien d’autres fonctionnalités liées au prototypage et à la création

— L’application Affinity Designer.

— Les options d’exportation dans Affinity Designer.

13. CodePen ou JSFiddle

— L’écran de collaboration de JSFiddle.

Parlons d’abord du VCS lui-même.

— Une liste des commits GitHub de WordPress.

git add file.php

— La page GitHub de Kinsta.

— Les fonctions de collaboration de GitHub.

— Le gestionnaire de problèmes de GitHub.

Alors que GitHub se définit comme une « plateforme de développement », GitLab se

— La page d’accueil de Sourcetree.

— Vue graphique de Sourcetree.

Outils pour les développeurs de navigateurs

18. Outils Chrome pour les développeurs

Les DevTools sont subjectivement les meilleurs, et les utilisateurs de Chrome et de

— La page d’accueil de Firefox.

Aujourd’hui, nous avons les outils Firefox pour les développeurs :

Il existe un ensemble de fonctions de base permettant de visualiser le code source du site (

Dans cette optique, examinons quelques choix populaires.

— Un exemple de CSS Tailwind.

— La page d’accueil de Foundation.

— Bibliothèque de modèles de Foundation.

— Material-UI cherche à répondre aux standards de conception de Google.

De nombreux thèmes gratuits et premium sont également disponibles, couvrant de nombreux

Puisque Material-UI a un cas d’utilisation spécifique – la création de sites autour du Material

— La page d’accueil de HTML5 Boilerplate.

— La page d’accueil de Materialize.

Frameworks d’applications web

En termes simples, un framework ou une bibliothèque JavaScript vous permet de travailler

— Un exemple de code React sandbox.