CSS
Cheatsheets for flex, grid, anchor positioning and invoker commands
For CSS Day this year we created a set of cheatsheets explaining Flexbox, Grid, Anchor positioning and Invoker commands.
Styling the Navigation: Declarative Route and Navigation Matching in CSS
Proposes new declarative CSS features for matching routes and navigation state, so developers can style page transitions (like View Transitions) without JavaScript. It introduces @route, @navigation, :nav-source, and :link-to() to match URLs, detect navigation direction, identify the clicked element, and style links based on their destination. The proposal is currently being discussed by the CSS Working Group.
You might need to know about the CSS lh unit
The line height unit (lh) has been around for a while and I rarely see people sharing how they use it. In this article, I will share a few use cases that I personally like.
Something Nobody Told You About The Image Element (It Can Overflow)
What if I tell you that the image element is hiding some secrets? You have been working with images for too long, but you have probably never noticed the little quirks I will show you here.
popkorn: CSS Animations on steroids
Popkorn is a CSS-based portable format for motion graphics. You write a self-contained scene in syntax you already know (@keyframes, transform, offset-path, z-index), and the same file runs on the web and on mobile today, natively through React Native. It keeps the familiar, readable syntax of CSS, so a scene is never an opaque binary or JSON blob. And because it's CSS-shaped, language models already know it: no fine-tuning or special prompting required. You can make edits or even generate entire scenes from scratch with natural language.
Popkorn already renders vector shapes, gradients, masks, motion paths, and path morphing. And it isn't only playback: the familiar CSS pseudo-classes :hover and :active just work, and state machines drive toggles, taps, and app-state behavior with no scripting. It even imports real Lottie files and SVGs, often a touch smaller than the source they came from.
Popkorn started out as a what-if experiment, but it's grown surprisingly capable. It's early still, but the core idea, that a CSS animation can be a portable artifact, is looking promising.
Animating text as Handrawn with CSS
Learn how to create a hand-drawn text reveal for header text with CSS and some clip-path magic.
Breakout Background using Modern CSS
Use border-shape or border-image to extend the background color to the edge of the screen.
5 CSS Properties You Should Know for Better Text Designs
Here are five properties that can help make words look better, or at least more interesting, on the web. They are all fairly simple implementations you can layer into other ideas.
Gap Decorations Are Now Available, Here’s What’s New
Today, with CSS gap decorations fully supported in Chrome and Edge, starting with version 149, you can now very easily style gaps, and with a lot of control.
JavaScript
Working with ::highlight() using progressive enhancement
Using a baseline of <mark> elements, Sunkanmi Fafowora helps you to understand how the new highlight API works with some progressive enhancement for good measure.
In this article, we will look into how the ::highlight() pseudo-element works, the API behind this pseudo-element, and explore a fallback feature for this technology because it relies heavily on JavaScript
Canvas Path Animations using SVG
Draw anything along an arbitrary path by combining the Canvas API with two little-known SVG methods - getTotalLength() and getPointAtLength().
Same Name; Different Component with Scoped Custom Element Registries
Chrome 146 recently introduced scoped custom element registry, which is a way to introduce custom elements in your app without using the global registry namespace. This makes it possible for different versions or entirely different custom elements to share the same tag name. Firefox 150 also has this feature locked behind a feature flag, so it’s likely to be one of the features listed in Baseline 2026.
Build a HTML5 game like Geometry Dash using Phaser 4 and TypeScript, with a simple custom physics engine
In Geometry Dash, the cube spins through the air and always lands flush on a flat side. It looks like careful rigid-body physics. It isn’t, and the real trick is much simpler.
This post explains it and builds a working prototype in Phaser 4 and TypeScript, starting from the template built by the official Create Game App.
Miscellaneous
How I Stopped Running out of Tokens
This post walks through the tools and techniques I've since put together, which have cut my token usage without giving up quality or slowing down.
Simone's Computer
The web's biggest hand curated directory of apps, portfolios and experiments that mimic the appearance and functionality of desktop operating systems, these are commonly known as Web Desktops.
The secure way to release an npm package in 2026
How to protect your npm package from being stolen in a supply chain attack and improve its position in security ratings.
How Cookies Became the Web's Memory
Explains that cookies were invented to solve HTTP's lack of memory. Because every web request is independent, cookies let browsers store a small piece of data—usually a session ID—that websites can use to recognize returning users, keep them logged in, and preserve shopping carts. It also traces the history of cookies from Netscape in 1994, explains why they're called "cookies," and discusses how they later enabled cross-site tracking, leading to modern privacy protections and browser restrictions.