2025-11-03 21:46:15 +01:00
|
|
|
|
List of **next-stage tutorial ideas**, organized by **theme** and **complexity**, to help evolve both the teaching path and the framework.
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🧩 **A. UI and Interaction Patterns**
|
|
|
|
|
|
|
|
|
|
|
|
1. **Tutorial 9 — Forms and Validation**
|
|
|
|
|
|
|
|
|
|
|
|
* Build a `<user-form>` component with multiple fields and validation logic.
|
|
|
|
|
|
* Introduce unit tests for validation rules and error display.
|
|
|
|
|
|
* Show how to test async validations (e.g., simulated API check).
|
|
|
|
|
|
|
|
|
|
|
|
2. **Tutorial 10 — Modal Dialogs and Overlays**
|
|
|
|
|
|
|
|
|
|
|
|
* Implement a `<modal-dialog>` web component using Lit and CSS transitions.
|
|
|
|
|
|
* Demonstrate accessibility (`aria-*`) and keyboard interactions.
|
|
|
|
|
|
* TDD focus: test open/close state, keyboard handling, and backdrop clicks.
|
|
|
|
|
|
|
|
|
|
|
|
3. **Tutorial 11 — Keyboard Navigation and Accessibility**
|
|
|
|
|
|
|
|
|
|
|
|
* Add keyboard shortcuts and focus management to existing components.
|
|
|
|
|
|
* Test tab order, focus restoration, and ARIA attributes using jsdom.
|
|
|
|
|
|
|
|
|
|
|
|
4. **Tutorial 12 — Dynamic Lists and Reordering**
|
|
|
|
|
|
|
|
|
|
|
|
* Build a draggable `<sortable-list>` component.
|
|
|
|
|
|
* Test DOM updates, drag/drop events, and final order assertions.
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## ⚙️ **B. State, Data, and Logic**
|
|
|
|
|
|
|
|
|
|
|
|
5. **Tutorial 13 — Derived and Computed State**
|
|
|
|
|
|
|
|
|
|
|
|
* Extend the store to include computed values (e.g., counts, filters).
|
|
|
|
|
|
* Teach memoization and how to test reactive derivations.
|
|
|
|
|
|
|
|
|
|
|
|
6. **Tutorial 14 — Undo/Redo and Time Travel**
|
|
|
|
|
|
|
|
|
|
|
|
* Add a store history stack and commands for undo/redo.
|
|
|
|
|
|
* Test state rollbacks deterministically.
|
|
|
|
|
|
|
|
|
|
|
|
7. **Tutorial 15 — Multi-Store Coordination**
|
|
|
|
|
|
|
|
|
|
|
|
* Split state across multiple stores (e.g., `UserStore`, `SettingsStore`).
|
|
|
|
|
|
* Show how to compose subscriptions and test inter-store dependencies.
|
|
|
|
|
|
|
|
|
|
|
|
8. **Tutorial 16 — Data Fetching and Caching**
|
|
|
|
|
|
|
|
|
|
|
|
* Use `fetch()` to load data asynchronously and cache it in the store.
|
|
|
|
|
|
* Mock HTTP requests in tests.
|
|
|
|
|
|
* Discuss retry and error handling patterns.
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 💎 **C. Styling, Theming, and Branding**
|
|
|
|
|
|
|
|
|
|
|
|
9. **Tutorial 17 — Theming and CSS Variables**
|
|
|
|
|
|
|
|
|
|
|
|
* Implement a theme manager (light/dark/custom colors).
|
|
|
|
|
|
* Test dynamic theme changes via store and DOM styles.
|
|
|
|
|
|
|
|
|
|
|
|
10. **Tutorial 18 — Component Libraries and Design Tokens**
|
|
|
|
|
|
|
|
|
|
|
|
* Introduce reusable style tokens and component variants.
|
|
|
|
|
|
* Build visual regression tests using Storybook snapshots.
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🧠 **D. Architecture and Automation**
|
|
|
|
|
|
|
|
|
|
|
|
11. **Tutorial 19 — Reactive Controllers and Composition**
|
|
|
|
|
|
|
|
|
|
|
|
* Use Lit’s `ReactiveController` pattern to encapsulate logic like stores or timers.
|
|
|
|
|
|
* TDD pattern: one controller, multiple components.
|
|
|
|
|
|
|
|
|
|
|
|
12. **Tutorial 20 — Custom Build and Test Pipelines**
|
|
|
|
|
|
|
|
|
|
|
|
* Show how to integrate Mocha tests into CI (GitHub Actions).
|
|
|
|
|
|
* Include code coverage (nyc) and automatic agent test reporting.
|
|
|
|
|
|
|
|
|
|
|
|
13. **Tutorial 21 — Agentic Refactoring**
|
|
|
|
|
|
|
|
|
|
|
|
* Demonstrate agents proposing architectural changes:
|
|
|
|
|
|
|
|
|
|
|
|
* identifying code smells,
|
|
|
|
|
|
* extracting controllers,
|
|
|
|
|
|
* enforcing consistent store usage.
|
|
|
|
|
|
|
|
|
|
|
|
14. **Tutorial 22 — Agent-Driven Story Generation**
|
|
|
|
|
|
|
|
|
|
|
|
* Agents create new Storybook stories based on test cases.
|
|
|
|
|
|
* Bridge test specs and UX documentation automatically.
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🔮 **E. Integration and Expansion**
|
|
|
|
|
|
|
|
|
|
|
|
15. **Tutorial 23 — REST and GraphQL API Integration**
|
|
|
|
|
|
|
|
|
|
|
|
* Fetch and render real backend data.
|
|
|
|
|
|
* Mock responses for offline testing.
|
|
|
|
|
|
* Introduce contract tests for schema validation.
|
|
|
|
|
|
|
|
|
|
|
|
16. **Tutorial 24 — Internationalization (i18n)**
|
|
|
|
|
|
|
|
|
|
|
|
* Add locale switching to greetings.
|
|
|
|
|
|
* Test translation loading and pluralization behavior.
|
|
|
|
|
|
|
|
|
|
|
|
17. **Tutorial 25 — Progressive Web App (PWA) Integration**
|
|
|
|
|
|
|
|
|
|
|
|
* Cache store data offline.
|
|
|
|
|
|
* Add service worker tests for persistence.
|
|
|
|
|
|
|
|
|
|
|
|
18. **Tutorial 26 — Performance and Profiling**
|
|
|
|
|
|
|
|
|
|
|
|
* Measure component render times.
|
|
|
|
|
|
* Write regression tests for performance thresholds.
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 **F. Visionary / Meta Layer**
|
|
|
|
|
|
|
|
|
|
|
|
19. **Tutorial 27 — Visual AI Testing**
|
|
|
|
|
|
|
|
|
|
|
|
* Integrate image snapshots from Storybook for visual regression comparison.
|
|
|
|
|
|
* Show how agents can detect UI drift.
|
|
|
|
|
|
|
|
|
|
|
|
20. **Tutorial 28 — Self-Testing Components**
|
|
|
|
|
|
|
|
|
|
|
|
* Each component ships with its own self-test harness.
|
|
|
|
|
|
* Components can verify their own integrity in isolation.
|
|
|
|
|
|
|
|
|
|
|
|
21. **Tutorial 29 — AI-Assisted UX Heuristics**
|
|
|
|
|
|
|
|
|
|
|
|
* Agents analyze user interaction logs and propose UI simplifications.
|
|
|
|
|
|
* TDD for heuristic improvements.
|
|
|
|
|
|
|
|
|
|
|
|
22. **Tutorial 30 — Meta-Framework Evolution**
|
|
|
|
|
|
|
|
|
|
|
|
* Turn TestDrive-UI into a reusable CLI (`npx testdrive-ui new <component>`).
|
|
|
|
|
|
* Generate scaffolds, tests, and stories automatically.
|
|
|
|
|
|
|
|
|
|
|
|
xxx
|
