224: VS Code Tasks
[Robin]: One of the nifty things about VS Code is that you can run tasks when you open up a project. So instead of having to open up the command line and also have VS Code open at the same …
CSS-Tricks is powered by DigitalOcean. Make your site part of the leading solution for simple and scalable cloud-based hosting with a free $200 credit to get you started!
An email newsletter with the most interesting news, ideas, fresh content, thoughts, and incredibly mature jokes from Team CSS-Tricks. This is your ticket to saying up to date with web dev.
[Robin]: One of the nifty things about VS Code is that you can run tasks when you open up a project. So instead of having to open up the command line and also have VS Code open at the same …
Core Web Vitals is how Google measures the performance of any given site and you might’ve already heard the buzzwords like LCP, FID, and CLP. But — these are actually really useful metrics …
[Robin]: I read this post from Dave Rupert about setting color variables, using a combination of Sass vars, CSS vars, and what Dave calls “semantic theme vars.” He writes:
…Last week I got the opportunity to work on a
[Robin]: This week I’ve been moving into a new apartment and everything is, well, to put it kindly, an absolute nightmare. There’s a rat king of cables and three laundromat’s worth of clothes on the floor. Important documents are flung …
Just the other day Kilian Valkohof wrote this great piece about how to create a full-bleed layout effect where an element like an image breaks out from the grid you’ve established.
Kilian shows us how he does that with plain …
Earlier this week, I watched this fantastic talk by Ethan Marcotte about the current state of design systems and I haven’t been able to stop thinking about it. The part that really stuck out to me though was this bit:…
Here’s a fantastic piece by Linzi Berry about the design systems team at Lyft and how they work on their color guidelines:
…On the surface color seems simple, but getting 100+ designers and engineers to follow
[Robin]: My day job is at Sentry and I’ve never worked at a place where everyone cares so intensely about the quality of the codebase and the design. But one thing that I think could be improved is our CSS …
Big news this week: a wild new image format appears! And, as Jake Archibald writes, it’s called AVIF and it just launched in Chrome, so you can use it today with the help of the picture
…
[Robin]: In a post the other day about text stroke and CSS, Chris wrote:
Whenever I think of stroked text on the web I think: nope.
This is interesting to me because whenever someone asks me about a …
One thing I don’t see enough on the web are experiments with CSS transforms and I was reminded of this the other day when I saw this great example from Meng To:
I think transforms …
[Robin]: Over the weekend I read this post by Jim Nielsen about web technologies and syntax that I really enjoyed. The gist of the post is that the latest technical achievement is not always the answer to our problems, …
[Robin]: This week I want to take a closer look at the min()
, max()
, and clamp()
functions. I keep hearing things about them but I’ve never used them in production and although these are relatively new features they …
Let’s kick things off this week with a remarkable demo from Amit Sheen where he’s made the pages of a book animate with nothing but CSS:
The trick? Every page is divided into 7 segments, …
Hey hey! Chris here. When I read an article (or part of it) and think it’s interesting, I’ll often save it for sharing later. Because, well, that’s one of the things I do around here! (At the moment I like …
This is the neatest trick I’ve seen in some time. In this demo, Steve Faulkner creates a way to effectively pause a gif by wrapping the image in <details>/<summary>
and positioning those elements on …
[Robin]: This week I realized that I wasn’t solving a design problem at the right level. Here’s the scene: I found myself sat my desk, struggling to add some new features to this one page. Yet there’s so many directions …
[Robin]: I found this psychedelic TikTok where an artist overlaps a collection of words on top of each other and then rotates them around the center, creating this extremely cool effect:
Whoa, right? I wanted to try and replicate this …
Our complete guide to flexbox is something I use on a weekly basis and it’s saved me so much confusion and heartache over the years. But now I won’t even have to go …
Thomas Park made this lovely fold-in effect that relies on no JavaScript whatsoever and only a single image:
I love posts like this that reveal something that looks super complicated but is …