Throwing Confetti with CSS Random
This post was published on
Throwing some confetti while exploring the CSS random() function through its specification and its current implementations, finding both the beauty and the pitfalls along the way.
Posts tagged with frontend-engineering-explained
You Might Not Need chalk Anymore
This post was published on
Node.js now ships with util.styleText(), a built-in alternative to chalk for terminal text styling. Here is what it can do, when it is enough, and when you might still reach for a dependency.
Unicode character class escapes. A Hidden JavaScript Superpower
This post was published on
Unicode character class escapes turn regular expressions from English-only ASCII tools into something that understands the whole of human writing. A look at how `\p{L}`, `\p{N}`, `\p{Sc}`, and the `v` flag's properties of strings make this possible.
Contributing a Calavera integration
This post was published on
Project Calavera is a CLI tool that scaffolds linters, formatters, AI tooling, and common project infrastructure for web projects. Calavera ❤️ Vite. This post walks through the full contribution path for a new integration, using the Varlock PR as a concrete example.
css-expect: browser-backed unit tests for CSS custom functions
This post was published on
css-expect enables you to write unit tests for your CSS @functions using the browser engine itself as the source of truth.
@function — Native Custom Functions in CSS
This post was published on
CSS now has user-defined functions. No preprocessor, no JavaScript, but native @function with typed parameters, local variables, and conditional logic built right into your CSS.
Introducing the CSS Property Type Validator Stylelint Plugin
This post was published on
The first beta of the Stylelint plugin for CSS Property Type Validator brings typed custom property validation directly into your existing CSS linting workflow.
Live Page Content Updates with Supabase Realtime and Web Sockets
This post was published on
How to use Supabase Realtime and Web Sockets to live-update page content in a single-page app.
The day CSS made me learn algebra again, and I liked it
This post was published on
A carousel overlay bug led me to a deep dive into fluid typography, container queries, and understanding clamp().
Three Reasons Your scroll-snap Container May Be Overflowing on Mobile
This post was published on
Take a fieldset, pour some radio buttons and visually hidden labels into it, wrap it in scroll-snap, and you have a clean, semantic horizontal scroller on mobile. What could go wrong? Well... there is nuance we need to talk about.
CSS Anchor Positioning: Scoping, Implicit Anchors, and Conditional Hiding
This post was published on
Manage anchor relationships with anchor-scope, leverage the Popover API's implicit anchors, and hide positioned elements gracefully with position-visibility.
Mocking Browser Image Loading in Vitest: Property Descriptors, Prototypes, and WeakMap
This post was published on
A deep dive into the JavaScript concepts behind mocking HTMLImageElement behaviour in Vitest, including Object.defineProperty, Object.getOwnPropertyDescriptor, prototype manipulation, and WeakMap for per-instance state tracking.
CSS Anchor Positioning Fallbacks: What to Do When Things Don't Fit
This post was published on
Build resilient anchor-positioned layouts that adapt when space runs out.
Precise Positioning with CSS Anchor Functions: anchor(), anchor-center, and anchor-size()
This post was published on
Take your anchor positioning beyond the grid with functions that give you pixel-level control over placement and sizing.
Getting Started with CSS Anchor Positioning: anchor-name, position-anchor, and position-area
This post was published on
Discover how CSS anchor positioning brings native support for positioning elements relative to each other — no JavaScript required.
Opening and Closing Dialogs Without JavaScript Using HTML Invoker Commands
This post was published on
Learn how to use HTML invoker commands to open and close dialogs without writing any JavaScript.
CSS Transforms and the Matrix
This post was published on
A deep dive into the CSS transform matrix, how it relates to the individual CSS transform properties, a look at the hidden powers of the function forms, and a dragon or two.
Building a Profile Page with HTML and CSS: A form, A Dialog, and Netlify
This post was published on
In this part, we will add a form to our profile page, use a dialog to display our form, deploy our page using Netlify, and set up Netlify to handle form submissions.
Building a Profile Page with HTML and CSS: Responsive, Favicon, Open Graph
This post was published on
In part five of the series, we will complete our layout, add a favicon, and set up Open Graph meta tags for social sharing.
What is WCAG? - A Brief Overview
This post was published on
Learn about WCAG (Web Content Accessibility Guidelines), including WCAG 2.2 principles, conformance levels, and upcoming WCAG 3 changes, plus insights on accessibility certification value.
The HTML Dialog Element: A Native Solution for Accessible Modal Interactions
This post was published on
Learn how to use the HTML dialog element to create accessible modal dialogs for your web sites and applications.
My Journey to the International Association of Accessibility Professionals (IAAP) Web Accessibility Specialist (WAS) Certification
This post was published on
Join me on my journey as I prepare for the IAAP Web Accessibility Specialist (WAS) certification, sharing weekly insights, resources, and study plans.
Building a Profile Page with HTML and CSS: Refactor, Custom Properties, LinkTree
This post was published on
In part four of the series, we will do some refactoring of our CSS so that we take advantage of CSS custom properties. We will also complete the mobile layout by adding the LinkTree component to our page.
Understanding local() in @font-face: A Deep Dive
This post was published on
Learn how to build a responsive profile page with modern typography, media queries, and CSS Grid. Part three of our hands-on web development tutorial series.
Building a Profile Page with HTML and CSS: Typography And Getting Responsive
This post was published on
Learn how to build a responsive profile page with modern typography, media queries, and CSS Grid. Part three of our hands-on web development tutorial series.
Building a Profile Page with HTML and CSS: Implementation
This post was published on
In this post we will start implementing the design by working through some of the issues, learning more about Git and GitHub, get set up for development, create our first visual component, and learn about performance, CSS, and modern image formats.
Building a Profile Page with HTML and CSS: Planning
This post was published on
In this part of the series we will break down the design into components using Atomic Design, set up our repository on GitHub, and create the issues we will need to work on.