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

Blog Les Jeudis

Actualité Informatique et Digital

  • Annonces
    • Par région
    • Par métier
    • Par technologies
    • Par entreprise
    • Fiche métiers
  • Entreprises
  • 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 par 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.

Categorie: Développement, WebTags: Javascript

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 marketingLe 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

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Sidebar

Rechercher

Nos Meilleurs Articles

Bannière Securité PHP

Découvrez 9 importantes failles de sécurité de PHP ainsi que les moyens de les corriger

Bannière Langages de Programmation

Langages de programmation les mieux payés en 2023 : Top 10

Gatsby JS

JAMstack avec Gatsby, Netlify et Netlify CMS

Modeles React JS

10 modèles React gratuits que vous pouvez utiliser pour vos projets

les couches ou layers de la blockchain

Les layers de blockchain (L0, L1, L2, L3)

bannière Ingénieur développement

Ingénieur développement

un développeur de crypto devant l'ordinateur et le globe terrestre montrant différents symboles de crypto-monnaies

Le rapport sur l’activité des développeurs crypto

Des équipes de développeurs écoutent le MOE (Maîtrise d'œuvre) et la maîtrise d’ouvrage (MOA) valide les developpements informatiques menés par la maîtrise d’œuvre

MOA MOE : Quelles sont les différences ?

bases de données et tableaux de pagination sql

Pagination SQL : problèmes et solutions

ordinateur portable pro montrant code de programmation, services cloud et des charts statistiques

Le développement web et les développeurs web

Le processus du RPA (Robotic Process Automation)

La Robotic Process automation, aux frontières du machine learning et de l’IA

la jamstack: Javascript, APIs et code markup

La promesse de la Jamstack

Categories

  • Blockchain (11)
  • Conseils (51)
  • Design (39)
  • Développement (148)
  • Digital (305)
  • Divers (6)
  • E-commerce (12)
  • Evénements (24)
  • Fiche métier (1)
  • Formation (7)
  • Interviews (36)
  • Marché de l'emploi (59)
  • Marketing (127)
  • Méthodologie (9)
  • Réseaux et Systèmes (26)
  • Web (149)

Nos Categories

Blockchain

Conseils

Méthodologies

Design

Développement 

Digital

E-commerce

Evénements

Formation

interview

Marché de l’emploi

Marketing

Réseaux et Systèmes

Website

Candidats

Employment by region

Employment by profession

Emploi par technologie

Emploi par type de contrat

Tous les emplois

Fiches métiers informatiques

Nos Services

S’inscrire

Annonces

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

Les Jeudis

© 2021 Groupe Les Jeudis