CSS
Transition to the Other Side with Container Query Units
Managing the position of an element as it travels across the length of its parent container can be tricky. Assuming they both have dynamic, responsive dimensions, we might rely on JS to check the width and/or height of each element and do some calculations for a proper end result. The classic FLIP technique has proven to be a solid solution in the past. For a modern approach, the View Transition API can also work well here.
I now realize there's a much simpler approach using container query units and a dash of CSS wizardry.
CSS layout: flexbox, grid, media queries and container queries
A clear guide to modern CSS layout techniques. It explains when to use Flexbox (one-dimensional layouts) and Grid (two-dimensional layouts), and how media and container queries make designs responsive.
Sequential linear() Animation With N Elements
Let’s suppose you have N elements with the same animation that should animate sequentially. The first one, then the second one, and so on until we reach the last one, then we loop back to the beginning. I am sure you know what I am talking about, and you also know that it’s tricky to get such an effect. You need to define complex keyframes, calculate delays, make it work for a specific number of items, etc.
Tell you what: with modern CSS, we can easily achieve this using a few lines of code, and it works for any number of items.
Springs and Bounces in Native CSS
Modern CSS has provided us a new tool that enables us to create springs, bounces, and so much more all in native CSS: the linear() timing function. In this blog post, I’ll show you how it works, and share some tools you can use to get started right away.
CSS Animations That Leverage the Parent-Child Relationship
Modern CSS has great ways to position and move a group of elements relative to each other, such as anchor positioning. That said, there are instances where it may be better to take up the old ways for a little animation, saving time and effort.
We’ve always been able to affect an element’s structure, like resizing and rotating it. And when we change an element’s intrinsic sizing, its children are affected, too. This is something we can use to our advantage.
High-Performance Syntax Highlighting with CSS Highlights API
Most syntax highlighters work by wrapping each token (keywords, strings, operators, etc.) in individual <span> elements with CSS classes. For a typical code snippet, this can mean creating hundreds or even thousands of DOM nodes.
The CSS Custom Highlight API provides a way to style arbitrary text ranges without modifying the DOM structure. Instead of creating wrapper elements, you define Range objects that point to specific character positions in text nodes, group them by style type, and register them with the browser’s highlight registry.
HTML
Don’t Forget These Tags to Make HTML Work Like You Expect
Basic snippets of HTML I’ve learned to always include in order for my website to work as I expect in the browser — like “Hey I just made a .html file on disk and am going to open it in the browser. What should be in there?”
JavaScript
Angular Composables: A Modern, Functional Pattern for Reuse
Composables — sometimes called composition functions — are a way to encapsulate and reuse stateful logic across components.
While React popularized this pattern with hooks, different frameworks have their own names for it — for this post, I’ll call it an Angular composable. Though composables aren’t yet widely used in the Angular ecosystem, the introduction of signals and functional APIs like inject() and DestroyRef has made this pattern practical and powerful.
React Server Components: Do They Really Improve Performance?
A data-driven comparison of CSR, SSR, and RSC under the same app and test setup, focusing on initial-load performance and the impact of client- vs server-side data fetching (including Streaming + Suspense).
Using URLPattern as a Framework-Free Router in Node 24
Learn how to use the native URLPattern API as a lightweight, framework-free router in both browsers and Node.js 24 for unified client-server routing.
ArkRegex - A drop-in replacement for new RegExp() with types
Regular expressions are ubiquitous in modern code.
A few characters sprinkled into your JavaScript can validate and parse strings that would require dozens of lines of imperative logic.
However, that concision comes at a cost. Complex expressions can be hard to understand and type safety is a pipe dream- or at least, it was.
Comparing Page Transition Strategies in Next.js: A Performance Study
What's the optimal way to navigate between pages in a Next.js application?
Modern JavaScript Concurrency
When most developers think of JavaScript, the word "single-threaded" often comes to mind. But modern JS runtimes are far more sophisticated than the old "one thread, one call stack" stereotype. From the event loop and async/await to Web Workers, async iterators, and SharedArrayBuffers, today's JavaScript offers a rich (although muddled) concurrency landscape: one that spans browsers, Node.js / Bun / Deno, and edge environments.
Understanding how these layers of concurrency interact is essential for building responsive UIs, scalable backends, and reliable serverless functions. In this article, we'll break down the concurrency primitives and patterns available in modern JavaScript, show how they actually work, and show how to leverage them safely and effectively.
Calendar.js : JavaScript Event Calendar
A powerful, and customizable, javascript event Calendar. With multiple views and tons of settings, Calendar.js can be tailored to suit your every need. Lightweight.
navcat - javascript 3d floor based pathfinding
navcat is a javascript navigation mesh construction and querying library for 3D floor-based navigation.
navcat is ideal for use in games, simulations, and creative websites that require navigation in complex 3D environments.
Features:
- Navigation mesh generation from 3D geometry
- Navigation mesh querying
- Single and multi-tile navigation mesh support
- Fully JSON serializable data structures
- Pure javascript, written to be highly tree-shakeable
- Works with any javascript engine/library - Babylon.js, PlayCanvas, Three.js, or your own engine
Miscellaneous
Mistakes I see engineers making in their code reviews
In the last two years, code review has gotten much more important. Code is now easy to generate using LLMs, but it’s still just as hard to review. Many software engineers now spend as much (or more) time reviewing the output of their own AI tools than their colleagues’ code.
I think a lot of engineers don’t do code review correctly. Of course, there are lots of different ways to do code review, so this is largely a statement of my engineering taste.
Building a UI framework
This document examines important design decisions for creating a new graphical UI framework.
It was commissioned to answer the question of how to create a UI framework, considering four possible design goals: developer adoption, performance, display effects, and power consumption.
This document has three parts. In the first part, we will cover some background material to set the context for the discussion. In the second part, we will examine each of the stated goals which provide constraints within which to consider how to design a UI framework. In the third part, we will discuss design choices, examine possible implementations, and discuss some non-technical issues within the context of the specified goals.