A Quick Cloudflare Worker

We find the DX for creating a Cloudflare Worker pretty darn nice. We quickly wired up a KV storage for it and made a counter. That’s real at-the-edge serverless function action with also-at-the-edge persistent data!

Use Alpha Transparency on Any Color in CSS with a (tiny) Paint Worklet

After struggling with a method to pull down the opacity (alpha transparency) of any color (say, a color as a custom property from a design system), Dave cooks up a very fancy idea. The idea is a paint() worklet (CSS Houdini). Because it is canvas-based, which can fill a rectangle with any color, and has […]

Breakin’ Up CSS Custom Properties

Why not take every major styling choice on a particular component and make it into a custom property? Then, when you need a variation, you can just change the custom property and not re-declare the entire ruleset. This has some nice advantages, like clearly presenting a menu of things-to-change and not needing to dig into […]

Hello Worldin’ Some Web Component Libraries

Sometimes you just gotta try the thing to get to know the thing a little bit. Chris had bookmarked one he saw called Tonic, so we muscled our way through that with a smidge of templating and state management, then did the same thing in Lit, then did it again in petite-vue.

Container Cards

In Chrome Canary, you can play both with @container queries and container units like qi, which really change the game for how you design and think about components in web design.

petite-vue

Dave is pretty stoked about petite-vue, a special (and extra small) version of Vue that is designed to be used directly in the browser, requires no build step, and allows us to build pleasantly interactive apps very declaratively.

Styling Scrollbars

There is a -webkit- way and a standardized way. Chrome and Safari only support the -webkit- way. Only Firefox supports the (more limited, but maybe classier) standard way. Surely this will change eventually, but this is where we’re at.

Images are hard.

Putting an image on a website is pretty easy. Except that there is a massive checklist of things to do in order to do it right.

aspect-ratio

The CSS property aspect-ratio totally kills the need for FitVids.js and it very easy to use.

A Definitely Real-Life Front-Interview Experience

“Chris” (definitely very serious about his job) interviews “Dave” (industry veteran overflowing with confidence) and it goes perfectly fine.

accent-color

Dave is pretty stoked about accent-color in CSS. As someone who does design systems work, this might mean a new era of having to do way less fancy footwork around forms.

CSS Modules in CSS Modules

Dave also blogged this.

One-Off Custom CSS on WordPress Posts

Some of the ways: Use the settings built into native blocks already, like changing colors or using columns. Add a class manually to a block, or use a block variation, that has custom CSS you put in your site’s stylesheet. Edit the block as HTML and add inline styles. But be careful not to do […]

ActionHeader

Here’s the base Pen we used to play with.