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

2 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 a reviewer looks 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?