Intégration

HTML5, CSS3, SCSS, Bootstrap, Tailwind

90% HTML
90% CSS
70% SCSS

Résumé

Cela fait plus de 10 ans que je réalise des intégrations, au travers des expériences front-end. Preuve de mon ancienneté dans ce domaine, j’ai connu les problématiques d’intégration IE7 ! Je me suis formé en continu, au fur et à mesure à mesure de l’arrivée (et le support) des nouvelles possibilités comme flexbox ou des meta-langages SCSS, SASS.

Mon approche

On peut penser que le travail d’intégration ne nécessite que peu d’expérience. Et pourtant une intégration bien réalisée nécessite une très bonne connaissance du web.

WebPerf

Aspet indispensable et pourtant trop souvent ignoré, la webperf est une pratique qui consiste à réduire le temps d’affichage d’une page web. Bien évidemment, les temps de réponse du serveur et des différentes API servants la donnée ont un impact fort mais il existe tout un ensemble de leviers côté intégration pour améliorer considérablement votre score webperf.

Example de score Lighthouse pour cette page
(Scores Lighthouse de cette page)

Métrics

Il existe un ensemble de métriques à prendre en compte. Pour ma part, je recommande de suivre les indicateurs de performance de l’outil Lighthouse de Google : First Contentful Paint, Speed Index, Largest Contentfull Pain, …

Critical CSS (exemple)

Critical CSS est un terme désignant le style indispensable à la construction du rendu qui est au-dessus de la ligne de flottaison. Le header de votre page html doit contenir une balise style (et non link) incluant ce CSS.

L’extraction diffère en fonction des frameworks et outils comme le bundler. Idéalement cette mécanique doit être pensée en avance de phase et intégrée dans le socle du projet.

Sécurité

Sécuriser son frontend nécessite d’être vigilant et de se protéger à minima contre les attaques XSS via la mise en place de la couche CSP.

Maintenabilité

Un code bien rangé est un code maintenable et donc un code qui coûte moins cher sur le long terme. J’apporte une importance toute particulière à la structure du code en identifiant les ressources core et en découpant en composants. Le nommage des classes est un aspect tout aussi important pour ne pas si perdre avec le temps. Il existe des conventions comme le BEM qui permet de garder une structure claire et maintenable.

Accessibilité (A11y)

Site grand publique ou non, il est indispensable de prendre en compte les problématiques d’accessibilité lors de la phase d’intégration. Il existe un ensemble de bonnes pratiques à connaitre.

SEO

Le SEO est une discipline bien spéciale et n’est pas ma spécialité. Cependant, lors d’une intégration, je reste toujours vigilant aux bonnes pratiques de base comme l’utilisation des bonnes balises ou des attributs indispensables.

Développeur depuis 14 ans 21 jours 13 heures 56 minutes 46 secondes