Frontend & browser

you keep raising the number in one file and lowering it in another until the overlay is on top.

z-index

your new rule does nothing until you nest it one level deeper, and now it wins.

Specificity

you set the width to 300 pixels and the element takes up 340, because of padding you forgot to count.

Box model

you went to click the button, an ad loaded above it, and you clicked something else entirely.

Cumulative layout shift

you delete the second row and the text you had typed into the third row is suddenly in the second.

List key

the interval you set up on mount kept logging the count as zero no matter how many times you clicked.

Stale closure

you set `z-index: 9999` and the element still sits behind the header.

Stacking context

two rules both apply to the element and the browser follows a fixed set of tie-breaks to pick one.

The cascade

you laid the row out along one axis and let the items decide how to share the leftover space.

Flexbox

you defined the columns once on the container and the children fell into place without any width of their own.

CSS grid

you open the elements panel and the tree you see is not the HTML you wrote, because scripts changed it.

Document Object Model

you trace every step between the HTML arriving and the first pixel appearing, looking for the one that waits.

Critical rendering path

the page stayed blank until a stylesheet in the head finished downloading from a third-party domain.

Render-blocking resource

you changed one element's width and the browser had to recompute the position of half the page.

Reflow

you changed a colour and nothing moved, but the browser still had to redraw those pixels.

Repaint

your loop over ten thousand rows froze the whole tab, including the scroll and the spinner.

Main thread

one function held the main thread for 300 milliseconds and every click during it queued up behind it.

Long task

the scroll is smooth and then jumps, because a frame took too long and got skipped.

Jank

the component function runs again from the top, even though nothing on screen ended up changing.

Re-render

the component's state survived the re-render because the framework decided it was the same element as before.

Reconciliation

the object had exactly the same contents as last render and the component re-rendered anyway.

Referential equality

you wrapped the component so it skips re-rendering when its props are shallowly the same.

Component memoisation

you needed to reach outside the component — to the DOM, a socket, a timer — after the render finished.

Effect

you left a value out of the array to stop the loop and the effect started using an old copy of it.

Dependency array

two sibling components needed the same value, so you moved it into the parent they share.

Lifting state up

you threaded the same value through four components that do not use it, just to reach the fifth.

Prop drilling

the value only exists because this screen is open, and nobody else in the world needs to know about it.

Client state

the data on screen is a copy of something you do not own, and it went out of date while you were looking at it.

Server state

the second request could not start until the first finished, because the component that made it had not rendered yet.

Request waterfall

you view source and there is nothing in the body but an empty div and a script tag.

Client-side rendering

the HTML arrives with the content already in it, and the page is readable before any script runs.

Server-side rendering

the page looks finished but clicking a button does nothing for another two seconds.

Hydration

the address bar changes and the content swaps, but the browser never loads a new document.

Single-page application

you intercepted the link click, pushed a new URL and rendered a different component in place.

Client-side routing

you point one tool at an entry file and it follows every import and writes out a handful of files.

Bundler

the settings screen's code is not downloaded until someone actually opens the settings screen.

Code splitting

you import one function from a library and the other two hundred never reach the bundle.

Tree shaking

you deployed a fix and users kept getting the old file until you changed its name.

Cache busting

you were handed three numbers and told the page fails on one of them, at the 75th percentile.

Core Web Vitals

the big hero image finally rendered, four seconds after the header was already on screen.

Largest contentful paint

you clicked the checkbox and it took most of a second before the tick appeared.

Interaction to next paint

you listed several image widths and let the browser pick one based on the screen and the layout.

Responsive images

you replaced the div with a button and got keyboard support, focus and the right announcement for free.

Semantic HTML

the icon button was announced as just 'button' because there was no text and no label anywhere.

Accessible name

you put the mouse away and tried to complete the whole flow with Tab, Enter, Space and the arrow keys.

Keyboard operability

you opened the dialog and moved focus into it, then put focus back on the button when it closed.

Focus management

the grey-on-white caption looked fine on your monitor and failed the check at 3.1 to 1.

Contrast ratio

you turned one on and heard your interface read out as a flat sequence with no structure at all.

Screen reader

the script could send the request but was not allowed to read what came back.

Same-origin policy

the request worked in curl and failed in the browser with a message about an Access-Control header.

CORS

someone put a script tag in their display name and it ran in everyone else's browser.

Cross-site scripting

an injected script was blocked because the browser refused to run anything from an origin not on the list.

Content Security Policy

you drove a real browser through the whole signup flow against a running server.

End-to-end test