Shots in this scene
Interview: Live Build Rounds
In one line
A live round gives you 10 to 15 minutes to build one small piece of motion while you talk. Here are three rounds, a toast, an accordion to height: auto and an accessible modal, with a plan and automatic checks (the first three exercises).
Think of it like this
A piano exam includes sight-reading. The examiner watches whether you scan the key, keep the beat when you slip, and say what you would fix. A live build round is sight-reading for code.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- fr
- A grid unit: a share of the free space. A row of
1frin a one-row grid is as tall as its content. - inert
- An attribute that makes an element unclickable, unfocusable and hidden from screen readers.
- top layer
- The browser layer above the page where a modal dialog is drawn.
- cancel event
- What a dialog gets when the visitor presses Esc.
preventDefault()stops the instant close.
Step by step
01Set a clock
Toast 10 minutes, accordion 12, modal 15. Open the matching exercise, read the task and do the six steps in order, saying each one aloud.
02Run the toast's checks
They pause the clock, click Save and read the toast at 60 ms and at 300 ms, then wait 2.3 seconds and require that nothing is left running.
03Slow the accordion down
In "Round 2 solution" set 0.1× and press the button. The track is grid-template-rows, red, because a grid track is layout. Click again half way: it turns round from where it is.
04Press Esc on the modal
In "Round 3 solution" open the dialog and press Esc: the exit plays, then it closes. The checks fire the same cancel event, because a script cannot press the real key.
Try it yourself
- 1
Leave during the entrance
In round 1 change
ms = 2000to100and step the timeline. Opacity reads 0.92 at 90 ms, 1.00 at 120 ms and 0.81 at 200 ms: the exit started before the entrance finished. A real toast needs a minimum visible time.
Code & diagrams
Press Save, pause and step: opacity and a 12 px rise in 220 ms (green tracks). Press it three times fast: three toasts, each with its own timer.
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
Console
Nothing logged yet.Open it at 0.1× and read the red `grid-template-rows` track. Click again half way to see it turn round.
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
Console
Nothing logged yet.Tab stays inside the dialog. Esc plays the exit. The dialog is small because this frame is small.
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
Console
Nothing logged yet.Break it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
Make the reduced toast `animation: none`
In round 1 replace the media query with @media (prefers-reduced-motion: reduce) { .toast, .toast.leaving { animation: none; } } and switch on Reduced motion.
Break #2
Drop overflow from the accordion
In round 2 delete overflow: hidden; min-height: 0; from .inner.
Myth vs fact
Myth
A live round is judged on whether the animation looks nice.
Fact
Interviewers watch order, edge cases (a second click, Esc, reduced motion, cleanup) and whether you can say why.
Remember this
- 1
The problem this solves: under a clock people write motion first and forget the edge cases, and the interviewer sees a demo that works once. A fixed order gets you to the edge cases while there is still time.
- 2
The order that works. (1) Say the states and the job: "toast: appears, waits, leaves; it confirms a save." (2) Build the state change with no motion. (3) Add motion with
transformandopacity. (4) Add the reduced-motion version. (5) Handle interruption and rapid triggers. (6) Clean up. Name each decision aloud: "ease-out because it arrives", "220 ms, the base token". - 3
Round 1, the toast. The trap is the exit: remove the node on
animationend, so the reduced version must be a fade, notanimation: none, or the event never fires. Round 2, the accordion:height: autocannot be interpolated, so use a grid row from0frto1fr(every current browser, Topic 10.4) withoverflow: hidden; min-height: 0on the child,inerton closed content, and accept layout cost for one short panel. - 4
Round 3, the modal.
showModal()gives the top layer, focus, the backdrop and Esc, butclose()is instant. Catchcancel, play the exit on a class, callclose()onanimationend, guard against a second Esc, and let the browser return focus to the opener.
Explain it without notes
Walk me through animating a panel to height: auto.
Why must the modal's exit finish before close() runs, and what does showModal() already give you?
Practice
Add a check to round 3 that the dialog's first focused control is the Close button, and say why that is a good default.
The accordion must also fade its text. Add it without a layout property.
Done when you can
You can run a build round in the six-step order
You can name the trap in each of the three rounds
You can animate to
height: autowithout measuringYou can make a modal exit play and still return focus