❤️
React & TypeScript Guide
❤️
Want to learn how to improve the
UX & DX
of your components?
Get better at accessibility, testing, naming, performance, and using built-in browser features — all for free.
Topics include: Accessibility TypeScript React Testing Naming HTTP API Design Managing State Caching Performance Async
🔊🥇 Accessibility-First
🤝💝 Web Standards
🖇🍀 Composable Systems
🐝💨 Cheatsheets
🫵🏾🔨 Robust JavaScript Interactivity
Developer Calendar
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
|
21 Aug
|
|
|
|
25 Aug
|
|
|
|
28 Aug
|
|
|
|
01 Sep
|
|
|
|
04 Sep
|
|
|
|
08 Sep
|
|
|
|
11 Sep
|
|
|
|
15 Sep
|
|
|
|
18 Sep
|
|
|
|
22 Sep
|
23 Sep
|
|
|
25 Sep
|
|
|
|
29 Sep
|
|
|
|
02 Oct
|
|
|
|
06 Oct
|
|
|
|
09 Oct
|
|
|
|
13 Oct
|
|
|
|
16 Oct
|
|
|
|
20 Oct
|
|
|
Learn why accessibility is essential for a great UX, and use the same affordances to improve your own Developer Experience.
-
Landmarks
Ensure your web pages have these familiar regions.
-
Labels and Descriptions
Ensure every region of interest is labelled.
-
Properties
Presenting selected state, current page, hiding, and more.
-
Form controls
Inputs, checkboxes, radio buttons, comboboxes, and more.
-
Widgets
Buttons, links, tabs, comboboxes, and more.
-
Accessibility-First TDD
Use accessibility affordances to write robust tests.
-
Keyboard Navigation Acceptance Tests
Ensure your forms are keyboard accessibility.
Write friendly tests using Jest and BDD.
Naming is hard. Let’s make it easier.
Find the right home for your state.
-
URL as source of truth
The shareable, serializable, canonical standard.
-
Modelling with state machines
Systems to reliably think about state.
-
Connecting the pipes
Use a library like Wonka to connect your app.
-
Never puts secrets where JavaScript can read
Use cookies over local storage for anything private.