What Are Duotones And How They Work
Duotone is a graphic design technique that makes for contrasting graphics that can be combined with text and other CSS effects. This post will look at what are duotone colors and how to create duotone...
What Is Baseline?
If you use web.dev or MDN, you may have seen blocks indicating baseline availability like those in Figures 1 and 2. Baseline message as shown on web.dev Baseline message as it appears on MDN So what...
The difference between auto-fill and auto-fit in grid layouts
Even after all these years, I've struggled to understand the difference between auto-fill and auto-fit values when used in creating grid layouts. The easiest way to create a grid of equal columns is...
Using 'clamp' to control CSS Values
Rather than using media queries to control the dimensions of an element, we can use the clamp to accomplish the same task with less code. According to MDN: The clamp() CSS function clamps a middle...
Different views of masonry layout
There is an interesting discussion going on about masonry layouts and how they should be added to the web platform. This post will analyze the different proposals and then express an opinion as to...
Progressive Enhancement versus Graceful Degradation - We're missing something
This article made me think, again, about one of the eternal battles of the web: Graceful Degradation versus Progressive Enhancement but it also made me think about something new. I'm all for Graceful...
Detecting Javascript Support in CSS
There are times when we may want to style content differently based on whether the browser has enabled Javascript or not. This is different than using Javascript to detect whether a script has run or...
Playing with text-shadows
text-shadow allows for interesting effects on text. The property takes two or three values with an optional color as the fourth value offset-x and offset-y (Required) These values specify the...
Playing with box-shadows
In developing a card with box-shadow I realized that it's harder than I remembered so I decided to take another look. Box shadow takes two, three or four parameters. If two values are specified, they...
New In Node 22 - Task Runner
Node 22 was recently introduced as the current active version. The thing that caught my attention in the release notes is the built-in task runner. In this post we'll look at the Node task runner...