Skip to Content
0 likes
Find a Retained Detached DOM Node With Heap Snapshots Level: Advanced

Trace a detached preview from its DOM node to an application Map, repair cleanup, and verify repeated open-and-close cycles with heap snapshots.

0 likes
Find the Slow Function With Chrome's Performance Profiler Level: Advanced

Record one slow click in Chrome's Performance panel, read the Bottom-up tab by self time, fix the function it points at, and record again to prove the fix worked.

0 likes
Fix a Container Query That Measures the Wrong Ancestor Level: Advanced

Reproduce a nested-container breakpoint failure, select the intended named ancestor, and verify the repair at a fixed viewport and at its boundary.

0 likes
Cascade Layers (@layer) on an Existing Stylesheet Level: Advanced

Put an old stylesheet in the first layer so your new rules win without touching the old file or raising specificity.

0 likes
prefers-reduced-motion Without Killing Useful Motion Level: Advanced

Keep spinners and fades, replace slides and smooth scrolling, and check both settings in Chrome.

0 likes
Stop Layout Shift From Web Fonts Level: Advanced

Compute size-adjust and the vertical overrides from the font files, build the fallback face, and measure the layout shift before and after.

0 likes
srcset and sizes for Product Images That Don't Waste Bandwidth Level: Advanced

Measure the real slot width at each breakpoint, write sizes from it, and check which file loads at each screen density.

0 likes
Critical CSS Without Shipping Your Whole Stylesheet Twice Level: Advanced

Mark the first-screen rules once, split the stylesheet in the build, and confirm the rest loads without blocking.

0 likes
Dark Mode With prefers-color-scheme and One Token File Level: Advanced

Use one token file with light-dark(), add a saved toggle that does not flash, and check the colours in both themes.

0 likes
CSS Custom Properties for Theming a Multi-Brand Site Level: Advanced

Switch brands with a data attribute, and avoid the derived-token trap that freezes hover colours on the wrong value.

0 likes
Animate a Modal Without Breaking Keyboard Focus Level: Advanced

Use a native dialog, animate it with CSS only, and check focus, Tab, Escape and reduced motion by keyboard.

0 likes
Find Unused CSS Before It Bloats Production Level: Advanced

Record coverage in Chrome DevTools, test the states that hide rules, and remove dead CSS in small, reversible steps.