• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer
Lesjeudis

Blog Les Jeudis

Actualité Informatique et Digital

  • Annonces
    • Par région
    • Par métier
    • Par technologies
    • Par entreprise
    • Fiche métiers
  • Entreprises
  • Tests
  • News
  • Se connecter
  • Déposer CV
  • Recruteur
    • Connexion Recruteurs
    • Employeurs
    • Trouvez des CVs
    • Postez des offres
  • Categories du Blog

    • Développement
    • Réseaux et Systèmes
    • Digital
    • E-commerce
    • Marché de l’emploi
    • Conseils
    • Evénements
    • Design
    • Marketing
    • Interviews
    • —-
  • Annonces

    • Toutes nos offres d’emploi
    • par région
    • par métier
    • par technologies
    • par sociétés
    • Par Industries
    • Fiches Métiers
  • Entreprises
  • Tests
  • offres recommandées
  • Se connecter
  • Déposez CV
  • Employeurs

    • Connexion recruteurs
    • Employeurs
    • Trouvez des CVs
    • Postez des offres
  • Développement
  • Réseaux et Systèmes
  • Digital
  • E-commerce
  • Marché de l’emploi
  • Conseils
  • Evénements
  • Design
des outils essentiels pour les développeurs frontend

15 Outils essentiels pour les développeurs frontend

28/04/2020 by Team LesLeudis

Vous êtes développeur frontend ?

Vous connaissez et utilisez plusieurs outils de développement actuellement, mais vous gagnez en expérience, et la vitesse à laquelle votre secteur évolue vous impose le devoir d’être plus efficient et plus productif à chaque mission.

Il vous faut découvrir de nouveaux outils. Voici présentés ici 15 outils qui devraient aider les développeurs frontend à réduire leur temps de travail et à décupler leur niveau de productivité.

