Crafting Stateful Styles with State Machines
summary
Claims that finite state machines make styles maintainable, testable, and interactive by encoding component states as attributes and transitions; uses ARIA, data-state attributes, CSS variables and a little JavaScript (examples use an XState/x8-style machine) to stop duplicate API requests and enforce single states; builds CSS-driven demos — button loading/success/fail, drag-and-drop, password form — plus a visualization generator that maps machine configs to diagrams, and shows the approach scales via hierarchical statecharts.
AI-written summary · about
chapters (25)
- 0:00Introduction
- 6:35Applying Classes
- 8:20User Flows
- 8:50States
- 9:55Finite State Machines
- 11:10Data Attributes
- 13:00Switch Case Statements
- 14:30XE
- 15:10Drag and Drop
- 16:45Previous State
- 18:10Animations
- 18:30Mouse Movement
- 19:10Mouse Movement Example
- 19:50State Mapping
- 20:40State Charts
- 21:30Hierarchy
- 22:10Data attribute selectors
- 23:10Data show data hide
- 23:50Password form example
- 24:30Visualization
- 25:10Sketch Systems
- 25:50Advantages
- 26:50Disadvantages
- 27:20Complexity
- 28:05Resources
related talks
18mCrafting Stateful Styles
28mState machines for frontend state management
38mInto the Visual World of State Machines
45mState of the Art User Interfaces with State Machines
25mMastering UIs with Finite State Machines
28msetState Machine
38mState of the Art Web User Interfaces with State Machines
20mSetState, We Need to Talk!