Fluid Typography with One Line of clamp()
Stop writing a font-size media query for every breakpoint. clamp() scales type smoothly with the viewport between a floor and a ceiling you control.
Software Engineer
I build web applications and share what I learn along the way.
Step-by-step programming tutorials on PHP, JavaScript, Laravel, WordPress and more.
Stop writing a font-size media query for every breakpoint. clamp() scales type smoothly with the viewport between a floor and a ceiling you control.
Designers hate focus rings on click, keyboard users need them to navigate at all. :focus-visible gives each group what they want - and browsers already use it by default.
Every site with a sticky header has the same bug: jump to #section and the heading lands underneath the header. The fix is one CSS property almost nobody knows.
A headline that wraps leaving one lonely word on the second line looks broken. text-wrap: balance makes the browser distribute the words evenly, and text-wrap: pretty fixes paragraphs.
A swipeable, momentum-friendly, accessible carousel needs no JavaScript at all. scroll-snap turns a plain overflow container into one, and it feels native because it is.
Custom checkbox hacks - hidden inputs, pseudo-element ticks, sprite images - solved a problem that accent-color now handles in a single declaration.
Intl.NumberFormat handles currencies, compact notation, percentages and units in the user's locale - the kind of formatting everyone installs a package for.
Checking window.innerWidth on every resize event is wasteful and drifts out of sync with your CSS. matchMedia gives JavaScript the same breakpoints CSS uses, with change events.
Focus trapping, Escape to close, a backdrop, top-layer stacking above every z-index - the native dialog element does all of it with zero JavaScript dependencies.
Ctrl+V with an image on the clipboard fires a paste event carrying a real File object. Ten lines of code turn any form into a screenshot-friendly uploader.
Type document.designMode = "on" in the console and the entire page becomes editable like a document. Absurdly useful for copy reviews, screenshots and layout testing.
You do not need moment.js or dayjs to print "yesterday" or "in 3 weeks". The Intl API does relative time, in the user's own language, with zero dependencies.