Skip to Content
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.

0 likes
Audit Contrast and Focus Paths Before You Ship Level: Advanced

Measure contrast by number, run axe, and walk the keyboard focus path with a script to catch what the tool cannot see.

0 likes
Add typescript-eslint to an Existing TS Repo Level: Advanced

Install typescript-eslint on TypeScript 7, switch the rules on as warnings, count them by rule and hold the count down. After this, you can adopt type-aware linting without blocking the team for a week.

0 likes
Augment Express Request Without Fighting the Compiler Level: Advanced

Add a user property to the Express request type with a module augmentation in one declaration file. After this, middleware and handlers agree on the type and you avoid the mistake that floods node_modules with errors.