Il y a souvent une différence de 10% de salaire entre un senior (4-6 ans d’expériences) qui gagne 47.5K et un simple développeur Front-End qui atteint seulement 34K.

[…] en général le salaire a tendance à progresser énormément et le taux d’évolution du salaire selon les années d’expériences pour un développeur Front End connaît une augmentation de près de 70% en moyenne.

Fiche Développeur Front-End

Il y a également une fiche Intégrateur web qui relègue définitivement ce dernier au rang du webmaster des années 90-2000.

Fiche intégrateur web

Vous en pensez quoi de ces fiches ?

J’aime bien cette partie qui est à mon avis trop souvent oubliée dans les compétences du métier du développeur front-end :

L’objectif du Front-End est de rendre le site internet plus ergonomique (esthétisme visuelle) et de rendre plus accessible la partie fonctionnelle (navigation sur le site).

Les préprocesseurs CSS ne remplacent pas le langage CSS en lui même et le fait d’apprendre un nouveau langage qui vient se sur-ajouter n’empêche en rien de continuer l’apprentissage de CSS (il n’est d’ailleurs pas possible d’apprendre Stylus sans connaître CSS). Il est de la responsabilité de chacun de maintenir ses connaissances en la matière, la dérive étant parfaitement illustrée par l’usage de jQuery qui dans l’esprit de nombreuses personnes a remplacé le couple JavaScript/DOM à tel point que l’apprentissage de JavaScript fait actuellement un retour en force, il est effectivement primordial d’avoir des connaissances en JavaScript et comprendre le DOM pour comprendre ce que fait jQuery et pouvoir adapter son code en fonction des buts et performances à atteindre, mais ceci fera sans doute l’objet d’un autre article sur le sujet.

J’aurais pu m’en tenir à un article sur les préprocesseurs css en général, mais de nombreux blogs l’ont déjà très bien fait dans le détail (cf la partie ressources de cet article) ou faire un énième article sur Sass qui est déjà super documenté et à qui Kaelig Deloumeau-Prigent a consacré un ouvrage entier : CSS maintenables Avec Sass et Compass (que je n’ai malheureusement pas encore eu le temps de lire), ou encore Less qui a certainement été le premier à être utilisé. Je me suis attaché à regarder du côté de Stylus qui est plébiscité par de nombreuses personnes de mon entourage et qui pourtant n’a pas le même retentissement que les deux premiers, pourquoi ?

Première question : qu’est-ce qu’un préprocesseur ?

Un préprocesseur est un programme qui procède à des transformations sur un code source, avant l’étape de traduction proprement dite (compilation ou interprétation).
source Wikipedia.

Dans le cas d’un préprocesseur CSS la syntaxe simplifiée ou enrichie en entrée est analysée et compilée en un langage que nous connaissons tous et que nous utilisons au quotidien : CSS.

Par exemple ces lignes de code écrites avec un préprocesseur CSS sont analysées et transformées en langage compréhensible par le navigateur.

Input :

body
  font 12px Helvetica, Arial, sans-serif

Output :

body {
  font: 12px Helvetica, Arial, sans-serif;
}

Avant de continuer : qu’est-ce qu’est CSS et qu’est-ce que n’est pas CSS et que viennent compenser les préprocesseurs ?

CSS n’est en aucun cas un langage de programmation, le fait de ne pas pouvoir définir des variables ou des conditions limite ses possibilités d’utilisation. Il est quasiment impossible de rationaliser le code CSS sans faire de nombreuses répétitions. Les préprocesseurs viennent combler ces manques à tel point que certains n’hésitent pas à y voir l’avenir de CSS.

Comment fonctionne Stylus ?

Qui peut le moins peut le plus. La syntaxe de Stylus est simplifiée à l’extrème, elle reprend celle de Jade, le moteur de template pour Node.js : oublions les deux points, points-virgules et parenthèses, ces signes de ponctuations auront leur utilité dans Stylus comme nous le verrons par la suite mais pas celle à laquelle les destine CSS initialement.

Il est ainsi possible avec Stylus d’écrire la propriété CSS suivante :

De cette façon,

body {
  font: 12px Helvetica, Arial, sans-serif;
}

ou de cette façon,

body
  font: 12px Helvetica, Arial, sans-serif;

ou encore de celle-là.

body
  font 12px Helvetica, Arial, sans-serif

Ce qui veut dire que Stylus accepte également l’écriture de CSS en version native.

Point important : l’indentation par tabulation rappelle la syntaxe de Python, et c’est là tout la rigueur de ce langage, selon que vous indenterez d’une façon ou d’une autre l’interprétation en sera complètement différente. Une habitude qui se prend très vite étant données les possibilités offertes.

