Le guide ultime pour accélérer son développement frontend

Sommaire

1. Introduction
2. Préparer son projet
3. Lancer rapidement son projet
4. Maîtriser les pré-processeurs
5. Don't repeat yourself
6. Améliorer son éditeur de texte
7. Tirer le meilleur de son OS
8. Limiter la distraction
9. Faites chauffer les claviers
10. Créer un workflow et l'améliorer continuellement

1. Introduction

Avant toute chose je tiens à vous faire remarquer que ce guide est le fruit de ma réflexion et de mon expérience du développement frontend. Par conséquent, si vous voulez tirer le meilleur de ce qui va suivre je vous conseille de vous faire votre propre opinion des différents outils / conseils et de créer en conséquence votre propre workflow.

Cet article provient à l'origine d'un post sur Quora que j'ai écrit pour répondre à la question "Quelles sont les meilleurs astuces pour gagner du temps lors d'un développement front ?". Vous remarquerez que ce guide se base surtout sur les différents outils à disposition plus que sur les méthodes de productivité personnelle permettant de booster sa productivité.

2. Préparer son projet

Pendant longtemps sur mes projets personnels j'ai pris l'habitude de toujours débuter en négligeant la phase de conception. Je pensais naïvement que le fait d'avoir rapidement un premier résultat me permetterai ensuite de développer plus vite et de trouver de nouvelles idées.

Astuce n°1 : Ne jamais mettre la charrue avant les boeufs

Le problème de cette méthode c'est que même si le résultat est visible rapidement les erreurs de conception sont quasiment inévitables. Ainsi on finit par passer plus de temps à corriger des erreurs de précipitation que d'avancer sur les features importantes de l'application.

Dernier exemple en date, je me suis fixé comme challenge de développer un clone du populaire et hilarant Reddit /r/photoshopbattles en l'espace d'une soirée. Je me suis lancé en négligeant la conception de la base de données. Conséquence directe : j'ai passé près de 1h pour écrire 5-6 requêtes SQL tant la structure était mal conçue !

Définir les grandes lignes

Avant de commencer le développement je prends toujours un peu de temps pour réfléchir à l'objectif de ce dernier, quelle est sa valeur ajoutée et surtout quelles fonctionnalités font la singularité de l'application. Je m'installe donc sur une terasse de café ensoleillée ou simplement dans le métro, avec mon petit carnet de projets et j'y pose sur papier ce qui me passe par la tête.

Je n'ai pas de méthodologie précise à vous proposer. Le meilleur conseil que je puisse vous donner c'est d'essayer différentes méthodes et de trouver celle qui vous correspond le mieux et qui vous fait gagner le plus de temps.

Astuce n°2 : Poser ses idées sur papier permet de mieux cerner son projet et d'en tirer ses forces/faiblesses

Réaliser des prototypes

L'intérêt de réaliser des prototypes est assez simple. Une fois ces derniers réalisés l'intégration du webdesign devient bien plus limpide : il suffit de reproduire à l'identique le prototype dans sa version HTML/CSS. L'intérêt est double :

• Rapidement cerner les erreurs d'ergonomie et d'UX
• Se concentrer exclusivement sur l'intégration

Astuce n°3 : Faire des prototypes permet de ce concentrer sur l'essentiel et de limiter les erreurs

Il y a deux écoles qui s'affrontent lorsqu'il s'agit de réaliser des prototypes : le papier et le pixel. Chacune avec ses avantages et inconvénients. La tableau suivant récapitule la situation :

Tableau comparatif des avantages et inconvénients du papier ou du pixel

Si vous choisissez l'option papier vous vous rendrez rapidement compte (si comme moi vous n'êtes pas très doué en dessin) que vos traits ne sont pas droits, que votre logo Twitter ressemble plus à une patate qu'à un joli oiseau et j'en passe ! Le remède miracle, UI Sentcil l'a trouvé et commercialisé : une règle qui fait office de pochoir. Simple et diablement efficace !

Everyday Carry Kit de UI Stencils Everyday Carry Kit

Il vous arrivera probablement de devoir tracer des grilles ou avoir besoin de repères. Pour ça je vous recommande de télécharger un .pdf contenant ces repères et de l'imprimer. Une simple recherche sur Google vous permettra vite de trouver votre bonheur !

