· Événements

Paris Web 2018 : 3e jour de conférence

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 captures
  • viewport : tableau des résolutions pour lesquels les tests doivent être effectués
  • scenarios : scénarios de tests à réaliser
  • label : nom donné aux captures du scénario
  • url : url à tester (relative ou absolue)
  • paths : chemin des dossiers BackstopJS
  • report : 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èle
  • asyncCompareLimit : nombres de captures d’écran comparées en parallèle
  • misMatchThreshold : 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.