The `!important` part doesn’t become part of the value, the whole declaration is treated as !important;
scroll-timelines go from 0 to 100. Many variable fonts axis have similar ranges, like 100 to 900. Surely that’s begging for interplay.
Just a tiny gotcha.
For the true beginners out there! We’ll put the files in a GitHub repo and connect it to Netlify to host it.
We can pass the mouse position from JavaScript to CSS and use it to make unusual and playful effects.
Got an old “modal” design? Now might be the time to upgrade it to a
It was a lovely day on the internet when someone asked how to CSS animated gradient text like ChatGPT’s “Searching the web” and promptly got an answer saying “Have you tried asking ChatGPT? Here’s what it told me!” – well, maybe not these exact words, but at least it rhymes. Both the question and this […]
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.
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.