Skip to lesson
Exit
Front-End Craft Deep Dive1 / 3

1 min lesson

Edge cases, said out loud

Rebuild the parts of "Edge cases, said out loud", then say why each one matters.

Step 1 of 3

Edge cases, said out loudthinking like a feature owner

You will not have time to handle every edge case, so name them as you go. Voicing the case you're deferring shows the ownership instinct Cursor screens for even when the clock beats you to the implementation.

Edge cases to call out
Long content
Truncation, wrapping and overflow scroll without layout jump
Keyboard-only
Full operation with no mouse: arrows, Tab, Escape, Enter
RTL
Logical properties (inline-start) so layout mirrors correctly
Empty / error / loading
A real state for each, not a blank flash or a frozen control
Learn more

Full explanation

Code they read like a teammate's PR

Code they read like a teammate's PRnaming and API are part of the grade

Interviewers read your component the way they'd review a colleague's pull request. Clear prop names, a sensible default and no dead code matter as much as the behavior. Tighten the surface before time runs out.

A clean, readable component surface beats a clever internal trick.ts
type ComboboxProps<T> = {
  items: T[];
  value: T | null;
  onChange: (next: T | null) => void;
  getLabel: (item: T) => string;
  placeholder?: string;
  disabled?: boolean;
};
// Generic over T, controlled, one obvious way to render a label.
Say it like this

“It's working end-to-end with keyboard support. With more time I'd add a fade on open behind prefers-reduced-motion, virtualize the list past ~200 items and write a test for the empty state. The long-content case truncates with a tooltip - I'd verify that against real data.”

Watch out

Don't go silent while you code. The build round is as much about how you think as what you ship, so a steady narration of decisions and trade-offs keeps a half-finished component scoring well - silence makes even a complete one read as a black box.

QYou're 35 minutes into a 45-minute build round. The component opens and selects correctly but has no focus styles, no empty state and no animation. What do you do with the remaining time?