Featured
Staggered Animation with CSS sibling-* Functions
The new CSS sibling-index() (and -count()) functions are perfect for staggered timing affects. This goes a little step further staggering both before and after a selected element.
Popular
Latest Articles
Choosing the Right Model in Cursor
Cursor has an “auto” mode, “but if you care about cost or predictability, it’s worth picking models manually.” says Steve Kinney.
Getting Started with Cursor
Cursor is an AI-focused VS Code fork. Here’s Steve Kinney with a nice overview of what it offers and how to start getting help out of it right away.
Advanced PostgreSQL Indexing: Multi-Key Queries and Performance Optimization
Postgres creates an execution plan for how to retrieve the data you’re asking for in a query. The execution plan is based in part on statistics from your data and indexes it has available. Just the right index and a bit of query tuning can have a huge payoff in performance gains that your users will notice.
Introduction to Postgres Indexes
This Part 1 (of a 2-part series) is a practical, hands-on, applicable approach to database indexes. We’ll cover what B Trees are with a focus on deeply understanding, and internalizing how they store data on disk, and how your database uses them to speed up queries. This will set us up nicely for part 2, […]
The `-path` of Least Resistance (Part 2)
This time we’re looking at offset-path (and friends), which can be used to create movement when animated and benefits from all the same fancy functions that we learned about with clip-path.
The `-path` of Least Resistance (Part 1)
A deep dive into `clip-path` from Amit Sheen, a very powerful tool in shape creation on the web, particularly now with `shape()`.
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
Little boosts of front-end development 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!