Adam Argyle joins Amelia and Nick to catch them up on all the goings on within the world of CSS colors. There are a lot more options than you’d expect if you haven’t been keeping up, and Adam’s here to help you avoid the “gray dead zone”!

A cool microsite by Henri Parviainen that helps you design some scrollbars by pointing-and-clicking then copy/paste the requisite CSS code to recreate in your app.

Bryan Braun:

Do you longingly reminisce about the days when flying toasters graced your screen? Do words like “Confetti Factory” and “Daredevil Dan” make your heart skip a beat?

If so, then never fear—CSS is here! Using modern CSS techniques like animations and transforms, we can imitate several of your favorite After Dark™ screensavers.

The animations were made with CSS alone. No animated gifs or JavaScript.

Andy Bell has been obsessed with one particular CSS snippet for years now. In this post, he shares it with us and shows us how he’s recently improved it further by using Custom Properties.

Nikola Đuza lays out a way you can customize your README to stand out from the crowd:

GitHub supports adding HTML in Markdown, but it is pretty aggressive when removing HTML that can be potentially dangerous to users. Things like scripts, iframes, and similar will get removed or “silenced” to avoid malicious content from being served to users.

Luckily, there’s one way to sneak in some HTML (or a web page) inside the README. You can do it via SVG and foreignObject SVG element.

Inspired by NES.css

Kate Rose Morley:

A tree view (collapsible list) can be created using only html and css, without the need for JavaScript. Accessibility software will see the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically.

TIL!

KBall interviews CSS instructor & YouTuber extraordinaire Kevin Powell in a wide ranging discussion about CSS and how to learn it - what to start with, what to ignore, and various topics in between.

When choosing between pixels and rems in CSS, you should almost always use rems. It’s a simple rule to follow. This article explains why.

Jake Lazaroff spent the last few months learning Tailwind with an open mind and he’s ready to share his opinion of the popular CSS framework:

Tailwind is commonly described as “utility classes”, but that’s a bit of an understatement. It’s essentially a small language you write in the class attributes of your HTML that compiles to a combination of CSS rules and selectors — an abstraction over CSS. But all abstractions leak, and Tailwind is very leaky.

When an abstraction leaks, it means you still have to be aware of (and sometimes deeply so) the underlying layer that’s being abstracted. In this case, Jake is saying that you still need to know CSS to use Tailwind and lays out a few scenarios in which this is the case.

This might be unfair to Tailwind. To my knowledge, the team has never promoted it as a CSS replacement. At its core, it really is just a set of class names that apply styles. But even after working with it for months, there’s still a mental translation layer between “Tailwind CSS” and “real CSS”.

Estelle Weyl has been building the web since 1999 and documenting it since 2007. Today she joins Amal for a loooong and deeeep conversation about new and !important features of CSS & HTML. Sit down, strap in, and prepare to be schooled!

Now that we’re out of the ‘dark times’ where CSS was so limited that we spent countless hours developing hacks, tricks, and workarounds… Sacha Greif wonders if the pendulum has swung the other way:

we are now faced with an embarrassment of CSS riches, and it can be hard to catch up. CSS Grid started being supported in major browsers almost five years ago, yet I still check a reference every time I use it. And as cool as subgrid seems, I’ve yet to even try it out.

Perhaps CSS is even starting to reach over into areas best handled by HTML or JavaScript?

In CSS, we’ve been encoding colors with rgb() or hex (mostly for historical reasons). However, the new CSS Color 4 specification adds many better ways of declaring colors in CSS. Of these, oklch() is the most interesting one—this article explains why.

Nick & Amelia welcome the co-authors of Tiny CSS Projects to discuss their awesome new (and still in-progress) Manning book all about CSS!

Use code podjsparty20 when checking out to save 40% (good for all products in all formats!) and join the JS Party community chat for a chance to win a free ebook copy!

Sacha Greif gets out his crystal ball and tries to anticipate the future CSS trends (as well as some far-fetched and futuristic CSS features that might one day make their way to the browser) based on his learnings from running the State of CSS survey (go take it!)

This is a great starter snippet for any web page:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

The linked post explains the why behind these rules and expands with a 100 byte alternative and the comments have a bunch of variants and conversation about each specific rule.

Dave Rupert brainstorms some new CSS organization acronyms.

I’m not anti-BEM nor anti-roboclasses, but as we enter a new era for CSS I think we have an opportunity to rethink best practices around architecting CSS. Before we get lost rethinking the wheel, let’s hold on to some good principles from the past decade or so:

• We want to author in components
• We generally want low-specificity to avoid collisions
• We want a bucket of global utility classes/variables for ad-hoc composition or customizations

With those principles, let’s dive into some CSS architecture alternatives.

He goes on to describe CUBE, HECS, WILS, GPC, and other systems that haven’t even been named yet 😆

This was my favorite moment from our episode with Chris Coyier. I asked him what’s interesting in the frontend world these days and Chris went off for almost five minutes. His enthusiasm is contagious!

This course from the folks at web.dev targets beginners and advanced developers alike.

You’ll learn PWA fundamentals like the Web App Manifest, service workers, how to design with an app in mind, what’s different from a classic web app, how to use other tools to test and debug your PWA. After these fundamentals, you’ll learn about integration with the platform and operating system, how to enhance your PWA’s installation and usage experience, and how to offer an offline experience.

System.css is a CSS library for building interfaces that resemble Apple’s System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.

Episode 500!!! And it has been a journey! Nearly 13 years ago we started this podcast and as of today (this episode) we’ve officially shipped our 500th episode. As a companion to this episode, Jerod and Adam shipped a special Backstage episode where they reflect on 500 episodes. And…not only has it been a journey for us, but it’s also been a journey for our good friend Chris Coyier and CSS-Tricks — which he grew from his personal blog to a massively popular contributor driven model, complete with an editor-in-chief, a wide array of influential contributors, and advertisers to help fund the way. The news, of course, is that CSS-Tricks was recently acquired by DigitalOcean in March of 2022. We get into all the details of this deal, his journey, and the legacy of CSS-Tricks.

What’s this? A Frontend Feud! The ShopTalk guys return to defend their championship over Syntax against new contenders: Una and Adam from The CSS Podcast!

Robb Owen:

Why let JS have all the fun? With mix-blend-mode finally gaining wide browser-support, we now have access to many of most common shading techniques in CSS. With some choice images and a bit of careful layering it’s possible to build some surprisingly high-quality effects without the need for introducing any JS dependencies.

If you’ve ever used Photoshop’s Blend Modes… you can basically do that in CSS now. So cool! Check out Robb’s entire article. He includes a lot of great examples.

And if you like Alpine, there’s a companion collection of snippets that you can copy/paste into your project.

Jen Looper from Web Dev for Beginners and Front-end Foxes joins Jerod and Ali to discuss the exciting (but also intimidating) prospect of getting in to web development in 2022! Where should you start? What technologies should you focus on? Is it better to go all-in on a framework or stick with the fundamentals? Stuff like that!