Outils Web Essentiels pour 2022
Transféré par
Alexandre mayeleOutils Web Essentiels pour 2022
Transféré par
Alexandre mayele60 outils géniaux de développement web à
utiliser en 2022
Salman Ravoof, 1 juillet 2022
Partages
Fermer
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.
Vous êtes pressé ? Enregistrez cet article en PDF.
Fatigué de faire défiler les pages ? Téléchargez une version PDF pour faciliter la lecture
hors ligne et partager avec vos collègues.
Télécharger
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.
Table des matières
1. Ce que nous considérons comme un outil de développement web
2. Comment les outils de développement web peuvent rationaliser votre flux de travail
3. Comment choisir la bonne pile de développement pour votre projet ?
4. 60 outils géniaux de développement web à utiliser en 2022
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.
Voir les plans
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.
Il y a quelque chose d'incroyablement excitant à ouvrir TextEdit ou Notepad et à saisir
“<HTML>” pour lancer un nouveau projet 🤓 Ces 60 outils utiles de développement web
vous aideront à organiser et à optimiser votre expérience ✅CLICK TO TWEET
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 [Link], 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.
1. Environnements de développement local
2. Éditeurs de texte et de code
3. Outils de conception et de prototypage de sites web
4. Clients Git
5. Outils pour les développeurs de navigateurs
6. Frameworks frontend
7. Frameworks d’applications web
8. Gestionnaires de paquets
9. API et outils de test
[Link] de collaboration
[Link] de tâches
[Link] de conteneurisation
[Link] d’optimisation d’images
[Link] de test de sites web
[Link] Overflow et les moteurs de recherche
16.Références en matière de développement web
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, [Link] 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 [Link]
Cette expression ajoute [Link] à 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. [Link]
Un exemple de code React sandbox.
[Link] 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
[Link] 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 [Link] est construit sur React.
En tant que tels, les développeurs WordPress devraient – pour paraphraser Matt
Mullenweg – apprendre [Link] en profondeur. Cependant, il ne s’agit pas seulement
d’un framework pour les développeurs WordPress.
Vous voulez savoir comment nous avons augmenté notre trafic de plus de
1000 % ?
Rejoignez plus de 20 000 autres personnes qui reçoivent notre bulletin hebdomadaire
avec des conseils WordPress !
S'abonner
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>;
[Link]
Element,
[Link]('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. [Link]
[Link] 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 [Link].
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, [Link] 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 [Link] 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. [Link]
Nous entrons ici dans le domaine des méta-frameworks, car [Link] se connecte
à [Link] et sert de base à d’autres frameworks.
La page d’accueil d’[Link].
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();
[Link]('/', function(req, res){
[Link]("Hello world!");
});
[Link](3000);
Nous pensons qu’[Link] 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. [Link]
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à, [Link] doit figurer en haut de votre
liste.
La page d’accueil de [Link].
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, [Link] 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 [Link], 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 :
[Link] = function(grunt) {
[Link]({
jshint: {
files: ['[Link]', "src/**/*.js', "test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= [Link] %>'],
tasks: ['jshint']
});
[Link]('grunt-contrib-jshint');
[Link]('grunt-contrib-watch');
[Link]('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 [Link]
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.
.
De la maquette fonctionnelle à la conception en passant par la mise en place de flux de
travail collaboratifs, de nombreux éléments entrent en jeu dans un projet de
développement réussi 👨💻 Ces outils vous aideront à garder les choses rationalisées 😌
CLICK TO TWEET
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 !
Économisez du temps et de l’argent et optimisez les performances de votre site avec :
Aide instantanée des experts en hébergement WordPress, 24/7.
Intégration de Cloudflare Enterprise.
Une audience mondiale avec 35 centres de données dans le monde entier.
Optimisation avec notre surveillance intégrée de performance d’applications
(APM).
Tout cela et bien plus encore, dans un seul plan sans contrat à long terme, avec des
migrations assistées et une garantie de remboursement de 30 jours. Pour trouver le
plan qui vous convient, Découvrez nos plans ou contactez nous.
Vous aimerez peut-être aussi
- Le Cahier Des Charges de Votre Prochain Site Web100% (1)Le Cahier Des Charges de Votre Prochain Site Web13 pages
- Creation D'un Site Web de Rech - SQUALLI HOUSSAINI Aliae - 2877100% (1)Creation D'un Site Web de Rech - SQUALLI HOUSSAINI Aliae - 287746 pages
- Projet Web-B1 - CDC2 Site EcommercePas encore d'évaluationProjet Web-B1 - CDC2 Site Ecommerce6 pages
- Cahier Des Charges Pour La Création D'Une Application WebPas encore d'évaluationCahier Des Charges Pour La Création D'Une Application Web17 pages
- Formation Webmaster : Création de Sites WebPas encore d'évaluationFormation Webmaster : Création de Sites Web3 pages
- M107 - Cours - D. Réaliser Un Site Web Avec L'architecture MVCPas encore d'évaluationM107 - Cours - D. Réaliser Un Site Web Avec L'architecture MVC41 pages
- Comment Conduire Son Projet de Site Web PDFPas encore d'évaluationComment Conduire Son Projet de Site Web PDF6 pages
- 533 Developpeur Full Stack Java Et Angular FR FR StandardPas encore d'évaluation533 Developpeur Full Stack Java Et Angular FR FR Standard32 pages
- QUALITÉ WEB - La Référence Des Professionnels Du WebPas encore d'évaluationQUALITÉ WEB - La Référence Des Professionnels Du Web41 pages
- c10 Adopter Lapproche Agile TP 6311e570904a3Pas encore d'évaluationc10 Adopter Lapproche Agile TP 6311e570904a3131 pages
- 6-Site Web Dynamique Et Base de DonnéesPas encore d'évaluation6-Site Web Dynamique Et Base de Données14 pages
- Cahier Des Charges Création Application WebPas encore d'évaluationCahier Des Charges Création Application Web14 pages
- Introduction à la Programmation WebPas encore d'évaluationIntroduction à la Programmation Web11 pages
- Modele de Cahier Des Charges Application WebPas encore d'évaluationModele de Cahier Des Charges Application Web7 pages
- Cours Creation Site WordPress 5 SemainesPas encore d'évaluationCours Creation Site WordPress 5 Semaines19 pages
- Stratégies de Marketing Web EfficacesPas encore d'évaluationStratégies de Marketing Web Efficaces19 pages
- Installation Joomla : Guide CompletPas encore d'évaluationInstallation Joomla : Guide Complet2 pages
- Pierre Giraud Liste Des Propriétés CSSPas encore d'évaluationPierre Giraud Liste Des Propriétés CSS61 pages
- Cours UX/UI: Prototypage et PersonasPas encore d'évaluationCours UX/UI: Prototypage et Personas44 pages
- Définition Web 2.0 Et Web 3.0: Qu'est-Ce Que Le Web 2.0 Et Le Web 3.0 ?Pas encore d'évaluationDéfinition Web 2.0 Et Web 3.0: Qu'est-Ce Que Le Web 2.0 Et Le Web 3.0 ?5 pages
- Guide Complet sur Sass et ses FonctionnalitésPas encore d'évaluationGuide Complet sur Sass et ses Fonctionnalités19 pages
- Conception de sites Web pour bibliothèques100% (1)Conception de sites Web pour bibliothèques22 pages
- 516 Developpeur Dapplication Javascript React FR FR Standard100% (1)516 Developpeur Dapplication Javascript React FR FR Standard32 pages
- Informatique de Gestion Et Développement AppliquéPas encore d'évaluationInformatique de Gestion Et Développement Appliqué7 pages
- Outils de Développement Web en HTMLPas encore d'évaluationOutils de Développement Web en HTML54 pages
- Sécurité des Applications Web et Tests d'AuthentificationPas encore d'évaluationSécurité des Applications Web et Tests d'Authentification86 pages
- Signalisation Dans L'Architecture WebrtcPas encore d'évaluationSignalisation Dans L'Architecture Webrtc9 pages
- Examen 4infob (Spring,.Net, Soa) 2019 2020100% (1)Examen 4infob (Spring,.Net, Soa) 2019 202017 pages
- Informatique Nos Formations en Informatique Du Niveau Bac À Bac+8 (PDFDrive)Pas encore d'évaluationInformatique Nos Formations en Informatique Du Niveau Bac À Bac+8 (PDFDrive)92 pages
- Développement d'un service web SOAP avec JAX-WSPas encore d'évaluationDéveloppement d'un service web SOAP avec JAX-WS7 pages
- Mémoire de Licence - HOUNSONLON JustinPas encore d'évaluationMémoire de Licence - HOUNSONLON Justin44 pages
- rapport-stage-AZIIN-version-complete 2Pas encore d'évaluationrapport-stage-AZIIN-version-complete 237 pages
