Alpine.js: jQuery for the Reactive Era
Alpine.js is a minimal reactive framework that lives inside HTML attributes. x-data defines a component scope, x-show and x-bind handle visibility and attribute binding, and…
Read article →
chris
Website →Available for work
Interested in working together? Let's talk.
htmx: HTML Strikes Back
htmx extends HTML with attributes that let any element issue AJAX requests, swap parts of the page, and respond to events. hx-get, hx-post, hx-swap, and…
Read article →View Transitions API in Real Sites
The View Transitions API lets the browser animate between two DOM states. Wrap a DOM mutation in document.startViewTransition(callback) and Chrome will snapshot the before and…
Read article →CSS Container Queries in Production
Container queries let components style themselves based on their parent's size instead of the viewport. Set container-type: inline-size on a parent, then use @container (min-width:…
Read article →IntersectionObserver Patterns Worth Knowing
IntersectionObserver tells you when an element enters or leaves the viewport. The classic use is lazy-loading images, but it covers infinite scroll, scroll-driven animations, and…
Read article →ResizeObserver for Layout-Aware Components
ResizeObserver fires when a watched element's content rect changes size. It is the right tool for component-level responsiveness when container queries do not cover the…
Read article →Web Components Without a Framework
Web Components are three browser features: Custom Elements, Shadow DOM, and HTML Templates. Together they give you encapsulated components in plain HTML.Define a class extending…
Read article →CSS :has() Is the Missing Selector
The :has() pseudo-class lets you style an element based on its descendants. article:has(img) targets articles that contain an image. label:has(input:checked) styles a label when it…
Read article →CSS @layer for Predictable Cascades
The @layer rule lets you group styles into named cascade layers and explicitly order them. Later layers always win over earlier ones, regardless of specificity…
Read article →AbortController for Cancelling Fetches
AbortController gives you a signal you can pass to fetch (and many other APIs) to cancel an in-flight request. controller.abort() rejects the fetch promise with…
Read article →