Si vous optez pour le digital il existe une liste impressionante d'outils de prototypage : à vous de trouver celui qui répond le mieux à vos besoins. Pour ma part, je me sers d'InVision pour son expérience utilisateur irréprochable, sa qualité ergonomique et son lot de fonctionnalités impressionnant.

Bien choisir ses outils

Il est bon de toujours choisir les bons outils en fonction du projet que vous réalisez. En effet, faire tout à la main sans se servir d'outils existant serait une perte de temps considérable. De même utiliser des dizaines d'outils puissants mais lourds et difficiles à mettre en place nuit à votre productivité.

Je prends toujours le soin avant chaque projet de les trier en deux catégories et de choisir en conséquence les différents outils que j'utiliserai :

• Les expérimentations
• Les autres sites

Ce que j'appelle les expérimentations sont comme leur nom l'indique des projets qui me permettent de tester des nouvelles technologies. Par conséquent ces projets ne sont pas destinés à être mis en production et ne répondent à aucune contraintes de performances ou de SEO. 

Par conséquent, je ne pose aucune limite concernant le nombre et la nature des outils dont je vais me servir. Par défaut j'inclus un grand nombre d'outils (librairies (S)CSS, jQuery, Font Awesome, des palettes de couleurs,des outils de debug...). Ensuite il ne me reste plus qu'à activer ces outils à travers des fichiers de configurations en fonction de mes différents besoins. Enfin, j'étoffe cette librairie d'outils au fil de mes trouvailles :) Je n'organise pas mon code, ne commente presque rien, ne respecte aucune bonne pratique : je sais que ces projets sont à usage unique et que je ne reviendrai peu/pas sur ce que j'ai codé. Je vous laisse constater par vous-même constater le résultat avec mon dernier projet, la brocalculator, je n'ai même pas pris le soin de renseigner la balise title.

Conseil n°4 : N'hésitez pas à cumuler les outils et à ne pas être trop perfectionniste avec les projets expérimentaux

Les autres sites, destinés à être mis en production impliquent d'autres contraintes : esthétiques, ergonomiques, performances ou encore référencement. Gardez à l'esprit en choisissant vos outils que chaque projet est unique et qu'il nécessite ou pas certains outils.

Par exemple, sur une commande d'un webdesign créatif et original il semble peu judicieux d'utiliser le thème par défaut de Bootstrap car son design est devenu bien connu et facilement identifiable, en outre, comme tout framework il impose des contraintes qui parfois seront contre-productives. Il serait plus logique d'utiliser un thème moins connu, de développer son thème ou, plus simple, d'un modifier un. En revanche, il ne serait probablement pas une bonne idée de créer un webdesign complet pour le backoffice. Cette partie n'étant visible qu'à une fraction très restreinte d'utilisateurs il n'y a aucune besoin de faire dans l'originalité. En outre, le fait que Bootstrap sont bien connu du public sous-entend que ce dernier a appris à identifier les différents éléments graphique et n'aura donc aucun mal à saisir leur utilité.

Conseil n°5 : Choisissez judicieusement vos différents outils en fonction des différentes contraintes

3. Lancer rapidement son projet

HTML5 Boilerplate

De tous les templates front-end, HTML5 Boilerplate, ou h5bp, est certainement le plus populaire. Et pour cause, ce dernier est l'un des templates, si ce n'est le template le plus abouti. Il se présente sous la forme d'un dossier contenant le HTML, le Js et le CSS "de départ" d'un site. Parfois certaines fonctionnalités sont de trop mais globalement h5bp répond parfaitement au besoin d'un développeur qui souhaite commencer un projet sans avoir à écrire des dizaines de lignes de HTML, copier-coller des snippet et télécharger des librairies.

Entre autres outils inclus dans h5bp :

• Intègre Normalize.css et Modernizr
• jQuery et Google Analytics
• Compatible sur la majorité des navigateurs
• Bref, un excellent point de départ pour tout projet !

Conseil n°6 : HTML5 Boilerplate est l'une des meilleures bases pour commencer un webdesign

Jekyll

