The ABC of Coded Style Guides

on YouTube ↗30m

" summary

A small remote team of about six builds a component-driven style guide using Storybook with a live code editor and auto-generated docs, wiring components to real example data and exporting a browsable component catalog. The pipeline adds visual snapshot testing so CI compares screenshots and catches pixel regressions, and team reports faster onboarding, fewer component bugs and clearer release confidence after adopting the setup.

AI-written summary · about

" chapters (9)

1. 0:00Coded style guides intro
2. 1:32Style guides for team productivity
3. 4:17Reusable component libraries
4. 8:36Customer-focused component workshops
5. 13:06Component docs with live examples
6. 16:23Storybook for dev and collaboration
7. 21:27Testing components for consistency
8. 25:51Style guides for customer solutions
9. 29:01Feedback and continuous improvement

" related talks

• 37mThe ABC of Coded Style GuidesHenning Muszynski · React Alicante 2018
• 42mThe Dream of Styleguide Driven DevelopmentSara Vieira · React Alicante 2017
• 31mA Beginner’s Guide To StorybookNiamh McCooey · JSworld Conference 2023
• 34mThe Dream of Styleguide Driven DevelopmentSara Vieira · JSHeroes 2018
• 01h 05mStyleguide-Driven DevelopmentTatiana Kolesnikova, Arvid Torset · NDC London 2018
• 14mBuilding a component library with React, Vue, Angular or WebComponentsNorbert de Langen · Frontend Developer Love 2018
• 24mFrom Sketch to Code Designing a Component KitSamantha Bretous · Chain React 2018
• 28mFrom Sketch to Code Designing a Component KitSamantha Bretous · React Boston 2018