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, […]
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
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 […]
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.
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.
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.
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.
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.
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.
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.
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.
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 […]