La baseline de Jekyll : "Transform your plain text into static websites and blogs" représente à la perfection la finalité de cet outil. Formulé autrement on peut dire que Jekyll est un générateur de sites statiques. Quelle différence avec PHP ou tout autre backend qui permet de se connecter avec une base de données ? Jekyll a l'avantage d'être simple et diablement efficace !

Jekyll se base sur le language Markdown (la syntaxe de wikipédia, entre autres) et le moteur de template Liquid, deux outils puissant et éprouvés. Là où Jekyll tire toute sa force c'est quand il s'agit des modèles. Au lieu de se baser sur SGBD comme MySQL ou MongoDB, il exploite un simple système de fichier (avec le choix de la syntaxe entre YAML, JSON ou CSV). Bien entendu sur des projets avec du contenu dynamique et de nombreuses pages cette option n'est pas viable. En revanche, sur des sites de plus petite facture avec du contenu statique c'est l'option idéale.

Conseil n°7 : Ne pas hésiter à utiliser Jekyll sur des petits projets avec du contenu statique

Bower

Bower est un gestionaire d'assets : librairies javascript, CSS, images, typos... Il se charge de trouver, télécharger et intégrer les différents librairies de votre projet. Vous avez certainement déjà soupiré à force de télécharger ou de copier/coller encore et encore des librairies maintes fois utilisées. C'est ce problème que résout Bower. En outre il permet de mettre à jour automatiquement les différentes mises à jours de l'ensemble des librairies utilisées dans le projet et ce en respectant les différents problèmes de compatibilité et de dépendances.

Conseil n°8 : Bower est votre ami quand il s'agit de gérer des librairies externes

Yeoman

Qui a dit qu'une image valait parfois mieux qu'un long discours ? Je ne sais pas. 

H5BP versus Yeoman

Vous saisissez l'idée ? Yeoman est un outil de scaffolding. L'idée de ce genre de tool est la même que HTML5 Boilerplate : poser rapidement les bases d'un projet. Mais Yeoman, yo pour les intimes, va plus loin. D'une part il génère le projet, télécharge les différentes librairies et met en place différentes configurations. D'autre part il créé un véritable workflow permettant d'accélérer et d'optimiser son développement.

Yeoman se base sur un système de générateurs. A l'heure où j'écris cet article il existe près de 1500 générateurs différents pour tout autant de type de projets web. Il existe un générateur pour HTML5 Boilerplate, un autre pour les plugins jQuery, un autre pour Wordpress, un pour Jekyll . Bref, vous m'avez compris, il y a un générateur pour tout.

Génération d'un projet Angular avec Yeoman Génération d'un projet Angular avec Yeoman

En outre, yo installe aussi d'autres outils propres au workflow, tels que SASS ou Jade. Le tout est géré par un autre programme, Grunt, qui se charge de lancer les différents outils au moment nécessaire. Ainsi, une fois lancé, Grunt permet de compiler des fichiers SASS et de vérifier la validité de son code Javascript. Enfin, Grunt intègre aussi d'autres outils permettant la mise en production d'un projet : compression des assets, minimisation des images, testing du code ect... Si le sujet vous intéresse un article détaille le sujet sur Alsacréations.

Vous comprenez maintenant l'image du début ;) De toutes les astuces dont il est question dans cet article, Yeoman est probablement celle qu'il faut retenir : simple à mettre en place et très efficace. Passez le cap de la réticence à la console et devenez un vrai ninja !

Conseil n°8 : Yeoman est la boîte à outil la plus complète et efficace du développeur frontend

4. Maîtriser les pré-processeurs

Le concept des pré-processeurs est d'ajouter des fonctionnalités tout en simplifiant un language. Ce pseudo-language sera ensuite interprété, puis réécrit dans le language d'origine. Ainsi, il devient possible d'utiliser des boucles, des conditions ou des variables en CSS. On peut donc par exemple définir une palette de couleurs hexadécimale au début de son projet et les réutiliser dans l'ensemble des différentes pages. L'avantage dans ce cas est double : pouvoir modifier toutes les couleurs d'un site en modifiant une ou plusieurs variables et pouvoir identifier les différentes couleurs à travers le nom des variables. Autre fonctionnalité intéressante, l'imbrication des sélecteurs. Je vous laisse constater par vous-même :

/* En SASS */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Résultat en CSS

