Dernières nouvelles du Front #1

Préface

Comme indiqué dans un précédent billet, je tente l'ouverture du blog à des auteurs externes, de jeunes développeurs brillants et sélectionnés avec soin.
Ils apporteront leur expertise et un point de vue décalé sur des sujets que je ne traite pas habituellement.

Je vous présente aujourd'hui Hadrien Pierart, freelance au parcours atypique, spécialisé dans le développement front (web et Android).
Hadrien tiendra notamment une rubrique récurrente intitulée "Dernières nouvelles du Front", inspirée des célèbres Javascript Weekly et HTML5 Weekly, dont voici le premier numéro.

Bonne lecture !
Olivier

Quelques mots sur moi pour cette première édition : historiquement développeur Java Android, je me suis rapidement mis au développement web et plus particulièrement JavaScript. Comme on ne peut rarement tout faire, j'ai choisi de me concentrer principalement sur le web, les webperfs et le développement fullstack avec une nette préférence pour le front et une passion pour ce langage atypique qu'est le JS.

Je suis freelance comme Olivier et je travaille actuellement pour une startup nommée Once.
Enfin je suis aussi Editor pour infoQ FR.

Pour résumer cette édition, je vais vous parler de plugins grunt, de nouveautés ou fonctionnalités cachées des DevTools de Chrome, de convention de code en CSS et un peu de JS bashing pour finir. (Ca fait toujours sourire, même pour un grand adepte comme moi)

Outils et Process

grunt-ssh : Intégration de tâches SSH et SFTP dans le build grunt.
grunt-autoprefixer : Ecrivez votre SCSS/LESS/CSS sans vous soucier des préfixes.
(Basé sur Can I Use)
grunt-babel : Codez en Ecmascript 6, il compile en ES5 pour vous. Output très propre !
grunt-spritesmith : Génère vos sprites d'images et le CSS pour y accéder.
grunt-browser-sync : Syncronisation de plusieurs navigateurs de tests, y compris les actions.
psi : Page Speed Insights permet d'intégrer un rapport PageSpeed dans votre build.

Debugging

DevTools: State Of The Union 2015 : Grosse claque, beaucoup de nouveautés et de super fonctionnalités.
Préférez l'utilisation de classes CSS : Paul Irish recommande d'éviter d'utiliser toggle(), :visible, :hidden qui provoquent des recalculs coûteux.
Cubic Bezier Editor : Un editeur de courbe de bézier, dans le debugger pour faire de magnifiques animations. (plutôt que toujours utiliser "ease")
Adieu `undefined is not a function` : Chrome renseignera maintenant le nom du coupable !
Blackboxing de script : Combinez avec async pour les chaines d'appels asynchrones et vous debuggez un problème de promise plus vite que votre ombre.

Best Practices et Convention de code

BEM et OOCSS : Pas nouveau, mais je découvre. Ou comment nommer ses classes CSS plutôt que d'imbriquer 12 niveaux de classes en LESS/SASS.

Critical Path ou Critical CSS : Déterminez quelles ressources sont indispensables pour afficher la toute première page de votre site, puis différez le reste.
defer et async : Chargez vos scripts et feuilles de style en différé pour améliorer la vitesse de chargement de votre première page. Explication visuelle très intéressante.

JavaScript WTF

+new Date(), +"" ou +{} : Comportement surprenant à première vue mais plutôt logique une fois que l'on comprend le raisonnement. Unary Operator FTW.

A la prochaine fois pour de nouvelles découvertes dans l'univers merveilleux du Front !