Pieces(1325)

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

Advanced React
Submitted
State management patterns
Due Apr 30
The ethics of automation
A92 / 100
Certificate of completionÓlafur Arnaldshas completed the courseAdvanced React Performance
Apr 23, 2026Beste Academy
You passed
8/ 10
Finished in 12:42
Question 3 of 10Which hook schedules an effect after the DOM is painted?
TypeScript4,320 / 5,000 XP
Lv 7
14day streak
Memoizing expensive renders7 min left
Foundations
Patterns & hooks
Performance tuning
Shipping at scale
Full-stack TypeScript
Students12,480
Rating4.8
UpdatedLast week
2
Typography systems3 lessons
Choosing a type scale9:12
Vertical rhythm in the wild14:30
Pairing display with body11:05
Refactoring a big list lesson
12:48
Refactoring a big list into virtualized rows
58%
React performance14 of 24 lessons completed
Composing tokens with Tailwind18 min
24 lessons
Design systems for shipping teams
Hania Rani
Build finished
2.4s
1function·greet(name)·{
2→return·`Hello,·${name}!`;
3}
Call stack
  • renderListlist.tsx:42
  • Dashboarddashboard.tsx:14
  • Appapp.tsx:8
const name = user.prfile.name;Property 'prfile' does not exist on type 'User'.
const users = load();
for (const user of users) {12×
  render(user);
}
const value = user.prfile.name;
  • Rename to 'profile'Preferred
  • Add missing property 'prfile'
  • Disable rule for this line
The implmentation ships on Friday.
  • implementation
  • implements
  • implemented
12function renderChart(data) {
37}
Keybindings
  • Command palette
    ⌘+K
  • Quick open
    ⌘+P
  • Toggle terminal
    ⌃+`
  • Format document
    ⌥+⇧+F
Markdown version