/* Résultat compilé en CSS */

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Il existe des pré-processeurs pour le HTML, le plus connu et populaire d'entres eux, Jade, arbore une syntaxe simple et élégante. Les chevrons disparaissent pour laisser place à un code lisible et aéré. L'imbrication des différents éléments HTML est réalisée grâce à l'indentation et enfin - cerise sur le gâteau - il n'est plus nécessaire de fermer ses balises ! Enfin, tout comme avec SASS, Jade intègre des fonctionnalités telles que les conditions, les boucles et les variables.

De même, Javascript n'échappe pas au prolifique développement des pré-processeurs à travers CoffeeScript. Je ne m'étendrai pas dessus par manque de connaissances mais l'idée reste la même, améliorer tout en simplifiant le language.

Conseil n°9 : Les pré-processeurs ajoutent des super-pouvoirs aux languages traditionnels

En guise de synthèse je vous laisse regarder cet élégant snippet provenant de CodePen alliant Jade, SASS et CoffeScript :

5. Don't repeat yourself

Comme son nom l'indique, la technique du Don't Repeat Yourself, souvent abrégée DRY suppose que ses utilisateurs évitent au maximum de se répéter. Pour moi il s'agit plus d'une bonne pratique qui découle du bon sens qu'une véritable philosophie de développement. Mais pour d'autres il s'agit véritablement d'une philosophie de programmation qui les pousse à adopter certaines règles.

En posant les bases d'une philosophie de programmation basée sur des principes simples mes efficaces, il a amené la communauté de développeurs à remettre en question la manière dont ils écrivaient leurs feuilles de style.

Ainsi, en 2005, l'équipe de Yahoo, motivée par la maintenabilité décroissante de leurs styles ainsi que par le manque de généricité dans leur code a décidé de lancer un projet de fond transversal à tout son site. L'équipe de Yahoo lancera 1 an plus tard la YUI (pour Yahoo User Interface), le framework CSS le plus abouti de l'époque, basé sur le DRY.

CSSOO

Puis, d'autres équipes de développeurs travaillant sur de gros projets ont eux-aussi commencé à développer leurs propres frameworks à partir des principes du DRY tout en y ajoutant les concepts de programmation objet, d'où la naissance du CSSOO (pour CSS Orienté Objet). Elles y ont intégré les contraintes propres aux applications qu'elles développaient et ont divergé sur la façon de concevoir ces frameworks. Certains outils sont centrés sur l'interface graphique (Bootstrap, Fundation...), d'autres n'intègrent que des concepts avec un haut niveau d'abstraction et ne s'attachent pas/peu à la stylisation (SMACSS, BLOCSS et Inuit), certains quant à eux se situent entre les deux (Pure.io), enfin il existe des librairies conçues pour répondre au besoin du mobile-first (Cardinal, Ionic...)

Vous pouvez donc utliser l'un des outils précédents ou appliquer directement la philosophie de programmation du CSS Orienté Objet. Toutefois, je vous mets en garde : le CSSOO est un concept assez compliqué et demande de repenser la façon dont vous écrivez vos styles et votre HTML. Ainsi, l'intérêt d'apprendre et d'appliquer le CSSOO est directement lié à la taille du projet et à celle de son équipe.

Conseil n°10 : Si vous optez pour le CSSOO assurez-vous que ça en vaut la peine, si la mise en place semble trop compliquée basez-vous sur un framework

Les snippets

Les snippets sont de petits morceaux de code qui remplissent une fonctionnalité bien précise. Ils sont indépendants les uns des autres et permettent de résoudre simplement des problèmes réccurents. Le snippet CSS suivant permet par exemple de mettre la première lettre d'un paragraphe en capitale.

p:first-letter {
    display:block;
    margin:5px 0 0 5px;
    float:left;
    color:#FF3366;
    font-size:60px;
}

Il existe de nombreuses sources pour trouver des snippets, entre autres sur le célèbre blog de Chris Coyier, CSS-Tricks.

Le répertoire de snippets de CSS-Tricks

Certains sites sont spécialisés dans les snippets pour Bootstrap, d'autres sont plus généralistes, enfin vous pouvez toujours bien entendu constituer vous-même votre propre librairie de snippets. Si vous choisissez cette option je vous conseille de prendre un peu de temps pour regarder la technique de Jeffrey Way alliant un plugin Sublime Text et les Gists de Github.

