Posts tagged with frontend-engineering-explained

• The day CSS made me learn algebra again, and I liked it

  This post was published on May 12, 2026

  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 February 27, 2026

  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 February 21, 2026

  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 February 20, 2026

  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 January 22, 2026

  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 January 2, 2026

  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 December 31, 2025

  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 December 29, 2025

  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 February 21, 2025

  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.

• Part Six: Building a Profile Page with HTML and CSS: A form, A Dialog, and Netlify

  This post was published on February 17, 2025

  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.

• Part Five: Building a Profile Page with HTML and CSS: Responsive, Favicon, Open Graph

  This post was published on February 7, 2025

  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 February 6, 2025

  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 February 4, 2025

  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 January 29, 2025

  Join me on my journey as I prepare for the IAAP Web Accessibility Specialist (WAS) certification, sharing weekly insights, resources, and study plans.

• Part Four: Building a Profile Page with HTML and CSS: Refactor, Custom Properties, LinkTree

  This post was published on January 24, 2025

  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 January 22, 2025

  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.

• Part Three: Building a Profile Page with HTML and CSS: Typography And Getting Responsive

  This post was published on January 19, 2025

  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.

• Part Two: Building a Profile Page with HTML and CSS: Implementation

  This post was published on January 7, 2025

  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.

• Part One: Building a Profile Page with HTML and CSS: Planning

  This post was published on January 3, 2025

  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.