Editor's Pick
Chrome on Android edge-to-edge migration guide
Edge-to-edge is an Android feature that lets applications span the entire width and height of the display by drawing behind the Android system bars.
Before Chrome 135, Chrome on Android did not draw edge-to-edge. This guide explains the effect this change has on websites and what you as a developer can do to embrace this change.
A page can indicate it supports edge-to-edge using the viewport meta tag and its viewport-fit key.
To opt-in to edge-to-edge, set viewport-fit to the value of cover.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
Accessibility
Is the button focusable?
Let’s play a game. I’ll hide a button using different techniques in HTML and CSS, and you have to guess whether it’s still focusable.
First, we’ll use CSS to hide the button visually.
We aim to ensure the button isn’t focusable when it’s not visible. So, if the answer to the question “Is the button focusable?” is yup, that’s bad, and if it’s nope, it’s good. You’ll find the answer after each code snippet.
Hello AI Agents: Goodbye UI Design, RIP Accessibility
Autonomous agents will transform user experience by automating interactions, making traditional UI design obsolete, as users stop visiting websites in favor of solely interacting through their agent. Focus on designing for agents, not humans. Accessibility will disappear as a concern for web design, as disabled users will only use an agent that transforms content and features to their specific needs.
CSS
CSS Meets Voxel Art: Building a Rendering Engine with Stacked Grids
Learn how transforms, perspective, and stacked grids can create a fully addressable 3D space and push the boundaries of what’s possible with pure CSS.
A CSS-Only Star Rating Component And More! (Part 1)
In this article, you'll learn how to make a full-on star rating component out of nothing but a single input element and vanilla CSS.
Responsive TOC leader lines with CSS
Not long ago I replaced my homepage of an image based overview with a very slim Table Of Contents version. The trickiest part was to make that responsive. I finally found a solution. As usual: no JavaScript involved.
A live example can be seen here, and the code is also in this repo.
View Transitions Applied: Dealing with the Snapshot Containing Block
Beware when working with coordinates on View Transition pseudos like ::view-transition-group(*). Depending on where you read/write those coordinates from/to, you might end up with layout jumps. This post details the pitfalls and how to deal with them, unlocking more performant animations on ::view-transition-group() pseudos.
Get the value of an input range (without JavaScript)
A few lines of code and you have a CSS-only way to read the value of an input range slider. Powered by Scroll-driven animations, attr(), and @property.
Chrome-only for now.
Transparent inner border for images
Cut a border from the inside of an image using the mask property and two gradients.
Using & Styling the Details Element
Now that we're 5+ years into the details element, we know more about it than ever before. I thought I'd round that information up so it's in one place I can reference in the future without having to search the site — and other sites — to find it.
HTML
Chrome on Android edge-to-edge migration guide
Edge-to-edge is an Android feature that lets applications span the entire width and height of the display by drawing behind the Android system bars.
Before Chrome 135, Chrome on Android did not draw edge-to-edge. This guide explains the effect this change has on websites and what you as a developer can do to embrace this change.
A page can indicate it supports edge-to-edge using the viewport meta tag and its viewport-fit key.
To opt-in to edge-to-edge, set viewport-fit to the value of cover.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
JavaScript
Basic Design Patterns: A collection of essential design pattern examples in JavaScript
A collection of essential design patterns for software development using practical examples, such Singleton, Factory Method, Observer, and more.
Building APIs with Next.js
This guide will cover how you can build APIs with Next.js, including setting up your project, understanding the App Router and Route Handlers, handling multiple HTTP methods, implementing dynamic routing, creating reusable middleware logic, and deciding when to spin up a dedicated API layer.
React Libraries for 2025
React has been around for quite some time, and over the years, an extensive—yet sometimes overwhelming—ecosystem of libraries has grown around it. Developers transitioning from other languages or frameworks often struggle to navigate all the libraries needed to build web applications with React.
In this walkthrough, we'll explore the essential React libraries for 2025. These libraries are the building blocks for developing large-scale applications with React. Whether you're a beginner or an experienced developer, this guide will help you navigate the vast React ecosystem effortlessly.
Image comparison slider in 6 lines of JavaScript
Image comparison slider. Slider, you say? We already have a native slider component - input [type=range]. Could we use it to make an image comparison slider? Turns out we can.
This is the base idea:
- We have two images and the range slider, stacked on each other
- The range input goes from 0 to 100
- As the slider is moved, we update a CSS variable to match the slider value
- We use this variable to set the width of the top image
Direct link to codepen demo here.
UX
Hyper-personalization: a practical UX guide
Every moment, behind the scenes, the products you use are getting better at anticipating your needs and desires. Your Netflix homepage updates in real time, your food delivery app predicts what you’re craving, and your fitness app fine-tunes recommendations based on your recent activity.
This is hyper-personalization — an advanced approach to personalization that leverages real-time data, artificial intelligence (AI), and behavioral analytics to deliver highly individualized experiences for every user.
In this article, we’ll explore the different levels of personalization, the data that fuels it, and how to design interfaces that deliver truly individualized experiences at scale. Hyper-personalization is more than a marketing strategy — it’s a fundamental shift in how we design interfaces.
Truth, Lies and Progress Bars
An early encounter with a fabricated progress indicator inspired several more honest alternatives.
Miscellaneous
User-Interface Elements: Glossary
Use this glossary to quickly clarify definitions for key graphical user-interface elements and controls.
How to write exceptional documentation
Writing high-quality developer documentation is a challenging task. One reader visiting your site may have a tricky bug to solve, another may be looking for guidance, while a third just wants to get started. Plus, everyone has their own unique blend of experience and learning preferences—how do you cover all this in your docs?
This is my personal approach to crafting holistic, comprehensive documentation that prioritizes developer experience and meets the needs of all.
Interview Coder - an open-source invisible desktop application to help you pass your technical interviews
The application is invisible to:
- Zoom versions below 6.1.6 (inclusive)
- All browser-based screen recording software
- All versions of Discord
- Mac OS screenshot functionality (Command + Shift + 3/4)
Note: The application is NOT invisible to:
- Zoom versions 6.1.6 and above
- Mac OS native screen recording (Command + Shift + 5)
Features
- 99% Invisibility: Undetectable window that bypasses most screen capture methods
- Smart Screenshot Capture: Capture both question text and code separately for better analysis
- AI-Powered Analysis: Automatically extracts and analyzes coding problems
- Solution Generation: Get detailed explanations and solutions
- Real-time Debugging: Debug your code with AI assistance
- Window Management: Freely move and position the window anywhere on screen
Supported languages: Python, Golang, R, SQL, Ruby, Java, Javascript, C++, Kotlin, and Swift. You can edit your preferred language in the app or in your settings.
Repo here.
5 Questions to Ask Your Manager to 10x Your Impact at Work
Do you want to 10x your impact at work? Do you know what behaviors hold you back? What about your team — do they admire, respect, and acknowledge you? Do they find you helpful?
The gap between how you view your behaviors and actions and how others perceive you is always huge. You may think you’re a great team player, or the job that you just finished was outstanding. But how you view your performance may not align with how your boss or team members view it.