|￣￣￣￣￣￣￣￣￣￣￣￣| CSS is my passion |＿＿＿＿＿＿＿＿＿＿＿＿| \ (•◡•) / \ / —— | | |_ |_

📣 Jeudi 15 Juin à 12:30, j'aurai le plaisir d'être invitée par la core team de @ProMyze_QL pour un webinar sur le software craft et l'intégration web. Avec @TeytonCedric et @ArthurMagne, on parlera de comment crafter de meilleures UI, en pensant le DOM comme une API. 👇

J'ai vu la conférence "CSS algorithms" de @laras126 👑 https://t.co/y1g5CxhGYE Et c'est devenu mon role model. 🤩 Elle explique avec brio tout ce que je n'aurai pas le temps d'aborder à @AlpesCraft, et met des mots sur des concepts qui était en cours de formulation dans ma tête.

using this real-time UI colorpicking tool, now you can find random trendy color palettes on the design itself. just press the Spacebar and get started :) try it out now on @codepen: https://t.co/DqwuAeJy0S or check live site: https://t.co/fTM62tTTSF #codepen #webdesign

Venez découvrir comment penser le DOM comme une API pour créer des interfaces testables, modulaires et accessibles. Avec des outils pratiques et des idées d'ateliers collaboratifs, améliorez vos pratiques dès demain! @manoncarbonnel_

Petit kiff de la semaine : https://t.co/iyqaepuwE2 🌅🌇 [Transcription vidéo : un coucher de soleil, ambiance synthwave, se transforme en lever de soleil minimaliste en fonction du niveau de scroll] #css #front #codepen #synthwave

Announcing… 🥁 https://t.co/c6Gg3SatKx A modern #CSS gradient and color picking tool for next-gen gradients: - explore color spaces - export modern and classic CSS - explore gradient features - share them - learn rad tips & tricks Chrome and Safari only (but not for long!)

📣 Au @DevoxxFR avec les #ExplosConserto 👀, il y a UNE conférence sur le CSS par @goetter "Ah, tu peux faire ça en CSS maintenant ?" Créateur d'Alsacreations, il est intégrateur et aime CSS au point d'en écrire des livres 😍 #DevoxxFR #conference #css

Ça donne envie d'en savoir plus sur son approche TDD maintenant qu'on a vu les outils. Suivez @RennesJS pour en savoir plus 👀

En plus des éléments visibles, il s'aide des tests unitaires pour aller vérifier l'accessibilité via le contenu des balises WAI-ARIA.

Ainsi, il se prémunit de la gestion d'état, de la gestion de navigation, du rebuild, etc. et peut se concentrer sur les composants eux-même.

Pour s'abstraire de la source de données à afficher, il utilise un contrôleur initialisé avec des bouchons qui va injecter des données types. Cette stratégie lui permet d'avoir une boucle de feedback instantanée sur le développement de l'UI de chaque composant.

Dans son approche, il a décidé d'utiliser @storybookjs, une librairie qui permet l'affichage et la manipulation de composants graphiques de manière isolée d'une application.

Avec une approche verticale des composants (qui traverse les couches que sont la vue, le contrôleur et le modèle) il préconise de travailler par baby steps, en se détachant de la logique applicative.

On continue la soirée des communautés avec @antoine_jouan sur le sujet : "Storybook ou comment faire son front sans prise de tête" Dans lequel il raconte comment il developpe et intègre ses composants React en démarche TDD

En conclusion, par rapport au besoin d'origine, leur travail est un succès ! Il est désormais open-source et comprend 30 composants.

François termine avec la documentation du Design System, sans laquelle le projet n'a pas de sens. Elle récapitule tous le nécessaire pour le connaître et l'utiliser.

En bonus, l'équipe développe des starters : des applications minimalistes avec le design system et l'environnement embarqués. On obtient de supers Component Development Kits, et une UI component sandbox (façon Storybook)

Pour garder une consistance dans le design, une charte graphique est désignée. De cette charte est exportée une liste de design tokens (couleurs, etc), et permet de développer des déclinaisons du design system (dark theme par ex) très rapidement et facilement

Pour assurer la qualité, la stratégie de tests engagée est conséquente : tests unitaire, tests end to end, tests de non régression visuelle avec screenshots, tests cross-browser à la main, tests d'accessibilité, tests de performance, tests d'intégration.