A site building framework like TanStack Start can be used to make a server-side rendered blog, no problemo.
A deep dive into producing an interpolated “gradient” of colors from just two provided colors.
:has() makes quantities queries both easier and more powerful. We can alter how a grid is laid out and where the children go. Or, we can just blast it into a carousel.
The CSS corner-shape property (very new! only in Chrome Canary!) is useful in basic use cases, for advanced shape making, and the superellipse() function is *extra* powerful.
After you’ve got a `border-radius`, you can control the shape of the corner with `corner-shape`, which unlocks a simpler and more powerful way to make shapes compared to `clip-path()`.
We’ve got @scope in CSS now, and it’s got it’s uses. But the concept of scope in CSS is a wider idea.
This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.
A little reminder from Matt Smith that getting the last item in an Array is easier now:
const fruits = ["apple", "banana", "cherry"];
/* newer, easier */
console.log(fruits.at(-1));
/* older, harder */
console.log(fruits[fruits.length - 1]);
Code language: JavaScript (javascript)Josh Comeau does a great job with beginner-friendly explanations of important concepts, and Promises From The Ground Up is no exception. In a nutshell, we have Promises because we need callbacks. We need callbacks because JavaScript is single-threaded and can’t wait around for things. And so we dance. These days, you’ll see more async and await, but it’s just what they call “syntactic sugar” over Promises, which is to say, a cleaner way to write the same code.
Will Sentance goes deep into Promises in JavaScript: The Hard Parts when you’re ready.
I know that you can “chain” the CSS property filter, like:
.element {
filter: blur(2px) grayscale(80%) contrast(200%);
}Code language: CSS (css)All three of those filters will apply. But somehow I never thought about applying the same filter more than once. That also works, and they don’t override each other, they “stack” (or whatever you want to call it).
So here’s some useless bar trivia for you. What is blurrier, filter: blur(2px) or filter: blur(1px) blur(1px)? Answer.
Developer 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.