We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.
CSS has counter variables (based on matching selectors) that you can output as formatted content or use in calculations.
With view() style scroll-driven animations, it’s helpful to think about how you want it to work then tweak the ranges toward that goal.
You want to hide an interactive element that you don’t need anymore after JavaScript loads/runs. Can you do it without a “flash” or layout shift?
Inset `box-shadow` doesn’t work directly on image elements. There are work-arounds, but this SVG filter can do it directly.
Don’t run! There is powerful stuff to learn here through interactive demos.
There are a ton more @media queries than “width” and “prefers-reduced-motion”. Let’s have a long, along with use-cases.
A fairly opinionated CSS starter by Chris, following a set of personal principals to guide what is in there and what isn’t.
Adam Argyle is a talented developer who recently was on the job hunt and landed a new role. He’s got a lot to say about how that process went and certainly some good tips for any of y’all in that same position.
Andy Bell has a poke at my new starter. Fair game, as I literally did the same to him.
I like what Andy has to say about my full-width form fields:
I agree with Chris on filling the inline space with form fields too. If you want to do a split layout for forms, the parent layout should be doing that work for you, rather than the fields themself. Essentially, the C in CUBE CSS applies here.
A great “aha” moment for me was when I realized you can use a single
signalto remove multiple event listeners!
useEffect(() => {
const controller = new AbortController()
window.addEventListener('resize', handleResize, {
signal: controller.signal,
})
window.addEventListener('hashchange', handleHashChange, {
signal: controller.signal,
})
window.addEventListener('storage', handleStorageChange, {
signal: controller.signal,
})
return () => {
// Calling `.abort()` removes ALL event listeners
// associated with `controller.signal`. Gone!
controller.abort()
}
}, [])Code language: JavaScript (javascript)Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.