Innovations CSS et JS : 3 talks inspirants à la Dot conférence
L’envie d’apprendre, d’expérimenter et de jauger son niveau de compréhension nous pousse constamment à se tourner vers de nouvelles sources de partage et de savoir.
Et sur ce chemin de l’apprentissage, nous avons été particulièrement inspirés par certains talks de qualité découverts à la DotCSS et DotJS.
CSS & Developer experience — Emily Plummer
Design System Engineer chez Github, Emily travaille avec son équipe sur un Design System et une librairie open source de composants React nommée : Primer. Elle est utilisée principalement par les développeurs et designers de Github pour faire vivre la plateforme Github.
La question centrale du talk est « CSS is hard. Design System can help. ».
Le CSS peut paraître difficile pour beaucoup de développeurs à cause de ses nombreuses fonctionnalités (Flexbox, Grid Layout, la réutilisabilité du code CSS, etc.), de la non-compréhension de l’utilisation de la cascade CSS et de l’intégration de l’accessibilité dans les composants d’une interface.
La solution trouvée par Emily et son équipe est de créer un Design System. C’est un ensemble d’outils, de bonnes pratiques, de valeurs et de principes qui permettent d’aider les équipes de développement à aller dans une même direction UI/UX.
Emily et son équipe ont choisi de composer leur Design System d’une librairie de composants React, de composants CSS et d’un guide de style.
On peut le retrouver à l’adresse suivante : primer.style
Ils se sont efforcés de rendre le Design System le plus simple possible à utiliser, ainsi les développeurs peuvent créer de nouvelles features plus rapidement et donc se concentrer sur d’autres aspects, comme la performance ou bien l’accessibilité.
Pour l’équipe Design System de Github, l’expérience idéale est qu’un développeur n’ait pas besoin de se souvenir des classes CSS utilitaires ou d’un balisage HTML particulier. L’expérience idéale passe aussi par la facilité de mettre à jour un composant, l’inexistence de code CSS globale et l’existence de très peu de code CSS spécifique.
Il faut toutefois garder à l’esprit que les utilisateurs du Design System tenteront toujours de contourner les règles imposées par cet outil. Le conseil d’Emily est de leur donner quelques libertés tout en laissant des garde-fous.
“Give your design system users flexibility, but nudge them onto the right path”
Par exemple, l’équipe de Github utilise styled-system (en combinaison avec styled-components) pour donner la possibilité aux développeurs de modifier quelques propriétés visuelles basiques du composant (width, height, font-size…).
Les slides de ce talk sont accessibles par ici, et vous pouvez aussi visionner directement la vidéo :
Modern frontend routing — Eduardo San Martin Morote
Ou comment démystifier le code se trouvant derrière la gestion des routes de Vue.js.
Après un rappel sur les éléments constituant une URL, Eduardo nous parle de la compatibilité des différentes API liées à l’URL (URLSearchParams, encodeURI, …), des différentes interprétations des navigateurs et de l’importance de l’encodage des URLs pour minimiser les effets indésirables :
Il nous présente également le matcher de Vue Router et notamment le système de points permettant de faire matcher les URLs indépendamment de l’ordre dans lequel elles étaient définies :
Ici l’on peut voir que chaque URL est associé à un score, calculé en fonction de la “complexité” :
Un path simple, par exemple ‘/home’ possède un score de 70.
Un paramètre variable dans une URL ajoute un score de 60.
Enfin la présence d’une regex dans notre liste de routes, ajoute un score de 5 à la route en question.
C’est ce système de scoring qui permet de définir l’URL la plus susceptible de correspondre à l’URL demandée par le navigateur et à Vue Router de matcher plus efficacement les routes que l’on définit dans notre app.
Vous pouvez retrouver directement l’intégralité du talk dans cette vidéo :
Acoustic activity recognition — Charlie Gerard
Un talk aux allures de POC, qui présente le côté fun de ce que l’on peut faire en JS.
Le défi de Charlie était d’utiliser la Web Audio API et la solution Teachable Machine de Google pour entraîner un modèle et lui faire reconnaître certains sons.
Grâce à Teachable Machine, Charlie a pu entraîner un modèle en lui donnant des enregistrements de sons définis (sonnerie de téléphone, toussotement, claquement de doigts, brossage de dents, …)
Le modèle exporté couplé à TensorFlow a ensuite permis à Charlie de créer une app permettant de faire de la prédiction sur les sons envoyés par son micro.
Le but de ce talk est de nous présenter les portes qu’ouvre la combinaison du machine learning et d’API telles que la Web Audio API pour des applications liées à la domotique ou encore au milieu de la santé.
L’exemple du toussotement pourrait être traduit par une alerte permettant de prendre un rendez-vous chez un médecin par exemple.
Malgré tout certaines limites persistent encore :
- Le besoin d’avoir une grande quantité d’échantillons pour entraîner le modèle,
- La qualité des sons pouvant influer les résultats (les bruits parasites par exemple qui peuvent fausser les prédictions),
- La taille importante des fichiers audios,
- Et la superposition de plusieurs sons qui n’est pas très bien interprétée.
Au-delà de l’aspect fun du brossage de dents en live et des différents tests de sons, son talk fait réfléchir sur l’étendue de ce que peut permettre de faire le JS, notamment la possibilité de faire du machine learning sans avoir à passer par du Python, en restant sur un langage que l’on connaît déjà.
Vous pouvez retrouver directement l’intégralité du talk dans cette vidéo :
Objectifs : concentration et écoresponsabilité
L’un des sujets récurrents de cette édition est l’environnement, la relation que nous entretenons avec lui via notre métier de développeur et l’impact des outils que l’on développe et utilise au quotidien.
L’édition de la Dot CSS et JS 2019 a été carbon neutral. Cela correspond à “un état d’équilibre entre les émissions de gaz à effet de serre d’origine humaine et leur retrait de l’atmosphère par l’homme ou de son fait”.
On apprécie également l’absence de réseau wifi et la scène unique qui permet aux speakers de bénéficier d’une attention maximale de la part des participants.
Ainsi, notre curiosité a pu être piquée et nous repartons avec l’envie de s’essayer à des outils en dehors de notre domaine de compétence.
En effet, les présentations de Charlie Gerard et Kassian Wren, sous forme d’expérimentations (du machine learning en JS pour Charlie et la création d’un groupe de musique avec une basse lumineuse pour Kassian), suscitent l’envie de jouer avec les librairies et les outils présentés.
Vous pouvez aussi revenir sur notre retour de la DotJS 2018.
De plus, nos collaborateurs participent régulièrement à des événements phares du monde de la Tech. N’hésitez donc pas à vous abonner à notre compte Medium pour suivre nos prochains retours de conférences et réaliser votre veille professionnelle.
Retrouvez aussi nos publications et notre actualité via notre newsletter, ainsi que nos différents réseaux sociaux : LinkedIn, Twitter, Youtube, Twitch et Instagram
Vous souhaitez en savoir plus ? Consultez notre site web et nos offres d’emploi.
Les auteurs
Frontend Developer
Développeur front-end
Cuisine, pixels & house music