[callout bg=”#E5E5E5″]

Développement front-end et back-end : Quelles différences ? Qu’est-ce que signifie front-end ou back-end lors d’un projet de conception web ou mobile ?

[/callout]

1 – Sublime Text, pour éditer vos textes

Sublime Text pour développeurs Frontend

Sublime Text est un puissant éditeur de texte basé sur une interface graphique multiplateforme. Il intègre de précieuses fonctionnalités pour le développement frontend, effectue les tâches redondantes et permet au développeur qui passe du temps à coder, d’accroître sa productivité.

Parmi les fonctionnalités qu’il offre, on distingue :

  • La saisie semi-automatique ;
  • La fonctionnalité de recherche et remplacement ;
  • La coloration syntaxique personnalisable ou la mise en surbrillance de texte ;
  • La sauvegarde automatique ;
  • Les raccourcis clavier personnalisés ;
  • Les supports de macros ;
  • Etc. 

Mais Sublime Text va bien plus loin que cela. Extensible, il offre la possibilité d’importer de nouvelles fonctionnalités, de nouveaux thèmes, d’ajouter de nouveaux langages, etc. Et en parlant de langage, l’éditeur peut prendre en charge environ 44 langages de programmation et est compatible avec Windows, Mac et Linux.

  • Développement front-end et back-end : Quelles différences ?

2 – Bit (Github), pour le partage de composants

Github + Github Desktop

Bit (Github) est un outil de développement frontend qui permet d’améliorer la collaboration avec votre équipe, de maximiser la réutilisation du code, de créer du code plus évolutif et de conserver une interface utilisateur cohérente. Il permet par exemple de :

  • Isoler les composants de différents référentiels, pour vous assurer que vous partagez des composants vraiment réutilisables et qui ne sont pas couplés à votre projet ;
  • Partager lesdits composants avec d’autres membres de votre équipe ;
  • Les utiliser dans n’importe quel autre projet ;
  • Découvrir des blocs de construction partagés par d’autres membres de la communauté. 

Ainsi, Bit (Github) est un excellent outil pour créer progressivement une bibliothèque de composants modulaires. Vous et votre équipe pouvez parcourir la bibliothèque et importer un composant partagé à l’aide du « NPM Installer », modifier ledit composant dans votre environnement de développement local à l’aide du « Bit Import », et si possible placer la version modifiée du composant dans la bibliothèque.

3 – GitHub Desktop, pour contrôler la version du code source

GitHub Desktop est l’outil graphique de bureau de GitHub pour gérer les référentiels Git. Il ne prend en charge que les systèmes d’exploitation Windows et Mac. L’outil vous offre une alternative graphique aux architectures Git couramment utilisées.

GitHub Desktop s’intègre facilement à vos référentiels GitHub que vous pourrez alors gérer sans vous rendre sur le site Web. L’outil GUI vous sera particulièrement utile lors des révisions de code et de la navigation dans l’historique d’un projet. Atom aussi s’intègre assez bien avec GitHub Desktop.

4 – Chrome DevTools, pour le débogage en temps réel

Très important lors du test de votre produit final sur le navigateur, Chrome DevTools est un outil intégré à Google Chrome et à d’autres navigateurs basés sur Chromium. Il propose un environnement intégré qui permet de :

  • Faire le débogage et de modifier une page Web en temps réel ;
  • Modifier le CSS et le DOM en direct ;
  • Exécuter du JavaScript personnalisé pour déboguer votre code à différents niveaux ;
  • Analyser le temps d’exécution des fonctions afin d’optimiser la vitesse d’exécution de vos applications.

Tous les navigateurs basés sur Chromium sont équipés d’une version de Chrome DevTools, ce qui en fait l’un des outils les plus facilement disponibles pour le débogage en temps réel.

5 – D3.js, pour la visualisation des données

D3.js est une bibliothèque de visualisation de données populaire en JavaScript grâce à laquelle vous pouvez lire des données provenant de plusieurs sources, les manipuler en fonction de vos besoins et vous en servir pour créer des visuels adaptés rapidement. 

D3.js offre une grande flexibilité avec les graphiques vectoriels et permet l’ajout d’animations et d’interactivité aux graphiques. L’outil fournit un large éventail de fonctions comme Dimple qui permet de créer des graphiques plus rapidement.

6 – Codepen, pour Code Playground

CodePen est une plateforme de développement qui fonctionne avec le Cloud et grâce à laquelle vous pouvez développer et tester du code en HTML, en CSS et en Javascript en direct. Concrètement, elle permet de créer et de partager des démos de votre travail ou un extrait de code frontend sur plusieurs plateformes et/ou appareils.

Grâce à cet outil, vous pouvez par exemple partager des extraits ou un aperçu entièrement interactif de vos projets avec vos pairs pour obtenir des commentaires ou les intégrer dans des didacticiels, des guides, etc. Vous pouvez également utiliser des ressources hébergées en externe dans vos démos et projets CodePen.

7 – JAWS, pour la vérification de l’accessibilité

JAWS est un lecteur d’écran qui vérifie l’accessibilité de vos contenus web. L’outil lit vos contenus et évalue les vulnérabilités pouvant en limiter l’accès. L’accessibilité Web représente la possibilité des utilisateurs de toutes capacités et de tous handicaps à accéder adéquatement à votre contenu Web.

Concrètement, JAWS vérifiera par exemple si votre contenu est accessible aux utilisateurs ayant un problème visuel donné ou si le contenu respecte les lois sur l’accessibilité dans les pays dans lesquels vous comptez les promouvoir. Un tel outil vous sera d’une aide cruciale.

8 – PageSpeed Insights, pour surveiller la vitesse du site 

PageSpeed Insights est un outil gratuit de surveillance de la vitesse de chargement des pages de votre site sur Google, facteur très important pour l’optimisation SEO et pour la rétention. Il vous suffit de taper l’URL de la page pour effectuer le test.

Vous pouvez vérifier le fonctionnement du test sur téléphone mobile ou sur PC. PageSpeed Insights vous fera également des propositions d’action spécifiques pour améliorer la vitesse de votre site.

9 – Slack, pour la communication

Slack est une plateforme de messagerie instantanée basée sur le cloud qui permet la communication entre développeurs sur un seul support. Elle peut s’intégrer à divers services. Vous pouvez par exemple intégrer Slack à :

  • GitHub, pour vous tenir au courant du dernier référentiel ;
  • Votre outil de suivi de code pour alerter un membre spécifique de l’équipe au cas où un nouveau bug serait signalé. 

Vous pourrez même créer et configurer votre propre chatbot pour répondre aux commandes personnalisées.

10 – BrowserStack, pour un test multi-navigateur

Très apprécié des développeurs frontend, BrowserStack permet d’évaluer le fonctionnement des applications Web développées sur une large gamme d’appareils et de navigateurs. L’outil offre la possibilité de sélectionner des combinaisons « navigateur-appareil » et d’en tester l’utilisation.

BrowserStack utilise Selenium Server pour automatiser les tests sur de vrais appareils conservés dans des emplacements distants. Lors du déploiement de l’application, vous pouvez par exemple déclencher une série de tests sur une liste prédéterminée de périphériques. Une fois les tests terminés, vous pourrez obtenir des captures d’écran et des vidéos des tests effectués sur votre tableau de bord.

11 – Adobe Color, pour inspirer le designer

Autrefois appelé Kuler, Adobe Color est une application qui vous permet de créer, de parcourir et de partager des thèmes de couleur, que vous pourrez ensuite synchroniser avec d’autres applications Adobe.

L’utilisation de la couleur étant une composante cruciale du design, Adobe Color sera une très riche source d’inspiration pour le développeur frontend qui souhaite découvrir les couleurs qui fonctionnent bien ensemble sur son projet.

12 – Minify, pour des chargements plus rapides

Minify est un outil en ligne qui permet au développeur de réduire la taille totale du code de son application avant de l’envoyer à la production. Avec Minify, vous pourrez supprimer les espaces blancs, le code mort, etc.

La taille du code de l’application ainsi réduite, vous pourrez bénéficier d’un temps de chargement plus rapides sur les navigateurs.

13 – Babel REPL, pour « retroconvertir »

Babel est un transcompilateur JS gratuit et open-source utilisé pour convertir du code ES moderne (ECMAScript 2015+) en ancien JavaScript ES5 afin qu’il soit utilisable sur d’anciens appareils.

Il permettra d’essayer les ajouts récents apportés à ES ou certaines fonctionnalités qui sont à certains stades d’ajout à l’ECMA. Il peut également davantage affiner le code, limiter la taille des fichiers, etc.

14 – Prettier, pour plus de style

Prettier est un formateur de code JS avisé qui applique un style cohérent en analysant votre code et en le réimprimant avec les meilleures pratiques de codage JS.

Même s’il a été couramment utilisé dans notre environnement de développement, il dispose d’une plateforme en ligne où vous pouvez affiner votre code.

15 – BundlePhobia, pour optimiser votre stockage

BundlePhobia est un service web qui vous permettra de télécharger un fichier package.json et d’en afficher la taille totale, le temps de téléchargement et le nombre de dépendances qui seront installées à partir du package.json.

Si vous avez déjà douté de la taille de vos dossiers node_modules ou avez une fois éprouvé le besoin de connaître la taille d’un package.json qui sera installé dans votre appareil, c’est l’outil qu’il vous faut.

En résumé

Les différents outils pour développeurs frontend listés dans le présent article vous aideront à réduire votre temps de travail et à améliorer votre productivité. Ils répondent à des besoins majeurs en développement frontend.

Si vous utilisez un de ces 15 outils, dites ce que vous en pensez en commentaires ci-dessous. Si vous en utilisez d’autres, n’hésitez pas non plus à les partager en commentaires.

Category: Développement, Web

About Team LesLeudis

Lesjeudis est fier de compter sur une équipe multidisciplinaire de professionnels techniques et du marketing. Ensemble, nous couvrons de vastes domaines informatiques et de développement, ainsi que du marketing et du numérique. De Rails à .net, de la conception graphique à l’interface utilisateur et au référencement, vous bénéficierez de nos connaissances et de notre expertise dans chaque article que nous écrivons dans ce blog.

Previous Post: « la signification des couleurs dans le marketing Le pouvoir des couleurs au service du marketing
Next Post: Synchrone recrute ! Bureaux Synchrone »

Reader Interactions

Comments

  1. LUNEAU Fabrice

    20/07/2020 at 09:04

    Bonjour,

    Je suis non-voyant et j’utilise Jaws comme lecteur d’écrans, mais aussi NVDA et le narrateur sous Windows, et Orca sous Linux.

    Ce sont des lecteurs d’écrans ils nous aident à naviguer, mais je ne sais pas si ils sont des outils pour les développeur.

    Pour mesurer le respect de la norme Aria il existe des outils comme Asqatasun.

    Je me base sur le plugin Sonar pour Eclipse, il retourne aussi des informations

    Cordialement

    Et je ne comprends pas trop

  2. nassim

    09/06/2020 at 16:51

    Bravo pour cet article plein d’informations à essayer !

Laisser un commentaire Annuler la réponse

Votre adresse e-mail ne sera pas publiée.

Sidebar

Rechercher

MOA et MOE

MOA / MOE : Quelles sont les différences ?

Read moreMOA / MOE : Quelles sont les différences ?
développeurs front end et backend

Développement front-end et back-end : Quelles différences ?

Read moreDéveloppement front-end et back-end : Quelles différences ?
lignes de code Java

‘Java’ est-il le meilleur langage de programmation pour les débutants?

Read more‘Java’ est-il le meilleur langage de programmation pour les débutants?
vb net ou c# comme langage de programmation

C# ou VB .NET, le choix du langage

Read moreC# ou VB .NET, le choix du langage

Comment utiliser le framework React JS

Read moreComment utiliser le framework React JS
1033853617

Les frameworks de programmation les plus populaires en France 

Read moreLes frameworks de programmation les plus populaires en France 
Les métiers du marketing digital

Les métiers du marketing digital les plus demandés en 2019

Read moreLes métiers du marketing digital les plus demandés en 2019
signe langage python sur ordinateur portable

Web Scraping avec python

Read moreWeb Scraping avec python
757797865

Qu’est-ce que le DevOps et en quoi consiste ce métier ?

Read moreQu’est-ce que le DevOps et en quoi consiste ce métier ?
smartphone et ordinateur avec banniere sur kotlin comment langage de developpement pour android

Kotlin pour le développement Android

Read moreKotlin pour le développement Android
Jeunes stagieres informatiques dans le domaine de la robotique

Le guide ultime pour bien préparer son stage informatique

Read moreLe guide ultime pour bien préparer son stage informatique
Pourquoi choisir symfony pour un projet web featured banner 800px

Pourquoi choisir Symfony pour un projet web ? 

Read morePourquoi choisir Symfony pour un projet web ? 

Nos Categories

Blockchain

Conseils

Contenu Top

Design

Développement 

Digital

E-commerce

Evénements

Interviews

Marché de l’emploi

Marketing

Réseaux et Systèmes

SEO

Web

Candidats

Emploi par région

Emploi par métier

Emploi par technologie

Emploi par industrie

Emploi par type de contrat

Tous les emplois

Fiches métiers informatiques

Nos Services

S’inscrire

Annonces

Évènements

Tests

Magazine

Salon LesJeudis

Support

Nous contacter

Vous êtes recruteur ?

A Propos

Conditions générales d’utilisation

Politique de confidentialité

Droit d’accès aux données 

personnelles

Social

Facebook

Twitter

Linkedi

Nos Categories

Blockchain

Conseils

Contenu Top

Design

Digital

E-commerce

Evénements

Interviews

Marché de l’emploi

Marketing

Réseaux et Systèmes

SEO

Web

Candidats

Emploi par région

Emploi par métier

Emploi par technologie

Emploi par industrie

Emploi par type de contrat

Tous les emplois

Fiches métiers informatiques

Support

Nous contacter

Vous êtes recruteur ?

A Propos

Conditions générales d’utilisation

Politique de confidentialité

Droit d’accès aux données 

personnelles

Social

Facebook

Twitter

Linkedi

Nos Services

S’inscrire

Annonces

Évènements

Tests

Magazine

Salon LesJeudis

Les Jeudis

© 2021 Groupe Les Jeudis