CSS Panda-monium
🚨 Last call for react.gg’s early access 🕹️
We’re closing the early access (and early-bird discount) for our brand new React course today at 5:00pm PT. If you miss this one, you’ll have to wait until later this year when the course is finished and we release it in full. The price will most likely be higher at that time.
We just added the ability to preview the course for free, in case you want to try it out first. We also just added Klarna as a payment option, so you can spread payments out over time, if that’s your thing.
We’ve gotten lots of good feedback so far, and even had one guy call the course “a masterpiece” — which was really special for me, considering all the hours I spent cosplaying as Johannes Brahms in middle school.
Now to today’s issue:
A Snooki CSS metaphor, late-night SkyMall purchases, and Vine nostalgia.
Welcome to #197.
The Main Thing
Refusing to let go of CSS-in-JS
CSS Panda-monium
CSS-in-JS is kind of like MTV’s Jersey Shore — lots of people still love it, but that’s not exactly something you brag about publicly in 2023.
That’s because even though CSS-in-JS can make it easy to build dynamic UI components, it usually comes with some pretty expensive performance tradeoffs. And since most CSS-in-JS libraries don’t work reliably with server components, it’s clear that the whole paradigm needs to evolve, or risk becoming more irrelevant than Snooki and JWoww (still love them).
That’s where Panda comes in. It’s a new styling engine that aims to combine the DX of CSS-in-JS with the performance of atomic CSS, in a way that’s both type-safe and RSC compatible.
Here’s how:
-
Panda uses static analysis to parse and analyze your styles, then leverages a set of PostCSS plugins to convert the parsed data to atomic CSS at build time.
-
These atomic CSS files are optimized for performance and readability and can be used in any JS framework.
-
Panda also generates lightweight runtime JS code that is used to author styles. Unlike most other CSS-in-JS solutions, it doesn’t generate styles in the browser or inject them in the
<head>. -
It uses modern CSS features like cascade layers and CSS variables, and gives you CSS-in-JS features you know and love like JSX style props and design tokens.
Bottom Line: Pedro Duarte (the creator of Stitches and Radix UI) put it best when he said that Panda is “almost as if Stitches, Tailwind, Vanilla Extract, CVA, Styled System and Linaria had a child.”
A love child from six different parents? This really is like Jersey Shore.
    |
Our Friends
(With Benefits)
Just ship it.
Build internal tools 10x faster with Retool
It finally happened. Your boss’s boss asked you to “throw together some internal tools,” because the suits upstairs want to make some “data-driven decisions.”
No problem, that should only take a few days. But next thing you know, you’ve spent 6 weeks hacking together dashboards — only to realize at the last minute that you never considered auth, and (oh crap) the whole thing looks terrible.
Should’ve used Retool.
It started when a few developers realized that all internal tools are made up of the same building blocks — tables, charts, forms, wizards (I’m a wot?), etc. And now, companies like Amazon and Pinterest use it to build powerful internal tools in a couple hours.
The best part is how Retool gives you the flexibility to connect to any data source and write custom JavaScript directly into the app.
Check out the free tier, and never waste time on internal tools again.
Spot the Bug
Sponsored by Datadog
Check out their Frontend Testing Best Practices Guide if you’re tired of finding UI bugs in prod.
const petName = 'Leo'
const placeholder = '{NAME}'
const reminderTemplate = '{NAME} is due for another visit. Please call us so we can set up a new appointment. We look forward to seeing you and {NAME} soon.'
const reminder = reminderTemplate.replace(placeholder, petName)
Cool Bits
-
Go check out react.gg – the all new, interactive way to master modern React. I almost never try to sell you this hard, so you have to respect the hustle before my toxic salesbro era ends at 5pm PT. #Grindset #CoffeeIsForClosers 🫶
-
W3C just announced a new web standard for online payments that should make it easier than ever for me to make impulse purchases from the SkyMall website at 3:00 a.m.
-
Deno just released Fresh v1.2 and hired Marvin Hagemeister (of Preact fame) to work on the edge-native framework full time.
-
CarbonQA provides high-quality QA services for dev teams, so you’ll never have to do it yourself again. They work in your tools, talk with your team on Slack, and let your devs be devs. [sponsored]
-
VineJS is a new form data validation library for Node.js that is super fast and fully type safe. Sadly, it’ll never recreate the magic of opening your iPhone 5S to watch a 6-second looping clip of that cute little girl saying, “look at all those chickens.”
-
Mark Erikson and other library maintainers have been discussing whether the benefits of RSC are worth the pain they’re inflicting on library maintainers. And since he’s almost single-handedly carried Redux on his back for the better part of a decade, he’s allowed to ask that question.
-
Petykowski created a set of dot matrix fonts in the style of the London Underground’s arrivals board. #MindTheGap
-
The Chrome Team just announced that all three major browsers now support new CSS color spaces and functions, which allows you to support HD displays. This is a gamechanger for those of us who had the foresight to purchase the Portable Full HD Smart Projector for their workstation.
String.prototype.replace only replaces the first occurrence found in the string. If there could be more than one occurrence, use String.prototype.replaceAll which is new-ish as of ES2021.
const petName = 'Leo'
const placeholder = '{NAME}'
const reminderTemplate = '{NAME} is due for another visit. Please call us so we can set up a new appointment. We look forward to seeing you and {NAME} soon.'
const reminder = reminderTemplate.replaceAll(placeholder, petName)