Living Style Guide Driven Development
summary
Argues that building a living style guide from the actual code speeds design feedback and prevents regressions by presenting ember components in isolation, stubbing data and toggling states to exercise empty, loading, and animated cases. Uses ember-cli conventions and an add-on called ember freestyle to assemble a style-guide route with live reload, producing production-ready components in a few hours, improving onboarding and catching layout edge cases (37 shades of gray cleaned up).
AI-written summary · about
chapters (26)
- 0:00Intro
- 0:13CHRIS LOPRESTO
- 1:51EMBER FUELED
- 2:42IN THE YEAR 2000
- 3:01THIS IS NOT A DESIGN TALK
- 3:36IN THE YEAR 2003
- 4:18IN THE YEAR 2009
- 5:48WHY IS WEB DEVELOPMENT SO HARD?
- 6:30DESIGN CONFUSION
- 7:38INSPIRATION VIA MANIFESTO
- 8:19COMPOSING WITH COMPONENTS
- 9:39UI ELEMENTS
- 10:54HELLO WORLD
- 11:50EPHEMERAL STATE
- 13:08EMPTY STATES
- 14:22ANIMATIONS
- 15:47DESIGN MOCKUPS
- 16:10DATA EDGE CASES
- 17:19COMPONENT VARIANTS
- 19:09MULTI-STEP INTERACTIONS
- 21:16CREATE A LIVING STYLE GUIDE
- 23:24CODE SNIPPETS
- 24:17EMBER FREESTYLE ROADMAP
- 24:56EMPOWERING EMBER CONVENTIONS
- 25:23FURTHER EXPLORATION
- 26:26AMORE PERFECT UNION
related talks
20mBuilding a UI Styleguide in Ember
34mCreating Living Style Guides
37mThe ABC of Coded Style Guides
49mLiving Styleguide in your Drupal projects: Benefit from component driven design.
38mStyleguide-Driven Development
42mDesigning Inspired Style Guides
30mThe ABC of Coded Style Guides
27mDesigning for Ember Apps