Front-end : les outils à connaître

Front-end : les outils à connaître

Un développeur a pas mal d'outils qu'il découvre au fil de son expérience. Je vous propose de partager avec vous ceux que j'utilise au quotidien ainsi que leur utilité et leurs avantages. Certains sont devenus indispensables, d'autres sont utiles de façon occasionnelle.

Le développement web, c'est large. Je vais donc un peu catégoriser tout ça pour que l'on s'y retrouve. Pour commencer, voyons le front-end c'est à dire le côté client (aussi appelé client-side) qui se résume a priori aux langages HTML, CSS et JavaScript.

Les outils indispensables pour tout

Avant de voir tout ça, je vais vous présenter - si vous ne le connaissez pas encore - mon éditeur de texte préféré, ainsi qu'un outil de gestion de versions.

Sublime Text 2

Logo de Sublime Text 2
 

Cet éditeur est complet, utilisable gratuitement (avec un message de temps en temps pour vous dire que vous pouvez l'acheter) rapide et extensible. En effet, vous pourrez trouver une grande communauté autour de cet éditeur qui développe des plugins pour ST2. J'en utilise quelques uns, la plupart sont également ceux que Grafikart utilise et que vous pourrez trouver dans son article.

Git

Certains préfèreront SVN, mais Git reste quand même le leader des gestionnaires de version pour le développement. Il est notamment connu grâce à la plateforme Github (qui n'est qu'un "simple" site vous proposant tout un tas d'outils graphiques autour de Git). Il vous permet donc de gérer les versions de vos fichiers, de créer plusieurs branches de développement, mais également de gérer vos mises en production.

 

Pour les curieux, il existe d'autres endroits pour mettre vos dépôts Git :   

  • sur votre ordinateur ou votre serveur, en ligne de commande ou en rajoutant une interface graphique
    • Gitlab : c'est une sorte de clone de Github open source
    • Ungit : client Git multiplateforme, vous pourrez en savoir plus dans ce tutoriel vidéo
  • il existe d'autres services que Github dans le monde !
    • Bitbucket : l'avantage est que vous pouvez y créer, gratuitement, des dépôts privés (contrairement à GitHub où il faut payer)
    • Gitlab Cloud : le même qu'au dessus, mais sur un serveur, le tout déjà configuré et complètement gratuit et il y a également la possibilité de créer des dépôts privés

Pour résumer, GitHub est principalement utilisé pour les projets ouverts (open source) tandis que les autres plateformes seront plutôt utilisées pour les dépôts privés.

Les outils au front

Tout d'abord, notez le jeu de mot pourri de ce titre. Voilà. Ensuite, passons aux outils que j'utilise quotidiennement pour le côté client de mes sites web.

HTML5 BoilerPlate (H5BP)

Idéal pour commencer un projet, ce petit package vous propose une structure de base (un template) ainsi que divers outils et configurations. Il y a entre autre un fichier .htaccess avec une configuration du cache très optimisée, c'est d'ailleurs grâce à cela que ce site est très réactif.

Le "site" de H5BP

Initializr

C'est tout simplement un site qui vous propose de selectionner ce dont vous avez besoin pour commencer votre site, sur la base de H5BP.

Le site Initializr

Emmet

Logo d'Emmet
 

Quelque soit l'éditeur que j'utilise, Emmet est indispensable pour pouvoir coder très rapidement car il proposer des shortcodes pour vous éviter tous les caractères chiants dans du code HTML, typiquement les < > et compagnie.

Un petit exemple pour la route, vous pouvez créer très rapidement la structure d'une page en faisant ceci : html>(head>title)+body>div#main>header+div#corps+footer suivi de votre touche qui va déclencher l'appel à Emmet, bien souvent tabulation. Mais vu que vous avez bien suivi, vous comprendrez que ça n'est qu'un exemple, puisque j'utilise H5BP :)

Si vous souhaitez en savoir plus, je vous invite à regarder ce tutoriel vidéo expliquant l'intérêt d'Emmet

Le site officiel d'Emmet

Emmet LiveStyle

Les créateur d'Emmet sont allés encore plus loin en imitant, en mieux, LivreReload. Je vous présente Emmet LiveStyle qui, une fois lié à votre éditeur de texte préféré (donc Sublime Text 2), vous donnera dans votre navigateur le rendu en temps réel de ce que vous codez (sans même enregistrer). Et en plus de tout ça (qui est déjà beau) vous pourrez changer le style depuis le navigateur vers votre fichier ! Je vous laisse le plaisir de regarder la vidéo de démonstration, voire de l'essayer par vous-même.

Le site d'Emmet LiveStyle

Compass

Logo de Compass
 

Vous connaissez très certainement le CSS, ce langage est statique : on ne peux pas faire de variables, boucles, fonctions et autres joyeusetés. C'est rendu possible par le SCSS et le SASS mais nécessitent un préprocesseur (tout comme LESS), c'est à dire que vous devez les "compiler" pour les transformer en CSS car le navigateur ne sait pas interpréter du SCSS. Compass vous fournit pas mal de mixins (les fonctions en SCSS) qui vous permettront d'avoir déjà ce qu'il faut pour commencer à coder efficacement.

Une formation vidéo complète est disponible sur Grafikart.fr

Le site de Compass Style

Prepros

Dans la lignée du dessus, Prepros est un outil tout-en-un qui vous fournira divers préprocesseurs notamment pour LESS, SCSS, HAML, CoffeeScript et bien d'autres.

Pour en savoir plus, n'hésitez pas à regarder le tutoriel vidéo sur Prepros par Grafikart.

Le site de Prepros

Prefixr

S'il est déjà complexe de coder correctement en CSS, rajoutez à cela les préfixes propriétaire des différents moteurs graphiques et vous vous perdez. Heureusement il existe certaines solutions : notamment de passer par des mixins en SCSS (notamment celles de Compass) qui ont tout ce qu'il faut pour gérer les préfixes. Prefixr lui se propose de parser votre fichier et de vous le rendre avec les préfixes qu'il faut.

Le site de Prefixr (hé oui, c'est en anglais, mais ça devrait aller)

-prefix-free

Dans la même branche, il existe un script JavaScript nommé -prefix-free qui fait pareil, mais côté client. C'est à dire que vous codez pour votre navigateur préféré et le script (qui est donc inclus dans votre page) se chargera de fournir les règles manquantes pour le navigateur du visiteur.

Je ne suis personnellement pas fan de cette solution car elle est exécutée côté client et ça nécessite encore plus de calcul à l'affichage. L'avantage est que le CSS délivré est moins lourd puisqu'il n'y a pas tous les préfixes et ça se ressent notamment lorsque vous travaillez avec des animations CSS qui sont relativement longues.

Le site de -prefix-free

Modernizr

Petit fichier JavaScript bien sympathique qui va vous sauver un bon nombre de fois (il est fournis avec H5BP normalement). En effet, il permet de détecter le support de pas mal de technologies (WebGL, JavaScript actif ou non, etc) ainsi que de rendre compatible de récentes fonctionnalités telles que les media-queries avec les anciens navigateurs (pourvus qu'ils aient JavaScript d'actif, puisque c'est un script). Il est complètement modulable directement sur le site.

Le site de Modernizr 

Logo de CSSHat

CSSHat

Plutôt dans l'intégration pour celui-ci, il permet d'avoir le code CSS correspondant à un calque directement dans Photoshop. C'est à dire que les styles de calques sont convertis et vous sont fournis en CSS, SCSS ou LESS : à vous de choisir !

Extension payante au prix de $30 soit un peu plus de 22€.

Découvrir et/ou acheter CSSHat

À Suivre...

N'hésitez pas à compléter en commentaire si vous en connaissez d'autres (ou si j'en ai oublié), je suis loin de tout connaître et serait enchanté d'en découvrir de nouveaux. J'éditerais peut-être même l'article si certains me séduisent :)

Rendez-vous dans un prochain article pour les outils pour le côté serveur (back-end).

Votre gravatar
Gravatar de ugg rylan slipper sale uk 9mm ugg rylan slipper sale uk 9mm
Piece of writing writing is also a fun, if you be familiar with after that you can write otherwise it is complicated to write.
ugg rylan slipper sale uk 9mm http://www.thegrandpavilion.co.uk/?uk-ugg-rylan-slipper-sale-uk-9mm-3902.html
Répondre
Gravatar de podistorek podistorek
Bonjoux Alex vous faites un super travail je suis votre blog ainsi que vos tutos sur Grafikart.com je vous encourage et vous remercie bcp!
Répondre
Gravatar de G-rem G-rem
Bonjour Alexandre,

Je tiens à vous remercier, tout premièrement pour vos vidéos sur Sf2 que j'ai suivi il y a quelques mois de cela, et maintenant pour tous ces outils que je trouve merveilleux et qui me changent la vie au quotidien.

Je suis votre blog avec beaucoup d'intérêt et je suis toujours impressionné, tant dans la réalisation de ce projet que dans son contenu ! Continuez ainsi, et encore merci !
Répondre