Devfest 2019 : la Rock'n Roll Attitude !

Cette année encore (c'est ma troisième) j'ai eu l'honneur de participer au Devfest de Nantes : deux journées de conférences plutôt orientées pour les développeur•euse•s comme son nom l'indique et dont l'ambiance se rapproche de plus en plus du festival de métal Hellfest — très proche géographiquement — dont il s'inspire abondamment.

Pour sortir de ma zone de confort, j'y ai présenté un sujet sur la typographie, thématique que je ne maîtrise pas tant que ça mais qui me passionne : "L'épopée des polices CSS de Comic Sans aux fontes variables".

"Grandiose" est le premier mot qui me vient à l'esprit en entrant dans le Centre des Congrès de Nantes. Et encore, je suis arrivé tôt et l'entrée était loin d'être remplie.

Énormément de stands partout, sur deux étages, tous orientés très "rock". Des activités toutes plus originales les unes que les autres : des karaokés, des simulations de réalité virtuelle, du guitar smashing, des concours de headbanging, des tatouages éphémères, de la conception de t-shirts, etc. Et... même des places à gagner pour le Hellfest 2020 ! (Bon, j'avoue, j'ai peu d'espoir).

Voici un résumé de mes aventures dans le Grand Ouest de la France, et plus particulièrement les moments qui m'ont le plus marqué…

Dès le début de journée, il a fallu choisir entre des confs radicalement différentes : les frameworks de Hubert Sablonnière et les daltoniens de Laura Wacrenier… Au final tous les feux étaient au vert pour le daltonisme :)

Au delà des couleurs (les interfaces adaptées au daltonisme)

La présentation de Laura Wacrenier est indubitablement une sensibilisation à l'accessibilité et au daltonisme. On reste dans le domaine de l'introduction mais avec le parti pris de systématiquement illustrer avec des exemples du quotidien et surtout appliqués en production chez Sonarsource (la société où oeuvre Laura). Bref on est dans le concret et c'est bien plus parlant ainsi.

Le déroulement est classique mais efficace :

• Laura commence par un état des lieux de l'existant dans sa boîte et le constat que toutes les interfaces jouent avec les couleurs rouge-vert-bleu (les dashboards, le formulaires),
• Elle poursuit avec les types de daltonisme, le plus courant étant l'atteinte du cône vert (deuteranoponia). Atteinte du chromosome X, donc concerne plus souvent les hommes (8%) que les femmes (0.5%),
• Elle passe ensuite aux bonnes pratiques (contrastes des textes, des éléments non textuels, ne pas se reposer sur les couleurs, souligner les liens, proposer des thèmes de couleurs, etc.)
• Et elle finit par le plus costaud : convaincre les équipes, ce qui n'est pas évident puisque les chiffres ne jouent pas en notre faveur (4.5% de la population est daltonienne). Comprendre que cela bénéficie à tout le monde et proposer systématiquement des design review (niveau AAA, tester avec simulateurs de daltonisme, approuvé sur un channel Slack dédié, etc.).

En conclusion, j'ai bien aimé cette présentation. Pas forcément pour ce qu'elle m'a appris mais surtout parce que l'enthousiasme de Laura est communicatif et donne envie de faire bouger les choses !

Les slides sont disponibles ici : https://drive.google.com/file/d/1IUtL_4KIRtLPfuTKsYxjcWHAftXPXd6L/view

Pause de midi

Toasts, canapés, wraps, etc. sont au rendez-vous. Gargantuesque mais relativement peu végétarien dans l'ensemble (ou alors j'ai mal cherché) et bien entendu beaucoup de monde qui se rue sur le buffet. Mais il est toujours difficile de réguler plusieurs milliers d'affamés.

La thématique Rock'n Roll n'est pas en reste puisqu'une scène musicale est prête à accueillir des groupes de musique en pleine improvisation ou de reprise de Nirvana, Rage Against the Machine, etc.

Burp !

Interactive web animation with SVG

C'est Cassie Evans de Clearleft (à Brighton) qui a la lourde tâche de nous tenir éveillé durant la digestion.

L'objectif de sa présentation est clairement d'encourager l'audience à adopter les animations SVG. Il s'agit donc plutôt d'une sensibilisation à l'aide de démos visuelles "whaou" qu'une conférence purement technique avec du code.

