Card 1 of 50
Front. Before-lib. What do you decide before picking a library?
These cards are original study material. They are not questions from a named employer or a live hiring loop.
All 50 cards in this deck
1.Before-lib
What do you decide before picking a library?
The user, the main view, how fresh the data must be, and what must keep working offline. You pick a store or a data library after those four are written down.
2.Million-rows
How do you show a huge list?
Render the window on screen and fetch pages as the user moves. Loading every row into memory will stall the tab.
3.Server-state
What is server state?
Data that lives on the server and can be stale in the browser: the order, the profile. It needs a fetch, a cache, and a refresh rule.
4.Client-state
What is client state?
Data that exists only in this session, such as which panel is open. It does not belong in the server cache.
5.Url-state
What belongs in the URL?
State the user might share or reload: the filter, the page, the selected id. A reload should bring that view back.
6.Graphql-cost
What does a GraphQL gateway cost you?
A schema to own, a query complexity limit, and a cache that is harder than a URL. It pays off when clients truly need different shapes.
7.Long-job
How do you show a job that takes minutes?
Return an id immediately, and let the page poll or subscribe for status. Holding one HTTP request open that long will time out.
8.Sse
What is a server-sent event stream?
The server pushes events down one long response. It fits one-way updates. The client reconnects from the last event id.
9.Websocket
When is a WebSocket the right channel?
When both sides send messages often, such as a live editor. A rare status change does not need a permanent socket.
10.Crdt
What is a CRDT?
A data type that merges concurrent edits on its own, including edits made offline, without losing either side's change.
11.Offline
What do you store for offline use?
The pending writes, and enough of the last server state to show the view. A reconnect then sends the pending writes in order.
12.Live-flood
Why limit announcements in a live region?
A screen reader speaks each one. A busy thread that announces every reply can trap the user in announcements.
13.Micro
What is a micro-frontend?
Separately deployed pieces of one page, each owned by a team. The cost is shared dependencies, routing, and a consistent look.
14.Dup-react
Why is bundling React three times a problem?
The page downloads it three times, and hooks break across copies. Share one version.
15.Csp
What is a content security policy?
A header that says which scripts and origins may run. It blocks injected script. Inline script has to be removed or explicitly allowed.
16.Field-roll
How do you add a field the old frontend lacks?
Ship the API so old clients ignore the field, then ship the frontend that reads it. The reverse shows a blank to users already updated.
17.Design-system
What is a design system?
Shared components, tokens, and rules so teams build controls that look and behave the same, including focus and contrast.
18.Tokens
What is a design token?
A named value, such as a color or a space, that components use instead of a raw number. Changing the token changes every use.
19.Route-split
What do you split by route?
The code for a page downloads when the user opens that page. The first page stays smaller.
20.Optimistic
What is an optimistic update?
The UI shows the result before the server confirms, and rolls back if the request fails. It fits actions that usually succeed.
21.Skeleton
What is a skeleton screen?
A placeholder with the layout of the real content, shown while data loads, so the page does not jump when the data arrives.
22.Empty
What belongs in an empty state?
Why it is empty, and the action that fills it. A blank panel looks broken.
23.Partial
How do you show a partial failure?
The parts that loaded stay visible, and the failed part says what failed and how to retry. Failing the whole page hides the data you have.
24.Retry-ui
When should the UI retry a fetch?
On a timeout or a 503, with a limit. A 400 will fail again. Show that error instead of looping.
25.Auth-store
Where should a session token live?
In an HttpOnly cookie when you can, so script cannot read it. Local storage is readable by any script that runs on the page.
26.Budget
What is a performance budget?
A limit on the size or the time of the first load, checked in the build. A number nobody watches is not a budget.
27.Flag
How do you flag a frontend change?
The server, or a config fetch, decides who is in. A flag baked into the bundle at build time cannot be turned off for one user later.
28.I18n
What do you externalize for translation?
The strings, and room in the layout for longer text. A sentence built by concatenating pieces often cannot be translated.
29.Normalize
What is a normalized client cache?
Each entity is stored once, by id. A list holds ids. An update to the entity shows up in every list.
30.Stale-time
What is a cache stale time?
How long fetched data is treated as fresh. After that, the next view refetches. Too long shows old data. Too short refetches constantly.
31.Invalidate
When do you invalidate a client cache?
After a write that changes that data, so the next read does not show the pre-write copy.
32.Deep-link
What is a deep link?
A URL that opens a specific view, not only the home page. It is how a shared or refreshed page stays on the thing the user meant.
33.Permission
Where do you enforce a permission?
On the server. Hiding the button is a courtesy. The API still has to reject the call.
34.Analytics
What makes a product event useful?
A name, the properties you will actually segment on, and one definition. A second event for the same click splits the metric.
35.Error-report
What belongs in a client error report?
The release, the route, and the stack. The user's input and tokens do not. Those are data, not a debug aid.
36.A11y-tree
What is the accessibility tree?
The structure assistive tech reads: roles, names, and states. It is what you check, not only the visual layout.
37.Focus-trap
What is a focus trap?
Keeping tab inside a modal until it closes, and returning focus to the control that opened it.
38.Race
How do you stop a stale response from winning?
Ignore a response whose request id is older than the latest one, or abort the previous request when the next starts.
39.Perceived
What is perceived performance?
How fast the page feels. A skeleton, an instant click response, or streaming the first part can feel faster at the same total time.
40.Image-pipe
What belongs in an image pipeline?
Resize, format, and cache at the edge, so the browser gets a file close to the size it will display.
41.Module-fed
What is module federation?
Loading a separately deployed bundle at runtime and sharing some dependencies. Version skew of the shared part is the risk.
42.Testing
What do you test in the UI?
The behavior a user sees: the state change, the error, the request that fires. A snapshot of markup catches less of that.
43.Visual
What is a visual regression test?
A comparison of screenshots against a known good image, to catch a spacing or color change no unit test asserts.
44.Routing
What does the router own?
Which view the URL maps to, and the data that view needs. Scattered checks of window.location drift apart.
45.Boundary
Where do you put an error boundary?
Around a region that can fail alone, such as a widget. One boundary at the root only helps by replacing the whole page.
46.Theme
How do you theme without rewriting components?
Components read tokens. The theme sets the tokens. A component with hardcoded colors cannot follow the theme.
47.Concurrent-edit
What do you show when a save conflicts?
That someone else changed the same item, and a way to reload or merge. Overwriting silently drops their edit.
48.Prefetch
When do you prefetch a route?
When the user is likely to open it, such as on hover of a primary link, and the extra download is small.
49.Degrade-js
What still works if hydration is slow?
The server-rendered content can be read, and the primary action should not wait on an unrelated widget's JavaScript.
50.Contract
How do frontend and API stay in step?
A shared schema or a contract test, plus a deploy order that never sends a client a field it cannot yet handle, or removes one it still reads.