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

Dernières nouvelles du Front #1

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
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 !


Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.