generated from coulomb/repo-seed
145 lines
4.5 KiB
Markdown
145 lines
4.5 KiB
Markdown
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
|