Editor's Pick
Carousels with CSS
From Chrome 135, you can use features from the CSS Overflow 5 specification that have been designed to create scroll and carousel experiences.
This post is an overview of many different scroll and carousel experiences made using these new features, and without JavaScript.
And another, which I want to highlight (this one has been a long time coming):
The <select> element can now be customized with CSS
Accessibility
Accessibility Support - Will your code work with assistive technologies?
A community-driven website that aims to help inform developers about what code features (roles, states, properties, elements, etc.) are supported by assistive technologies, and what that support looks like.
Our goal is not to tell you what you can or cannot use, but to help you make informed decisions. For example, you may be able to use unsupported features in a way that does not negatively effect AT interaction.
We also hope to help developers learn how to test with assistive technologies. To accomplish this, we will provide introductory materials on how to use different assistive technologies and provide detailed instructions about how to perform tests. We also hope to run workshops at developer conferences.
Best Practices for Cognitive Accessibility in Web Design - The A11Y Collective
Unlock the full potential of your website with expert cognitive accessibility tips. Explore WCAG guidelines, design patterns, and real-world case studies.
aria-label is a letdown
One in three aria-label implementations have likely issues.
aria-label is very easy to incorrectly use, and it’s nothing new that aria-label can be considered a code smell (do read that article).
How navigation should work for keyboard users
The web is a network of pages that are linked together, with those links often grouped in a navigation. Here’s how keyboard users traverse navigation.
CSS
Carousels with CSS
From Chrome 135, you can use features from the CSS Overflow 5 specification that have been designed to create scroll and carousel experiences.
This post is an overview of many different scroll and carousel experiences made using these new features, and without JavaScript.
CSS Carousel Configurator
A builder-like experience to help visualize the capabilities of a CSS only Carousel.
Carousel Gallery
CSS Carousel Gallery site that showcases the capabilities and potentials of CSS Carousel specs.
There's not a single line of JavaScript in this gallery.
:in-range pseudo-class
Some input types, such as type="number" and type="date" allow you to set minimum and maximum values using the min and max attributes.
Setting the min and max values will help prevent users from selecting values outside of the specified range, but they can still manually enter any value.
Additionally, we can use :in-range to style an element, with the styles only applying if the value is within the specified range.
Tailwindflex - 2,100+ Free Tailwind CSS Examples
Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.
Revisiting CSS border-image
I’ve used border-image regularly. Yet, it remains one of the most underused CSS tools, and I can’t, for the life of me, figure out why. Is it possible that people steer clear of border-image because its syntax is awkward and unintuitive? Perhaps it’s because most explanations don’t solve the type of creative implementation problems that most people need to solve. Most likely, it’s both.
Matching drop shadows across CSS, Android, iOS, Figma, and Sketch
If you’ve ever tried to implement consistent shadows across multiple platforms and design tools, you may have noticed that they don’t look the same. Thankfully, it is possible to get them all to match.
Animated Accordions with Details Element & CSS
Learn how to create animated accordions using only HTML and modern CSS with the details element, interpolate-size, transition-behavior, and the :has() selector.
Reducing CSS complexity with the :is() pseudo-class
Last week, I finally had a reason to use the newish :is() CSS pseudo-class, and wow is it glorious.
Today, I want to show you how it can dramatically reduce selector complexity.
Where :is() really shines is when you have complex and repeated sets of nested selectors.
The <select> element can now be customized with CSS
From Chrome 135, web developers and designers can finally unite on an accessible, standardized and CSS styleable <select> element on the web. This has been many years in the making, many hours of engineering and collaborative specification work, and the result is an incredibly rich and powerful component that won't break in older browsers.
Animate to height: auto; (and other intrinsic sizing keywords) in CSS
Use the interpolate-size property or the calc-size() function to enable smooth transitions and animations from lengths to intrinsic sizing keywords and back.
Introducing `content-visibility: auto` - A Hidden Performance Gem
When dealing with large lists or complex DOM structures, performance optimization often feels like a complex puzzle. But sometimes, the simplest solutions are the most effective. Enter content-visibility: auto - a CSS property that can dramatically improve rendering performance with minimal effort.
content-visibility: auto tells the browser to skip rendering elements that are not currently visible in the viewport. It’s like having a virtual scroll implementation, but without the complexity of managing scroll positions or item heights manually.
Custom progress element using attr()
Using the new attr() function, we can customize a progress element based on the progression. We can, for example, have a different coloration for each range of values. A single-element implementation without JavaScript.
Cowardly Defaults and Courageous Overrides with Modern CSS
We don’t use utility classes as often as we used to, but they still come in handy on occasion.
One challenge when styling utilities is to provide more value than an inline style without sacrificing versatility.
Let’s make a more useful utility class without giving up any versatility.
JavaScript
Single Responsibility Principle in React: The Art of Component Focus
We’ve covered Dependency Inversion, Interface Segregation, Liskov Substitution, and Open-Closed. Now it’s time for the foundation of SOLID: the Single Responsibility Principle (SRP).
Real-world uses of TypeScript’s utility types
Sam Rose walks us through some real-world usage of TypeScript’s utility types in their day job’s open source codebase to help those new to the language get to grips with this key capability.
Utility types are types that modify other types. You can think of them as functions, but they operate on types instead of values. It’s mind bending at first — especially if you’re coming from languages that don’t have anything similar — but we’re going to walk through a load of examples to see how they work.
Detecting Browser Zoom Changes in JavaScript
Learn a clever approach towards detecting browser zoom changes by using the browser size and viewport size to help.
Drawing Sharp Lines on the Canvas
Ensure crisp and sharp lines by understanding the relationship between line position and line thickness/width.
Understanding various syntaxes to annotate a function's type in TypeScript
I often found myself second guessing while writing type annotations for TypeScript functions. To make it intuitive in future, I try to make sense of various syntaxes TypeScript provides in order to annotate functions.
I was able to boil it all down to the following:
- Either individually annotate the function parameters and its return value with their respective types; or
- Annotate the variable that holds a function with the function's type
Chrome Extension Boilerplate with React + Vite + Typescript
This boilerplate helps you create Chrome/Firefox extensions using React and Typescript. It improves the build speed and development experience by using Vite and Turborepo.
Fancy Components - Ready to use, fancy React components to make the web fun again. Free & Open Source
Fancy Components is a collection of fun and weird, ready-to-use components and microinteractions built (mainly) with:
- React
- TypeScript
- Tailwind CSS
- Motion (Formerly Framer Motion)
SSR Deep Dive for React Developers
Explore step-by-step how Server-Side Rendering (SSR), pre-rendering, hydration, and Static Site Generation (SSG) work in React, their costs, performance impact, benefits, and trade-offs.
Recording object snapshots by (ab)using JavaScript proxies
JavaScript proxies are insanely powerful, and I want to talk about how I (ab)use them to keep track of snapshots of an object within itself, as transparently as possible.
The State of Vue.js Report 2025 | Co-created with Vue & Nuxt Core Teams
Explore the fifth edition of the Vue.js report—exclusive developer data, real-world case studies, and unique insights. Your ultimate view on Vue.
Miscellaneous
Prompt Engineering Guide
Prompt engineering is a relatively new discipline for developing and optimizing prompts to efficiently use language models (LMs) for a wide variety of applications and research topics. Prompt engineering skills help to better understand the capabilities and limitations of large language models (LLMs).
Motivated by the high interest in developing with LLMs, we have created this new prompt engineering guide that contains all the latest papers, advanced prompting techniques, learning guides, model-specific prompting guides, lectures, references, new LLM capabilities, and tools related to prompt engineering.
A crash course in package management, Node, and Yarn v2
I've been writing some guides at my startup Nerve for newer engineers. My aim is to cover things you don't necessarily have to know to do your job, but which will probably come in handy at some point in your career.
This is a guide to package management, which I always found to be tricky and mysterious until I took the time to learn about it a little. At Nerve we use Typescript on the frontend and backend, so about half of this guide is Typescript-specific.
Polypane, The browser for ambitious web developers
A stand-alone browser and devtool with everything you need to build better responsive, accessible and performant web sites and web apps in less time.