Editor's Pick
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
CSS
CSS Hell
Hello, and welcome to CSS Hell, where you will be subjected to 15 unimaginably torturous CSS puzzles. "What did I do to deserve this?", you ask. But you know perfectly well: you blashpemized Cascading Style Sheets. I saw that time your friends were complaining about CSS and you piled on with "CSS isn't even a real programming language". It is. I saw you upvote that Reddit meme about vertically aligning a div. Just use a flexbox. I saw you chuckle sensibly at those CSS Is Awesome designs. I couldn't stand to let Håkon Wium Lie's divine creation be slandered in this way, so I decided to show the nonbelievers like you the wrath of CSS's unhinged power.
How to Create Wavy Boxes Using CSS
After the Zig-Zag boxes, it’s time to create wavy boxes! More cool shapes that you can use to decorate your images or any content.
Transitioning Top-Layer Entries And The Display Property In CSS
It’s not always the big features that make our everyday lives easier; sometimes, it’s those ease-of-life features that truly enhance our projects. In this article, Brecht De Ruyte highlights two such features: @starting-style and transition-behavior — two properties that are absolutely welcome additions to your everyday work with CSS animations.
Three Approaches to the “&” (ampersand) Selector in CSS
In CSS nesting, the & (ampersand symbol) selector adds style rules based on the relation between nested selectors. For example, a pseudo-class (:hover) nested inside a type selector (div) becomes a compound selector (div:hover) when the nested pseudo-class is prefixed with &.
A use-case for the & selector is to combine it with the :has() pseudo-class to select and style elements based on the child elements they contain.
In a way, the & symbol is a placeholder for the outer level selector in the nesting hierarchy. This enables flexible combinations of selectors customized to suit our code’s modular organization preferences. In this article, we’ll see three kinds of modular possibilities with the & selector in native CSS.
Some pointers on default cursors
Every so often in a project, the issue comes up of whether cursors on buttons should be ‘the hand’ or default. The spec says they should be default, but many people (myself included, until recently), are unaware. Many designers I’ve worked with want pointer-cursors regardless of what the spec says.
What is CSS Subgrid? A Practical Tutorial
When designers create layouts in their mockups, everything including the content typically looks perfectly aligned and consistent.
But in the real world, user-generated content varies wildly. For example, one testimonial card might have a brief sentence, while another has an entire paragraph. This makes it challenging to maintain a perfect alignment.
CSS Subgrid can easily handle these web layout inconsistencies. It allows nested elements to align with their parent grid, ensuring a consistent look regardless of the content.
Create Scroll Animations with just CSS
Scroll animations trigger when an element enters the viewport. Previously, JavaScript functions or libraries are needed to create scroll animations. With JavaScript, you’d need up to four variables plus mathematical operations to calculate the element’s position on the viewport. Another issue with JavaScript is that there are often multiple ways to do the same thing. In this post, you’ll learn how to create scroll-based animations with only CSS.
CSS Custom Functions are coming … and they are going to be a game changer
Chrome is currently prototyping CSS Functions from the css-mixins-1 specification.
CSS scroll-state() - Like container queries; but for stuck, snapped, and overflowing queries
Chrome 133 builds upon container queries by introducing scroll state container queries. The browser managed state for sticky positioning, scroll snap points, and scrollable elements can now be queried and adapted to from CSS
View Transitions Applied: More performant ::view-transition-group(*) animations
If the dimensions of the ::view-transition-group(*) don’t change between the old and new snapshot, you can optimize its keyframes so that the pseudo-element animates on the compositor.
Flexbox Labs - A web app for creating flexible layouts with the power of CSS Flexbox
Flexbox Labs is a visual tool that helps you create layouts using CSS Flexbox. It offers an intuitive interface that shows changes in real-time, making it easy to experiment and learn.
They also have a grid version, which at the time of this writing is marked as beta.
JavaScript
Build a Single-Page Application(SPA) Router in Vanilla JavaScript
Single-page applications (SPAs) have revolutionized web development by offering smoother user experiences with seamless navigation. At the heart of every SPA lies a routing system that manages page transitions without full page reloads. In this guide, we'll explore how to build a robust routing system using vanilla JavaScript, understanding the core concepts and implementing them from scratch.
Designing backgrounds with LLMs and React
Back in January, I made this startup's first landing page. I used Cursor to make an interactive background (like the one on this page). Within a couple days of publishing, multiple developers messaged me compliments. One even asked if I hired a professional designer.
I was surprised by the feedback, because it was super easy to make. I basically just prompted and reprompted LLMs. Artistic components are perfect for AI: they're isolated, they can't cause serious damage, and you can verify the logic by looking at the result. Here's the React + Tailwind code, simplified a bit.
A guide to Object.groupBy: An alternative to Array.reduce
Learn how Object.groupBy and Map.groupBy improve JavaScript data grouping over reduce, with performance benchmarks and comparisons.
Mastering React Refs: Advanced Techniques with useCombinedRef Hook
When developing in React, direct interaction with DOM elements is often necessary. React provides the refs mechanism to access elements after rendering. The most common approach is using object refs via useRef, but another option is callback refs, which offer greater flexibility and control over the lifecycle of elements. This article explains how callback refs work, their advantages, common issues, and practical use cases.
Read-only accessibility in TypeScript
In this blog post, we look at how can make things “read-only” in TypeScript – mainly via the keyword readonly.
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
style-observer: Run JS when a CSS property changes. Any CSS property.
A robust, production-ready library to observe CSS property changes. Detects browser bugs and works around them, so you don't have to.
See also this associated blog post.
Miscellaneous
Patterns for building realtime features
Realtime features make apps feel modern, collaborative, and up-to-date. The features predominantly require sharing changes triggered by one user to other users, as the changes are happening.
This typically means your server needs to send data to some set of clients, where those clients don’t know they are missing the data.
These patterns rely on a connection between the client and the server, where the server can notify the client of some data. This connection could be websockets, sse, event-streams, or polling (long or short). The connection just needs to allow the server to send data to the client without the client knowing that there is new data.
The Component Gallery
Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.
Game Font Library
Game Font Library is a platform created to showcase and share the official interface fonts used in video games. As a Lead UI Artist for AAA games and a typography enthusiast, my goal is to collect and highlight the typefaces that define the visual identity of games, whether they come from user interfaces, logos, or graphic elements.
This library features only official fonts provided by developers themselves—no recreations or approximations. I personally reach out to UI artists across the world to source the authentic fonts used in games, ensuring accuracy and preserving the true typographic heritage of the industry.
If you’re a developer, designer, or just a fan of typography, Game Font Library is the perfect place to explore, learn, and get inspired by the fonts that have shaped video game history.
Everything about Google Translate crashing React (and other web apps)
A deep dive into Google Translate (and other browser extensions) interference breaking React and other web apps.
Optimizing Images for Web Performance
Images make websites look great, but they’re also the biggest performance bottleneck. They add huge file sizes, delay Largest Contentful Paint (LCP), and can even mess with Cumulative Layout Shift (CLS) if they aren’t handled properly. And while developers are quick to optimize JavaScript and CSS, images are often ignored—despite being the heaviest assets on most pages.
So, how do we make images fast, responsive, and efficient?