Pour paraphraser Yves Bonnefoy, je dirais : pour comprendre Stylus installons Stylus.

Etape 1 : installer Nodejs
Etape 2 : installer Stylus en ligne de commande

npm install -g stylus

C’est fait ? Parfait, nous allons pouvoir passer à la pratique.

Vous créez votre répertoire comme d’habitude : fichier HTML, répertoire pour les images, etc. mais à la place de votre fichier.css, vous créez un fichier .styl, c’est ce fichier qui sera analysé par Stylus pour sa transformation au format CSS.

Il suffit juste de lancer Node et Stylus avec l’option « watch » sur le répertoire contenant votre fichier ou sur le fichier en lui même. Le fichier sera compilé à la volée.

stylus -w monrépertoire/monfichier.styl

Très pratique, vous travaillez sur le fichier .styl et vous liez à votre fichier HTML le fichier .css, ainsi vous pouvez voir directement sur votre page les modifications que vous apportez à votre fichier stylus, simple, non ?

Plus d’infos sur ce point particulier ? C’est indiqué là :

1. Les sélecteurs

Nous avons vu dans les quelques exemples donnés plus haut qu’il était optionnel d’indiquer les accolades, les parenthèses, les deux points voire les points virgules à condition d’indenter le code correctement. Il est également possible de ne pas indiquer les virgules à condition de passer à la ligne. Une fois ces quelques règles intégrées, il est très simple de commencer à coder comme vous le feriez naturellement avec CSS.

Pour se référer au sélecteur parent dans le même bloc de CSS, il suffit d’ajouter & devant la propriété définie.

body
  section div a
    color red
  &
    color blue

Un exemple plus parlant ?

body
  section div a
    color red
    &:hover
       color blue

aura pour résultat en sortie

body section div a {
  color: #f00;
}
body section div a:hover {
  color: #00f;
}

2. Les variables

Voilà certainement ce qui manquait le plus aux CSS pour assurer une maintenance facile des feuilles de style. Avec stylus les variables peuvent être préfixées par un $ ou pas. Les noms des propriétés peuvent être utilisées, on peut donc définir les valeurs pour la propriété font en utilisant une variable font, mais par soucis de clarté, il est conseillé de nommer les variables de manières à les identifier rapidement et sans ambiguité.

par exemple

fontarial14=14px Arial, sans-serif;

ou de cette manière

$fontarial14=14px Arial, sans-serif;

Ensuite cette variable sera utilisée partout où on voudra définir la propriété définie.

body
  font fontarial14

A noter que si vous utilisez le signe $ en préfixe du nom de votre variable, il faudra appeler la variable telle qu’elle a été définie (avec le $ donc).

body
  font $fontarial14

Mais le plus intéressant est de pouvoir utiliser la valeur d’une propriété définie dans un bloc CSS pour l’assigner à une autre propriété en ajoutant simplement le préfixe @ devant :

#logo
   position: absolute
   top: 50%
   left: 50%
   width: 150px
   height: 80px
   margin-left: -(@width / 2)
   margin-top: -(@height / 2)

Dans le cas où la propriété est définie plusieurs fois dans un même bloc, la dernière valeur (en remontant à l’intérieur du bloc CSS) sera prise en compte, dans l’exemple ci-dessous @color aura la valeur #00f (blue).

body
  color: red
  p
     color: blue
     a
	background-color: @color

Voilà, vous en savez assez pour pouvoir commencer et intégrer Stylus dans vos outils de travail, je vous encourage à prendre connaissance de la doc officielle de Stylus qui est claire et très bien documentée. Vous me pardonnerez, j’espère, les nombreux emprunts que j’ai pu y faire mais il me paraissait important de poser les bases avant de pouvoir aborder d’autres points plus précis à l’avenir. Les prochains articles consacrés à Stylus seront consacrés à des cas pratiques ou à des aspects plus obscurs du préprocesseur.

Ressources :

• Le manifeste du CSS pur et dur
• Clarence le poney
• Sass And LESS: An Introduction To CSS Preprocessors
• 8 CSS preprocessors to speed up development time
• Deep Dive Into CSS Preprocessors
• Csspreprocessor – Language Design
• How to Write a CSS Preprocessor Using Node.js?
• Sass vs. LESS vs. Stylus: Preprocessor Shootout
• Using CSS preprocessors effectively
• Sass vs. Stylus: Who Wins the Minimal Syntax Battle?
• Préprocesseurs CSS
• CSS Pre-Processors: Stylus, Less & Sass

