3e jour : Les ateliers
Le troisième jour de Paris Web est consacré aux ateliers, interventions plus longues que les conférences des deux jours précédents, avec 1h30 ou 3h selon les sujets. L’objectif, comme le nom l’indique, est de permettre aux participants de réellement pratiquer, d’être plus actif dans la session.
Cette année, nous y étions moins nombreux qu’aux conférences, donc nous ne pouvons pas vous parler de la plupart des ateliers, mais deux collaborateurs Clever Age animaient des ateliers : Émilie Pistorius et Nicolas Hoizey.
Éradiquer les régressions visuelles grâce à BackstopJS
Par Corinne Schillinger
Slides disponibles à ce lien
Alexander
Corinne, auteur de « Intégration web – les bonnes pratiques« , ex-présidente de Paris Web, experte AccessiWeb. Elle jongle depuis plus de 10 ans avec HTML, CSS et JavaScript, elle a déjà fait plusieurs ateliers auparavant sur comment convaincre un client de la qualité de votre prestation en 2010, HTML5/CSS3 et l’effet “Waouh !” : les dessous de la magie en 2012 et les trucs et astuces pour débuter sereinement en 2016. La veille elle présentait aussi la conférence sur la maîtrise de SVG en 50 minutes avec Jérémie Patonnier((à voir dans notre compte-rendu du 2nd jour)).
Les régressions visuelles sont les plus pénibles à éviter quand on intègre ou maintient un site : il n’est pas toujours évident d’être sûr à 100 % qu’une modification de CSS ne va pas provoquer de régression sur une autre page ou sur un composant annexe.
BackstopJs est un outil de test de régressions visuelles qui fonctionne avec Node.js (8 minimum). S’il est utilisé avec un styleguide, la vérification de la modification se trouve simplifiée vu que l’outil génère des captures d’écrans et retourne une erreur en cas de problème.
La configuration se fait via le fichier backstop.json avec des nombreux paramètres :
id
: identifiant utilisé pour le nommage des capturesviewport
: tableau des résolutions pour lesquels les tests doivent être effectuésscenarios
: scénarios de tests à réaliserlabel
: nom donné aux captures du scénariourl
: url à tester (relative ou absolue)paths
: chemin des dossiers BackstopJSreport
: format du rapport de sortie (HTML ou jUnit)engine
: moteur de rendu utilisé par BackstopJS (Chrome-Headless, PhantomJS or SlimerJS)asyncCaptureLimit
: nombres de captures d’écran générées en parallèleasyncCompareLimit
: nombres de captures d’écran comparées en parallèlemisMatchThreshold
: pourcentage de différence autorisé avant que le temps n’échoue
Il est possible de créer une référence de test qui permet de cibler au choix le viewport, le document ou sélecteur en particulier, de cacher un sélecteur avant le test, préciser le nombre de cibles finales avec un sélecteur particulier, capturer les événements de clic ou de survol (avec ou sans délai) et attendre la fin d’une transition.
En plus de ces options, il est possible de générer un scroll initial avant de lancer le test, attendre un temps imparti avant, ou l’existence d’un sélecteur ou d’un log spécifique dans la console.
Bien entendu BackstopJs peut être exécuté via un script npm. BackstopJs semble un très bon allié pour tous les sites, petits ou grands, pour pouvoir modifier du CSS sans régressions.
Création d’un starter kit A11y orienté UX/DA, pour rendre accessible l’accessibilité !
Par Émilie Pistorius
Slides disponibles à ce lien
La petite clinique des images responsives
Par Nicolas Hoizey
Slides disponibles à ce lien
CSS Grid Layout, les mains dans le cambouis
Par Raphaël Goetter
Slides disponibles à ce lien
Nicolas
Raphaël Goetter, créateur d’Alsacréations et multi-récidiviste à Paris Web, est passionné de mise en page CSS, comme l’attestent ses ateliers précédents sur les tableaux de mise en page en 2011 et flexbox en 2016.
Cette année, la maturation du standard et le support grandissant dans les navigateurs permettent à Raphaël de nous présenter — et faire essayer — CSS Grid layout, le premier module CSS enfin vraiment destiné à la mise en page.
Certains éléments de syntaxes ressemblent au modèle de boîtes flexibles (Flexbox), voire sont identiques (par exemple order
ou gap
), et les deux standards sont très complémentaires, Flexbox étant plutôt fait pour la répartition d’éléments dans une direction (horizontale ou verticale, avec tout de même gestion des débordements), là ou Grid est vraiment fait pour répartir les éléments dans deux dimensions.
Pour cela, différentes syntaxes sont disponibles à base de grid-template
, dont les grid template areas qui permettent littéralement de dessiner la mise en page (façon ASCII Art), et de la faire potentiellement varier en responsive web design grâce à des media queries.
Les exercices proposés par Raphaël ont permis de découvrir progressivement les différents éléments de syntaxe, et de s’émerveiller des nouvelles possibilités offertes aux intégrations. Même s’il faut se méfier des implémentations incomplètes et/ou différentes dans d’anciens navigateurs, Grid est vraiment arrivé à une maturité suffisante pour s’inviter dans les nouveaux projets, en amélioration progressive grâce à @supports
.