La panoplie de base du webmaster

Travailler sur le développement de sites et applications web nécessite d’avoir des outils qui soient des plus simples à utiliser et/ou à mettre en place, des plus réactifs afin de s’adapter au mieux à chacun des projets, des plus évolutifs pour nous permettre de suivre l’avancée des technologies et des besoins utilisateurs… tout en restant inter-opérants, brefs de véritables couteaux suisses connectés.

Choisir un éditeur de code ou un IDE?

La liste des éditeurs de code est assez longue et varie entre de l’open source gratuit, jusqu’à de véritable IDE extrèmement complet et payant… Je vous propose de se rapprocher d’un article spécifiquement dédié aux éditeurs de code afin de pouvoir s’étendre plus verticalement sur le sujet et d’en présenter une liste potentielle et disponible. Éditeurs de code ou IDE complet?

S’entourer de librairies et/ou frameworks

De manière standard et native, l’ensemble des navigateurs prennent en charge une version très avancé de JavaScript, de plus compléte par une panoplie d’APIs html5, tout type d’applications peut être développer sans avoir recours à d’autres besoins externes. Cependant, en fonction des besoins de votre application et du temps à disposition dans le cahier des charges, il n’est pas nécessaire de devoir réinventer l’eau chaude à chaque fois et de s’appuyer sur des librairies et frameworks adapatés à certaines situations.

Là encore nous pouvons nous rapprocher d’un article dédidé aux diverses librarires JavaScript afin de verticaliser plus en avant chacune de ces possibilités.

Utiliser des préprocesseurs HTML, CSS, JS ?

Écrire du code, et qu’il s’agisse aussi bien de HTML, de CSS que de JavaScript, est bien souvent affaire de structures, de boucles, de décalarations, qui peuvent s’étaler sur plusieurs lignes de code et cela peut rapidement devenir assez chronophage.

À ce sujet, nous avons à disposition un certain nombre d’outils qui vont nous aider à simplifier l’écriture du code et qui permettent souvent de rester focaliser uniquement sur le fond et non sur la forme.

Quelques soient nos besoins, nous trouverons toujours parmi ces outils un qui correspondent à notre manière de travailler et qui s’adaptera au mieux à notre flux de travail. Afin de clarifier le présent article,vous trouverez un panaché d’outils en vous rapprochant de Pré/Post-Processeur et autres outils.

Que dire alors des automatiseurs de tâches?

En complément des outils précédent, il existe encore trois autres types d’outils qui permettent d’automatiser un certain nombre de tâches. Tâches que nous devons systématiquement répêter pour un grand nombre de projet, comme par exemple rafraichir l’aperçu du navigateur lorsque des modifications ont été réalisées sur un fichier, ou ajouter automatiquement du prefixage CSS à notre code, ou s’assurer que les images aient bien été optimisées avant d’être placées en ligne… bref vous l’aure compris, le genre de chose que l’on ne peut éviter, que l’on doit répéter sans cesse tout au long de la journée, et que l’on peut facilement relèguer à des observateurs exterieurs. Tous sont issus de la philiosphie apportée par Node.js.

Bien que ces automatisuers, ne soient pas nombreux, mais afin de rendre certaines lectures transversales plus simple, je vous propose d’externaliser leur approche indépendament du présent article, et pour cela je vous propose de vous rapprocher de l’article Les automatiseurs de tâches.

Installer et configurer son propre environnement de développement

Tout semble paré, nous avons vu l’outil de codage, quelques librairies ou frameworks, des outils d’aide à l’écriture de code et des automatisuers de tâches… tout est là ou presque, car cela reste uniquement des technologies clients, et grand nombre de sites ou d’applications web s’appuient encore et toujours sur des serveurs. Donc il nous faut également caler un environnement serveur. Travailler en local mais sur un serveur, voir à ce sujet Présentation et introduction aux technologies serveur.

Plusieurs solutions stacks existent et répondent à divers angles d’approches. Que l’on travaille sous Java, Microsoft, Linux, ColdFusion ou autres, nous trouverons toujours chaussure à notre pied. POur le présent article nous resterons sur une approche des plus conventionnelles, ou du moins la plus fréquemment rencontrée, et ce que nous soyons sous Mac (MAMP), Windows (WAMP) ou Linux (LAMP).

Rapprochez vous de l’article Installer et configurer un serveur web en local ou nous approcherons en détails les diverses solutions et la manière de les utiliser.

Utiliser des serveurs de tests distants

Bien que les tests réalisés en interne sur un serveur local puissent être assez proche de la réalité, il peut être conseillé de souvent finaliser une paire de tests en réelle situation sur des serveurs distants, loués auprès d’un prestataire externe afin de s’assurer de la bonne portabilité de nos sites et applications web. Les configuration de serveur mutualisés ne sont pas toujours aussi permissives que celles de nos serveurs internes.

Rapprochez vous des articles L’hébergement et le nom de domaine et Ouvrir un espace sur 000webhost afin d’explorer quelques possibilités en matières d’hébergements et services externes.

Les outils de contrôles et de validation

Une fois le développement suffisament avancé pour pouvoir être divulgué sur la toile, il est important de s’assurer d’une certains nombre de points qui vont garantir d’une part une meilleur prise en compte par les navigateurs assurant ainsi une bonne visibilité et un meilleur référencement, mais aussi et d’autre part une stabilité dans le temps et les futures évolutions de fonctionnalités à venir.

Il existe deux approches qui, bien que différentes, restent complètement complémentaires et cumulables. La première approche s’appuie sur des outils totalement tierces et externes, bien souvent ce sont des outils en ligne, alors que la seconde consiste à mettre en place une série de tâches automatisées, tournant aussi bien sous Gulp, Grunt que NPM, et qui executeront des vérifications à divers niveaux de nos sites et applications web.

Le plus simple pour explorer les diverses possibilités de tests et validations reste de se rapprocher de l’article Vérifier, contrôler et valider ses productions qui leurs est dédié.

Dans certains cas, la liste minimum peut se résumer à…

Il est vrai que le monde idéal n’existe pas, de même que parfois il n’est pas forcément nécessaire de devoir débaler toute une panoplie d’outils plus fins et complets les uns que les autres pour simplement déposer quelques fichiers en lignes… donc dans certains cas, la liste minimum peut se résumer à;

• un éditeur de code tel que Sublime Text, ou un IDE plus complet comme NetBeans
• complété par deux outils de préprocessing Emmet et Sass,
• supléé par un automatiseur de tâches de type Grunt, Gulp ou NPM
• et le tout accompagné de modules complémentaires ou de plug in (npm, plugins grunt ou gulp, gem, package control…) en fonction des besoins.

De manière générale, cette mini-panoplie d’outils va permettre de pouvoir optimiser le flux de travail et surtout le rendre plus confortable. Bien sûr, les articles liés et présentés ne font que survoler l’ensemble et ne pousse pas l’optimisation de chacun des modules.

Vous trouverez un grand nombre de tutoriaux plus verticaux, en googlant sur le sujet, ou en vous rapprochant de certains ouvrages plus avancés comme Mastering Grunt, Sass et compass in action, Scalable and Modular Architecture for CSS, Learning Susy, Sublime Productivity, …

En partenariat avec video2brain, il existe également quelques formations qui peuvent aider à appréhender l’approche de certains de ces outils comme Découverte de Sublime Text, Coder plus rapidement avec Emmet, Sass et Compass et Le CSS responsive avec Emmet, Sass et Compass.
Quoi qu’il en soit, bon code et bonne mise en place de vos environnements de travail.