Les réactions sur twitter n’ont pas manqué comme par exemple : D’après twitter tous les web designers présents à #parisweb viennent de démissionner de leur job (@recifs) ou encore des citations intégralement reprises du discours de Mike Monteiro « Si vous n’êtes pas impliqué émotionnellement dans ce que vous créez, laissez tomber. » (via @FlorianNeveu), « Décide d’être le connard qui va faire bouger les choses. Personne ne te donnera la permission. » (via @kreestal), « La peur de ne pas avoir de travail ou d’être viré ne devrait pas nous guider. » (via @armonyaltinier). Un véritable appel à la désobéissance mais également et surtout au travail bien fait et bien conçu ! On se remonte les manches et on repart au combat pour défendre une certaine idée du web. Je n’ai pas encore lu Design is a job, livre sorti récemment dans la petite collection de couleur de A book apart, mais je pense que je ne vais pas tarder… Et vous, vous en avez pensé quoi ? Discours facile ou prise de conscience ?

1. JavaScript Fundamentals: Objects
2. JavaScript Fundamentals: Functions

Edge Animate, pour les animations proprement dites (un successeur à Flash ?), Edge reflow, outil de conception d’interfaces responsive, Edge code, l’éditeur de texte, etc. Tous les outils sont regroupés sur la page : html.adobe.com

Pour l’instant surtout des démos. A suivre…

Avec l’arrivée de html5 et tout le cortège de nouveautés – la plupart du temps non applicables dans un environnement de production, le pauvre intégrateur doit se muer en véritable couteau suisse : en plus de maitriser html5 et css3, sans perdre de vue l’accessibilité et la compatibilité multi-navigateurs, il doit être un crack en javascript et un utilisateur averti des principales bibliothèques basées sur ce langage, il doit avoir de bonnes connaissances en design, en ergonomie, en expérience utilisateur, maitriser les technos pour le mobile et le responsive design, les préprocesseurs CSS, savoir optimiser son code pour le SEO et/ou booster les temps d’affichage d’une page web, connaitre plusieurs langages de templating, avoir de solides connaissances en PHP et des notions en administration de serveurs, n’en jetez plus la coupe est pleine ! Quel autre métier a une telle exigence envers ses professionnels et exige une telle étendue de connaissances ? L’intégrateur est-il en train de devenir le pendant du webmaster du début des années 2000 ? De deux choses l’une ou vous êtes un stakhanoviste de l’intégration et il est fort probable que vous ayez dit adieu à toute vie privée, sociale ou affective ou vos connaissances sont vouées à rester superficielles dans tous ces domaines.

Je pose donc la question de la formation. A quel moment ce processus indispensable à tout métier, et à plus forte raison à un métier dont la matière évolue très rapidement, intervient-il ? Comment est organisée cette formation ? Est-ce que parce qu’un intégrateur est souvent décrit comme une autodidacte passionné, il doit prendre ce temps de formation sur son temps libre – tout benef pour l’employeur ? Quelle est la politique des entreprises à leur égard, si dans certains cas le temps d’auto-formation et de veille est inscrit au contrat, la plupart du temps il est difficile dans le rush des projets à boucler de prendre le temps de se former convenablement. La veille se limitant à quelques articles lus en diagonale et quelques tweets échangés sur le sujet. Ce qui n’empêche pas les agences de vendre des prestations sur des technos non maitrisées et non éprouvées. la formation se fait souvent en cours de projet, selon le vieil adage c’est en forgeant qu’on devient forgeron.

Au-delà de la question de la formation, se pose la question de la valorisation des ces compétences. Quand je vois le niveau de salaire offert dans certaines annonces, je me dis qu’il y a maldonne… Soit vous voulez un junior qui débute et c’est tout ce que vous pourrez vous offrir pour le maigre salaire que vous êtes prêt à verser, soit il va falloir sortir la monnaie ! Oui on n’a pas fait tout ça pour rien ! (Pour ceux qui ne travaillent pas pour l’argent, mais pour la gloire, rien ne vous empêche de négocier vos talents à leur juste valeur et reverser une partie de vos revenus à des œuvres caritatives…). Il est bien entendu que nous parlons d’un contexte commercial et non de projets communautaires ou de bénévolat, quoique certaines entreprises commerciales proposent des postes proches du bénévolat au niveau de la rémunération…