6. Améliorer son éditeur de texte

Une fois encore, votre éditeur de texte occupe une place centrale dans votre workflow. Ainsi, n'hésitez pas à tirer le maximum de son potentiel pour gagner du temps. Avant même de parler de customisation d'éditeur il vous faut choisir un éditeur en fonction de vos différentes contraintes. Si ce n'est pas déjà ou si vous pensez que votre éditeur de texte actuel ne répond pas à toutes vos attentes je vous invite à lire cet article qui couvre bien le sujet.

Pour ma part je me sers du populaire Sublime Text, qui répond à la perfection à mes critères de sélection : la rapidité d'utilisation, le fait qu'il soit hautement customisable (notamment à travers une grosse communauté et quantité de plugins) et l'interface graphique irréprochable. Peu d'éditeurs peuvent rivaliser avec Sublime sur ces points-là. Deux éditeurs chassent tout de même sur le même terrain : Brackets qui s'adresse aux webdesigner plus qu'au développeurs web et Atom l'éditeur conçu par Github qui vient récemment de passer en V1.

Le thème et coloration syntaxique

L'aspect esthétique n'influence pas directement votre capacité à produire rapidement du code. Toutefois développer dans un environnement confortable avec des schémas de couleurs cohérents et une interface graphique épurée rendent le travail plus agréable. Scotch.io propose un article très complet sur ce sujet, sinon une recherche sur Google avec le mot-clé "Sublime text theme" ou un tour sur Color Sublime devrait suffire à faire votre bonheur !

Conseil n°11 : N'hésitez pas à rendre l'interface de votre éditeur de texte plus plaisante

Les plugins

Il existe une multitude de plugins pour les différents éditeurs de texte du marché. Ils répondent à différents usages plus ou moins spécifiques mais ont tous la même finalité, gagner du temps.

Emmet

Emmet, anciennement Zen Coding, est probablement le plugin le plus connu dans le monde des développeurs web. Et pour cause, ce dernier permet de produire du HTML à la vitesse de l'éclair et ce à travers une syntaxe simple et minimaliste. L'exemple ci-dessous vous permettera de vous faire une idée concrète de ce dont je parle.

Emmet à l'action

Emmet intègre aussi un assez grand nombre d'alias et de snippets permettant d'écrire plus rapidement du CSS, mais cet usage perd presque tout son intérêt face aux pré-processeurs CSS qui comblent le besoin de façon plus pertinente à travers les includes et les mixins.

Git Gutter

Git Gutter est un plugin de Sublime Text permettant d'indiquer de façon visuelle les lignes ajoutées, éditées ou supprimées comme on pourrait le voir avec git diff, simple et pratique :)

La grande majorité des plugins de Sublime Text sont présents sur Package Control, qui permet de trouver facilement les différents plugins et de découvrir ceux à la mode.

Conseil n°12 : Trouvez et utilisez les plugins qui répondent à vos besoins

Vim Mode

Enfin, je ne peux pas terminer cette partie sans parler du Vim Mode de Sublime Text. Vim est un éditeur de texte conçu pour les consoles. Il est réputé pour être extrêmement efficace, basé sur un système de raccourcis claviers, de macros ou encore de bookmarks. Son apprentissage est long, mais le jeu en vaut la chandelle ! Si vous voulez vous initer le tuto le plus sympa que j'aie trouvé s'appelle Vim Adventures et se présente sous la forme d'un jeu.

7. Travailler dans un environnement confortable

Ça peut sembler une évidence mais je pense qu'il est important de se poser la question du confort de son cadre de travail. Il n'y a pas grand à dire à ce niveau là, je vous laisse toutefois admirer ces quelques espaces de travail savamment conçus.

Conseil n°13 : Installez vous confortablement, assurez-vous d'avoir assez de café et d'écrans

8. Limiter la distraction

Toute forme de distraction tue votre productivité. Aucun scoop ici-bas. Le problème des différentes interférences qui pourraient vous distraire est double :

D'une part tout le temps que vous passez à faire autre chose que ce que vous faisiez initialement est du temps perdu, d'autre part, chaque interruption vous fait perdre votre concentration et il faudra un certain temps pour remettre dans le bain.

