Les outils d’un développeur web

La caisse à outils

Prenons pour acquis que chacun entend qu’un ordinateur nous est indispensable. Le système d’exploitation de ce dernier peut toutefois varier. Chez MonaGraphic, cela fera hurler certains et en réjouira d’autres, nous travaillons uniquement sous Mac OSX. Les outils installés possèdent pour la plupart une alternative adaptée à Windows.

L’éditeur de code

Il est l’outil principal du développeur ! En effet, il permet tout simplement d’écrire du code dans un ou plusieurs langages de programmation définis. Dans notre cas, il est évidemment utile pour travailler “en local” ou à distance (via un FTP).

A l’agence, nous avons opté pour Nova développé par la société Panic. Il est conçu spécifiquement pour les développeurs web et offre une interface utilisateur élégante et intuitive. Nova prend en charge de nombreux langages de programmation, offre une coloration syntaxique avancée (très utile pour faciliter la lecture du code), une gestion de projet efficace et une variété d’extensions pour personnaliser et étendre ses fonctionnalités. Il s’agit d’un outil de développement robuste et polyvalent qui vise à simplifier le flux de travail des développeurs tout en offrant une expérience de codage agréable et productive.

Gestionnaire de versions

Les gestionnaires de versions comme Git permettent de suivre les modifications du code, éventuellement de collaborer avec d’autres développeurs, et surtout de revenir à des versions antérieures en cas de besoin.

Environnement local

Un environnement de développement local tel que MAMP (pour Mac), WAMP (pour Windows) ou LAMP (pour Linux) permet de créer et de tester des sites web sur son propre ordinateur avant de les déployer sur un serveur en ligne. Il est indispensable pour certains langages comme le PHP qui ne peut être lu par un navigateur. Le serveur web va alors traduire ce langage en HTML afin que les navigateurs puissent le traiter.

Là encore, nous utilisons un outil externe se nommant Local, développé par l’entreprise Flywheel. Il a été conçu pour simplifier la création et la gestion de sites web WordPress. Il offre aux développeurs un moyen simple et rapide de configurer des serveurs locaux, de gérer des bases de données et de tester ses sites en cours de création.

Les bases de données

Des systèmes de gestion de bases de données (MySQL, dans notre cas) sont utilisés pour stocker les données des sites que nous réalisons. Chaque site possède sa propre base de données sécurisée.

Les navigateurs web

Les navigateurs web jouent un rôle très important tout au long du processus de création et ensuite, lors de l’utilisation des sites par les internautes. Ce sont eux qui vont lire le code et le traduire en une restitution visuelle. Pour un développeur, ils vont également servir à déboguer des erreurs de scripts, de ressources ou même des coquilles d’intégration, via des outils d’intégration (natifs ou ajoutés via des addons).

Bibliothèques externes et frameworks

Les ressources externes vont être utilisées dans le but de simplifier l’écriture de code au quotidien tout en assurant sa qualité. Quelques exemples :

• JQuery : bibliothèque JavaScript très populaire. Elle permet la simplification syntaxique du code et des fonctions pré-écrites. Elle est appréciée pour sa compatibilité avec de nombreux navigateurs et sa capacité à accélérer le développement web en réduisant la quantité de code nécessaire pour accomplir les tâches courantes.
• SCSS : extension de syntaxe pour les feuilles de style CSS. Il ajoute des fonctionnalités puissantes au CSS de base, notamment des variables, des boucles, des conditions et des importations de fichiers. SCSS permet aux développeurs web de créer des styles plus modulaires, maintenables et réutilisables. L’avantage principal réside dans sa capacité à rendre la gestion des styles plus efficace et à améliorer la lisibilité du code, ce qui en fait un choix courant pour les projets web de grande envergure. Les fichiers SCSS sont ensuite compilés en CSS standard pour être utilisés par les navigateurs web courants.
• Gulp : bibliothèque JavaScript très populaire utilisée pour automatiser des tâches répétitives telles que, pour MonaGraphic, la compilation de fichiers SCSS/JavaScript en un fichier minifié.
• Dploy : outil open-source qui permet d’automatiser de manière simple et rapide le déploiement en une seule ligne de commande d’un projet ou d’un dossier spécifique sur une cible donnée, de manière très sécurisée. Combiné avec Git, il permet d’envoyer seulement les fichiers notés comme ayant été modifiés.

Systèmes de déploiement

A l’agence, nous n’utilisons pas de système de déploiement à proprement parler car Nova le gère directement. Si votre éditeur de code ne le permet pas, alors il existe des outils de déploiement FTP ou SSH afin de transférer vos fichiers via un serveur distant.

Outils de conception

Pour la bonne lecture et l’intégration des maquettes graphiques réalisées par le webdesigner, une licence Creative Cloud permet d’ouvrir les logiciels Adobe Photoshop, Illustrator ou encore XD. D’autres structures utilisent Affinity ou Figma.

Documentation en ligne

Contrairement aux idées reçues, les développeurs n’écrivent pas toutes leurs lignes de code de tête. Si connaître par cœur certaines commandes ou dénominations est aisé avec quelques années d’expérience, il est souvent nécessaire de se référer à diverses documentations techniques, tutoriels et aux forums d’échange pour résoudre des problèmes et apprendre de nouvelles compétences.

La boite à bonne humeur 🥳

Même si souvent incompris (caricature du geek enfermé dans sa caverne 😂), le développeur a besoin de ses pairs et collègues pour travailler efficacement. Être entouré et soutenu dans les projets est la clé d’un travail de qualité.

La collaboration, les échanges en équipe et une insatiable envie de bien faire sont des valeurs primordiales chez MonaGraphic.

Ce qui ne nous empêche pas de nous affronter lors de parties de fléchettes d’anthologie !