Le besoin de reconnaissance est tel chez les intégrateurs que j’ai pu côtoyer dans ma vie professionnelle, que je suis prêt à me demander s’il n’y a pas un profil psychologique particulier pour ce métier, à ce point là c’est pathologique. Non mais vous en connaissez vous des intégrateurs qui ne râlent pas, qui ne se sentent pas incompris, ou reconnu à leur juste valeur ? A croire qu’en entreprise on s’acharne sur eux ! Alors que ces types sont des experts dans leur domaine, on continue à ignorer nombre de leurs recommandations en matière de conception d’interface ! Pire on leur mets dans les pattes des chefs de projets persuadés d’en connaitre autant si ce n’est plus qu’eux (voir l’effet Dunning Kruger)

Savez-vous que dans les pays anglo-saxons il y a des chasseurs de têtes qui sont spécialisés dans le recrutement des développeurs front-end ? Qu’il y a des annonces qui ne demande que, et seulement que, les compétences nécessaires à un développeur front-end ? Ça laisse songeur…

Quelques citations d’annonces qui m’ont amusé ou fait bondir, (qui rédige ces annonces, sérieusement ?) :

« Diplômé d’une Ecole d’Ingénieurs ou d’un Master 2, vous justifiez d’au moins deux ans d’expérience sur un poste similaire. »
http://www.meteojob.com/candidat/offres/offre-d-emploi-developpeur-h-f-ile-de-france-cdi-1701396

« Vous êtes capable d’architecturer convenablement une application web et modéliser une base de données MySQL (Merise / UML / MVC »
https://remixjobs.com/emploi/Developpement/Developpeur-web-Front-End-H-F/7302

« Vous êtes jeune et dynamique » (So 90’s & si discriminatoire…)
http://emploi.alsacreations.com/offre-512983-Developpeur-js—integrateur-web.html

« Intérêts:
• Ambiance internationale
• Structure jeune et dynamique
• Poste basé à Paris »
http://emploi.frenchweb.fr/offre-emploi/developpeur-front-end-senior-pour-une-agence-digitale/

« Nous voulons quelqu’un capable d’aller au delà des appréhensions »
http://www.jobintree.com/offre-emploi/le-crew-4355/developpeur-web-1664536

Pour le dernier, c’est vraiment du niveau senior, mais pas impossible, combien de profils correspondent ?
http://tbe.taleo.net/NA2/ats/careers/requisition.jsp?org=NURUN&cws=2&rid=1278

Aujourd’hui, la grande majorité des sites est encore conçue et construite par des généralistes de talent, et il n’y a absolument rien de mal à cela. C’est juste que certains des sites les plus importants et les plus complexes requièrent des équipes composites de spécialistes sur un domaine précis. Des experts en catégorisation des informations, en interaction homme-machine ou en conception d’interface. Ils ont également besoin de personnes qui se spécialisent dans des langages de programmation spécifiques, bases de données, sécurité ou architecture des applications. L’histoire de tout progrès humain peut être mesurée par la spécialisation d’individualités au sein d’un groupe, et je vois cela comme une bonne chose.

Nous avons donc ce paradoxe étrange que le terme webdesign puisse être utilisé à la fois pour décrire un novice et un expert, un néophyte et un maître. C’est là que l’effet Dunning-Kruger entre en jeu. Si vous n’êtes pas familier avec ce concept c’est l’observation que les novices souffrent de l’illusion de supériorité et ont tendance à sur-évaluer leurs compétences par rapport à celles des experts parce qu’ils ne comprennent pas pleinement l’ampleur du champ qu’ils doivent maîtriser. Ou pour utiliser un aphorisme souvent cité, «ils savent ce qu’ils savent, mais ils ne savent pas ce qu’ils ne savent pas ». Par comparaison, les experts ont tendance à en savoir plus, mais sont aussi plus conscients de ce qu’ils ne savent pas, ce qui a pour conséquence de les rendre moins sûrs de leur expertise.

NDR :

L’effet Dunning-Kruger décrit un phénomène selon lequel les moins compétents dans un domaine surestiment leur compétence alors que les plus compétents auraient tendance à sous-estimer leur niveau de compétence.

Se référer à l’article wikipedia qui décrit les observations qu’on pu faire David Dunning et Justin Kruger : Effet Dunning Kruger.

En résumé :

1. la personne incompétente tend à surestimer son niveau de compétence,
2. la personne incompétente ne parvient pas à reconnaître la compétence dans ceux qui la possèdent véritablement,
3. la personne incompétente ne parvient pas à se rendre compte de son degré d’incompétence,
4. si un entraînement de ces personnes mène à une amélioration significative de leur compétence, elles pourront alors reconnaître et accepter leurs lacunes antérieures.