Malheureusement, la toute première démo Codepen plante, ce qui n'a pas dû arranger le niveau de stress de Cassie. La "Wobbly Jellyfish" sera finalement animée après diverses manipulations ésotériques. Ouf !

Parcours sans surprise, la présentation débute par un explication de ce qu'est le format SVG, à savoir à la fois une image mathématique et un langage de "markup" avec un DOM. SVG fait le pont entre Dev et Design.

À travers une démonstration concrète d'animation d'un Neopet, Cassie évoque les étapes et les bonnes pratiques à suivre :

• Choisir l'un des nombreux outils graphiques tels que Illustrator, Figma, Inscape, ou encore des banques d'images SVG telles que freepik.com
• Toujours nettoyer le fichier avant de commencer par exemple avec svgomg
• Continuer sur Codepen. Il suffit de copier/coller le code SVG dans Codepen puis de s'amuser avec.

Note en passant : la notion de "SVG viewport" qui représente la partie visible du SVG. Ce qui en déborde sera croppé.

Assez rapidement, Cassie aborde les limitations rencontrées :

• Pas de notion de z-index dans SVG, il faut apparaître dans le bon ordre du DOM pour être correctement superposé
• On ne peut pas enchaîner les animations en CSS, il faut jouer avec des delay successifs
• Le point d'origine de la transformation n'est pas identique selon les navigateurs. La récente propriété transform-box définit le layout box (valeurs fill-box ou view-box) et harmonise les navigateurs. Proposition de tester via @supports (transform-box: fill-box) {...}

Pour pallier ces limitations, Cassie évoque les bibliothèques utiles : Anime, Greensock, velocity.js :

• Ces librairies (sous licence MIT en général) gèrent les origines de transformations et les timelines successives
• Greensock propose des plugins (drawsvg plugin, morphsvg par ex.)
• Greensock propose également diverses courbes d'accélération originales telles que bounce et rough
• Ces librairies permettent en outre de réagir à l'audio ou à la webcam (color detection, face detection avec face API)

Au final tout cela est bien enthousiasmant en effet et je n'ai carrément vu personne s'endormir après le repas.

Les slides sont disponibles ici : https://slides.com/cassiecodes/deck-4-5

Promouvoir son projet open-source comme une rock star !

Une présentation de Franck Abgrall et Thomas Betous proposée par un duo bien sympathique, motivé et dynamique.

Le combo fonctionne bien, le rythme est entraînant, les échanges sont pertinents et pas trop de lourdeurs qui pourraient être dûes à une sur-préparation.

Mine de rien, même si tout est construit comme un sketch, les contenus sont bien là et exposés point par point :

• Bien préparer le projet (attendre qu'il soit mature, choisir un nom approprié, peaufiner l'aspect graphique, proposer une démo et une documentation claire)
• Déployer le projet (commencer à en parler dans son entourage, puis les réseaux sociaux, écrire des articles, le présenter à des conférences, créer des vidéos, etc.)
• Conserver ses usagers (mettre à jour le projet régulièrement, maintenir et corriger les issues, inviter aux contributions, remercier les contributeurs)

J'ai bien aimé ce moment à la fois divertissant et fort instructif : il y a plein de points pertinents qu'on imagine mettre en place dès le retour au bureau !

Les slides sont disponibles ici : https://speakerdeck.com/franckabgrall/comment-promouvoir-son-projet-open-source , et l'ensemble des conseils réunis sous forme de "Cheat Sheet" : https://github.com/zenika-open-source/open-source-promotion-cheat-sheet

Conclusion

Qu'il est difficile de résumer en quelques paragraphes l'ampleur du contenu et de l'ambiance d'un événement tel que ce Devfest. Pour l'avoir connue presque à ses débuts, on ne peut nier que cette manifestation a pris une ampleur considérable et devient sans aucun doute un regroupement incontournable aujourd'hui pour les développeuses et développeurs de tout poil et de tous horizons.

L'ambiance bon enfant et de je-ne-me-prends-pas-trop-au-sérieux est un atout considérable et ajoute à toute cette masse de contenus et d'informations emmagasinés une touche de légèreté qui rend encore plus indispensable ce type d'événement.

Je tire mon chapeau à toute l'équipe du staff pour l'organisation sans faille de cette manifestation exceptionnelle !