Limiter toute forme de distraction est un élément crutial de votre capacité à programmer vite. Mais à ce jeu là tout le monde est différent. Par exemple, j'arrive très bien à travailler dans le métro, dans un bar ou dans les lieux publics en général. D'autres personnes en revanche ont besoin d'un endroit calme, de musique ou au contraire d'un silence parfait. Là encore c'est à vous de savoir ce qui marche et ce qui ne marche pas en d'adapter vos habitudes en connaissance de cause.

Prenez un peu de temps pour faire la liste des choses qui peuvent vous distraire, voici quelques idées :

• Une voiture qui klaxonne dans la rue
• La personne avec qui vous vivez rentre de sa journée
• Votre téléphone qui sonne
• Cet onglet Facebook qui vous fait de l'oeil
• Ce mail qui, perfectionniste comme vous êtes (ou pas) fait passer le compteur de mails non lus de 0 à 1
• Cette belle blonde qui me regarde au moment où j'écris

Entre autres conseils je vous recommande de ne pas ouvrir trop d'onglets. Il est facile lorsque l'on ne trouve pas la solution à un problème ou lorsque l'on manque d'inspiration de cliquer sur les différents onglets. Il peut aussi être judicieux d'épingler les onglets. De cette manière ils n'occupent que peu d'espace, on ne peut pas les fermer en un clic et ces derniers déconcentrent mois : pratique pour le client mail, les réseaux sociaux ou la musiques.

A chaque problème sa solution, à vous de juger la limite entre s'enterrer dans un bunker ou travailler dans une boîte de nuit. Le truc, c'est surtout d'y penser avant de se lancer !

Conseil n°14 : Limitez tout source de distraction sans pour autant vous couper du monde

9. Faites chauffer les claviers

Et oui, ça peut paraître évident mais en définitive votre productivité est belle et bien liée à votre capacité à taper vite et bien sur votre clavier ! C'est tout aussi vrai pour la souris même si ça a clairement moins d'impact. En règle générale, plus vous utilisez votre souris plus vous perdez de temps. Celà peut paraître futile, mais multiplé par le nombre de fois que vous utilisez votre souris au lieu de votre clavier ça finit par vous coûter un temps fou !

Apprendre les raccourcis clavier

Les raccourcis de l'OS

Le B.a-ba c'est sûrement Alt + Tab qui permet de passer rapidement d'une fenêtre à une autre. La touche Windows est elle aussi centrale lorsqu'il s'agit d'interagir avec l'OS, notamment sur Windows 8. En effet une simple pression créé automatiquement une recherche qui permet de trouver et de lancer des programmes rapidement. Autre raccourci crucial Windows + Flèche de droite / gauche qui permettent d'ajuster la fenêtre à une taille fesant la moitié de l'écran. Dans le même ordre d'idée Windows + Flèche du haut permet de passer une fenêtre en mode plein écran. Enfin, Windows + D permet d'afficher rapidement le bureau.

Les raccourcis du navigateurs

En temps que développeur web vous passerez une grande partie de votre temps sur votre navigateur. Par conséquent il est intéressant d'en maîtriser les différents raccourcis. Ctrl + T et Ctrl + Maj + T permettent respectivement d'ouvrir et de rouvrir le dernier onglet fermé. Ctrl + W permet de fermer un onglet. Ctrl + Tab et Ctrl + Maj + Tab permettent quant à eux à naviguer d'un onglet à l'autre. La touche Maj permet en règle générale de faire l'inverse de ce que propose un raccourci. Je m'explique : appuyer sur la touche espace dans une page web permet de scroller d'un écran vers le bas, appuyer sur la touche espace + Maj permet de scroller d'un écran vers le haut. 

Autres raccourcis utiles F12 permet d'afficher la console de Chrome, Ctrl + J les téléchargements et Ctrl + H l'historique.

Les raccourcis des éditeurs de texte

Enfin, l'autre endroit où vous passez le plus clair de votre temps c'est votre éditeur de texte. Je ne vais bien entendu pas couvrir tous les différents éditeurs de texte dans cet article mais certains raccourcis sont souvent communs à tous les éditeurs de texte et de façon générale à tout logiciel qui inclut du texte.

