A list of items with thumbnails that flip into place as needed. Can we ditch the JavaScript?
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 […]
Blobs! Gooey weird shapes you can fill with any background and even animate.
Google Translate doesn’t change the `dir` of a site when translating from LTR to RTL… but you could.
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.