Parce qu'un bon artisan a besoin de bons outils

Publié dans: 

Multiples sont les web-design-studios tels que Dreamwaver, Microsoft Blend ou les plateformes de développement intégrables comme Kendo UI ou ComponentOne. Ils se présentent comme des outils ultimes pour le métier de Front-End-Devoloper. A l’opposé des développeurs Back-end s’occupant des différentes relations Données-Métier, le Front-end devolopper s’occupe plutôt du rendu web et des interfaces utilisateurs. C’est ici qu’interviennent ces différents outils pour accélérer le développement et faciliter l’intégration. Leur apport majeur reste le rafraichissement instantané et à la volée des interfaces tout au long de la modification du front-end-code, permettant ainsi d’éviter l’appel au navigateur pour visualiser le rendu.


Il est vrai que le glisser-déposer favorise la productivité et épargne le développeur les erreurs et les oublis de codage. Malheureusement, ce dernier a besoin de plus qu’un simple ajout de lien ou d’une image à déposer sur le document. Les IDE peuvent peut être offrir mieux que l'intellisense ou la fonction de commenter/décommenter pour permettre au développeur d'être plus rapide au codage et mieux productif. Comment peut-on alors combiner la force des outils de développement avec la richesse et la complexité des différentes constructions web pour réussir le challenge d’assurer une meilleure productivité et plus d’efficacité?


Codez plus vite avec Emmet 

Si JQuery s’annonce comme the Write less, Do more javascript library, Emmet est le write less, do more plugin. Ecrit en Javascript, ce greffon peut s’implémenter avec tout outil de développement web ou presque. Basé sur l’extension d’abréviation [structure particulière qui sera transformée en bout de code], Emmet permet d’obtenir des structures web complexes est assez personnalisées à partir d’une simple et courte abréviation qui reste assez compréhensible. Cela reste possible sans avoir à se soucier de déclarer auparavant les fragments de code [snippets] et l’insertion de ces blocs devient intuitive et facile à faire. Procédons tout d’abord à l’installation du plugin.

 

Installation

Téléchargez le plugin depuis ce lien. Le plugin est disponible pour Notepad++, Sublime Text, Eclipse, et d’autres ... On peut l’utiliser aussi sur des éditeurs en ligne comme JSFiddle or CodePen, et même les adeptes de Visual Studio peuvent être satisfaits avec le plugin disponible sur lien. Remarquez qu’Emmet était connu sous le nom de Zen Coding. Dans notre cas on utilisera l’éditeur Notepad++. L’installation se fait alors en trois étapes :

  1. Assurez-vous d’avoir le plugin Python Script (vérification possible sous le menu plugins/Compléments) sinon il suffit de le télécharger et de redémarrer l’éditeur.
  2. Télécharger le plugin depuis ce lien et décompressez le sous le dossier plugins où est installé votre éditeur. Par défaut il se truove sous C:\Program Files\Notepad++\plugins. Au redémarrage de votre éditeur le nouveau plugin se greffera sous NotePad est sera disponible sous le menu Compléments/Plugins.
  3. Personnalisation de raccourcis : Par défaut le raccourcis clavier pour étendre une abréviation est le tab sinon le plugin utilise le raccourci Crtl+Alt+Enter. Notepad étant très souple pour tout ce qui est personnalisation des raccourcis, il offre tout un menu permettant la modification des raccourcis natifs ou les raccourcis des plugins sous le menu Paramétrage\Raccourcis clavier… ou Settings > Shortcut Mapper
    La liste des raccourcis des plugins sous le sous-menu plugin-command permet alors de mapper les raccourcis et le fonctionnement souhaité.

Utilisation 

Emmet contient un ensemble d’abréviation prédéfinis dont on va découvrir quelques unes. Pour développer une abréviation il suffit d’appuyer sur la touche tab à la fin de celle-ci. Principalement on cite dans ce qui suit les opérateurs essentiels pour la construction des arbres du DOM :

 

L'opérateur child : > 

Cet opérateur permet de créer un nœud fils et de descendre dans l’arbre du DOM. Voici un exemple de son utlisation.

 

 

L'opérateur sibling : +
Cet opérateur permet  de créer un nœud voisin à côté du nœud actuel.

 

.

 

L'opérateur climb-up : ^
Cet opérateur permet de créer un nœud tout en remontant dans l’arbre du DOM.

 

 

L'opérateur multiplication : *
Cet opérateur permet de créer autant de nœud que le nombre indiqué après l’opérateur.

 

 

Mais Emmet ne s’arrête pas là. On peut aussi utiliser les groupements, la numérotation automatique, l’ajout de classe de style, les identificateurs du DOM, mais aussi les attributs personnalisés. Vous pouvez retrouver plus d’exemples dans la page de documentation du plugin. Voici un simple exemple qui combine plusieurs de ces opérateurs et abréviations.


 

Coté CSS, Emmet booste l’édition des styles et offre au designer la facilité d’ajouter des propriétés cross-browser en se basant sur le même principe d’abréviations. Voici deux exemples illustrent l’apport du plugin au développement :

 

 

 

 

C'était une petite idée sur ce qu'on peut obtenir avec si peu de code. Sinon pour accéder à la liste complète des opérateurs et abréviations veuillez consulter cette page.