Search

Enhancing Details with Details-Utils

Details-Utils is a library by Zach Leatherman that adds functionality to the native Details Element by using a wrapping element with some attributes. Add close on esc functionality Force close (or open) at certain breakpoints Animate … and more!

Spacing in Design Systems

Spacing out some rectangles on a web page is easy right? It kinda is. There are lots of ways, anyway. But doing it in a way that keeps you sane is another matter. For example, who’s job is it to do the spacing, the elements themselves or the parent element? How do you prevent spacing […]

CSS Quiz Show

Chris and Dave undergo the BIGGEST challenge of their careers: TWO BACK-TO-BACK CSS QUIZZES. Get your buzzers ready and play the Try At Home version. Guess CSS! by Aleksei Berezkin CSS Speedrun by Vincent Will

An HTML Select element that is actually styleable: selectmenu

Select menus, like literally the <select> native HTML elements, are notoriously unstyleable. In the last few years, it’s become tenable to style the *outside* of the menus, even with just CSS alone, making them sit nicely in design systems without too much trouble. But you have little to no control over an *open* select menu, […]

Scroll Down to Start Playing Video in HTML and JavaScript

It’s gotta be fairly easy to play an HTML video when you scroll down to it, right? We kinda knew IntersectionObserver is the right API here, for performance reasons, but this use case is super well served by it and it’s quite easy to use. We also handle the prefers-reduced-motion case here.

A Look at a Simple Site Built with Astro

It’s funny how you work on a real project, you get a 10 ✕ better understanding of how it works (the best parts and the rough edges) than if you just `hello, world` it or read a blog post. I wanted that experience with Astro because I like the approach with it (write in JavaScript […]

VideoPress

VideoPress is a feature of Jetpack and makes showing videos on WordPress way better. Here’s three biggies for me: Performance. Videos are optimzied and cloud-hosted (rather than coming from your own server) and served with fancy video hosting techniques like adaptive bitrate streaming. Custom. The player has many more fancy features than the default HTML […]

Knobs

Yair Even Or has a neat project called Knobs that adds UI controls that adjust CSS Custom Properties instantly any way you need them to. There is more to the project than that, but that’s how we use them here to control some generative art.

Random Grids

After coming across the super cool header/footer motif on Josh Collinsworth’s site we set about re-creating the randomized grid there, only just doing it from scratch guessing how it might have been done.

Playing with the MD Nichrome Microsite

Most importantly, MD Nichrome is a sweet display typeface. But also, the microsite is super cool! Dave and I have a poke at it, checking out the features, opining on little things we see, and inspecting code to see what we can learn.

Spicy Sections

It’s all about affordances! And tradeoffs! HTML doesn’t have a native way for us to make “tabs”, but maybe it will someday. The road to get there is long and requires a ton of researching, prototyping, spec writing, and god knows what all. Dave has been on that road for a while now with the […]

A Few Little Details

If you make a the <summary> of a <details> anything other than the default display: list-item;, then you lose the default ▶ ::marker. But say you want to, because you need to do some special styling in the <summary>. Then either put a <div> inside it and style that (while re-positioning the <div> back into […]

Subgrid (Means Inheriting Grid Lines)

Maybe that’s the best way to understand subgrid: it’s an opportunity for you to tell a child element of an existing grid to use the grid lines from the parent element for its rows and/or columns.

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.