La touche Ctrl permet de naviguer de mot en mot. La touche Maj permet de sélectionner du texte. Ainsi en cumulant Ctrl + Maj + Flèche directionnelle on peut sélectionner un ou plusieurs mots sans toucher sa souris. C'est particulièrement important lorsqu'il s'agit de coder où un grand nombre de traitements s'appliquent sur le texte. Ctrl + Flèche directionnelle permet de naviguer sans sélectionner le texte.

Il existe une multitude de raccourcis clavier pour de nombreux usages. L'important est d'identifier quelle fonctionnalités de votre logiciel est réccurente et si c'est possible d'en apprendre le raccourci pour limiter au maximum l'usage de votre souris.

Conseil n°15 : Chaque raccourci clavier c'est deux secondes de gagnées !

 Apprendre à taper plus vite

Taper vite sur son clavier c'est bien, taper très vite c'est encore mieux. Pas besoin d'un long discours pour mettre en avant le fait que la vitesse à laquelle vous tapez sur votre clavier influe directement sur votre productivité. J'en parle tout de même car il existe un certains nombre d'outils permettant de s'entraîner à taper plus vite. Utiliser ce genre d'outil d'entraînement est un investissement sur le long terme et nécessite tout de même de la pratique.

Il existe une multitude de sites qui proposent des exercices pour s'entraîner dont entre autres Keybr qui se distingue par une méthode d'apprentissage très particulière et efficace tout en proposant des statistiques et un suivi des performances.

10. Créer un workflow et l'améliorer continuellement

GIT

Git est un élément central du workflow du développeur. Rapide et efficace il aborde un modèle de contrôle de version décentralisé à l'inverse de la plupart de ses concurrents. De fait, sa flexibilité a l'avantage de permettre aux développeurs d'intégrer Git efficacement dans leur propre workflow. Ainsi qu'il s'agisse d'un seul développeur, d'une petite équipe suivant une méthode agile ou encore un gros projet open-source faisant appel à des centaines de développeurs, Git sait répondre au besoin de ses utilisateurs efficacement.

Pour ma part je encore néophyte dans le monde de Git et j'ai trouvé la courbe d'apprentissage très difficile, notamment au début. Toutefois, ce constat est contre-balancé par la quantité et la qualité de la documentation concernant Git ! En revanche, une fois maîtrisé Git devient assez vite votre meilleur meilleur ami, notamment lorsqu'il s'agit de travailler en équipe.

Si l'envie vous prend de vous lancer dans le monde merveilleux du contrôle de version un excellent point de départ serait la formation git de Grafikart à ce propos.

Conseil n°16 : Git est votre extrêmement efficace lorsqu'il s'agit de travailler en équipe, mais il peut aussi être intéressant lorsque l'on travaille seul

Checklist

Enfin, une fois votre application terminée il ne vous reste plus qu'à la déployer. Mais cette étape, vous le savez probablement déjà, n'est autre qu'une fastidieuse succession de fixs en tous genre : entre le sitemap.xml, le robot.txt, le favicon ou encore le code de tracking de Google Analytics.

Un outil simple et efficace pour ne rien oublier et limiter ces allers-retours qui retardent la finalisation de votre projet : la checklist ! Je ne vais pas m'étendre sur le concept de checklist, je pense que vous saissisez l'idée :)

Un site, assez logiquement nommé Web Developer Checklist, propose une liste exhaustive de choses auxquelles penser avant de mettre un site en production. Si vous préférez Trello et/ou si vous avez besoin de travailler en équipe sur la mise en production, un board inspiré de Web Developer Checklist est disponible, il vous suffit juste de le copier.

Conseil n°17 : N'oubliez pas les classiques, la checklist avant de lancer un site reste diablement efficace

Conclusion

Mes chers lecteurs, je vous remercie les plus courageux de m'avoir lu jusque là surtout au vu de la longeur et de la densité de ce dernier :)

La conclusion de cet article est assez simple. La productivité est avant tout fonction des différents outils que vous utilisez et la manière dont vous les utiliser. L'important est de savoir les quels sont utiles, quel investissement en temps pour quel bénéfice en productivité et enfin se questionner sur ces outils et en ajouter / supprimer au fur et à mesure.

Je remercie aussi Alsacréations de me permettre de poster dans ce qui a toujours été pour moi l'un des hauts-lieux du webdesign français.