Featured
Managing Anchor Associations With Data Attributes and Advanced attr()
There is no `anchor` attribute in HTML, it was decided CSS `anchor-name` / `position-anchor` was the way to go. But modern CSS functions can get us there anyway.
Popular
Latest Articles
Modern CSS Round-Out Tabs
We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.
CSS Counters in Action
CSS has counter variables (based on matching selectors) that you can output as formatted content or use in calculations.
Numbers That Fall (Scroll-Driven Animations & Sibling Index)
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.
A Progressive Enhancement Challenge
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 Shadows Directly on img Elements (Part 1)
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.
How much do you really know about media queries?
There are a ton more @media queries than “width” and “prefers-reduced-motion”. Let’s have a long, along with use-cases.
The Beat
Datasheets
Don’t Sleep on AbortController
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)Git Worktrees: Git Done Right
I admit I’ve never once used a Git Worktree. But Nick Taylor has a pretty good intro that compels me. (Nick credits bashbunni for her own intro).
Git worktrees let you check out multiple branches from the same repository simultaneously, each in its own working directory. Instead of constantly switching between branches with
git checkout, you can have separate directories for different features, bug fixes, or experiments.
So instead of just one folder on your computer representing your project, you can have multiple folders, each representing different branches of the same repo. That just feels weird to me, hence never having tried it. But if…
- You do a lot of branch-hopping
- You don’t like committing half-done work
- You don’t like
git stash
… Git Worktrees might be for you. The reason I’m a little compelled at the moment is that I use GitHub Desktop and stashing kinda sucks in it.
APIs vs. SDKs: Key Differences, Use Cases, and Best Practices
One of the dev jobs out there is DevRel or “Developer Relations”. A role like that is very likely going to involve teaching and helping people learn a products API. And, if the company has one, SDK’s around that API. Can you articulate the difference between them? At a minimum, that would be good to be able to do for that job interview.
Emre Tezisci has a pretty good article explaining: APIs vs. SDKs: Key Differences, Use Cases, and Best Practices.
Subscribe
Developer news, information, and advice — right to your feed reader of choice.
RSSWanna write?
Here's our page on guest writing. It's a win-win-win!