All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

May 2nd: Lunch with Vue, CSS Sailing, and SVG Mountains

Iris Door (hexagonal)

Josetxu showcases some fine CSS metalworking skills in this "first approximation of an iris door created with six triangular panels that slide to open and close the door".

Free eBook: Try Infrastructure as Code

This is a step-by-step guide for you to learn how to use popular IaC tools: Terraform, Ansible, Puppet, Chef, and Salt. Download instantly.

Brainstorm at the speed of thought

Developers love Whimsical's rich library of elements, thousands of built-in icons, and intuitive keyboard shortcuts. Try Whimsical for free.

The Happy Sailor

'Tis a fine day at sea in this cheerful, pure CSS animation from Tucker Massad.

Scroll snap in flowing content

Mustafa Enes wrangles content in varying size and length in this messaging app inspired scroll snapping demo.

#CodePenChallenge: Article Details

The April challenge came to a close with a focus on the little details in long-form articles. Peruse the Pens from week four, including creations by Jackie Zen, Sicontis, Tin Fung, Chan, and Ryan Trimble.

Break 'Em Boxes

A whole bunch of boxes are falling from the sky and it's your job to break 'em in this CSS & JS mini-game from Kit Jenson.

#curiouslyminded with Nicole Vella

The "curiouslyminded" livestream coding show is back! In the latest episode, guest Nicole Vella joins the show for "a session full of noise and color explorations" and this gorgeous Pen was the result. Check out the Pen description for links to the recorded show and the Twitch channel.


Fabio Ottaviani shares a smooth photo transition that breaks the image into disappearing squares. The animation originates from wherever you click on the image.

Linear-style Cursor Glow

David Khourshid emulates that sweet cursor glow on with "CSS variables, radial gradients, and a clever inset to achieve the effect".

Lunch Selector

David Leininger builds a slot machine-style Vue app to take the hassle out of selecting a lunch spot for a group. Click the button and watch it transform into a progress bar while the wheel of lunch is spinning.

CodePen Radio #365: Klare

On the latest podcast, Chris Coyier is joined by our departing designer Klare Frank to look back at her ~4 years at CodePen before she moves on to GitHub. Klare's work on the design and UX of the app and her leadership in project planning & organization will leave a lasting mark here at CodePen.

Skew Grid

Mark Thomes shares an elegant photo & text grid concept with slick skewed backgrounds on the text.

SVG generative mountain ridge dividers

Explore the SVG mountain ranges in Alistair Shepherd's personal blog with this in-depth look at how they were made, complete with 4 embedded Pens that show the process.

Chris' Corner

The results from the State of Frontend 2022 are out, with 3703 respondents. Despite "frontend" not being a word (ha!), I thought the results about styling were interesting enough to respond to.

The question was specifically about favorites: Over the past year, which of the following design systems was your favorite go-to solution?

And the results:

survey results showing SCSS at 49.5% favorite, Tailwind at 25%, Styled Components at 33.5%, CSS Modules at 24.9%, and others much lower.

That all adds up to well over 100% so I'm not sure if people had multiple favorites or what. I'll just respond to the general popularity rankings and relative popularity.

Wow, look at Sass go! If a kid was born the day Sass was released, they'd be learning to drive today. That's incredible longevity for any software tool, especially in the fast-moving world of front-end development tools. Having nearly half of respondents say they not only use Sass but it's their favorite is incredible to me, and I happen to agree since it's a favorite of mine as well. I think the syntax of it is quite nice, even though I tend to only use a handful of features like nesting and light mixin usage. Sass is, in a sense, up against CSS itself these days. I would guess variables are one of the top reasons developers reach for Sass, but Custom Properties have arrived in CSS and their support is ubiquitous, all but eliminating the need for Sass variables. Even nesting has momentum in CSS standards bodies, so we'll see if that one makes a dent in Sass usage as the years tick by.

Sass is a tricky one though. Usage of Sass doesn't mean that's all you're using. For example, PostCSS (only represented in the "Other" section here) is somewhat designed to be used in conjunction with Sass, at least optionally. Similarly with CSS Modules. While you can use CSS Modules alone, you can almost just as easily use it with Sass. That happens to be a favorite combination of mine, and it's not particularly esoteric as the wildly popular Next.js ships out of the box supporting this combo.

A monster showing for Styled Components as well! What strikes me about this is that the question is just about the usage of styling tools, but “Styled Components” all but implies the usage of React as well. So to see this big of a slice of the pie, especially combined with Emotion, Chakra, and Vanilla Extract, all of which I would guess primarily see usage in a React environment, shows off just how wildly dominant React was for participants of this survey. It makes me think of the other big JavaScript frameworks a bit. Where are the Vue people at? I don't see anything specifically called out in “Other”. They might just… not think about it? Styling is a built-in thing in Vue Single File Components land. You don't make a ton of styling tool decisions in Vue, as it's just there for you. And this brings me back to Sass a bit. Just as it's trivial to use Sass in Next.js, so too can you use easily use Sass in Vue, Svelte, or newer meta frameworks like Astro.

It's not terribly surprising to see that regular ol' CSS is barely a blip here, knowing how heavily JavaScript framework usage is represented here. Once you're in a component-driven architecture, having CSS that is scoped to those components and offers additional utility through the availability of JavaScript, it makes sense that people take advantage of that, despite the thickening of the stack, as it were.

Tailwind's popularity here also comes as no surprise here. If you asked me five years ago if I thought something like Tailwind would become popular, I would have said “no”, but I would have been wrong. I've heard from countless developers that the idea of using HTML classes to style things just clicks for them. I have my own suspicions. If done well, the CSS produced by Tailwind is highly likely to be smaller (extra important for a blocking resource like CSS) which is a nice performance benefit from a tooling choice people seem to like anyway.

It's nice to see tools like Vanilla Extract trying to offer a modern variety of developer ergonomics in styling, and also be very focused on ensuring that good performance is the default behavior. Which generally means "extracting" "vanilla" CSS, if you follow their naming pun.

All this makes me wonder what the results would be if we could see data on, say, the styling choices of the top 5000 websites by traffic. Or the choices made on the last 5000 websites published on the internet. Or the top 5000 most actively developed websites on GitHub. Would it be similar? It's hard to say whether they would be completely different.

But I think of that staggering statistic following WordPress around: 43% of all the websites on the internet are on WordPress. It's not that you can't build a JavaScript framework-powered WordPress site, some people do, but I'm sure a tiny slice of all those WordPress websites. So what are they doing? Are they the big Sass users? Wouldn't you think a decent amount of them are vanilla CSS just because WordPress itself doesn't offer any built-in styling tools? Or maybe most of those sites aren't really built by developers, but just self-serve deployments?

It's certainly fascinating to watch styling tool choices change over the years. The only thing I'm quite certain of is that a few years from now, there will be surprises on this survey that would be impossible to guess today.