Progressively Enhanced Form Validation, Part 2: Layering in JavaScript

In Part 1 of this series, we learned about the browser’s built-in HTML and CSS form validation features and how to use them to create a solid (but not very accessible) foundation. This article takes that baseline experience and progressively enhances it by layering in ARIA attributes, JavaScript, and the Constraint Validation API.

On-Scroll Column & Row Animations

So, the idea is to animate the items of a column or row in a specific way when we scroll, using translations, scales or even 3D rotations. Hopefully this will spark your imagination on what’s possible and what else could be done.

OKLCH in CSS: Consistent, accessible color palettes

CSS offers several color functions, but many are difficult to use or create inconsistent results. In this article, we’ll explore a newer CSS color model, oklch(), designed to offer an intuitive and consistent way to create colors for the web.

Four new CSS features for smooth entry and exit animations

Holy cow, they're going to let us animate to and from display:none!

1. The ability to animate display and content-visibility on a keyframe timeline. 2. The transition-behavior property with the allow-discrete keyword to enable transitions of discrete properties like display. 3. The @starting-style rule to animate entry effects from display: none and into the top-layer. 4. The overlay property to control top-layer behavior during an animation.

Tailwind, and the death of web craftsmanship

Tailwind is a symptom of what I feel to be a larger problem in development. There's been a rapid deterioration in pride-of-craftsmanship in development. It's naive to believe that "back in the old day" everyone wrote everything with a perfect eye towards beautiful craftsmanship… but there was definitely more interest in "doing it right" rather than dismissing it as a problem that wasn't worth solving.